介紹整理Cocos基本功能
部分未講請(qǐng)參考 Cocos官方文檔http://docs.cocos.com/creator/manual/zh/
界面介紹請(qǐng)閱讀 http://docs.cocos.com/creator/manual/zh/getting-started/basics/editor-overview.html
1.資源工作流程
1.1 圖像資源（Texture）：每個(gè)圖像資源導(dǎo)入后編輯器會(huì)自動(dòng)在它下面創(chuàng)建同名的 SpriteFrame 資源窃蹋。圖集資源使用：
image.png
圖集打包后由兩個(gè)文件組成：.plist和.png（圖片合集圖片） 打包工具建議（TexturePacker ）
1.2預(yù)制資源：在場(chǎng)景中編輯好節(jié)點(diǎn)后劲阎，直接將節(jié)點(diǎn)從 層級(jí)管理器 拖到 資源管理器创泄。 編輯好畫面后下拉即可。
image.png
2.場(chǎng)景工作流程
2.1節(jié)點(diǎn)：在 Cocos Creator 中露筒，節(jié)點(diǎn)（Node）是承載組件的實(shí)體报破，我們通過(guò)將具有各種功能的組件（Component）掛載到節(jié)點(diǎn)上淘捡，來(lái)讓節(jié)點(diǎn)具有各式各樣的表現(xiàn)和功能眷篇。
image.png
在節(jié)點(diǎn)上你可以掛載Sprite，Button臊岸，腳本 只需直接拖入即可（跟Unity3d差不多）
2.2 管理節(jié)點(diǎn)層級(jí)和顯示順序
image.png
即下面層級(jí)的節(jié)點(diǎn)將會(huì)覆蓋在上面層級(jí) 一點(diǎn)點(diǎn)蓋上去~~~~
其余簡(jiǎn)單組件請(qǐng)閱讀 http://docs.cocos.com/creator/manual/zh/render/
搭建場(chǎng)景其實(shí)挺簡(jiǎn)單de~
3.腳本資源
使用 cc.Class 聲明類型
1.腳本動(dòng)畫資源（如何使用一個(gè)動(dòng)畫）
image.png
image.png
在節(jié)點(diǎn)上 添加動(dòng)畫 加制作好的動(dòng)畫拖進(jìn)節(jié)點(diǎn)
具體參考：http://docs.cocos.com/creator/manual/zh/animation/
2.腳本中使用cc.vv 自己綁定
一開(kāi)始我也不知道這是什么玩意橙数，后來(lái)研究了下
我們可以在最初試的時(shí)候加載所需要的腳本 將工具腳本打包提出 直接調(diào)用。以下以全局音樂(lè)腳本控制介紹：
聲音腳本
cc.Class({
extends: cc.Component,
properties: {
// foo: {
// default: null, // The default value will be used only when the component attaching
// to a node for the first time
// url: cc.Texture2D, // optional, default is typeof default
// serializable: true, // optional, default is true
// visible: true, // optional, default is true
// displayName: 'Foo', // optional
// readonly: false, // optional, default is false
// },
// ...
bgmVolume:1.0, //背景音樂(lè)
sfxVolume:1.0, //音效
bgmAudioID:-1,
},
// use this for initialization
init: function () {
var t = cc.sys.localStorage.getItem("bgmVolume");
if(t != null){
this.bgmVolume = parseFloat(t);
}
var t = cc.sys.localStorage.getItem("sfxVolume");
if(t != null){
this.sfxVolume = parseFloat(t);
}
cc.game.on(cc.game.EVENT_HIDE, function () {
console.log("cc.audioEngine.pauseAll");
cc.audioEngine.pauseAll();
});
cc.game.on(cc.game.EVENT_SHOW, function () {
console.log("cc.audioEngine.resumeAll");
cc.audioEngine.resumeAll();
});
},
// called every frame, uncomment this function to activate update callback
// update: function (dt) {
// },
getUrl:function(url){
return cc.url.raw("resources/sounds/" + url);
},
//播放背景音樂(lè)
playBGM(url){
var audioUrl = this.getUrl(url);
console.log(audioUrl);
if(this.bgmAudioID >= 0){
cc.audioEngine.stop(this.bgmAudioID);
}
this.bgmAudioID = cc.audioEngine.play(audioUrl,true,this.bgmVolume);
},
//播放音效
playSFX(url){
var audioUrl = this.getUrl(url);
if(this.sfxVolume > 0){
var audioId = cc.audioEngine.play(audioUrl,false,this.sfxVolume);
}
},
//設(shè)置音效
setSFXVolume:function(v){
if(this.sfxVolume != v){
cc.sys.localStorage.setItem("sfxVolume",v);
this.sfxVolume = v;
}
},
//設(shè)置背景音樂(lè)
setBGMVolume:function(v,force){
if(this.bgmAudioID >= 0){
if(v > 0){
cc.audioEngine.resume(this.bgmAudioID);
}
else{
cc.audioEngine.pause(this.bgmAudioID);
}
//cc.audioEngine.setVolume(this.bgmAudioID,this.bgmVolume);
}
if(this.bgmVolume != v || force){
cc.sys.localStorage.setItem("bgmVolume",v);
this.bgmVolume = v;
cc.audioEngine.setVolume(this.bgmAudioID,v);
}
},
pauseAll:function(){
cc.audioEngine.pauseAll();
},
resumeAll:function(){
cc.audioEngine.resumeAll();
}
});
如何通過(guò)自己綁定cc.vv來(lái)全局調(diào)用呢~
打開(kāi)cocos的第一個(gè)頁(yè)面 進(jìn)行初始化
// Compatible with v1.5.0+
function initMgr(){
cc.vv = {}; //定義cc.vv
//初始化聲音腳本
var AudioMgr = require("AudioMgr");
cc.vv.audioMgr = new AudioMgr();
cc.vv.audioMgr.init();
}
var waiting=require("WaitingConnect")
cc.Class({
extends: cc.Component,
properties: {
},
// use this for initialization
onLoad: function () {
initMgr(); //調(diào)用初始化腳本
},
});
接下來(lái)看如何使用：
// Compatible with v1.5.0+
cc.Class({
extends: cc.Component,
properties: {
},
// use this for initialization
onLoad: function () {
cc.vv.audioMgr.playBGM("bg.mp3"); //播放背景音樂(lè)
cc.vv.audioMgr.playSFX("button.mp3");//播放音效
cc.vv.audioMgr.setSFXVolume(0);//設(shè)置聲音 0開(kāi)啟1關(guān)閉
cc.vv.audioMgr.setBGMVolume(0);
},
});
3.如何使用腳本創(chuàng)建預(yù)制體（已一個(gè)發(fā)牌做講解）
首現(xiàn)先制作一個(gè)卡牌的預(yù)制體
image.png
創(chuàng)建預(yù)制體腳本：
cc.Class({
extends: cc.Component,
properties: {
// foo: {
// default: null, // The default value will be used only when the component attaching
// to a node for the first time
// url: cc.Texture2D, // optional, default is typeof default
// serializable: true, // optional, default is true
// visible: true, // optional, default is true
// displayName: 'Foo', // optional
// readonly: false, // optional, default is false
// },
// ...
spriteCard:{
default:[],
type:cc.SpriteFrame,
},
},
// use this for initialization
onLoad: function () {
this.sprite = this.node.getComponent(cc.Sprite);
this.cardid = 0;
this.m_cbCardListData = new Array();
this.m_cbCardListData=[
0x01,0x02,0x03
];
},
setCardDataView:function(data){
cc.log(">>>>>>>this><<<<"+data);
for(var i=0;i<this.m_cbCardListData.length;i++){
if(this.m_cbCardListData[i]==data){
this.cardid = i;
}
}
this.sprite.spriteFrame = this.spriteCard[this.cardid];
},
// called every frame, uncomment this function to activate update callback
// update: function (dt) {
// },
});
掛載到預(yù)制體上 右邊數(shù)組把牌加進(jìn)去
接下來(lái)是發(fā)牌~
cc.Class({
extends: cc.Component,
properties: {
pokercard_prefab:{
default:null,
type:cc.Prefab
},
},
// use this for initialization
onLoad: function () {
var cardIndex = 0;
this.pokerArray = [0x00,0x01,0x02,0x03,0x02,0x03,0x02,0x03,0x02,0x03,0x02,0x03,0x02,0x03];//手牌數(shù)組
this.pokercard=[];//節(jié)點(diǎn)數(shù)組
//對(duì)手牌數(shù)組進(jìn)行發(fā)牌
for (var j = 0; j < this.pokerArray.length; j++)
{
if(this.pokerArray[j] == 0x00)
{
continue;
}
cardIndex++;
var x = 0;//x坐標(biāo)
x = -320 + 50 * j ;
this.on_send_poker(j,this.pokerArray[j],cardIndex,x);//發(fā)送單張撲克
}
},
//創(chuàng)建單個(gè)撲克牌
on_send_poker:function(id,data,times,x){
this.pokercard[id] = cc.instantiate(this.pokercard_prefab);
this.node.addChild(this.pokercard[id]);
this.pokercard[id].setScale(0.6);
var poker = this.pokercard[id].getComponent('poker');//得到提示腳本
poker.setCardDataView(0x00);//0x00
var pos = cc.v2(0,250);//設(shè)置初始化坐標(biāo)
this.pokercard[id].setPosition(pos);
//發(fā)牌移動(dòng)到具體的位置
var actionMoveTo = cc.moveTo(0.5,cc.p(x,0));
//放大
var actionScaleTo = cc.scaleTo(0.5, 1);
//延時(shí)
var delay = cc.delayTime(times * 0.1);
var actionBy = cc.rotateBy(0.1, 180);
var rep = cc.repeat(actionBy, 2);
var action = cc.spawn(actionMoveTo, actionScaleTo,rep);
// //縮小 換牌 放大
var poker = this.pokercard[id].getComponent('poker');//得到提示腳本
var scaleX1 = cc.scaleTo(0.2,0, 1);
var func =cc.callFunc(function(target, data) {
//target 默認(rèn)是調(diào)用這個(gè)action的本體Node帅戒，Sprite等等
//data 傳遞的參數(shù)灯帮，多個(gè)參數(shù)可以用[data1, data2] 的Array方式組合
data[0].setCardDataView(data[1]);
},
this, //通常綁定最外圍的HelloWorldLayer 之類的， 可以方便調(diào)用逻住， 比如為了removeChild
[poker,data] //參數(shù)钟哥，任意格式
);
var scaleX2 = cc.scaleTo(0.2,0.8, 0.8);
var seq = cc.sequence(delay,action,scaleX1,func,scaleX2);
this.pokercard[id].runAction(seq);
}
});
代碼很簡(jiǎn)單
最后看下發(fā)牌及整體效果
https://github.com/balckban/niuniu-cocos-creator/blob/master/1.gif
