首頁  >  文章  >  微信小程式  >  微信小程式如何開發一款小遊戲? (實戰教程)

微信小程式如何開發一款小遊戲? (實戰教程)

青灯夜游
青灯夜游轉載
2020-05-12 10:52:5939455瀏覽

微信小程式如何開發一款小遊戲? (實戰教程)

如何快速開發一款火辣的小遊戲? 「火爆」是一個偏營運的詞,今天介紹的內容可能更傾向於技術方面,即如何利用微信的開放能力開發一款小遊戲。小遊戲上線120天時發布了幾個重要的消息,其中有幾個數字可以用來描述「火爆」這個詞。微信小遊戲正式允許第三方開發者發布的時間是在3月3日,而現在幾款小遊戲的用戶已經過億,安卓月流水過千萬的也有數款小遊戲,大家應該已經體會到了微信小遊戲的火爆程度。

與火爆相關的兩個知識,一個就是如何開發?首先要利用好微信的社交相關性,微信去中心化的情境下社交分享互動是非常重要的,因為沒有傳統流量分發的總入口。第二個是操作的簡單性,我們根據遊戲成為爆款遊戲後的數據才能推出這兩個結論,並不是說具備這兩個特性就一定能開發出一款火爆的遊戲。

什麼是小遊戲?

首先為大家介紹一下什麼是小遊戲:小遊戲特指微信小遊戲,是小程式的一個子類目,可在微信內被便捷地獲取和傳播,即點即玩,具備出色的使用者體驗。在開發的視角來看,小遊戲是基於Canvas/WebGL 微信社交開放能力的新平台。在框架上看分為三層,是典型的分層架構。微信中有一個小遊戲的Runtime去運行小遊戲,而OS本身可能會牽涉到不同類別的裝置。

微信小程式如何開發一款小遊戲? (實戰教程)

如果放大小遊戲的Runtime可以看到很多的細節,第一就是遊戲邏輯,也就是與平台無關的遊戲邏輯的發展。第二部分是遊戲引擎,大部分會用到一些引擎的工作流程、一些各種系統封裝好的高層的API。第三部分是weapp,小遊戲的框架是參考了webview的框架,但其實它的底層不是webview,而是webview精簡優化過的平台,小遊戲有的只是與核心相關的一些渲染的API。這裡的weapp-adaper是把小遊戲的能力適配到與webview更接近的環境,讓更上層的遊戲或引擎本身更快速地集入到平台中。

微信小程式如何開發一款小遊戲? (實戰教程)

微信的Runtime對外暴露的都是微信的API,所有的能力都是透過微信API發佈出去的。底層最基本的能力是渲染相關的,即Canvas 2d和WebGL。其他一些微信相關的能力是另外一部,所以小遊戲在架構上和小程式是有差別的,但使用者體驗起來沒有太大的差別。小遊戲是沒有頁面概念的,在實作上也不完全是webview,其中不必要的部分已經被去掉了。

總的來說小遊戲的入口為game.js,遊戲可以利用底層的一些能力將遊戲的整個介面繪製出來。設定檔為game.json主要用來設定小遊戲是橫屏還是垂直屏,小遊戲的全域物件game Gobal類似webview中的window對象,同時支援javascript語言。但是小遊戲有一個重要的一個限制是禁止動態執行程式碼,開發者必須先提交審核,在審核通過後才可以上架給一般使用者。另外,小遊戲包含引擎的程式碼量比較大,所以限制大小比小程式大,首包限制大小為4M。

下面來說一下Webview Adapter,它的初衷是為了讓遊戲開發者更好地熟悉我們的平台,所以我們的平台在能力上會盡可能地與webview做一些適配,其實這個適配也是很簡單的一層。比方說我們在瀏覽器裡面使用image物件建立一個圖片,而在小遊戲裡是透過wx.createimage來創建的,在程式碼中需要做一個簡單的適配。比如說Canvas、Document都是在Adapter中實現的,大家可以研究連結中的程式碼。其中有一些優化的版本,之後官方不會繼續維繫這個Adapter,因為我們會更專注於底層能力的建構。如果大家已經比較熟悉這個平台的話,就會比較容易開發遊戲。例如Document這個物件在小遊戲框架本身跟一般物件是沒有差別的,它是Adapter做的一個簡單的適配。

微信小程式如何開發一款小遊戲? (實戰教程)

