CocosCreator教程（入門篇）【轉】

目錄

• 一、專案結構
• 二、資源分類
  • 1、場景（scene）
  • 2、貼圖（texture）
  • 3、預制（prefab）
  • 4、圖集（atlas）
  • 5、自動圖集（auto-atlas）
  • 6、藝術數字（label-atlas）
  • 7、字體（font）
  • 8、粒子（particle）
  • 9、聲音（audio）
  • 10、骨骼影片（spine / dragonBones）
  • 11、瓦片圖（tiledMap）
  • 12、文本（text）
  • 13、腳本（script）
  • 14、json
• 三、資源小知識點
  • 1、跨專案匯入匯出資源
  • 2、影像資源自動剪裁
• 四、場景小知識點
  • 1、場景中的元素，即是節點，可內嵌組件，
  • 2、坐標系
  • 3、錨點
• 五、子系統重點
  • 1、渲染系統
  • 2、UI系統
  • 3、影片系統
  • 4、物理系統
  • 5、音頻系統
• 六、腳本開發
  • 1、使用 cc.Class 宣告型別
  • 2、訪問節點和組件
  • 3、常用節點和組件介面
  • 4、生命周期
  • 5、創建和銷毀節點
  • 6、加載和切換場景
  • 7、獲取和加載資源
  • 8、監聽和發射事件
  • 9、節點系統事件
  • 10、全域系統事件
  • 11、動作系統（變換系統）
  • 12、計時器
  • 13、腳本執行順序
  • 14、標準網路介面
  • 15、物件池
• 七、發布游戲

系列教程
CocosCreator教程（初識篇）
CocosCreator教程（編輯器篇）

一、專案結構

ProjectName（新建專案）
├──assets
├──library
├──local
├──packages
├──settings
├──temp
└──project.json

PS：.meta檔案——記錄某資源在專案中的唯一標識，以及其配置資訊，只有在編輯器中對資源做修改，.meta檔案才會實時變化，因此，不要在編輯器外，對資源的內容進行操作，

二、資源分類

1、場景（scene）

自動釋放資源：切換場景后，上一個場景中的資源，從記憶體中釋放，
延遲加載資源：意味著不用等待所有資源加載完畢，才顯示場景，（快速切換場景，資源陸續在畫面顯示）

2、貼圖（texture）

普通圖，子層為一張spriteFrame，

3、預制（prefab）

創建方式：拖拽場景節點，到資源管理器，

4、圖集（atlas）

精靈圖，子層為多張spriteFrame，（精靈圖合成軟體：TexturePacker、Zwoptex）

5、自動圖集（auto-atlas）

打包時，將所在目錄中的所有碎圖，合成為圖集，

6、藝術數字（label-atlas）

數字為內容的圖集，

7、字體（font）

動態字體：.ttf
位圖字體：.fnt + .png（存在于同一目錄）

8、粒子（particle）

小型影片

9、聲音（audio）

模式：web audio、dom audio

10、骨骼影片（spine / dragonBones）

11、瓦片圖（tiledMap）

12、文本（text）

13、腳本（script）

14、json

三、資源小知識點

1、跨專案匯入匯出資源

操作流程：
（1）匯出：檔案 => 資源匯出，選擇 .fire場景檔案，輸出assets目錄的 .zip壓縮包，
（2）匯入：檔案 => 資源匯入，選擇壓縮包源路徑、解壓路徑，輸出assets目錄內容，

2、影像資源自動剪裁

基于size mode，盡量去除spriteFrame無像素的部分，減小圖片尺寸，

四、場景小知識點

1、場景中的元素，即是節點，可內嵌組件，

2、坐標系

3、錨點

作用：用于變換、子節點定位基準，

五、子系統重點

1、渲染系統

對攝像機、渲染組件的了解，

2、UI系統

對widget、layout等UI組件的了解，

3、影片系統

（1）創建影片的基本流程
（2）時間曲線（雙擊影片線，進入編輯視窗）
（3）事件管理（雙擊游標、加減按鈕控制引數個數）
（4）腳本控制

4、物理系統

碰撞組件（普通碰撞）
（1）editing——是否為編輯模式
（2）regenerate points——計算圖形邊界，自定生成控制點，數值為控制點的生成密度 / 準確度
（3）ctrl + 點擊——洗掉控制點
（4）組件型別：矩形、圓形、多邊形
（5）設定碰撞組（專案 => 專案設定 => 分組設定）：
制定分組 => 匹配分組 => 碰撞組件所在節點上，設定所屬分組
（6）腳本控制

