微信小遊戲開發技巧（大會演講內容整理）丨掘金開發者大會

在一些時間之前，好比2012年以前，作web遊戲的人還不是不少（就是用javascript寫遊戲的人）。

當時也沒想那麼多，就是爲了製做一個「不須要下載，點開就能玩的遊戲」，因此就投入到web遊戲製做的大海中。

但那時不少人都說，「你這些東西看着蠻好玩的，但感受沒什麼用啊」。

其實我不是很理解「沒什麼用」是什麼概念，「好玩」難道不夠嗎？

而後時間來到2018年，微信推出了小遊戲。因而web遊戲製做技術突然從一個「沒什麼用的技術」一躍變成了時下最潮流的技術。

——————————————分割線————————————————

其實我只喜歡一個title，遊戲製做人。但由於一直沒有一款具備表明性的遊戲，因此我一直不知道怎麼作自我介紹。

真但願哪天能夠自豪的介紹：我是 xx 遊戲的製做人。

我所在團隊是騰訊互娛的TGideas，會議上稍微吹了會，感興趣的同窗自行搜索。

——————————————分割線————————————————

接下來是正題：

主題分爲4個部分（忽略旁邊那個表情包）：

1. 基礎概念

2. 架構設計

3. 部分算法

4. 微信API

遊戲的驅動由開發編寫遊戲邏輯，而後在渲染器中實時渲染到畫布上。

微信小遊戲和傳統web遊戲（canvas類）最大的區別在於API。

小遊戲的表現既能夠像跳一跳那樣休閒，也能夠像街機的格鬥遊戲同樣熱血，不要被想象力所限制，認爲「小遊戲就應該有小遊戲的樣子」。

固然，通常會有「小遊戲就該是什麼樣」的想法的人，多少是對遊戲有所瞭解的人才會發出的感慨，由於咱們須要戴上名爲「現實」的技術枷鎖。

這種想法並無錯，反而比那些沒有套上枷鎖，而要求他人根據手機殼的顏色改變手機背景顏色的人要好不少。

可是，在戴上了技術枷鎖之後還能保持天馬行空的想象力，那纔是最難能難得的。

微信小遊戲的文件結構

game.js以及game.json分別是小遊戲的入口文件及配置文件。

res是遊戲資源，也是遊戲佔用體積最大的地方。

adapter是利用微信API模擬瀏覽器API的庫。

而src部分就是本次分享的重點內容。

我我的製做的小遊戲目前畫風都比較奔放，因此分享時借用團隊製做的小遊戲來介紹了。

遊戲結構分爲3個大的模塊：

Base 模塊管理腳本，用來組織起整個遊戲的部分。負責遊戲的開始，暫停，決定遊戲該調用哪一個場景。

Scene 場景模塊，相似於不一樣的關卡，每一個關卡里須要載入什麼樣的角色，什麼樣的敵人，播放什麼樣的音樂都由場景模塊決定。

Role 角色模塊，遊戲邏輯中最重要的一個部分。不管是主角仍是敵人，甚至場景裏的一個寶箱，一顆子彈，都屬於角色。

剩下的模塊都是對不一樣遊戲進行補完，由於一個格鬥遊戲和一個休閒遊戲所須要的模塊差異是很是大的。

角色模塊能夠大體分爲4個部分：屬性、動畫、指令、行爲。

屬性：咱們能夠把一個object叫作實體，這個實體裏的屬性就是角色的屬性，好比座標，hp，speed等等。

動畫：角色的動畫通常有屬性動畫，序列幀動畫，骨骼動畫這幾種，這些動畫中部分還有2d和3d的區別。

動畫這一部分屬於「跨領域」做業，由於要把一些「感性」的圖像轉化成「理性」的代碼。這部分的介紹之後會陸續放出。

指令：指令是玩家輸入手段的一種封裝。

例如，「水果忍者」的滑動切水果的指令就是經過「觸控」的API進行實現，而一些「連續技」，「虛擬搖桿」也須要對應的API組合來實現。

行爲：角色的行爲就是經過調整角色的屬性而產生的一種結果。

如移動就是座標

x+=speed;
sprite.play(move);
複製代碼

角色行爲是遊戲邏輯中最重要的一環，而角色之間的行爲交互又伴隨着大量的算法。

每種遊戲所須要的算法都不相同，可是遊戲裏運行算法的計算方式是一致的。

如加速度方程，在代碼中的實現實際上如就是

v+=a；
s+=v；
複製代碼

瞭解遊戲算法的基本機制後，能夠稍微擴展下，好比碰撞算法：

基本上每一個算法的推導過程均可以單獨做爲一篇文章來說了，感興趣的同窗能夠自行搜索算法名稱。

另一些比較經常使用的遊戲算法也能夠了解下，好比：狀態機，字典樹，尋路，排序……

固然，遊戲基於專業的遊戲引擎去製做，能夠達到事半功倍的效果。瞭解遊戲運行機制能夠幫你更快速的上手遊戲引擎。

微信小遊戲與傳統web遊戲最大的區別在於API。

微信小遊戲有一部分與微信小程序不同的API。

其中最特別的就是「開放數據」。

主域能夠傳數據到微信後臺，可是卻沒法從微信後臺獲取數據。而開放數據域能夠從微信後臺獲取數據，可是卻沒法現實以及將數據傳入主域。

因此主域想要顯示微信後臺數據，必須在開放數據域繪製好數據，而後將開放數據域的sharedCanvas看成image經過drawImage函數繪製到主域的canvas中。

開放數據的一些注意事項

1. sharedCanvas 只能被繪製到上屏 canvas 上。

2. 上屏 canvas 不能調用 toDataURL，其 context 不能調用 getImageData。

3. sharedCanvas 不能調用 toDataURL 和 getContext。

4. 不能將上屏 canvas 和 sharedCanvas 以任意形式繪製到其餘 canvas 上，包括 drawImage、createPattern、texImage2D、texSubImage2D。

5. sharedCanvas 的寬高只能在主域設置

其中第5條經常容易被忽略，而後出現各類適配問題。

最後總結一下小遊戲的運行機制。

• 遊戲從入口文件進入之後，開始執行渲染器。

• 而後遊戲的主邏輯會調用遊戲下一步須要的場景模塊。

• 場景模塊中調用當前場景所須要的角色模塊。

• 角色模塊在接收到不一樣的指令後會產生不一樣的行爲。

• 角色行爲之間經過大量算法進行交互，最終產生完整的遊戲效果。

「現場演講的時候，你好像不是這麼說的」