無聊嗎?寫個【飛機大戰】來玩吧(下篇)

web前端talk發表於2019-05-30

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

相關文章