Box2D物理引擎（高級碰撞）

5、音頻系統

（1）audioSource組件
（2）腳本控制

六、腳本開發

1、使用 cc.Class 宣告型別

（1）定義 CCClass

var Sprite = cc.Class({
    //...
});

（2）實體化

var obj = new Sprite();

（3）判斷型別

cc.log(obj instanceof Sprite);       //使用原生JS的instanceof 

（4）建構式（ctor）

var Sprite = cc.Class({
    //使用ctor宣告建構式
    ctor: function () {
        cc.log(this instanceof Sprite);
    }
});

（5）實體方法

var Sprite = cc.Class({
    // 宣告一個名叫 "print" 的實體方法
    print: function () { }
});

（6）繼承（extends）

// 父類
var Shape = cc.Class();
// 子類
var Rect = cc.Class({
    //使用 extends 實作繼承
    extends: Shape
});

（7）父建構式

var Shape = cc.Class({
    ctor: function () {
        cc.log("Shape");    // 實體化時，父建構式會自動呼叫，
    }
});
 
var Rect = cc.Class({
    extends: Shape
});
 
var Square = cc.Class({
    extends: Rect,
    ctor: function () {
        cc.log("Square");   // 再呼叫子建構式
    }
});
 
var square = new Square();

（8）完整宣告屬性

//簡單型別宣告
properties: {
    score: {
        //這幾個引數分別指定了 score 的默認值為 0，在 屬性檢查器 里，其屬性名將顯示為：“Score (player)”，并且當滑鼠移到引數上時，顯示對應的 Tooltip，
        default: 0,
        displayName: "Score (player)",
        tooltip: "The score of player",
    }
}
 
//陣列宣告
properties: {
    names: {
        default: [],
        type: [cc.String]   // 用 type 指定陣列的每個元素都是字串型別
    },
 
    enemies: {
        default: [],
        type: [cc.Node]     // type 同樣寫成陣列，提高代碼可讀性
    },
}
 
//get/set 宣告
properties: {
    width: {
        get: function () {
            return this._width;
        },
        set: function (value) {
            this._width = value;
        }
    }
}

properties常用引數

2、訪問節點和組件

（1）獲得組件所在的節點

this.node

（2）獲得其它組件

this.getComponent(組件名)

（3）獲得其它節點及其組件

// Player.js
cc.Class({
    extends: cc.Component,
    properties: {
        player: {
            default: null,
            type: cc.Node
        }
    }
});
 
//如果你將屬性的 type 宣告為 Player 組件，當你拖動節點 "Player Node" 到 屬性檢查器，player 屬性就會被設定為這個節點里面的 Player 組件
// Cannon.js
var Player = require("Player");
cc.Class({
    extends: cc.Component,
    properties: {
        // 宣告 player 屬性，這次直接是組件型別
        player: {
            default: null,
            type: Player
        }
    }
});
 
//查找子節點
//回傳子節點陣列
this.node.children
//回傳對應的子節點
this.node.getChildByName(子節點名);
//查找后代節點
cc.find(子節點/.../后代節點, this.node);
//全域查找節點
cc.find(場景/節點/節點/...);

（4）訪問已有變數里的值（通過模塊訪問

//專門開設一個中介模塊，匯出介面；在其他模塊進行節點、組件、屬性的操作
// Global.js
module.exports = {
    backNode: null,
    backLabel: null,
};
 
// Back.js
var Global = require("Global");
cc.Class({
    extends: cc.Component,
    onl oad: function () {
        Global.backNode = this.node;
        Global.backLabel = this.getComponent(cc.Label);
    }
});
 
// AnyScript.js
var Global = require("Global");
cc.Class({
    extends: cc.Component,
    start: function () {
        var text = "Back";
        Global.backLabel.string = text;
    }
});

3、常用節點和組件介面

（1）節點狀態和層級操作

//激活/關閉節點
this.node.active = true;
this.node.active = false;
 
//更改節點的父節點
this.node.parent = parentNode;
 
//索引節點的子節點
//回傳子節點陣列
this.node.children
//回傳子節點數量
this.node.childrenCount

（2）更改節點的變換（位置、旋轉、縮放、尺寸）

//更改節點位置
//分別對 x 軸和 y 軸坐標賦值
this.node.x = 100;
this.node.y = 50;
//使用setPosition方法
this.node.setPosition(100, 50);
this.node.setPosition(cc.v2(100, 50));
//設定position變數
this.node.position = cc.v2(100, 50);
 
