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();