下圖是小遊戲能力的概覽,最近小遊戲能力的迭代比較快,部分能力還沒有羅列出來。例如最近剛發布的遊戲圈、健康系統相關的一些接口,都還沒列進去。我們先來看看基礎能力,在渲染這部分WebGL1.0和Canvas 2D都是支援的,這裡的Canvas更接近瀏覽器裡面的標準。同時,這裡提到的可控幀率的概念,如果小遊戲在後台運行的話,可以盡量將幀率降低。在多媒體部分,小遊戲還不能像小程式一樣實現即時的音訊視訊串流,這是我們在後續要進一步支援的。網路IO的部分與小程式也是類似的,我們也提供了一些UI的元件,比如說拉起鍵盤,模態對話框等。

微信小程式如何開發一款小遊戲? (實戰教程)

小遊戲的社交開放能力現在已經對外開放了。其中最重要的一個能力是開放域,將微信的好友關係列開放出去,給開發者一起使用,但也存在一些限制。因為小遊戲去中心化的特點,分享這部分也是非常重要的,開發者要考慮如何利用這個能力。在程式碼方面,因為首包限制是4兆,但部分小遊戲的程式碼量可能比較大。我們最近也在規劃一個分包的能力,非同步載入程式碼,但這個程式碼是一定要經過我們審核的。

如何開發一款小遊戲?

那麼要如何開發一款小遊戲?因為我自己也只是開發過一些簡單的遊戲,並不是專業進行遊戲開發,所以接下來我會多介紹如何利用微信的能力來開發小遊戲。

選擇小遊戲引擎

首先在開發遊戲時要選擇引擎,我們與引擎商也有著比較密切的合作,開發小遊戲的引擎一定要適配的。例如在底層,一開始引擎可能只支援原生的遊戲,在微信小遊戲上就要做一些適配,依賴瀏覽器特有的能力。 Cocos Creator、Egret Engine、LayaAir Engine這三個引擎已經支援了小遊戲的開發,網路上也有相應的文章介紹如何發佈到微信小遊戲的平台。

裝置/環境適配

有關裝置管理的適配,小遊戲會有API提供取得畫面的寬高、裝置像素比等能力。在小遊戲開發完成後,在開發者工具也可以發起真機測試的請求,微信提供了不同裝置的測試集群,幫助開發者提前去發現問題。基礎庫提供的wx API本身就是一個不斷迭代更新的過程,對於使用了新能力的小遊戲,需要做低版本相容。例如在偵測到不支援新 API的低版本允許有損服務用戶。同時,如果某個低版本的用戶佔比較少,可以考慮在管理後台直接配置小遊戲要求的基礎庫最低版本,當然也意味著這一部分用戶在接觸到這個小遊戲時,微信客戶端會彈出一個請使用者更新到微信新版本才可使用該小遊戲的提示,如果不更新可能就會失去這個使用者。

微信小程式如何開發一款小遊戲? (實戰教程)

微信登入

小遊戲的登陸過程與小程式類似,需要使用者自訂登入狀態。 appsecret/session_key代表的是小遊戲開發者和微信平台之間的一種信任約定,例如支付、上報託管數據,平台方需要驗證access_token,和用戶相關的還要驗證session_key的簽名,才能保證請求來自於小遊戲開發者或使用者。 access_token是一種應用態的access_token,與使用者無關,需要保證全域維護一份,應該有一個中控的模組去保證access_token有效,同時在有效期內直接使用本地cache的access_token,而不是每次使用都去產生新的access_token,否則可能會遇到呼叫頻率限制的錯誤而影響服務。記得 appsecret/session_key不要放到前端程式碼中去,否則可能會被惡意利用而損壞小遊戲開發者或使用者的權益。

微信小程式如何開發一款小遊戲? (實戰教程)

快取

快取類型包含資料快取和檔案快取兩種。資料快取即key-value存儲,適合結構化類型的小資料存儲,上限為 10MB。檔案快取提供了一個完整的檔案系統 API,包括目錄 /檔案的增刪改讀,適合針對經常使用的網路資源做本地緩存,上限是50MB。

和瀏覽器不同的是,微信只提供了基本的儲存管理能力,並沒有對儲存什麼以及儲存滿時刪除什麼做一些操作。開發者自行靈活定義快取及淘汰策略,例如對經常存取的資源儲存到檔案系統以及在檔案儲存滿時,清理一些最近不常存取的檔案。

微信小程式如何開發一款小遊戲? (實戰教程)

開放資料域

我們來說一下開發資料域,也就是在保護使用者隱私的前提下把使用者的資料開放給小遊戲。這是一個封閉、獨立的javascript作用域,開放資料域是一個獨立的目錄,其入口檔案是index.js。目前的限制在於僅支援2d渲染模式,資料只進不出。比如說一個排行榜,它的目的一定是用來給用戶看的。

