支付寶小遊戲調研

小遊戲調研

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

• 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

• Cocos
• Egretindex.html
• LayaBox

遊戲引擎與物理引擎

這裏簡單說一下我的理解，如今遊戲引擎基本都是能夠稱爲一個遊戲解決方案提供開發到打包各個流程的方案，遊戲引擎中通常都會包涵物理引擎，而物理引擎就是模擬真實世界中各類物體運動的規律來運動，讓你不須要專業的知識就能夠作出各類酷炫的效果。 目前應用最普遍的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 庫那能夠選擇的餘地可真的是有點多,最終我把範圍縮減到兩個而且都是國人出品，最主要的緣由是這兩個庫是支持微信小程序和小遊戲，很遺憾的是並不支持支付寶小程序

• canvas 動畫基本步驟
• spritejs
• cax

example

• 微信小遊戲微信小遊戲官方DEMO作了簡單的改造加入h5打包流程也是證實了微信小遊戲和h5小遊戲用一套代碼
• 微信小遊戲中引入matterjs 兼容微信h5
• 微信小程序小遊戲在微信小程序中用canvas 寫的小遊戲
• 支付寶小程序小遊戲將微信小程序的中的代碼改造遷移到支付寶中

總結

彙總一下現有成果基本都卡在支付寶小程序上，一我的檢索信息能力有限，指望你們能發現支持支付寶小程序的canvas庫，物理引擎

• h5小遊戲，微信小遊戲，微信小程序小遊戲，支付寶小程序小遊戲都是使用 canvas技術棧，因此canvas是必答題必需要有必定的熟練度
• 微信小遊戲有遊戲引擎能夠集成，而微信小程序和支付寶小程序不成
• 微信小遊戲和微信小程序有canvas庫可用，而支付寶小程序不成

參考

• h5 遊戲開發遊戲引擎入門推薦
• h5 遊戲引擎深度測評
• 如何開發一個簡單的 canvas小遊戲
• canvas 最佳實踐 性能篇
• react-canvas
• 也許DOM不是答案
• 微信小遊戲開發總結
• 微信小程序 canvas API 整理
• canvas API MDN
• canvas API檔地圖
• pixi
• 不一樣瀏覽器內核的差別以及瀏覽器渲染簡介
• 開發者如何抓住微信小遊戲的瘋狂？挺Cocos創始人王哲詳解
• spritejs star 2888
• cax star 1457
• matter.js 2D 物理引擎試玩報告
• spritejs canvas 動畫從未如此簡單
• 從零開始製做微信小遊戲 canvas 加物理引擎 matter.js
• mater 指南
• 支付寶小程序架構全解析