【Web前端Talk】無聊嗎？寫個【飛機大戰】來玩吧（下篇）

上一篇介紹瞭如何使用cocos creator開發遊戲，此篇是詳細介紹功能點以及如何部署打包至微信小遊戲體驗。

歡迎關注咱們的公衆號：Web前端Talk。前端文章持續更新。

資源管理製做

一、準備工具

cocos creatorv2.0.5官方最新版本、sublime tetx3或vscode、texturePackerGUI、微信小程序開發工具

 

二、sprite，圖集資源製做

（1）圖集列表相似於UI裏的瀑布流圖，將全部的.png .jpg .jpeg圖片合併壓縮爲一個圖集資源。

 

（2）使用texturePackerGUI工具，打開工具，將本機示例圖片文件夾下全部.jpg拖入至左處empty...

 

左圖爲未拖入圖片的，右圖爲已拖入圖片

Data file是設置cocos圖集.plist文件保存路徑，texture file是.png保存路徑，max size是設置最大尺寸

點擊publish sprite sheet保存文件，因爲系統的圖片較大，max size設置爲3072以後才能publish，生成後的.png文件巨大，不建議每一個圖片文件超過100kb以上進行合併。再從cocos creator工具中查看，圖集atlas製做完畢

三、動畫animationClip製做

（1）準備多個靜態圖，在層級下新增一個空節點，添加sprite、animation組件，sprite拖入一個靜止時的背景圖，選中當前節點，選擇下方動畫編輯器，新建clip文件，保存在animation文件夾下，此時文件夾下多了一個textAni，點擊紅框內編輯動畫。

屬性列表中選擇cc.Sprite.spriteFrame，是插入幀圖片屬性，好比每0.1間隔插入一幀圖片，每幀圖片所展現的效果漸漸呈現，線性時間內播放動畫。

Animation組件有
position，x，y，
scale，scaleX，scaleY，rotation，
width，height，color，opacity，
anchorX，anchorY，skewX，skewY，
cc.Sprite.spriteFrame、
cc.Sprite.fillType，
cc.Sprite.fillCenter，
cc.Sprite.fillStart，
cc.Sprite.fillRange，
這些屬性都將影響到動畫幀效果。

（2）將textAni Clip拖入至對應節點

四、prefab製做

（1）建立空節點拖入至資源管理器的prefab文件夾，點擊該prefab，右側可添加任意組件，例如：渲染組件->Label，修改string爲「hello world！！！」

（2）如何獲取prefab，新增命名爲test的JavaScript腳本，編輯腳本，在properties申明

 

{
testPrefab: cc.Prefab,
btn: cc.Node,
bg: cc.Node,
_num:1
}

在onload函數中建立對象池this.pipePool = new cc.NodePool();申明createPre函數，用於掛載在開始遊戲button節點，按鈕每點擊一次從對象池拿出prefab對象，從新計算並給定y軸位置，渲染到bg節點。

關鍵代碼：this.pipePool.put(tPrefab);

官方說法是向緩衝池中存入一個再也不須要的節點對象。這個函數會自動將目標節點從父節點上移除，可是不會進行 cleanup 操做；若是想讓節點一直存在，則不使用該方法（當生成的節點過多時，佔用內存過大，致使性能問題，須要及時釋放）。

五、audioClip

音樂資源，和圖片同樣直接拖入到sound下便可，通常以.mp3文件爲準

遊戲部署 

一、準備工做：微信小遊戲appid，微信小遊戲開發權限（公衆號，或小程序上可申請），可https訪問的服務器管理權限；

二、cocos creator2.0以上提供了構建打包至多平臺功能，能夠直接打包成微信小遊戲包，選擇工具菜單欄->項目->構建發佈，根據打包環境要求，選擇發佈平臺，這裏選擇wechat game，初始場景爲遊戲加載時第一場景展現，填寫微信小遊戲appid，填寫遠程resource服務器地址，也可不填。

構建打包成功以後，打開微信小程序開發工具，選擇小遊戲，點擊+選中剛打包後的項目路徑；

因爲微信小遊戲打包發佈，代碼體積被限制4M以內，咱們不得不優化。惟一能動的是res資源文件。

先關閉微信小遊戲項目，將資源文件夾res移除，上傳res文件夾到遠程服務器下，可經過https訪問到便可，再從新打開微信小程序開發工具，設置game.js。

wxDownloader.REMOTE_SERVER_ROOT = ‘你的遠程服務器res絕對路徑’;這樣打包體積就縮小一半以上。點擊右上角上傳，顯示爲體驗版，點擊肯定，填寫發佈信息後上傳。

遊戲體驗

一、在遊戲未正式發佈前，沒法直接經過小程序搜索進行遊戲，須要添加體驗號。

二、因爲開發者本人就是管理員，能夠直接進行遊戲

三、微信遊戲體驗預覽圖