//更改節點旋轉
this.node.rotation = 90;
this.node.setRotation(90);
 
//更改節點縮放
this.node.scaleX = 2;
this.node.scaleY = 2;
this.node.setScale(2);
this.node.setScale(2, 2);
 
//更改節點尺寸
this.node.setContentSize(100, 100);
this.node.setContentSize(cc.size(100, 100));
this.node.width = 100;
this.node.height = 100;
 
//更改節點錨點位置
this.node.anchorX = 1;
this.node.anchorY = 0;
this.node.setAnchorPoint(1, 0);

（3）顏色和不透明度

//設定顏色
mySprite.node.color = cc.Color.RED;
//設定不透明度
mySprite.node.opacity = 128;

4）常用組件介面
cc.Component 是所有組件的基類，任何組件都包括如下的常見介面：

4、生命周期

5、創建和銷毀節點

（1）創建新節點

cc.Class({
  extends: cc.Component,
  properties: {
    sprite: {
      default: null,
      type: cc.SpriteFrame,
    },
  },
  start: function () {
    //動態創建節點，并將它加入到場景中
    var node = new cc.Node('Sprite');
    var sp = node.addComponent(cc.Sprite);
    sp.spriteFrame = this.sprite;
    node.parent = this.node;
  }
});

（2）克隆已有節點

//
cc.Class({
  extends: cc.Component,
  properties: {
    target: {
      default: null,
      type: cc.Node,
    },
  },
  start: function () {
    //克隆場景中的已有節點
    var scene = cc.director.getScene();
    var node = cc.instantiate(this.target);
    node.parent = scene;
    node.setPosition(0, 0);
  }
});

（3）創建預制節點

//
cc.Class({
  extends: cc.Component,
  properties: {
    target: {
      default: null,
      type: cc.Prefab,    //預制
    },
  },
  start: function () {
    var scene = cc.director.getScene();
    var node = cc.instantiate(this.target);
    node.parent = scene;
    node.setPosition(0, 0);
  }
});

（4）銷毀節點

//
cc.Class({
  extends: cc.Component,
  properties: {
    target: cc.Node,
  },
  start: function () {
    // 5 秒后銷毀目標節點
    //銷毀節點并不會立刻被移除，而是在當前幀邏輯更新結束后，統一執行
    setTimeout(function () {
      this.target.destroy();
    }.bind(this), 5000);
  },
  update: function (dt) {
    //判斷當前節點是否已經被銷毀
    if (cc.isValid(this.target)) {
      this.target.rotation += dt * 10.0;
    }
  }
});

PS：不要使用removeFromParent去銷毀節點，
原因：呼叫一個節點的 removeFromParent 后，它不一定就能完全從記憶體中釋放，因為有可能由于一些邏輯上的問題，導致程式中仍然參考到了這個物件，

6、加載和切換場景

（1）加載和切換

//從當前場景，切換到MyScene場景
cc.director.loadScene("MyScene");

（2）通過常駐節點，進行場景資源管理和引數傳遞

//常駐節點：不隨場景切換，而自動銷毀，為所有場景提供持久性資訊
//設定常駐節點
cc.game.addPersistRootNode(myNode);
//取消常駐節點，還原為一般場景節點
cc.game.removePersistRootNode(myNode);

（3）場景加載回呼

//fn：加載MyScene場景時觸發
cc.director.loadScene("MyScene", fn);

（4）預加載場景

//后臺預加載場景
cc.director.preloadScene("MyScene", fn);
//有需要時，手動加載該場景
cc.director.loadScene("MyScene", fn);

7、獲取和加載資源

（1）資源屬性的宣告

// NewScript.js
cc.Class({
    extends: cc.Component,
    properties: {
        //所有繼承自 cc.Asset 的型別都統稱資源，如 cc.Texture2D, cc.SpriteFrame, cc.AnimationClip, cc.Prefab 等
        texture: {
            default: null,
            type: cc.Texture2D
        },
        spriteFrame: {
            default: null,
            type: cc.SpriteFrame
        }
    }
});

（2）靜態加載（在屬性檢查器里設定資源）

// NewScript.js
onLoad: function () {
    //拖拽資源管理器的資源，到屬性檢查器的腳本組件中，即可在腳本里拿到設定好的資源
    var spriteFrame = this.spriteFrame;
    var texture = this.texture;
    spriteFrame.setTexture(texture);
}

