Cocos Creator快速上手 初體驗(yàn)

介紹整理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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 科普 Cocos Creator是觸控最新一代游戲工具鏈的名稱。如果不太清楚的，可以先看一些新聞。 新編輯器Coc...
    麒麟子閱讀 5,701評(píng)論 5贊 13
  • 前言 盡管知乎上對(duì)Cocos2dx成見(jiàn)很大，但是徘徊于糾結(jié)用什么游戲引擎不如都試試。況且這個(gè)軟件是國(guó)人開(kāi)發(fā)的，學(xué)習(xí)...
    linanwx閱讀 15,031評(píng)論 0贊 5
  • 學(xué)了cocos creator也將近一月了，對(duì)于用creator來(lái)做一個(gè)游戲的客戶端還是有了點(diǎn)心得體會(huì)。最近嘗試寫...
    樊開(kāi)囧閱讀 8,957評(píng)論 5贊 22
  • 有點(diǎn)懶得把圖片傳上來(lái)了，請(qǐng)移步這里看 Cocos官方論壇－wiki CocoaChina論壇帖子 上面兩個(gè)是一樣的...
    椒鹽老蟶閱讀 5,530評(píng)論 1贊 6
  • 1.代碼執(zhí)行過(guò)程中，如果程序崩潰會(huì)出現(xiàn)重新連接的情況，這時(shí)有可能會(huì)中斷模擬操作（因代碼而異）。 2.如果需要開(kāi)啟的...
    我就是非主流閱讀 761評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容