天天看點

h5+js調取相機做取景框_Phaser.js開發小遊戲之Phaser.js介紹

h5+js調取相機做取景框_Phaser.js開發小遊戲之Phaser.js介紹

曆史

在 

canvas

 還沒出現之前,基本上浏覽器上的小遊戲都是用 

Flash

 開發的,

Flash

 大家知道現在浏覽器已經開始抛棄它了,主要原因是安全和性能問題。但是在 2014 年之前,基本上所有的頁遊(包括現在的一部分)都是用 

Flash

 開發的。

還有一些用 

原生JavaScript

 或者 

jQuery

 開發的遊戲項目就是操作 

DOM

了,大家也知道操作 

DOM

 性能很不好,是以大家對用 

JavaScript

 開發遊戲并不是很感興趣。

我記得大概是從 2014 年開始,移動端越來越受歡迎了,

canvas

 在移動端的優勢就展現出來了,當初幾個很火的小遊戲:神經貓、2048、微信打飛機...開始走向各個廠商和開發人員的眼中了,同時越來越多的 H5 遊戲架構如雨後春筍般一個個地冒出來,連 

Pixi.js

 這種本來不是做遊戲開發的架構都歸納到 H5 遊戲架構中了,可見當時的風光。

到了 2020 年,經過市場的洗禮,基本上 H5 遊戲架構也穩定下來了,比如 Phaser.js、白鹭、cocos2d-js、Three.js、Createjs、Babylon.js...基本上 2D、3D的遊戲業務需求都可以滿足。

可見 H5 端的遊戲隻會越來越豐富,應用場景也會越來越複雜,現在還有 

WMS

 開發 3D 遊戲...

h5+js調取相機做取景框_Phaser.js開發小遊戲之Phaser.js介紹

為什麼選擇 Phaser.js

我選擇 

Phaser.js

 主要是出于以下的一些原因:

  • 非常流行,在國内外都有很多開發人員推薦
  • 支援 

    JS

     和 

    TS

  • 支援 

    Canvas

     和 

    WebGL

     模式切換
  • 定位很明确,主要針對 PC 和 H5 遊戲開發
  • 文檔非常完善,案例豐富(英文文檔内容豐富)
  • 持續更新,到現在是 Phaser 3。隻有持續維護更新才會更吸引人

相對而言,

Phaser.js

 的上手是非常友善的

h5+js調取相機做取景框_Phaser.js開發小遊戲之Phaser.js介紹

開發過程中的感想

第一點:上手簡單

隻需要有 

JavaScript

 開發經驗,在項目中引用 

phaser.js

 檔案,不需要做其他處理了,一個小遊戲的開發 100 行左右就可以解決,當然,複雜的遊戲工作量肯定就不小了。

如果沒有過 H5 遊戲開發經驗的前端人員,對 

JavaScript

 比較熟悉的話,不超過一個星期就可以掌握,獨立開發小遊戲了。

第二點:文檔和案例完善

Phaser 3 API 裡面對 

API

 的介紹非常完善,基本上每個類和API 都有很詳細的說明,如果要下載下傳離線的就要到 phaser3-docs 下載下傳下來然後到 

/docs

 目錄中輕按兩下 

index.html

 檔案打開

h5+js調取相機做取景框_Phaser.js開發小遊戲之Phaser.js介紹
h5+js調取相機做取景框_Phaser.js開發小遊戲之Phaser.js介紹

案例 裡面有非常豐富并且容易上手的案例,有的可以直接線上編譯,有的還是需要下載下傳才能看,官方直接提供了案例的下載下傳包 phaser3-examples

第三點:上手案例為中文

上手的第一個案例已經被翻譯為中文了,裡面的内容和步驟對新手而言完全就是非常簡單

點選檢視原文檢視文中連結

繼續閱讀