前言
什麼是 Cocos Creator
以下內容引自 Cocos Creator 官網：
Cocos Creator 是一個完整的遊戲開發解決方案，包括了 cocos2d-x 引擎的 JavaScript 實現（不需要學習一個新的引擎），以及能讓你更快速開發遊戲所需要的各種圖形界面工具。
本篇文章的目的
通過一個簡單的小例子，讓大家快速上手 Cocos Creator，並對 Cocos Creator 中的一些基本概念有一個簡單的認識。
開發環境
- OS: macOS High Sierra (Version: 10.13.4)
- Cocos Creator: v2.1.2
- Visual Studio Code: version 1.38
因爲我們的例子比較簡單，所以開發環境對我們的影響很小。後面 Cocos Creator 版本更新了之後，可能界面會有些許變化，不過其他的內容應該大同小異。
項目資源
推薦大家先把項目 clone 到本地，然後參考着代碼來看本篇文章。
開搞
思路
如文章標題所說，我們要做的是一個拼圖遊戲，大家可以稍微結合一下現實中的拼圖遊戲，考慮我們需要實現哪些功能點：
1、準備一張圖
2、把圖片切割成小塊（不能多，也不能少）
3、打亂圖片順序（位置）
4、每張圖要能拖動改變位置
項目概覽
1、創建項目
首先，我們先創建一個空項目，空項目沒用的東西比較少，我們用到的東西也比較少，理解起來比較清晰。
看一下我們最終完成的項目大致的（Creator 中只顯示一部分，其他的我們暫時也不用關注）目錄結構：
大家可以和自己的項目比較一下，不同的內容就是我們需要做的。
2、項目文件描述
先說文件夾，除了 resources 文件夾，其他文件夾的命名規則大家隨意，說一下我們項目中的使用規則：
prefeb文件夾中存放 預製資源 （什麼是預製資源，之後說）res文件夾中存放 靜態加載的資源（可以直接在 Creator 編輯器中使用的）resources文件夾中存放 動態加載的資源 （程序跑起來之後，動態加載）scripts文件夾中存放 各類腳本
當然，大家可以有自己的規則，這個都不影響的。
我寫到這裏發現上面寫的太囉嗦又太詳細了，後面關於 Cocos Creator 的基本使用的內容就不寫了，大家去找其他教程吧，最好是視頻教程，因爲一些操作用文字描述不太清楚，要結合一大堆圖，但是視頻的話看一眼就懂了。
算了，直接上代碼。
核心代碼
1、如何使用預製資源
直接看代碼就會乾淨多了，我們先看看怎麼在代碼中使用預製資源做一個 Node 出來。
// 使用預製資源實例化一個 node 對象
let node = cc.instantiate(self.itemPrefeb);
// 爲新 node 對象指定父node，每個node都必須要有父node，不然不會顯示
node.parent = self.node;
// 獲取新 node 對象的 item 組件，也就是我們腳本中的 `item.js` 文件
self.items.push(node.getComponent('item'));
2、如何動態加載圖片資源
// 加載 Texture
cc.loader.loadRes("pic", cc.Texture2D, function (err, texture) {
self.curTexture = texture;
self.__initItems();
self.__shuffleItemPos();
});
pic 就是指 resources 文件夾下面的 pic.png 文件。這裏就是動態加載，動態加載的資源必須要再 resources 文件夾下面，不需要指定擴展名，但要指定類型，這裏就是 cc.Texture2D。
當然，針對我們的項目來說，這裏採用靜態加載的方式也是可以的，但是考慮到後面可能會動態的更換拼圖的貼圖，再有也是爲了學習新技術嘛，用動態的，就用動態的。
3、如何切割圖片
let rect = cc.rect(cfg.x, cfg.y, cfg.w, cfg.h);
this.picSprite.spriteFrame = new cc.SpriteFrame(cfg.texture, rect);
this.picSprite.node.setContentSize(cfg.w, cfg.h);
切割圖片其實就是在給 sprite 設置 spriteFrame 的時候，在 texture 中劃分指定區域（rect）作爲 spriteFrame。
注意設置完之後要把 sprite 所屬的 node 的大小改變一下，不然不會顯示的哈。
4、如何打亂圖片位置
雖說是打亂，但是不能天馬星空的亂哈，一定要有章法，每個圖片要在基本合理的位置，我想要做到的效果是，儘量不重疊，別飛出去太遠，儘量亂。
for (let i = 0; i < self.items.length; i++) {
let randomSeed = Math.floor(Math.random() * self.items.length);
let item = self.items[i];
let rItem = self.items[randomSeed];
let x = item.cfg.posX;
let y = item.cfg.posY;
item.setItemPosition(rItem.cfg.posX, rItem.cfg.posY);
rItem.setItemPosition(x, y);
}
光是看代碼可能有點蒙圈哈，講一下思路：
- 遍歷所有的圖片
- 將每個圖片與另一個隨機選中的圖片交換位置
這個方法有點蠢，但是能實現功能，又不用考慮性能的事，先這樣。
5、如何實現拖動
this.node.on(cc.Node.EventType.TOUCH_MOVE, function (event) {
this.opacity = 100;
let delta = event.touch.getDelta();
this.x += delta.x;
this.y += delta.y;
}, this.node);
this.node.on(cc.Node.EventType.TOUCH_END, function () {
this.opacity = 255;
}, this.node);
原理就是，監聽 TOUCH_MOVE 事件，移動的時候，隨時改變元素的位置（x 和 y）。
這裏多做了一件事，拖動的時候把透明度改成 100，拖動完成 TOUCH_END 的時候把透明度改回 255。
6、如何給圖片加上邊框
大家想一想，如果是讓你來，你會怎麼做？
我這裏的思路哈，做兩個 node（sprite），下面放圖片，上面放邊框（另一張圖），把這兩個 node 指定爲同一個父 node，拖動的是父 node，那麼下面的圖片和邊框就會一起移動了。
這也就是我們項目中預製資源 item-prefeb 實現的原理及內容。
但要注意，因爲圖片的大小是動態的（雖然是寫死的，因爲是動態加載的，就當做動態的嘛），所以邊框的大小也要跟着變。
this.frame.setContentSize(cfg.w, cfg.h);
然後還要注意，添加的邊框圖片，在 creator 中要做一點設置，不能使用默認的：
簡單說，就是要把 sprite 的 type 指定爲 SLICED，同時，點擊 sprite frame 旁邊的 edit 按鈕，在彈出框中，調整上下左右四條線的位置，這樣紅色圓圈圈住的部分就不會隨着 node 大小的改變而發生形變了。
說起來可能不好理解，大家自己試一下就知道了，一個用默認的，一個用我上面描述的，看一眼就懂了。
好了， 核心的內容基本就這些，其他的都比較簡單或者比較基礎，大家參考着項目源碼應該很容易就能看懂了。
效果
我們看一下跑起來的效果：
1、初始化
2、拼接中
3、完成（噠噠）
總結
知識點
總結一下本項目涉及到或者講解到的知識點哈：
1、creator 文件目錄結構（大致），尤其注意 resources 文件夾
2、如何在代碼中使用預製資源
3、如何動態加載圖片資源
4、如何切割圖片
5、如何把圖片位置打亂
6、如何實現拖動
7、如何實現圖片加邊框及加邊框的注意事項（技巧）
下一步
這只是一個小的實戰實例，很多內容還不完善，比如：
是不是要加點音效？
要不要來一個計時？
或者乾脆來一個倒計時？
咱們一直說動態加載動態加載，現在雖然使用的是動態加載的方法，但是並沒看到和靜態加載有什麼實質性的變化呀，我怎麼換圖片？
好了， 今天的內容就到這裏，之後我們會逐漸完善我們的拼圖遊戲，也許之後還會發布到各大應用市場，然後橫掃各大榜單，然後我們再給遊戲引入社交系統，加入內置商城，先做線上，後做線下，風投爭相投資，我們先上市，再發展平臺，把它打造成全世界墜吼的拼圖遊戲。
大家說吼不吼啊！
就醬。