1. 程式人生 > >想開發微信小遊戲,先看看騰訊是如何制定規則的

想開發微信小遊戲,先看看騰訊是如何制定規則的

點選上方“CSDN”,選擇“置頂公眾號”

關鍵時刻,第一時間送達!

640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1

作者 | 凌華彬、王哲

責編 | 徐威龍

一、前言

在第一篇文章《微信小遊戲開發上手》中,我們給大家介紹了上手微信小遊戲開發所需要的知識,以及小遊戲的開發環境和工具。學會如何開發小遊戲固然重要,但是更重要的是,什麼樣的遊戲更適合小遊戲環境和它的使用者。

我們都知道小遊戲是執行在微信內部的遊戲環境中的,那麼微信使用者也就是小遊戲的潛在使用者,這些使用者在使用微信時,會被什麼樣的遊戲所吸引?會分享什麼樣的遊戲?什麼樣的遊戲能融入使用者的社交過程?這些在今天都沒有最佳的答案,開發者們都在探索,也正是廣大小遊戲開發者的機會所在。但毫無疑問的是,製作這樣的爆款遊戲一定需要完美理解各種微信社交/系統 SDK 介面的能力,並將其發揮到極致。

今天我們會更詳細分析小遊戲環境給大家開放的各種 SDK 介面,以及這些介面可以承載什麼樣的遊戲體驗。當然,微信小遊戲官方文件中,對這些介面都有很詳細的使用介紹,我們不會重複這些具體的 API 呼叫細節,會更多側重在這些介面所提供的功能和潛力上。最後,我們還會給出一個 Cocos Creator 製作小遊戲的案例。

注:小遊戲官方文件地址:https://mp.weixin.qq.com/debug/wxagame/dev/document/render/canvas/Canvas.html?t=201816

二、小遊戲提供的介面能力

微信 SDK 介面通用規則

微信的 SDK 介面大多有非常接近的使用方式和命名規則,下面是我們總結出來的一些經驗:

  • onXXX & offXXX:這類 API 一般都是的事件註冊和反註冊;

  • xxxSync:在某個函式名後新增 Sync 就是該函式的同步方法,同時也說明原始函式一定是非同步呼叫;

  • 非同步函式:由於微信很多 API 都需要做後臺請求,或從微信執行核心中獲取資訊,所以存在大量的非同步介面,有時會提供它們的同步版本,但在大多數情況下我們仍然建議使用非同步介面,以便更方便得捕獲異常,組織異常處理程式碼;

  • 非同步函式的呼叫方式:微信 API 內的非同步函式絕大多數都接受一個物件作為引數,該物件內應該包含:

    success:成功回撥

    fail:失敗回撥

    complete:完成回撥(呼叫成功、失敗都會執行)

wx.getSystemInfo({
 success

: function (res) {
   // res 一般是一個包含呼叫結果的物件
   console.log('This phone is ' + res.brand + ' ' + res.model);
 },
 fail: function (res) {
   // 通過 res.errMsg 可以獲取錯誤資訊
   console.warn(res.errMsg);
 },
 complete: function () {
   console.log('API call completed');
 }
})

  • getXXX & setXXX:獲取和設定介面,比較反常理的是,很多這樣的介面也是非同步的,需要仔細閱讀 API 文件。

接下來我們來看具體的介面,先看大家最關注的三大介面:使用者、轉發和支付介面。

使用者介面

使用者介面方面,開發者最應該關注的就是使用者的登入了,登入介面的使用示例如下:

wx.login({
 success: function (res) {
   // res.code 為使用者的登入憑證
   if (res.code) {
     // 遊戲伺服器處理使用者登入
   } else {
     // 失敗處理
     console.log('獲取使用者登入態失敗!' + res.errMsg);
   }
 },
 fail: function (res) {
   // 失敗處理
   console.log('使用者登入失敗!' + res.errMsg);
 }
});

按前文所說,要做到好的使用者體驗,所有非同步介面的 fail 都應該被處理,Login 更是如此,如果 Login 失敗,遊戲很難進行下去,除非是純單機遊戲。至於失敗的處理,我們建議重新嘗試,或者引導使用者關閉小遊戲再次嘗試。

回撥介面中的是使用者的登入憑證,通過它可以在開發者伺服器後臺換取 openid 和 session_key 等資訊,部分 API 可能包含使用者的敏感資料,這些敏感資料需要傳遞 session_key 才可以獲取,否則只能獲得很有限的基本資料。具體資訊請參考使用者登入態簽名文件,目前需要登入態簽名來獲取敏感資料的 API 為:

