?? 作者：伯子南
?? 堅信： 好記性不如亂筆頭，獨樂樂不如眾樂樂
?? 個人主頁：https://blog.csdn.net/qq_34577234?spm=1010.2135.3001.5421
???? 覺得博主文章不錯的話，請三連支持一下！如有需要我的支持，請私信！
本文通過開發(fā)一個簡單的小游戲，來帶領(lǐng)大家實操一下開發(fā)小游戲的基本流程??
1??注冊賬號
首先需要注冊一個小游戲賬號，復(fù)制打開右側(cè)鏈接???♂? [https://mp.weixin.qq.com/wxopen/waregister?action=step1]
??填寫基本信息
??驗證郵箱
- 點擊登錄郵箱按鈕打開郵箱
- 查看未讀郵件中標(biāo)題為《微信小程序賬號激活》的郵件，點擊驗證鏈接激活賬號
??信息登記
- 小游戲開發(fā)需要合法合規(guī)，因此需要信息登記。
-填寫相關(guān)信息后點擊繼續(xù) 提示成功。點擊前往小程序按鈕
??設(shè)置小游戲基本信息
小游戲的開發(fā)擁有規(guī)定的發(fā)布流程，需要按流程操作。
??填寫小游戲基本信息
- 先填寫小程序基本信息
- 填寫小游戲的名稱、頭像與簡介 （簡介需要合規(guī)，不能出現(xiàn)違規(guī)詞匯）
填寫好后點擊提交
設(shè)置小游戲類目信息
然后進(jìn)行小游戲類目設(shè)置：
- 添加類目并選擇游戲->休閑游戲
- 這樣我們小游戲的發(fā)布流程的第一步就做好啦！
接下來就是開發(fā)了！我們選擇自己開發(fā)
??下載安裝IDE
先不要心急，所謂磨刀不誤砍柴工。
為了幫助開發(fā)者簡單和高效地開發(fā)和調(diào)試，
微信小程序微信官方在原有的公眾號網(wǎng)頁調(diào)試工具的基礎(chǔ)上，
推出了全新的 微信開發(fā)者工具，
集成了公眾號網(wǎng)頁調(diào)試和小程序調(diào)試兩種開發(fā)模式。
- 首先我們需要下載并安裝微信開發(fā)者工具
[https://developers.weixin.qq.com/minigame/dev/devtools/download.html]
開發(fā)者工具分為小程序版與小游戲版，這里推薦下載小游戲版。（小程序版開發(fā)小游戲有問題）
- 下載并安裝好后微信掃描二維碼登錄
- 登陸后，界面如下：
?????♂?新建項目
開發(fā)者工具下載安裝完畢后，打開并新建項目。
- 選擇小游戲并選擇第一個空白項目。
??填寫項目基本信息
- 其中
AppID請到小程序管理頁面，查看并復(fù)制填寫到上面
??初識IDE界面
創(chuàng)建好空白項目后，可以看到IDE場景如下：
目前我們最關(guān)系的是紅框標(biāo)記的三個，分別是：1.場景資源目錄 ; 2.場景視圖; 3.項目目錄
新打開的項目默認(rèn)創(chuàng)建了一個3D場景（Scene）
對于場景視圖，我們可以:
1.使用鼠標(biāo)左鍵 進(jìn)行 拖動查看，
2.使用鼠標(biāo)滾輪 進(jìn)行 放大縮小
??創(chuàng)建一個正方體
-
在場景資源目錄中，選擇
Main Camera,右鍵選擇-創(chuàng)建3D節(jié)點->Mesh->Cube.
-
這樣我們就在場景種創(chuàng)建了一個正方體 （如果看不到可以試試在場景視圖中用鼠標(biāo)滾輪縮小視圖）
-
在場景資源目錄
選擇正方體資源Cube_2并雙擊，就可以在右側(cè)Inspector窗口看到Cube_2的具體信息。 -
這里的參數(shù)你都可以按需編輯，為了后續(xù)演示時能夠看到正方體，我們編輯有右邊參數(shù)中 position.z=5.
??保存場景
- 然后
ctrl+s先保存下這個場景
- 可以看到項目目錄中新增了一個scene格式的文件，雙擊demo.scene文件，就能重新打開場景視圖。
??加點腳本讓正方體動起來
小游戲框架推薦使用 TypeScript 來編寫小游戲邏輯。
??新建腳本
- 我們在項目目錄新增一個腳本文件：
- 命名并選擇該文件，可以看到右側(cè)
Inspector窗口顯示了腳本內(nèi)容
??綁定腳本
- 按住右鍵拖動腳本
demo.ts到正方體Cube_2，即可將腳本綁定
- 雙擊
Cube_2,即可在右側(cè)看到綁定的腳本信息
??編輯腳本
- 選擇剛剛創(chuàng)建好的
demo.ts,右鍵選擇內(nèi)置編輯器打開
- 這樣更方便我們的編輯
可以看到該腳本主要有三個方法onAwake，onUpdate，onDestroy - 我們修改其中的
onUpdate方法如下，并ctrl+s保存
public onUpdate(dt) {
this.entity.transform.rotate(engine.Vector3.createFromNumber(15*dt, 30* dt, 45 * dt), true, false)
}
- 然后關(guān)閉編輯器，并切換到之前的窗口,雙擊
demo.ts，可以在右側(cè)窗口查看到修改后的腳本
這時候需要再次ctrl+s保存
- 如果右側(cè)未顯示，可以先關(guān)閉
Inspector標(biāo)簽，然后重新打開 （如下操作），感覺是一個bug
????預(yù)覽效果
- 在工具界面上方有個
播放按鈕，點擊后工具開始初始化小游戲容器，完成后即可進(jìn)行預(yù)覽
- 這時候你就可以看到正方體動起來了?。?！
- 點擊
停止按鈕就可以停止預(yù)覽，回到編輯狀態(tài)
??編譯構(gòu)建
回到編輯態(tài)后，我們開始進(jìn)行編輯構(gòu)建
- 如下，選擇
構(gòu)建工程打開Build窗口
- 在
Build窗口，點擊選擇任務(wù)
- 然后
勾選我們正在編輯的游戲工程，并點擊開始構(gòu)建
- 填寫基本的構(gòu)建信息，并點擊確定
- 對于確認(rèn)后的一切彈窗信息，都點擊確定。過程比較耗時，請耐心等待
- 最后會提示
構(gòu)建成功
- 你可以選擇點擊
本地調(diào)試，在本地瀏覽器中進(jìn)行查看
??真機(jī)調(diào)試
- 在
構(gòu)建面板中，有真機(jī)調(diào)試按鈕
- 點擊后會加載
預(yù)覽二維碼
請使用微信客戶端掃描打開
- 首先在你會在手機(jī)端看到熟悉的小游戲界面
- 并且PC端會彈出真機(jī)調(diào)試窗體 （很像瀏覽器的開發(fā)者有木有）
- 移動端加載完成后，就可以看到啦！
????和我一起？
??*到這里我們的第一個小游戲就完成了?。?！是不是很簡單！*??
??*最近正在學(xué)習(xí)如何開發(fā)小游戲，接下來會持續(xù)學(xué)習(xí)并第一時間在CSDN更新博客。*??
??如果你也對小游戲開發(fā)感興趣的話，不妨關(guān)注我，關(guān)注博主的小游戲開發(fā)專欄，一起體驗小游戲開發(fā)的樂趣！！！文章來源：http://www.zghlxwxcb.cn/news/detail-778111.html
學(xué)習(xí)內(nèi)容計劃：文章來源地址http://www.zghlxwxcb.cn/news/detail-778111.html
- 小游戲開發(fā)申請流程
- 小游戲開發(fā)環(huán)境搭建與工具使用
- 小游戲開發(fā)原理與基礎(chǔ)
- 小游戲常用API
- 小游戲開發(fā)實戰(zhàn)
到了這里，關(guān)于【小程序】快來開發(fā)你的第一個微信小游戲（詳細(xì)流程）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