（3）動態加載

//動態加載的資源，需要存放于assets的子目錄resources中
 
//加載單個資源
//cc.loader.loadRes(resources的相對路徑, 型別(可選), 回呼函式)
//加載Prefab資源
cc.loader.loadRes("test assets/prefab", function (err, prefab) {
    var newNode = cc.instantiate(prefab);
    cc.director.getScene().addChild(newNode);
});
//加載SpriteFrame
var self = this;
cc.loader.loadRes("test assets/image", cc.SpriteFrame, function (err, spriteFrame) {
    self.node.getComponent(cc.Sprite).spriteFrame = spriteFrame;
});
 
//批量加載資源
//cc.loader.loadResDir(resources的相對路徑, 型別(可選), 回呼函式)
//加載test assets目錄下所有資源
cc.loader.loadResDir("test assets", function (err, assets) {
    // ...
});
//加載test assets目錄下所有SpriteFrame，并且獲取它們的路徑
cc.loader.loadResDir("test assets", cc.SpriteFrame, function (err, assets, urls) {
    // ...
});
 
//資源淺釋放
//cc.loader.releaseRes(resources的相對路徑, 型別(可選))
cc.loader.releaseRes("test assets/image", cc.SpriteFrame);
cc.loader.releaseRes("test assets/anim");
//cc.loader.releaseAsset(組件名)
cc.loader.releaseAsset(spriteFrame);
 
// 資源深釋放，釋放一個資源以及所有它依賴的資源
var deps = cc.loader.getDependsRecursively('prefabs/sample');

（4）加載遠程資源和設備資源

//加載遠程資源
//遠程 url 帶圖片后綴名
var remoteUrl = "http://unknown.org/someres.png";
cc.loader.load(remoteUrl, function (err, texture) {
    //...
});
//遠程 url 不帶圖片后綴名，此時必須指定遠程圖片檔案的型別
remoteUrl = "http://unknown.org/emoji?id=124982374";
cc.loader.load({url: remoteUrl, type: 'png'}, function () {
    //...
});
 
//加載設備資源
//用絕對路徑加載設備存盤內的資源，比如相冊
var absolutePath = "/dara/data/some/path/to/image.png"
cc.loader.load(absolutePath, function () {
    //...
});

加載限制：
1、原生平臺遠程加載不支持圖片檔案以外型別的資源，
2、這種加載方式只支持圖片、聲音、文本等原生資源型別，不支持SpriteFrame、SpriteAtlas、Tilemap等資源的直接加載和決議，（需要后續版本中的AssetBundle支持）
3、Web端的遠程加載受到瀏覽器的CORS跨域策略限制，如果對方服務器禁止跨域訪問，那么會加載失敗，而且由于WebGL安全策略的限制，即便對方服務器允許http請求成功之后也無法渲染，

（5）資源的依賴和釋放

// 直接釋放某個貼圖
cc.loader.release(texture);
// 釋放一個 prefab 以及所有它依賴的資源
var deps = cc.loader.getDependsRecursively('prefabs/sample');
cc.loader.release(deps);
// 如果在這個 prefab 中有一些和場景其他部分共享的資源，你不希望它們被釋放，可以將這個資源從依賴串列中洗掉
var deps = cc.loader.getDependsRecursively('prefabs/sample');
var index = deps.indexOf(texture2d._uuid);
if (index !== -1)
    deps.splice(index, 1);
cc.loader.release(deps);

8、監聽和發射事件

（1）監聽事件

//target是可選引數，用于系結回應函式的呼叫者
//boolean是可選引數，默認為false，表示冒泡流
this.node.on(event, fn, target, boolean);

（2）關閉監聽

this.node.off(event, fn, target, boolean);

（3）發射事件

//為事件函式，提供引數，最多5個
this.node.emit(event, arg1, arg2, arg3);

（4）派送事件

//grandson.js
//升級版的on，冒泡到的節點，全部注冊事件
this.node.dispatchEvent( new cc.Event.EventCustom('foobar', true) );
 
//father.js
//在指定的上級節點中，注冊相同的事件，阻止事件冒泡，手動停止派送
this.node.on('foobar', function (event) {
  event.stopPropagation();
});

（5）事件物件（回呼引數的event物件）

9、節點系統事件

（1）滑鼠事件型別和事件物件

（2）觸摸事件型別和事件物件

（3）其它事件