我們簡單看一下它的實作方案,左邊是主域。用戶拿到這些數據後實作排行榜其實也是一個Canvas。它的差別在於Canvas不能把數據取出來,無法分析其中的數據是什麼。主域裡面有一個Canvas,在微信裡上螢幕Canvas跟螢幕關聯,後面都是離線的Canvas,離線的Canvas可以自己依照需求使用的。一旦開放資料以後,上畫面Canvas不能把裡面的資料取出來,下一個Canvas也不能取出來,確保了資料的安全性。

微信小程式如何開發一款小遊戲? (實戰教程)

因為我們的資料在開發資料域中,使用者沒有辦法進行開發。所以要求開發者在開發時將所需的資料託管到我們這裡,與使用者關聯起來。這樣就可以在開發資料域裡面取到相關數據,其應用程式場景有好友排行、群組排行榜、超越好友提示等。使用者在輸入的時候,重複使用者的所有操作,在上螢幕的Canvas和離螢幕的Canvas上就得到了使用者的所有輸入,不會有開放資料滲透進去。

微信小程式如何開發一款小遊戲? (實戰教程)

分享

如果使用者在遊戲中達到了很高的分數,可以與好友PK一下。在自訂轉發的窗口,標題和圖片都可以自訂。但現在有很多小遊戲非常騷擾用戶,他們做了很多一定需要分享,才能允許玩遊戲的設定。這是大家需要思考的部分,如何既不影響使用者的體驗,又能夠促進小遊戲的互動,在這裡需要找到一個適合的平衡點。同時,在分享數據後將小遊戲與這個群聊關聯起來,我們就可以看到一個小遊戲平台。

微信小程式如何開發一款小遊戲? (實戰教程)

支付

小遊戲是支援虛擬支付的,但目前僅適用於安卓系統中。而它的方式目前只有一種,即貨幣託管的方式。主要分為兩個流程,一是用戶花錢購買遊戲幣,這與遊戲的服務端是沒有關係的。發起支付時微信客戶端會產生訂單,讓用戶確認支付,這是非同步的。平台負責把用戶RMB兌換成對應的遊戲幣,儲存到用戶對應的遊戲帳號。二是使用遊戲幣購買道具,開發者可以扣除對應的遊戲幣,發給用戶遊戲內道具,扣除遊戲幣的過程需要有一定的事務機制,確保在網路異常的情況下交易正常。扣除遊戲幣的介面支援根據訂單ID去重,意味著在網路超時等情況下,開發者可用相同的訂單ID去重試扣除,直到返回明確的回應。

1微信小程式如何開發一款小遊戲? (實戰教程)

效能

小遊戲常見的效能問題,一般是記憶體造成的。如果記憶體佔用太多會被微信客戶端主動關閉,因此開發者在用戶遊戲過程中要及時釋放不再使用的內存,特別是Canvas和Image類的大型對象,同時可以主動調用wx.triggerGC觸發底層回收對應資源。對於和遊戲邏輯相對獨立的工作,可以考慮在worker中去實現,小遊戲提供了獨立的worker執行緒執行js邏輯的能力。

1微信小程式如何開發一款小遊戲? (實戰教程)

版本更新機制

小遊戲有熱啟動和冷啟動之分,冷啟動是指記憶體中無該小遊戲的運行實例的情況下,啟動小遊戲的過程;熱啟動是指小遊戲的運行實例在內存中還存在,只是暫時切換到了後台,這時用戶再次觸發小遊戲回到前台的過程。在如果使用者點擊啟動之後,遊戲運行時會載入出來這款遊戲。在點擊右上角的選單時,按紐只是掛後台,在一定的時間內再啟動時,它會立即恢復,這時內存將會釋放。

小遊戲會在冷啟動時檢查小遊戲的版本,如有新版本,下載回本地後,下次冷啟動即可使用最新版。當然,我們也提供了 API可以供開發者決策在有版本可用時,是否需要強制更新,應用最新的版本。

1微信小程式如何開發一款小遊戲? (實戰教程)

維運

管理端提供了發布、回溯、停服等能力,開發者可以充分利用平台的能力。例如在後台操作中,js可能會報錯。腳本錯誤主要由運行過程中未捕獲的異常觸發,該類別異常可能會導致用戶小遊戲前端的js邏輯暫停執行。同時,平台也提供了完善的數據分析服務,可以透過小遊戲使用助手進行數據分析。

1微信小程式如何開發一款小遊戲? (實戰教程)

推薦:《小程式開發教學

以上是微信小程式如何開發一款小遊戲? (實戰教程)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:jisuapp.cn。如有侵權,請聯絡admin@php.cn刪除