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

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

May 12, 2020 am 10:52 AM
小遊戲 小程式

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

如何快速開發一款火辣的小遊戲? 「火爆」是一個偏營運的詞,今天介紹的內容可能更傾向於技術方面,即如何利用微信的開放能力開發一款小遊戲。小遊戲上線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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1319
25
PHP教程
1269
29
C# 教程
1249
24
使用Python開發微信小程式 使用Python開發微信小程式 Jun 17, 2023 pm 06:34 PM

隨著行動互聯網技術和智慧型手機的普及,微信成為了人們生活中不可或缺的一個應用。而微信小程式則讓人們可以在不需要下載安裝應用程式的情況下,直接使用小程式來解決一些簡單的需求。本文將介紹如何使用Python來開發微信小程式。一、準備工作在使用Python開發微信小程式之前,需要先安裝相關的Python函式庫。這裡推薦使用wxpy和itchat這兩個函式庫。 wxpy是一個微信機器

詳解:Windows 10是否內建了掃雷小遊戲 詳解:Windows 10是否內建了掃雷小遊戲 Dec 23, 2023 pm 02:07 PM

我們在使用win10作業系統的時候,想知道win10更新了之後是不是還保存有以前舊版本中的自帶遊戲掃雷,據小編所知,我們可以在商店中進行下載安裝,只要在商店中搜尋microsoftminesweeper即可。具體步驟就來跟小編一起看一下~windows10有掃雷遊戲嗎1,先打開win10開始選單,點選。然後搜索,點選搜尋。 2,點擊排在第一位的。 3,然後就可能需要輸入微軟帳號,也就是Microsoft帳號。沒有Microsoft帳號的可以安裝提示註冊即可。輸入帳戶密碼,點選下一步。 4,然後開始下

實作微信小程式中的卡片翻轉特效 實作微信小程式中的卡片翻轉特效 Nov 21, 2023 am 10:55 AM

實作微信小程式中的卡片翻轉特效在微信小程式中,實現卡片翻轉特效是一種常見的動畫效果,可以提升使用者體驗和介面互動的吸引力。以下將具體介紹如何在微信小程式中實現卡片翻轉的特效,並提供相關程式碼範例。首先,需要在小程式的頁面佈局檔案中定義兩個卡片元素,一個用於顯示正面內容,一個用於顯示背面內容,具體範例程式碼如下:&lt;!--index.wxml--&gt;&l

支付寶上線「漢字拾光-生僻字」小程序,用於徵集、補充生僻字庫 支付寶上線「漢字拾光-生僻字」小程序,用於徵集、補充生僻字庫 Oct 31, 2023 pm 09:25 PM

本站10月31日消息,今年5月27日,螞蟻集團宣布啟動“漢字拾光計劃”,最近又迎來新進展:支付寶上線“漢字拾光-生僻字”小程序,用於向社會徵集生僻字,補充生僻字庫,同時提供不同的生僻字輸入體驗,以幫助完善支付寶內的生僻字輸入方法。目前,用戶搜尋「漢字拾光」、「生僻字」等關鍵字就可以進入「生僻字」小程式。在小程式裡,使用者可以提交尚未被系統辨識輸入的生僻字圖片,支付寶工程師確認後,將會對字庫進行補錄入。本站注意到,使用者也可以在小程式體驗最新的拆字輸入法,這項輸入法針對讀音不明確的生僻字設計。用戶拆

小程式能用react嗎 小程式能用react嗎 Dec 29, 2022 am 11:06 AM

小程式能用react,其使用方法:1、基於「react-reconciler」實作一個渲染器,產生一個DSL;2、建立一個小程式元件,去解析和渲染DSL;3、安裝npm,並執行開發者工具中的建構npm;4、在自己的頁面中引入包,再利用api即可完成開發。

如何在Google瀏覽器中游玩小遊戲 如何在Google瀏覽器中游玩小遊戲 Jan 30, 2024 pm 12:39 PM

谷歌瀏覽器怎麼玩小遊戲?谷歌瀏覽器之中是有著非常多充滿人文關懷的功能設計的,各位可以在其中獲得非常多樣化的樂趣。在Google瀏覽器之中,有這一個非常好玩的彩蛋小遊戲,即小恐龍遊戲,很多小伙伴都非常喜歡這個遊戲,但卻不清楚該怎麼觸發進行遊玩,下面就由小編為大家帶來恐龍小遊戲進入教程。谷歌瀏覽器怎麼玩小遊戲方法一:【電腦斷網】如果你的電腦使用有線網絡,請拔掉網線;如果你的電腦使用無線網絡,請在電腦右下角點擊無線網絡連接斷開。 ②在你電腦斷網的前提下,打開Google瀏覽器(GoogleChrome)即可出現Google瀏覽

win10系統的小遊戲掃雷在哪裡 win10系統的小遊戲掃雷在哪裡 Jul 02, 2023 pm 03:37 PM

  win10系統的小遊戲掃雷在哪裡?很多用戶在使用Win7系統的時候最喜歡玩的就是Win7自備的掃雷了,甚至有些小夥伴會為了比拼掃雷的速度一直在玩。但不少用戶在升級了Windows10系統後發現電腦的掃雷不見了,很多小伙伴不知道怎麼詳細操作,小編下面整理了Win10掃雷小遊戲的位置分享,如果你有興趣的話,跟著小編一起往下看看吧!  Win10掃雷小遊戲的位置分享  1,先開啟win10開始選單,點選【應用程式商店】。然後搜尋【microsoftminesweeper】,點選搜尋。  2,點選排

uniapp如何實現小程式和H5的快速轉換 uniapp如何實現小程式和H5的快速轉換 Oct 20, 2023 pm 02:12 PM

uniapp如何實現小程式和H5的快速轉換,需要具體程式碼範例近年來,隨著行動網路的發展和智慧型手機的普及,小程式和H5成為了不可或缺的應用形式。而uniapp作為一個跨平台的開發框架,可以在一套程式碼的基礎上,快速實現小程式和H5的轉換,大大提高了開發效率。本文將介紹uniapp如何實現小程式和H5的快速轉換,並給出具體的程式碼範例。一、uniapp簡介unia

See all articles