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

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）在弹出的编辑器界面，单击+号，添加事件和参数

 

2.代码注册事件

let runState = this.anima.getAnimationState("run");
// 这种方式只能支持动画系统内置的事件
runState.on("lastframe", this.onLastFrame, this);
// 传参数
runState.on("lastframe", this.onLastFrame.bind(this, 'hello', 0, true), this);

// 这种方式可以自定义事件
// 动态创建 Animation Clip：
var animation = this.node.getComponent(cc.Animation);
// frames 这是一个 SpriteFrame 的数组.
var clip = cc.AnimationClip.createWithSpriteFrames(frames, 17);
clip.name = "anim_run";
clip.warpMode = cc.WarpMode.Loop;

// 添加帧事件
clip.events.push({
    frame: 1, // 准确的时间，以秒为单位。这里表示将在动画播放到 1s 时触发事件
    func: "onLastFrame", // 回调函数名称
    params: [1, "hello"] // 回调参数
});

animation.addClip(clip);
animation.play('anim_run');


onLastFrame : function(str, num, bool){
    console.log("===========called on last frame", str, num, bool);
}

 

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

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

// 用脚本控制碰撞
let manager = cc.director.getCollisionManager(); // 获取碰撞管理器
manager.enabled = true;
manager.enabledDebugDraw = true; // 画出碰撞形状

this.node.on('touchmove', function(e){
    this.node.position = this.node.parent.convertToNodeSpaceAR(e.getLocation());
}, this);
this.getComponent('cc.BoxCollider'); // 或者this.getComponent(cc.BoxCollider)

onCollisionEnter : function(other, self){
    console.log("=========enter");
},
onCollisionStay : function(other, self){
    console.log("=========Stay");
},
onCollisionExit : function(other, self){
    console.log("=========Exit");
},

 

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

propoties : {
    graphics : cc.Graphics // 开放接口的方式
}

let ctx = this.getComponent(cc.Graphics);

this.graphics.circle(0, 0, 50); // 现在的00是组件的左下角，如果想放到锚点，需要以下转化
let offset = cc.v2(this.node.width * this.node.anchorX, this.node.height * this.node.anchorY);
this.graphics.circle(0 + offset.x, 0 + offset.y, 50);

this.graphics.ellipse(100, 100, 100, 200);
this.graphics.moveTo(-200, -200);
this.graphics.lineTo(200, 200);
this.graphics.fill();