支付寶小遊戲調研

advence-liz發表於2019-06-04
遊戲

小遊戲調研

最近對小遊戲進行了一些調研，主要分三個維度進行

  • h5小遊戲
  • 微信小遊戲
  • 微信小程式，支付寶小程式開發小遊戲

h5小遊戲

引用H5遊戲開發：遊戲引擎入門推薦部分內容

現在的 H5 遊戲渲染方式一般有 2D 渲染、3D 渲染、VR 渲染三種。 而 2D 渲染一般也有三種：Dom 渲染、Canvas 渲染、WebGL 渲染。Dom 由於效能原因，一般只適合做一些動畫效果較少，互動較少的小遊戲，本文主要針對 Canvas 和 WebGL 展開介紹。 一般來說，對於 2D 小遊戲來說，Canvas 渲染已經足夠。然而 Canvas 渲染由於底層封裝層次多，不足以支撐起大型遊戲的效能要求，因此大型遊戲最好選擇 WebGL 渲染或者瀏覽器內嵌 Runtime 。

基於我們現在需求我們把重點放在canvas上就ok了，不出意外的話我們只要用canvas開發2D小遊戲即可

遊戲引擎

世面上的遊戲引擎還是蠻多的，但是現在畢竟微信小遊戲炙手可熱所以我們重心放在支援微信小遊戲的遊戲引擎就好，那我們的選擇就變成了三個,根據HTML5遊戲引擎深度測評的據 Egret佔有h5小遊戲開發的半壁江山所以我們要是選擇一個遊戲引擎的話可能更傾向於Egret

遊戲引擎與物理引擎

這裡簡單說一下個人理解，現在遊戲引擎基本都是可以稱為一個遊戲解決方案提供開發到打包各個流程的方案，遊戲引擎中一般都會包涵物理引擎，而物理引擎就是模擬真實世界中各種物體運動的規律來運動，讓你不需要專業的知識就可以做出各種酷炫的效果。 目前應用最廣泛的js 2D物理引擎應該就是matterjs，matterjs實測在h5和微信小遊戲中都是OK的但是在小程式中我沒有成功接入

微信小遊戲

微信小遊戲也是基於canvas技術棧，也就是說語法成面暴露給我們的API是canvas,然後微信官方實現了一個weapp-adapter（因為微信小程式中沒有DOM API所以要加這麼一層適配）這樣可以讓h5小遊戲和微信小遊戲共用一套程式碼

微信小遊戲和小程式的區別

引用微信小遊戲開發總結

小遊戲是小程式的一個類目，小遊戲是微信開放給小程式的更多的能力，讓小程式開發者有了開發遊戲的能力。小遊戲沒有WXSS、WXML、多頁面等內容，但加了一些渲染、檔案系統以及後臺多執行緒的功能。 小遊戲的執行環境是小程式環境的擴充套件，基本思路也是封裝必要的 WEB 介面提供給使用者，儘可能追求和 WEB 同樣的開發體驗。小遊戲在小程式環境的基礎上提供了 WebGL 介面的封裝，使得渲染能力和效能有了大幅度提升。不過由於這些介面都是微信團隊通過自研的原生實現封裝的，所以並不可以等同為瀏覽器環境。

小遊戲的執行環境在 iOS 上是 JavaScriptCore（注：webkit的一個重要組成部分，主要是對JS進行解析和提供執行環境。），在 Android 上是 V8 （這個不用多說Node.js目前使用的就是V8）。但是兩個都沒有 BOM 和 DOM 的執行環境，沒有全域性的 document 和 window 物件。

微信小遊戲小程式對比

微信小程式和支付寶小程式開發小遊戲

因為小程式中也支援canvas API，所以在小程式中我們也有能力用canvas技術棧開發小遊戲，但是能力弱於微信小遊戲，在微信小遊戲中可以整合遊戲引擎或者物理引擎，但是在小程式中我沒有發現可以整合的遊戲引擎或者物理引擎，網上並沒有找到類似的資料。

canvas 開發小遊戲

綜上來看無論是開發h5小遊戲，微信小遊戲，還是小程式小遊戲，都是使用canvas技術棧，如果直接用canvas開發小遊戲那麼就要求你對canvas API和 canvas開發動畫的基本套路有一定的瞭解，並沒有發現什麼發現什麼捷徑， 所以這時候自然而然就會想有沒有什麼canvas 庫可以使用，可是要是搜尋h5 canvas 庫那可以選擇的餘地可真的是有點多,最終我把範圍縮減到兩個並且都是國人出品，最主要的原因是這兩個庫是支援微信小程式和小遊戲，很遺憾的是並不支援支付寶小程式

example

總結

彙總一下現有成果基本都卡在支付寶小程式上，一個人檢索資訊能力有限，期望大家能發現支援支付寶小程式的canvas庫，物理引擎

  • h5小遊戲，微信小遊戲，微信小程式小遊戲，支付寶小程式小遊戲都是使用 canvas技術棧，所以canvas是必答題必須要有一定的熟練度
  • 微信小遊戲有遊戲引擎可以整合，而微信小程式和支付寶小程式不成
  • 微信小遊戲和微信小程式有canvas庫可用，而支付寶小程式不成

參考

相關文章