使用者登入態簽名文件:https://mp.weixin.qq.com/debug/wxagame/dev/tutorial/open-ability/http-signature.html

  • wx.getUserInfo:獲取使用者資訊,連結:https://mp.weixin.qq.com/debug/wxagame/dev/document/open-api/user-info/wx.getUserInfo.html

  • wx.getShareInfo:獲取轉發詳細資訊,連結:https://mp.weixin.qq.com/debug/wxagame/dev/document/share/wx.getShareInfo.html

  • wx.getWeRunData:獲取微信運動資訊,連結:https://mp.weixin.qq.com/debug/wxagame/dev/document/open-api/werun/wx.getWeRunData.html

除此之外,部分 API 呼叫需要使用者的授權方能使用,如果沒有申請過授權,第一次呼叫時會自動申請,流程如下:

0?wx_fmt=png

也可以在呼叫 API 之前做預授權:

0?wx_fmt=png

授權的詳細範例和需要授權的 API 列表請參考微信官方文件中的使用者授權章節,地址:https://mp.weixin.qq.com/debug/wxagame/dev/tutorial/open-ability/authorize.html。

轉發介面

在第一篇文章中,我們提到小遊戲最大的開創效能力,可能就是從轉發入口點選直接進入遊戲的超快捷體驗。從技術角度來說,小遊戲中的轉發分為被動轉發和主動轉發(主被動是針對遊戲開發者來說):

  • 被動轉發

使用 wx.showShareMenu 在右上角 ”…” 按鈕的彈出選單中顯示轉發選項,這樣使用者遊戲中的任何時候,都可以發起轉發。可以通過 wx.hideShareMenu 來去掉轉發選項。

wx.showShareMenu:https://mp.weixin.qq.com/debug/wxagame/dev/document/share/wx.showShareMenu.html

wx.hideShareMenu:https://mp.weixin.qq.com/debug/wxagame/dev/document/share/wx.hideShareMenu.html

wx.onShareAppMessage:https://mp.weixin.qq.com/debug/wxagame/dev/document/share/wx.onShareAppMessage.html

同時,開發者可以監聽 wx.onShareAppMessage 來監聽使用者轉發行為,並準備適宜的轉發內容。具體來說開發者可以在回撥函式的返回值中定製轉發內容:

1. title:標題,不傳則預設使用當前小遊戲的暱稱;

2. imageUrl:轉發顯示圖片的連結;

3. query:遊戲引數,遵循 key1=val1&key2=val2 格式的查詢字串,從這條轉發訊息進入後,可通過 wx.onLaunch 或 wx.onShow 獲取這些啟動引數。

0?wx_fmt=png

使用者點選右上角選單按鈕發起轉發

  • 主動轉發

所謂主動轉發是指開發者在遊戲互動中主動替使用者發起轉發請求,一般是玩家在遊戲中點選某個分享按鈕後,開發者通過呼叫 wx.shareAppMessage 直接調起轉發視窗。

wx.shareAppMessage:https://mp.weixin.qq.com/debug/wxagame/dev/document/share/wx.shareAppMessage.html

0?wx_fmt=png

使用者點選按鈕自動調起轉發頁面

開發者還可以為所有的轉發設定 withShareTicket 模式,這種模式下,開發者在轉發和使用者通過轉發連結進入遊戲時,都可以獲取一個 shareTicket。將 shareTicket 傳入 wx.getShareInfo,可在回撥中解密資料來獲取分享的群 id。關於資料解密請參考加密解密演算法文件,地址:https://mp.weixin.qq.com/debug/wxagame/dev/tutorial/open-ability/signature.html。

支付系統

在小遊戲 API 文件中並沒有支付相關的 API,不過目前從安卓已上線的小遊戲來看,已經有支付的體驗了。至於未來何時會開放給所有開發者,還請期待微信官方的訊息。

網路介面

