Cocos Creator快速上手初体验

介绍整理Cocos基本功能
部分未讲请参考 Cocos官方文档http://docs.cocos.com/creator/manual/zh/
界面介绍请阅读 http://docs.cocos.com/creator/manual/zh/getting-started/basics/editor-overview.html
1.资源工作流程
1.1 图像资源（Texture）：每个图像资源导入后编辑器会自动在它下面创建同名的 SpriteFrame 资源。图集资源使用：

image.png

图集打包后由两个文件组成：.plist和.png（图片合集图片）打包工具建议（TexturePacker ）
1.2预制资源：在场景中编辑好节点后，直接将节点从层级管理器拖到资源管理器。编辑好画面后下拉即可。

image.png

2.场景工作流程
2.1节点：在 Cocos Creator 中，节点（Node）是承载组件的实体，我们通过将具有各种功能的组件（Component）挂载到节点上，来让节点具有各式各样的表现和功能。

image.png

在节点上你可以挂载Sprite，Button，脚本只需直接拖入即可（跟Unity3d差不多）
2.2 管理节点层级和显示顺序

image.png

即下面层级的节点将会覆盖在上面层级一点点盖上去~~~~
其余简单组件请阅读 http://docs.cocos.com/creator/manual/zh/render/
搭建场景其实挺简单de~
3.脚本资源
使用 cc.Class 声明类型
1.脚本动画资源（如何使用一个动画）

image.png

在节点上添加动画加制作好的动画拖进节点
具体参考：http://docs.cocos.com/creator/manual/zh/animation/
2.脚本中使用cc.vv 自己绑定
一开始我也不知道这是什么玩意，后来研究了下
我们可以在最初试的时候加载所需要的脚本将工具脚本打包提出直接调用。以下以全局音乐脚本控制介绍：
声音脚本

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,  //背景音乐
        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);
    },
    //播放背景音乐
    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);    
        }
    },
      //设置音效
    setSFXVolume:function(v){
        if(this.sfxVolume != v){
            cc.sys.localStorage.setItem("sfxVolume",v);
            this.sfxVolume = v;
        }
    },
     //设置背景音乐
    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();
    }
});

如何通过自己绑定cc.vv来全局调用呢~
打开cocos的第一个页面进行初始化


// 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();  //调用初始化脚本
    },
    
  
});

接下来看如何使用：


// Compatible with v1.5.0+
cc.Class({
    extends: cc.Component,

    properties: {

    },

    // use this for initialization
    onLoad: function () {
      cc.vv.audioMgr.playBGM("bg.mp3");  //播放背景音乐
      cc.vv.audioMgr.playSFX("button.mp3");//播放音效
       cc.vv.audioMgr.setSFXVolume(0);//设置声音 0开启1关闭
        cc.vv.audioMgr.setBGMVolume(0);
    
    },
    
  
});

3.如何使用脚本创建预制体（已一个发牌做讲解）
首现先制作一个卡牌的预制体

image.png

创建预制体脚本：

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) {

    // },
});

挂载到预制体上右边数组把牌加进去

接下来是发牌~

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];//手牌数组
          this.pokercard=[];//节点数组


         //对手牌数组进行发牌
        for (var j = 0; j < this.pokerArray.length; j++)
        {
           if(this.pokerArray[j] == 0x00)
            {
                continue;
            }
            cardIndex++;

            var x = 0;//x坐标

            x = -320 + 50 * j ;
            this.on_send_poker(j,this.pokerArray[j],cardIndex,x);//发送单张扑克
        }
    },

    //创建单个扑克牌
    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);//设置初始化坐标
        this.pokercard[id].setPosition(pos);
        
        //发牌移动到具体的位置
        var actionMoveTo = cc.moveTo(0.5,cc.p(x,0));
        //放大
        var actionScaleTo = cc.scaleTo(0.5, 1);
        //延时
        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   默认是调用这个action的本体Node，Sprite等等
            //data  传递的参数，多个参数可以用[data1, data2] 的Array方式组合
                data[0].setCardDataView(data[1]);
            },
             this, //通常绑定最外围的HelloWorldLayer 之类的， 可以方便调用， 比如为了removeChild
             [poker,data] //参数，任意格式
        );
        var scaleX2 = cc.scaleTo(0.2,0.8, 0.8);
        var seq = cc.sequence(delay,action,scaleX1,func,scaleX2);
        this.pokercard[id].runAction(seq);
    }

    
});

代码很简单
最后看下发牌及整体效果
https://github.com/balckban/niuniu-cocos-creator/blob/master/1.gif

最后编辑于：2017.12.23 11:46:34

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,602评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,442评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,878评论 0赞 344
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,306评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,330评论 5赞 373
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,071评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,382评论 3赞 400
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,006评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,512评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,965评论 2赞 325
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,094评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,732评论 4赞 323
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,283评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,286评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,512评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,536评论 2赞 354
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,828评论 2赞 345

Cocos Creator快速上手 初体验

推荐阅读更多精彩内容

Cocos Creator快速上手初体验