PS：列舉物件定義、事件名等價，在回呼引數中，作用相同，

10、全域系統事件

//全域系統事件的型別
cc.SystemEvent.EventType.KEY_DOWN    //鍵盤按下
cc.SystemEvent.EventType.KEY_UP    //鍵盤釋放
cc.SystemEvent.EventType.DEVICEMOTION    //設備重力傳感
 
//系結、解除全域系統事件
cc.systemEvent.on(event, fn, target, boolean);
cc.systemEvent.off(event, fn, target, boolean);

11、動作系統（變換系統）

（1）動作控制

// 執行動作
node.runAction(action);
// 停止一個動作
node.stopAction(action);
// 停止所有動作
node.stopAllActions();
 
// 給 action 設定 tag
var ACTION_TAG = 1;
action.setTag(ACTION_TAG);
// 通過 tag 獲取 action
node.getActionByTag(ACTION_TAG);
// 通過 tag 停止一個動作
node.stopActionByTag(ACTION_TAG);

（2）容器動作

//順序執行
cc.sequence(action1, action2, ...);
//并發執行
cc.spawn(action1, action2, ...);
//指定次數，重復執行
cc.repeat(action, times)
//無限次數，重復執行
cc.repeatForever(action)
//改變動作速度倍率，再執行
cc.speed(action, rate)

（3）即時動作

cc.show()    //立即顯示
cc.hide()    //立即隱藏

（4）時間間隔動作

cc.moveTo()    //移動到目標位置
cc.rotateTo()    //旋轉到目標角度
cc.scaleTo()    //將節點大小縮放到指定的倍數

（5）動作回呼

var finished = cc.callFunc(fn, target, arg);

（6）緩動動作

var action = cc.scaleTo(0.5, 2, 2);
//使用easeIn曲線，豐富動作表現
action.easing(cc.easeIn(3.0));

PS：可以使用緩動系統，代替動作系統，（緩動系統的API更簡約）

12、計時器

//interval：以秒為單位的時間間隔
//repeat：重復次數
//delay：開始延時
this.schedule(fn, interval, repeat, delay)
this.unschedule(fn)

13、腳本執行順序

editor: {
        //executionOrder越小，該組件相對其它組件就會越先執行（默認為0）
        //executionOrder只對 onl oad, onEnable, start, update 和 lateUpdate 有效，對 onDisable 和 onDestroy 無效
        executionOrder: 1
    }

14、標準網路介面

（1）XMLHttpRequest——短連接
（2）WebSocket——長連接

15、物件池

物件池的概念
在同一場景中，需要多次進行節點的生成、消失時，假如直接進行創建、銷毀的操作，就會很浪費性能，因此，使用物件池，存盤需要消失的節點，釋放需要生成的節點，達到節點回收利用的目的，

作業流程
（1）初始化物件池

properties: {
    enemyPrefab: cc.Prefab    //準備預制資源
},
onLoad: function () {
    this.enemyPool = new cc.NodePool();
    let initCount = 5;
    for (let i = 0; i < initCount; ++i) {
        let enemy = cc.instantiate(this.enemyPrefab); // 創建節點
        this.enemyPool.put(enemy); // 通過 put 介面放入物件池
    }
}

（2）從物件池請求物件

createEnemy: function (parentNode) {
    let enemy = null;
    if (this.enemyPool.size() > 0) { // 通過 size 介面判斷物件池中是否有空閑的物件
        enemy = this.enemyPool.get();
    } else { // 如果沒有空閑物件，也就是物件池中備用物件不夠時，我們就用 cc.instantiate 重新創建
        enemy = cc.instantiate(this.enemyPrefab);
    }
    enemy.parent = parentNode; // 將生成的敵人加入節點樹
    enemy.getComponent('Enemy').init(); //接下來就可以呼叫 enemy 身上的腳本進行初始化
}

（3）將物件回傳物件池

onEnemyKilled: function (enemy) {
    // enemy 應該是一個 cc.Node
    this.enemyPool.put(enemy); // 和初始化時的方法一樣，將節點放進物件池，這個方法會同時呼叫節點的 removeFromParent
}

清除物件池

//手動清空物件池，銷毀其中快取的所有節點
myPool.clear();

七、發布游戲

文章轉自：https://blog.csdn.net/ccnu027cs/article/details/101070069

標籤：其他

上一篇：Unity CommandBuffer

下一篇：Unity Scriptable Render Pipeline - SRP 可編程渲染管線