網路介面分為三個部分:網路請求,WebSocket,上傳下載。

  • 網路請求

    網路請求的 API 是 wx.request,這個介面可以理解為瀏覽器中的 XMLHttpRequest,實際上 Adapter 中的 XHR 物件也正是用它來封裝的。它可以用來發出網路請求,獲取遠端伺服器返回的資料。值得一提的是,這份資料是儲存在記憶體中的,使用者可以直接使用,不涉及到任何檔案 IO 操作。

  • WebSocket

    WebSocket 相關介面的使用方式可以參考 API 文件,雖然介面定義和瀏覽器中並不相同,不過 Adapter 再次基於微信基礎 API 提供了等同於瀏覽器介面的封裝,所以我們建議大家不需要根據微信基礎 API 進行適配,直接引入 Adapter 指令碼,省去適配的煩惱。當然,如果遊戲中的網路請求遇到奇怪的問題,你可能需要通過原始 API 進行除錯和定位。

  • 上傳下載

    微信還提供了瀏覽器中所沒有的直接上傳(wx.uploadFile)和下載(wx.downloadFile) API。

    對於遊戲開發來說,我們需要重點關注的是下載 API。首先它和 request 的用途不同,request 用來請求多種形式的資料,包括字串、檔案資料、ArrayBuffer、json 物件,所以適合用來做短連結請求,呼叫伺服器 Restful API,而 wx.downloadFile 則是用來直接下載檔案到本地的。

    如果在呼叫引數物件中指定 filePath,那麼下載下來的檔案會被儲存到小遊戲的本地快取空間,否則下載下來的檔案會被儲存在臨時空間,退出小遊戲時就會被刪除,這取決於你是否需要長期保留這個檔案。不過需要注意的是,如果 filePath 帶有相對路徑,而本地快取中不存在這個路徑,會下載失敗,這個需求就要配合檔案系統 API 才能滿足了。

wx.request:https://mp.weixin.qq.com/debug/wxagame/dev/document/network/request/wx.request.html

API 文件:https://mp.weixin.qq.com/debug/wxagame/dev/document/network/websocket/wx.connectSocket.html

wx.uploadFile:https://mp.weixin.qq.com/debug/wxagame/dev/document/network/upload/wx.uploadFile.html

wx.downloadFile:https://mp.weixin.qq.com/debug/wxagame/dev/document/network/download/wx.downloadFile.html

檔案系統

小遊戲給開發者開放了很完整的檔案系統介面,這點和瀏覽器中不支援檔案 IO 的情況完全不同。一方面這給了開發者更大的自由度和發揮空間,但另一方面,這也是目前微信小遊戲環境所必要的 API,因為微信小遊戲環境不支援類似瀏覽器的資源快取和資源過期機制。

具體來說,瀏覽器對於使用者已經訪問過的資源,會進行快取,再次訪問時,會優先從快取獲取,而不是傳送請求給服務端,這樣可以儘可能減少網路使用,優化頁面響應速度。當服務端資源更新時,瀏覽器會發現本地資源已過期,自動清除對應本地資源並從服務端獲取最新版本。

而在小遊戲環境中,如果想要避免每次都從服務端獲取資源,就需要自己實現一套類似的資源快取和過期方案,這樣的方案就不得不依賴於上面的下載介面以及檔案系統介面。好訊息是,Cocos Creator 提供了一套完整的資源管理方案,我們會在下一篇分享中詳細討論。

要理解小遊戲的檔案系統,首先要理解小遊戲的檔案沙盒環境:

0?wx_fmt=png

所有的檔案系統介面,都是在這個檔案沙盒環境中執行的,所有的檔案目錄也是相對於沙盒環境的,所以我們不用擔心不同小遊戲或者不同使用者之間的檔案衝突。

從 API 使用的角度來說,所有檔案系統介面都是由 FileSystemManager 來提供的,開發者需要首先通過:

FileSystemManager:https://mp.weixin.qq.com/debug/wxagame/dev/document/file/FileSystemManager.html?t=201818

let fs = wx.getFileSystemManager();

來獲取 FileSystemManager 物件,然後呼叫它的 API 來完成需要的功能,下面通過下載、讀取、刪除檔案流程展示 API 的用法:

0?wx_fmt=png

以上只是最基本的一些介面使用。除此之外,微信小遊戲還提供了 renameFile、copyFile、readdir、writeFile 等,大家可以參考 API 文件自行探索。細心的開發者還會注意到這些介面大多包含同步版本,比如 fs.readFileSync,我們建議一律使用非同步版本的介面,否則檔案 IO 造成的阻塞會影響到遊戲執行的流暢度和遊玩體驗,相比之下,顯然編寫非同步程式碼這點麻煩還是可以承受的。

其他介面

