Sprite進度條:
今天第一個要做的就是使用sprite組件中的Filled(填充模式)實現遊戲中經常要用到的進度條(其實非常簡單)，關於Sprite組件的使用在cocos官方的手冊裏其實已經介紹地很詳細，但我們實現進度條主要就是用到sprite組件的filled模式，所以在這裏我還是講解一下功能Filled(填充模式)的使用:
在Filled模式中Fill Type中有三種:橫向填充、縱向填充、扇形填充，Fill Start是指你填充這個圖片是從它的百分之多少開始,標準數值是0~1，Fill Range是指填充的百分比標準數值也是0~1；Fill Center是在開啓扇形填充時纔開啓,它是指這個扇形的中心點,舉個例子比如我使用橫向(HORIZONTAL),fill start是0(等於是這張圖0%位置開始),fill range爲0.5(等於填充50%):
就能看到這種效果,fill range爲0.7
如果fill range 爲1(填充100%)，但fill start爲0.3
它就只會從圖片的30%位置開始,ok,知道它的基本功能後就能做一個簡單的進度條了:
cc.Class({
extends: cc.Component,
properties: {
aciton_tion:5,
},
onLoad () {
this.sp = this.node.getComponent(cc.Sprite);
this.now_time = this.aciton_tion;
},
start () {
},
update (dt) {
this.now_time -= dt;
var person_time = 1-(this.now_time / this.aciton_tion);
console.log(person_time)
if(person_time >= 5){
person_time = 5;
}
this.sp.fillRange = person_time;
},
});
這裏我們設置進度條總進度爲5，我們算出進度的百分比後再賦給sprite組件的fillRange屬性就可以實現進度條啦，其他縱向和扇形也是一樣，只是扇形需要確定它的中心點然後繞着中心點來推進進度條。
物理引擎：
在我們cocos creter中嵌入有物理引擎，它將box2d作爲內部物理系統,這章要學習的就是cocos creater 中物理引擎的基本使用和如何實現物體間的碰撞檢測:
首先,在遊戲引擎中物理引擎默認是關閉的，所以我們得先在代碼中通過cc.director這個導演類找到物理管理器來開啓物理引擎世界：
cc.director.getPhysicsManager().enabled = true;
打開後，我們一般爲了方便調試會選擇通過打開物理的調試狀態:
var bit = cc.PhysicsManager.DrawBits;
cc.director.getPhysicsManager().debugDrawFlags = bit.e_e_jointBit | bit.e_shapeBit;
並通過聲明一個if_debug屬性來控制這個調試的開啓與關閉,物理世界打開後一個非常重要的就是有它的重力加速度，在物理引擎中提供了：cc.director.getPhysicsManager().gravity來控制:
cc.Class({
extends: cc.Component,
properties: {
if_debug:true,
gravity:cc.p(0,-320),
},
onLoad () {
cc.director.getPhysicsManager().enabled = true;
if(this.if_debug){
var bit = cc.PhysicsManager.DrawBits;
cc.director.getPhysicsManager().debugDrawFlags = bit.e_e_jointBit | bit.e_shapeBit;
}
else{
cc.director.getPhysicsManager().debugDrawFlags = 0;
}
cc.director.getPhysicsManager().gravity = this.gravity;
},
update (dt) {},
});
Ok，打開物理引擎開關後,我們就開始介紹物理最重要的兩個基本組件:物理剛體和物理碰撞器:
1.兩個物理基本組件
物理剛體：
在節點的添加組件中選擇物理組件->Rigid Body創建一個物理剛體:
在物理世界中，一個剛體組件就是一個物體，我們將剛體掛載到節點下面，如果當物理世界裏改變了剛體的位置後就會將剛體的位置同步到節點的位置，從而使這個節點就能實現物理世界中的各種效果，這裏我們先介紹下剛體組件的相關屬性，其實在剛體組件中已經介紹得比較詳細，在這裏我們只介紹常用的幾個:
EnabledContactListener :開啓碰撞監聽(在後面介紹碰撞檢測回用到)
Type（四種類型）:
1.cc.RigidBodyType.Static靜態剛體，零質量，零速度，即不會受到重力或速度影響，但是可以設置他的位置來進行移動。
2.cc.RigidBodyType.Dynamic動態剛體，有質量，可以設置速度，會受到重力影響。
3.cc.RigidBodyType.Kinematic運動剛體，零質量，可以設置速度，不會受到重力的影響，但是可以設置速度來進行移動。
4.cc.RigidBodyType.Animated動畫剛體，從 Kinematic 衍生的類型，主要用於剛體與動畫編輯結合使用。
Allow sleep:是否喚醒物體,如果勾選則在此物體停止運動後會讓物體進入睡眠狀態,這樣一般可以有效減少cpu的佔用率。
喚醒時:
睡眠後：
物體便進入了休眠狀態。
Gravity Scale:重力值,值越大再下降速度越塊。
Linear Damping:線性阻尼
Angular Damping:角速度阻尼
LinearVelocity: 剛體的線性速度;
AngularVelocity: 剛體的角速度;
FixedRotation: 是否固定不旋轉;
Awake: 是否立刻喚醒此剛體;
碰撞檢測器:
有了剛體後我們還不能進行物體之間的碰撞，爲了能產生碰撞我就需要爲每個剛體組件創造一個碰撞器，物理碰撞組件繼承自碰撞組件（另一種組件），編輯和設置 物理碰撞組件 的方法和 編輯碰撞組件 是基本一致的。選擇在物理組->collider中有多邊形、圓形、矩形和線形等，這裏我們以矩形爲例:
Editing:編輯此組件(可以改變組件的大小和下面的Size一樣)
Tag:標籤(同一節點下掛載多個碰撞器組件時可以通過此來區別)
Density：密度
Sensor：指明碰撞體是否爲傳感器類型，傳感器類型的碰撞體會產生碰撞回調，但是不會發生物理碰撞效果。
Density：碰撞體的密度，用於剛體的質量計算
friction ：碰撞體摩擦力，碰撞體接觸時的運動會受到摩擦力影響
restitution：碰撞體的彈性係數，指明碰撞體碰撞時是否會受到彈力影響
瞭解這些基本的組件操作後我們就能實現各種物體之間的碰撞了(大家可以自己改變這些參數玩玩實現各種不同效果)。
2.物理碰撞檢測
在遊戲中，物理實現碰撞後可能需要發送一些回調函數，我們就可以通過剛體中EnabledContactListener這個屬性來監聽，碰撞檢測步驟:1.配好碰撞分組
這裏我們將白色箱子放到physics1分組，紅色地面放到physics2分組，這樣它們就能進行碰撞(當然也能放入同一分組)
2.打開碰撞監聽
3.掛載包含碰撞回調函數的組件:
這裏我們創建一個cresh.js組件掛載到anim下,碰撞組件的回調有四個函數:
// 碰撞開始
onBeginContact: function ( contact, selfCollider, otherCollider) { },
// 碰撞持續
onPreSolve: function(contact, selfCollider, otherCollider) { },
// 計算完本次碰撞持續後，調用這個
onPostSolve: function (contact, selfCollider, otherCollider) { },
// 碰撞結束
onEndContact: function(contact, selfCollider, otherCollider) { },
三個參數:
contact 是碰撞對象,本次碰撞的信息
selfCollider: 是自己的碰撞器組件
otherCollider: 碰撞到的碰撞器組件;
anim和anim2在發生碰撞後EnabledContactListener從這個節點的組件一個個尋找直到找到包含物理碰撞監聽的函數的組件(.js) :
這裏爲了方便顯示讓它產生了回彈效果,運行後:
通過這些物理引擎的基本操作後我們就能做很多事情了，包括常見的人物行走(超級馬里奧)、弓箭彈射等等