上一篇介紹瞭如何使用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、微信遊戲體驗預覽圖