上一篇介紹了如何使用cocos creator開發游戲,此篇是詳細介紹功能點以及如何部署打包至微信小游戲體驗。
歡迎關注我們的公眾號:Web前端Talk。前端文章持續更新。
資源管理制作
1、准備工具
cocos creatorv2.0.5官方最新版本、sublime tetx3或vscode、texturePackerGUI、微信小程序開發工具
2、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制作完畢

3、動畫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拖入至對應節點

4、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 操作;如果想讓節點一直存在,則不使用該方法(當生成的節點過多時,占用內存過大,導致性能問題,需要及時釋放)。

5、audioClip
音樂資源,和圖片一樣直接拖入到sound下即可,一般以.mp3文件為准
游戲部署
1、准備工作:微信小游戲appid,微信小游戲開發權限(公眾號,或小程序上可申請),可https訪問的服務器管理權限;
2、cocos creator2.0以上提供了構建打包至多平台功能,可以直接打包成微信小游戲包,選擇工具菜單欄->項目->構建發布,根據打包環境要求,選擇發布平台,這里選擇wechat game,初始場景為游戲加載時第一場景展示,填寫微信小游戲appid,填寫遠程resource服務器地址,也可不填。

構建打包成功之后,打開微信小程序開發工具,選擇小游戲,點擊+選中剛打包后的項目路徑;
由於微信小游戲打包發布,代碼體積被限制4M之內,我們不得不優化。唯一能動的是res資源文件。

先關閉微信小游戲項目,將資源文件夾res移除,上傳res文件夾到遠程服務器下,可通過https訪問到即可,再重新打開微信小程序開發工具,設置game.js。
wxDownloader.REMOTE_SERVER_ROOT = ‘你的遠程服務器res絕對路徑’;這樣打包體積就縮小一半以上。點擊右上角上傳,顯示為體驗版,點擊確定,填寫發布信息后上傳。

游戲體驗
1、在游戲未正式發布前,無法直接通過小程序搜索進行游戲,需要添加體驗號。
2、由於開發者本人就是管理員,可以直接進行游戲
3、微信游戲體驗預覽圖

