Kaboom-drag
最后更新于
这有帮助吗?
最后更新于
这有帮助吗?
范例为
同样机制的另一个游戏是来自作者tga的 情感表现力很强,我很喜欢
创建一个let变量[1] 来存放鼠标点击拖拽的对象
我们可以先看下面的代码部分,这部分的代码初始化了整个场景
然后我们再来回到上方的,这个为每一个创建的obj所创建的方法 drag(),这个方法调用的时候将
先看Update 每帧会判断,上面那个被创建的变量curDraggin是不是自己,如果是的话就就持续修改自己的位置 = mousePos() .sub(offset);
在创建这个obj的时候,把以下方法添加进点击事件
如果此刻有其他obj被点击(curDraggin不为null),那么直接返回
否则玩家就是选中的此obj,计算出与鼠标之间的offset,然后调用readd来让这个图形显示在最上方
然后添加方法到松开鼠标的事件:
鼠标松开事件调用方法
obj. clicks(()=>{}) register an onClick callback obj.clicks 是注册方法到obj,当其被点击时候调用。obj.clicks 是 area() component 带的函数,不过如果你给了一个sprite() 或者 rect() 或者 text() 这些带渲染功能的component 他们会自动计算区域并加上一个 area()
Readd(): remove and add froggy to the scene without triggering events tied to "add" or "destroy", so it'll be drawn on the top of the layer it belongs to 方法readd是重新添加使其出现在屏幕上方,有摘出来的感觉
上方的的drag方法的使用会比较复杂一些
drag() 函数是在定义一个component,在kaboom里一个component就是一个函数,返回一个对象里面一些特殊生命周期函数,如add,update,挂在这里的add() 跟那个添加全局add()不一样,这里的是一个事件,有点类似keyDown(),当这个component的宿主obj被成功add()到场景后,这个component的add()函数会被执行(有点绕)
一个component可以看作一个单位的数据+行为,比如说sprite() component就只负责绘制图像,pos() component就只负责管理坐标,一个game object由一串component组成,所以add() 函数接受一个数组作为参数,这里的drag() 就是定义了一个新的component,只负责关于拖拽相关的行为和数据(来自@tga的帮助!)
其实这部分tga传递的是一个组件化的思想,其实在Unity的Component中就有很多的使用,而在js里面,这个component是需要把方法返回出来而不是直接贴上去写在monobehaviour里面的start()和update()就可以的
参考:
*javaScript ES6 添加了两个关键字:
let 变量是增加的块级作用域
const 声明一个只读的常量,一旦声明,常量的值就不能改变
*条件(三元)运算符是 JavaScript 仅有的使用三个操作数的运算符。一个条件后面会跟一个问号(?),如果条件为 ,则问号后面的表达式A将会执行;表达式A后面跟着一个冒号(:),如果条件为 ,则冒号后面的表达式B将会执行。本运算符经常作为 if
语句的简捷形式来使用。