除了以上這些介面以外,還有很多介面對於特定遊戲型別非常重要,下面列舉一些例子:

  • wx.getSystemInfo:獲取系統資訊,包含手機品牌、型號、螢幕寬高、語言、版本、電量等資訊;

  • wx.onAccelerometerChange:監聽加速計事件,可用於部分遊戲的操控輸入;

  • wx.setKeepScreenOn:保持螢幕常亮,掛機遊戲可能需要 ? ;

  • wx.vibrateShort:15ms 短震動,也存在長震動介面,可以用來增強遊戲體驗,比如輔助模擬吳彥祖給玩家打電話 ? ;

  • wx.getLocation:獲取地理位置、速度等,LBS 功能必備;

  • 鍵盤介面:包含顯示/隱藏鍵盤,以及各種鍵盤輸入監聽器介面,可以用來製作遊戲中的輸入框,Cocos Creator 中已經封裝到 EditBox 元件中,使用方式與瀏覽器環境無異;

  • wx.getRecorderManager:獲取錄音管理器,可以用來錄入玩家語音;

  • 圖片介面:用來從使用者相簿中選擇圖片,或儲存圖片到使用者相簿;

  • wx.createVideo:建立視訊,提供視訊播放和視訊控制介面;

  • wx.triggerGC:如果遊戲中頻繁建立和銷燬 WebGL 貼圖,或記憶體使用過高,需要在適當時機呼叫此介面來觸發 GC,降低遊戲記憶體使用。

三、從介面能力思考小遊戲的機會

雖然介面的分析講完了,但是從上一篇的反饋來看,恐怕大家還是不能滿意的:

0?wx_fmt=png

微信小遊戲開發上手的文末評論

看來大家最關心的是,小遊戲該如何為自己賺錢?雖然被吐槽,不過至少大家的胃口被吊起來了,那麼究竟這個問題的答案是什麼呢?

其實這個問題答案就是沒有答案~這也是最好的答案。

為什麼這麼說呢?試想一個已經有成熟商業模式的遊戲平臺,普通開發者再入局還有機會嗎?今天微信平臺的小遊戲還沒有被大家摸透,意味著開發者的資源水平還沒有成為決定性的因素。所以今天入局的開發者仍然在同一條起跑線上,都有機會摸到小遊戲玩家的甜區(Sweet Point)。

雖然沒有答案,不過我們還是可以嘗試回答幾個與此相關的問題,希望拋磚引玉。

  • 小遊戲和其他遊戲渠道的區別是什麼?

    小遊戲最大的兩大特性,就是依託於微信,以及即點即玩。

    第一篇文章我列舉了小遊戲的五大入口:

    1. 群或好友分享

    2. 識別小遊戲二維碼

    3. 微信聊天列表頁面下拉後出現最近玩過的小遊戲

    4. 發現 - 小程式

    5. 發現 - 遊戲 - 我的小遊戲

    可以說,在微信內部小遊戲有很多曝光的機會,這種曝光並不是靠推送的方式,而是使用者的主動發現、分享。這應該也是微信在做小程式/小遊戲的重要思路:不干擾使用者,但鼓勵使用者之間的分享,也讓使用者在需要的時候很輕鬆得找到自己需要的內容。這與傳統的使用者從 App Store 或某些渠道中找到遊戲並下載/體驗的方式有很大區別。

    即點即玩是小遊戲繼承自 HTML5 遊戲的體驗,我們在已釋出的遊戲中看到了很多點選分享連結直接進入遊戲的無縫體驗。這會很大程度上改變小遊戲的設計,尤其是對戰、挑戰、組隊等玩法,下面是歡樂坦克大戰的組隊介面,隨時可以從微信中邀請好友:

    0?wx_fmt=png

  • 小遊戲的受眾人群有什麼特點?

    對於其他渠道來說,玩家在尋找一款遊戲時,首先你可以確定他是一個玩家。但在微信小遊戲環境下,這個假設不成立。你可以假定,通過分享連結進入你的遊戲的可能是完全沒有玩過遊戲的,比如開發者自己的父母或第一次使用手機的孩子。

    微信所帶來的流量潛能固然是非常可觀的,但如果只考慮遊戲使用者,在很大程度上轉化的效率會變得低下。這點對於遊戲設計的挑戰非常大,如果只是分享遊戲的主入口,使用者進入之後可以先通過教學還可以接受。但如果你想要設計對戰、挑戰這種直接進入遊戲某一個關卡或功能模組的體驗,就需要好好思考新手的上手門檻了。總體來說,你的遊戲體驗越直觀,就越容易將微信使用者轉化為你的玩家。

  • 小遊戲的傳播、互動有什麼特點?

    在開發小遊戲時,大家應該時刻銘記在心的是,微信是一個私密社交圈,這和 微博 / Facebook / Twitter 是有本質區別的。首先,你無法通過分享 API 分享到朋友圈,所以,廣播式的分享不可行。不過,你可以分享給好友或是群,也可以重複分享,這是一種點對點的分享模式。其次,微信中真正的爆發式傳播是通過關係網輻射式傳播的,所以如果想要最大限度利用關係網,通過遊戲樂趣促使玩家之間持續分享是成功的關鍵。

    互動上來說,玩家在玩小遊戲時,一定是非常碎片化的,這也體現在目前的小遊戲中,大多數小遊戲都是以關卡或局為單位,方便使用者隨時跳出和再進入,這種碎片化的程度甚至超過普通 HTML5 遊戲。碎片化也不止於時間,還影響到遊戲體驗,比如玩家有可能在玩某一個關卡,收到了一個好友的挑戰分享,開啟分享連結後,需要重置玩家的遊戲關卡到挑戰關卡中。這種非線性的體驗,並不是開發者所可以控制的,相反,我們認為這正是小遊戲開發者應該在遊戲設計中擁抱的。

  • 小遊戲適合什麼樣的品類?

    相信看了以上這些分析,開發者們都會有自己的想法,雖然目前小遊戲中還都是休閒和棋牌類遊戲,但是我們相信小遊戲的未來還是充滿了豐富的可能性。只要順勢而為,這裡的勢指的是微信作為私密社交圈的產品思路以及微信使用者的使用習慣,一定能夠充分發揮微信龐大使用者基數的潛能。

