cocos creator基础-cocos动画、碰撞、绘图

概述cocos动画、碰撞、绘图 1、动画 层级关系： 1节点、2动画（Animation）、3动画剪辑（Animation Clip）、4属性轨道、5动画帧 a. 动画（Animation）是节点上的一个组件. b. 动画剪辑（Animation Clip）就是一份动画的声明数据，将它挂载到动画（Animation）上作为一个属性进行设置. c. 动画剪辑（Animation Clip）上可添加多个属

cocos动画、碰撞、绘图

1、动画

层级关系：
1节点、2动画（Animation）、3动画剪辑（Animation Clip）、4属性轨道、5动画帧
a. 动画（Animation）是节点上的一个组件.
b. 动画剪辑（Animation Clip）就是一份动画的声明数据，将它挂载到动画（Animation）上作为一个属性进行设置.
c. 动画剪辑（Animation Clip）上可添加多个属性轨道来控制不同属性.
d. 在一条属性轨道上创建多个动画帧（蓝色点），在这些动画帧上设置不同的属性值，实现从帧A渐变到帧B的过程（即动画）

属性:
　　包括基本属性和自定义的属性
　　　　基本属性：节点自带的基本属性，包括位置position、旋转rotation、缩放scale、锚点anchor、大小size、颜色color、透明度opacity、倾斜skew、节点的分组group.
　　　　自定义属性：根据动画所在节点上组件不同而增加不同的自定义属性，例如节点上有文字组件，则会增加自定义属性cc.Label.string、cc.Label.Fontsize、cc.Label.enabled.

序列帧动画：
　　常用的序列帧动画就是在节点上添加了sprite组件，然后自定义属性里就会有cc.Sprite.spriteframe属性，然后在spriteframe属性轨道上添加帧图片，实现帧动画.

this.anima = this.node.getComponent(cc.Animation);
this.anima.play("down");
this.anima.play("run");

获取动画
let downAnimaState = this.anima.getAnimationState("down");

修改轨迹曲线 1、时间曲线 2的 *** 作

 

动画的事件
1.在编辑器注册和触发事件onLastFrame
（1）选择第X帧，然后点击1位置按钮，然后双击2位置按钮

（2）在d出的编辑器界面，单击+号，添加事件和参数

 

2.代码注册事件

 1 let runState = this.anima.getAnimationState("run"); 2 // 这种方式只能支持动画系统内置的事件 3 runState.on("lastframe",this.onLastFrame,this); 4 // 传参数 5 runState.on("lastframe",this.onLastFrame.bind(this,‘hello‘,true),this); 6  7 // 这种方式可以自定义事件 8 // 动态创建 Animation Clip： 9 var animation = this.node.getComponent(cc.Animation);10 // frames 这是一个 SpriteFrame 的数组.11 var clip = cc.AnimationClip.createWithSpriteFrames(frames,17);12 clip.name = "anim_run";13 clip.warpMode = cc.WarpMode.Loop;14 15 // 添加帧事件16 clip.events.push({17     frame: 1,// 准确的时间，以秒为单位。这里表示将在动画播放到 1s 时触发事件18     func: "onLastFrame",// 回调函数名称19     params: [1,"hello"] // 回调参数20 });21 22 animation.addClip(clip);23 animation.play(‘anim_run‘);24 25 26 onLastFrame : function(str,num,bool){27     console.log("===========called on last frame",str,bool);28 }

 

2、碰撞（1.5版本以后被Box2D物理游戏引擎取代）
BoxCollIDer 矩形碰撞组件 不能修改形状，1个物体可以添加多个BoxCollIDer，组成复杂的碰撞体
CircleCollIDer 圆形碰撞组件
polyganCollIDer 可以修改形状、多边形

属性
world : {
　　aabb,
　　points,
}
world.aabb // 正好包围碰撞体的矩形框，不会旋转和缩放
aabb : {
　　preaabb,// 上一个位置的aabb
}

 1 // 用脚本控制碰撞 2 let manager = cc.director.getCollisionManager(); // 获取碰撞管理器 3 manager.enabled = true; 4 manager.enabledDeBUGDraw = true; // 画出碰撞形状 5  6 this.node.on(‘touchmove‘,function(e){ 7     this.node.position = this.node.parent.convertToNodeSpaceAR(e.getLocation()); 8 },this); 9 this.getComponent(‘cc.BoxCollIDer‘); // 或者this.getComponent(cc.BoxCollIDer)10 11 onCollisionEnter : function(other,self){12     console.log("=========enter");13 },14 onCollisionStay : function(other,self){15     console.log("=========Stay");16 },17 onCollisionExit : function(other,self){18     console.log("=========Exit");19 },

 

3、绘图
　　1.可以使用绘图系统ccc.raphael
　　2.使用绘图接口

 1 propotIEs : { 2     graphics : cc.Graphics // 开放接口的方式 3 } 4  5 let ctx = this.getComponent(cc.Graphics); 6  7 this.graphics.circle(0,50); // 现在的00是组件的左下角，如果想放到锚点，需要以下转化 8 let offset = cc.v2(this.node.wIDth * this.node.anchorX,this.node.height * this.node.anchorY); 9 this.graphics.circle(0 + offset.x,0 + offset.y,50);10 11 this.graphics.ellipse(100,100,200);12 this.graphics.moveto(-200,-200);13 this.graphics.lineto(200,200);14 this.graphics.fill();

总结

以上是内存溢出为你收集整理的cocos creator基础-cocos动画、碰撞、绘图全部内容，希望文章能够帮你解决cocos creator基础-cocos动画、碰撞、绘图所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。