Cocos Creator:移动物体

本文介绍了Cocos Creator中利用cc.Node.EventType.MOUSE_MOVE事件实现物体的拖动,通过监听鼠标移动事件获取坐标偏移量更新节点位置。同时,探讨了cc.Class的基本概念,将其比喻为JavaScript中的类,并解释了如何在cc.Class中声明属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. cc.Node.EventType.MOUSE_MOVE

移动鼠标事件实现,返回鼠标坐标值相对前一个位置的偏移量:delta.x,delta.y。将节点的位置坐标x、y等于鼠标事件返回的坐标值delta.x,delta.y即可实现物体的拖动。



 
  1. cc.Class({

  2. extends: cc.Component,

  3.  
  4. properties: {

  5.  
  6. },

  7.  
  8. onLoad: function() {

  9.  
  10. this.node.on(cc.Node.EventType.TOUCH_MOVE,function(event){

  11. this.opacity = 100;

  12. var delta = event.touch.getDelta(); //getDelta: 获取当前光标与上一光标的偏移量

  13. this.x += delta.x; //因为是偏移量,所以这里用的是+

  14. this.y += delta.y;

  15. },this.node);

  16.  
  17. this.node.on(cc.Node.EventType.TOUCH_END, function(){

  18. this.opacity = 255; //松开鼠标的时候,恢复到透明度255

  19. }, this.node);

  20. },

  21.  
  22. update: function(dt){

  23.  
  24. },

  25.  
  26. });


2. 对cc.Class的浅薄认识

       cc.Class就像Java中的类,但是看JavaScript的书中说,没有类这个概念。不过这里理解为一个常用的类就可以了。


 
  1. 1. var Sprite = cc.Class({

  2. name: "sprite"

  3. });

  4. //调用CCClass类,传入原型对象

  5.  
  6. 2. var obj = new Sprite(); //new 一个对象-实例化

  7.  
  8. 3. //ctor声明构造函数的时候 联想到Java中的constructor

  9.  
  10. var Sprite = cc.Class({

  11. ctor : function (){

  12. cc.log(this instanceof Sprite); //true

  13. }

  14. });

  15.  
  16. 4. //实例方法

  17. var Sprite = cc.Class({

  18. print: function (){

  19. });

  20.  
  21. 5. //继承的方法和Java相似,Java是在类的声明上直接使用extends,而这里是在cc.Class内部继承父类的名称变量即可。

  22. //father

  23. var Shape = cc.Class();

  24. //son

  25. var Rect = cc.Class({

  26. extends: Shape

  27. });

  28.  
  29. 6. 继承之后会自动调用父类的构造函数_暂时还没有遇到Java中的静态_非静态是否调用父类的方法。

  30. var Shape = cc.Class({

  31. ctor: function () {

  32. cc.log("Shape"); // 实例化时,父构造函数会自动调用,

  33. }

  34. });

  35.  
  36. var Rect = cc.Class({

  37. extends: Shape

  38. });

  39.  
  40. var Square = cc.Class({

  41. extends: Rect,

  42. ctor: function () {

  43. cc.log("Square"); // 再调用子构造函数

  44. }

  45. });

  46.  
  47. var square = new Square();

  48.  
  49. 以上代码将依次输出 "Shape" 和 "Square"。

  50.  

声明属性的方法直接在cc.Class中的properties字段中即可,包括简单声明,完整声明。

简单声明就是键值对的描述


 
  1. properties:{

  2. height: 20,

  3. type: "actor",

  4. loaded: false,

  5. target: null,

  6. }

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值