四、例項:用 Cocos Creator 製作第一個小遊戲

長篇大論了這麼久,可能大家又要吐槽太抽象了,一點實踐都沒有。那麼我們就來分享一個小遊戲案例,前一篇也提到遊戲引擎對於微信小遊戲開發所能提供的強有力支援,作為 Cocos Creator 的核心開發人員,自然要給大家安利一下如何使用 Cocos Creator 製作一款小遊戲(【編者注】@兩位大佬,出門右轉,交下廣告費)。

  • 第一步自然是去 www.cocos.com 官網下載最新版本的 Cocos Creator,從 1.8 版本開始,我們正式支援釋出小遊戲。

  • 安裝完成後,開啟 Cocos Creator 會開啟 Dashboard 面板,選擇新建專案,再選擇 Hello World 專案模版,設定好專案路徑就可以點選 “新建專案” 建立了。

    0?wx_fmt=png

  • 開啟專案後,可以開啟 “Scene/helloworld” 場景,感興趣的話也可以隨意進行一些修改。

    0?wx_fmt=png

  • 從選單欄找到 “Cocos Creator > 偏好設定” 選項並開啟,點選 “原生開發環境” 設定,在 WechatGame 程式路徑中設定微信開發者工具的安裝路徑,最後點選 “儲存並關閉”。

    0?wx_fmt=png

  • 從選單欄中找到 “專案 > 構建釋出…” 選項並開啟,在構建釋出面板中,選擇釋出平臺為 Wechat Game,設定裝置方向、appid、除錯模式等,最後點選構建。(目前微信尚未開放遊戲類目,大家無法獲取到小遊戲 appid,不過暫時可以使用遊客 appid:wx6ac3f5090a6b99c5)。

    0?wx_fmt=png

  • 當構建釋出面板上方的進度條走完,並顯示 sleep,則表示構建完成,此時直接點選執行即可自動調起微信開發者工具,並顯示正確的場景效果。(如果沒有自動開啟微信開發者工具,或者沒有自動開啟遊戲專案,你可以用微信開發者工具在專案路徑下的 build/wechatgame 作為專案目錄建立小遊戲體驗專案)。

    0?wx_fmt=png

  • 這樣就算是完成了小遊戲的釋出,當然,使用 Cocos Creator 製作遊戲的知識這裡無法覆蓋,還請移步官網文件:http://docs.cocos.com/creator/manual/zh/。

五、總結

系列文章的第二篇給各位總結了小遊戲提供的微信 API 能力,以及如何利用這些能力。也從我們的理解角度分析了微信小遊戲環境的獨特性,希望能夠拋磚引玉,激發開發者的想象力,找到最適合微信平臺的遊戲設計。

作者簡介:

凌華彬,Cocos Creator 主程、Game Jamer、玩家,曾負責 Cocos2d-JS、熱更新框架、JSB 框架,現在主要在負責小遊戲釋出流程、Cocos Creator 引擎新渲染器架構。

王哲,Cocos 引擎創始人、首席客服。

————— 推薦閱讀 —————

點選圖片即可閱讀

640?wx_fmt=jpeg

640?wx_fmt=jpeg

640?wx_fmt=jpeg0?wx_fmt=gif