本文將利用小程序游戲提供的能力制作一個簡單的方塊旋轉(zhuǎn)小程序游戲,旨在從零開始介紹小程序游戲的開發(fā)過程。
注冊小程序游戲賬號
進入小程序注冊頁面按照指引填寫信息并提交相應(yīng)信息,服務(wù)類別選擇“程序游戲”,子類別可以先選擇“休閑程序游戲”,您可以擁有自己的小程序游戲賬號,安裝并啟動開發(fā)者工具。
源碼:casgams.top/gm
from airtest.core.api import
auto_setup(__file__)
from poco.drivers.ios import iosPoco
poco = iosPoco()
while not poco("").exists():
poco.scroll(direction='vertical', percent=0.3, duration=1.0)
snapshot()
poco("").click(
注冊小程序游戲賬號后,需要下載開發(fā)者工具并將其安裝到您的計算機上。
打開安裝好的開發(fā)者工具客戶端,用剛剛注冊小程序游戲賬號的微信公眾號“掃一掃”,掃碼進入小程序游戲開發(fā)環(huán)境。
選擇左側(cè)“小程序項目”中的“小程序游戲選項卡”,然后點擊右側(cè)的“+”號開始創(chuàng)建小程序游戲項目。
填寫合適的項目名稱,選擇本機合適的空目錄,登錄剛剛注冊了小程序管理平臺,如下圖找到小程序的AppID,填入表單的“AppId”文本框。
填寫完成后,點擊右下角的“新建”按鈕,完成小程序游戲的創(chuàng)建。
您可以在開發(fā)者工具中進入小程序游戲的可視化開發(fā)界面。
開始開發(fā)程序游戲
接下來,我們將使用小程序游戲框架提供的能力來完成繪制立方體旋轉(zhuǎn)的基本功能。
創(chuàng)建立方體
開發(fā)者可以在左側(cè)的Hierarchy選項卡中右鍵單擊實體節(jié)點Main Camera來創(chuàng)建立方體。然后點擊選中Cube節(jié)點,在Inspector選項卡中將其position屬性的z設(shè)置為5,這樣我們就可以在程序游戲攝像機的視角下看到它了。
創(chuàng)建腳本組件
小程序游戲框架推薦使用TypeScript編寫小程序游戲邏輯。您可以右鍵單擊“項目”選項卡來創(chuàng)建一個腳本組件并將其命名為“旋轉(zhuǎn)”。
然后您可以將創(chuàng)建的腳本從項目選項卡拖到 Hierachy 的 Cube_1 節(jié)點。這樣,我們就把腳本組件添加到了立方體節(jié)點上了??梢园l(fā)現(xiàn)在Cube節(jié)點的Inspector中有一個rotate組件。.
保存場景
左上角的“保存”按鈕,或者使用快捷鍵Ctrl+S(MacOs上是command+S),可以將剛剛創(chuàng)建的程序游戲空間保存為資源scene。取一個立方體的名稱,資源將放在 assets/cube.scene 中。
讓立方體旋轉(zhuǎn)
該工具有一個內(nèi)置的代碼編輯器。開發(fā)者可以在Project中右擊剛才創(chuàng)建的rotate.ts腳本文件,使用內(nèi)置的編輯器打開。然后在代碼中的onUpdate中寫輪換代碼。onUpdate生命周期會以requestAnimationFrame的頻率進行刷新,并通過this.entity操作到cube所在的實體。修改后記得保存代碼。
public onUpdate(dt) {
this.entity.transform.rotate(engine.Vector3.createFromNumber(15*dt, 30* dt, 45 * dt), true, false)
})
快速查看運行效果
這個時候我們在2d/3d demo頂部和中間的按鈕中選擇剛剛創(chuàng)建的3D場景:cube.scene。然后再次點擊播放使程序游戲運行。
玩的時候,開發(fā)者可以在Game選項卡看到旋轉(zhuǎn)的方塊,我們的程序游戲邏輯就在運行。同時,您可以在層次結(jié)構(gòu)和檢查器選項卡中查看實時程序游戲狀態(tài)。按停止后,您可以返回編輯模式。
構(gòu)建程序游戲
回到編輯模式后,接下來我們要構(gòu)建程序游戲,壓縮打包程序游戲需要的資源。點擊左上角的Build >> Build Project,打開Build面板。點擊“選擇任務(wù)”,選擇“微信小程序游戲”,然后點擊“開始構(gòu)建”,在3D傳送門場景中選擇cube.scene場景。構(gòu)建完成后,所有產(chǎn)品都會被放入minigame目錄中。該產(chǎn)品也可以使用模擬器預(yù)覽進行調(diào)試。
在手機上預(yù)覽
點擊開發(fā)者工具中的“預(yù)覽”按鈕,用手機掃描二維碼,即可在手機上預(yù)覽剛剛創(chuàng)建的小程序游戲的效果。
上傳到演示版
當(dāng)小程序游戲開發(fā)到一定階段,想要給項目組其他小伙伴體驗時,可以提交體驗版。具體操作方法是先點擊Build選項卡右上角的“Upload”。
在彈窗中填寫版本號和項目備注后,點擊“上傳”按鈕。
上傳成功后,需要登錄小程序管理平臺,點擊“版本管理”。在右側(cè)頁面,選擇剛剛提交的版本,點擊“選擇為試用版”。
選擇試玩版后,您可以點擊版本號下方的二維碼圖標(biāo),獲取試玩版小程序游戲二維碼。
具體步驟如下:
通過usb連接安卓手機,確認連接沒有問題adb devices。在電腦上執(zhí)行以下命令將手機5003端口映射到電腦5003端口
adb reverse tcp:5003 tcp:5003
在您的計算機上啟動代理:
python -m poco.utils.net.stdbroker “ws://:5003” “tcp://:15004”
啟動broker后,在手機上訪問Egret的頁面(需要使用全屏模式以保證坐標(biāo)準(zhǔn)確)。訪問過程中,broker會打印移動連接的log,如下:
~ python -m poco.utils.net.stdbroker "ws://*:5003" "tcp://*:15004"
server listens on ("0.0.0.0", 5003) transport websocket
server listens on ("0.0.0.0", 15004) transport socket
StdBroker on.
server on accept. <poco.utils.net.transport.ws.MyWsApp object at 0x1100620d0>
打開AirtestIDE并連接手機。然后選擇Std-brokerpoco模式,就可以看到UI層級了。同時broker會打印連接日志:
server on accept. <poco.utils.net.transport.ws.MyWsApp object at 0x10d03d2d0>
accept from: ('127.0.0.1', 56872)
received_message from ('127.0.0.1', 56323) {"id":"2a0ce828-132e-4d15-a645-55493d7eaf4b","jsonrpc":"2.0","result":{"children"
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號