Canvas和WebGL，一個有趣、免費和快速的開源H5游戲框架—Phaser（h5游戲開發(fā)框架）
介紹
Phaser是一個有趣，免費和快速的2D游戲框架，用于制作桌面和移動web瀏覽器的HTML5游戲，支持Canvas和WebGL渲染。游戲可以通過第三方工具編譯到iOS, Android和本地應(yīng)用?？梢允褂肑avaScript或TypeScript進行開發(fā)。
Github
https://github.com/photonstorm/phaser
特性
除了出色的開源社區(qū)，Phaser也由 Photon Storm積極開發(fā)和維護。由于其快速的支持和開發(fā)者友好的API, Phaser目前是GitHub上最受歡迎的游戲框架之一。
- WebGL和Canvas支持
Phaser在內(nèi)部同時使用Canvas和WebGL渲染器，并且可以根據(jù)瀏覽器支持在它們之間自動交換。這允許在桌面和移動設(shè)備上快速渲染
- 預(yù)加載
將資產(chǎn)的加載簡化為一行代碼。圖像、聲音、Sprite Sheets、Tilemaps、JSON數(shù)據(jù)、XML—所有這些都會自動解析和處理，隨時可以在游戲中使用，并存儲在一個全局緩存中供游戲?qū)ο蠊蚕怼?/p>
- 物理系統(tǒng)
Phaser支持3個物理系統(tǒng)：Arcade physics，一個非常輕的AABB庫，非常適合低功耗設(shè)備。Matter.js提供彈性和更高級的支持
- Sprites
Sprites是游戲的生命之血。定位它們，在它們之間，旋轉(zhuǎn)它們，縮放它們，為它們設(shè)置動畫，碰撞它們，將它們繪制到自定義紋理上等等。Sprites也有完全的輸入支持：點擊他們，觸摸他們，拖動他們，捕捉他們-甚至像素完美的點擊檢測
- 分組
將大量的Sprites組合在一起，以便于共享和回收，避免不斷地創(chuàng)建對象。分組也可以發(fā)生沖突：例如，一個“子彈”組檢查與“外星人”組的沖突，并使用自定義的沖突回調(diào)來處理結(jié)果。
- 動畫
Phaser支持具有固定幀大小的經(jīng)典Sprite Sheets以及幾種常見的紋理圖集格式，包括texture Packer、Starling和Unity YAML。所有這些都可以用來輕松地創(chuàng)建動畫。
- 粒子
粒子系統(tǒng)是內(nèi)置的，它允許你輕松地創(chuàng)建有趣的粒子效果。創(chuàng)建爆炸或持續(xù)的流效果，如雨或火?；蛘邔l(fā)射器附加到精靈上以獲得噴射軌跡。
- 攝像頭
具有先進的多攝像頭支持。輕松創(chuàng)建額外的攝像頭，然后在屏幕上的任何位置定位和縮放它們。相機可以滾動，也有特殊效果，如震動，閃光和褪色。四處搖攝，輕松跟隨精靈。
- 輸入系統(tǒng)
如果鼠標不停地在屏幕上切換，即使是鼠標也無法切換。觸摸，鼠標，鍵盤，游戲板和許多有用的功能，讓你可以制作任何你需要的輸入系統(tǒng)
- 音頻系統(tǒng)
Phaser同時支持Web音頻和傳統(tǒng)HTML音頻。
- tilemap
Phaser只需幾行代碼就可以加載、渲染和與tilemap相沖突。我們、、支持多個平鋪層的CSV和平鋪地圖數(shù)據(jù)格式。有很多強大的圖塊操作功能：交換、替換、刪除、添加和實時更新地圖
- 設(shè)備縮放
Phaser 2有一個內(nèi)置的縮放管理器，允許你縮放你的游戲，以適應(yīng)任何大小的屏幕。控制寬高比、最小和最大刻度以及全屏支持（即將推出Phaser 3）
- 插件系統(tǒng)
可以利用插件來解決一些基本問題之外的問題
- 移動瀏覽器
Phaser是專門為移動web瀏覽器而構(gòu)建的。當然，它在桌面上運行的速度也非?？?！
如何使用
npm install phaser
或者使用cdn
- 示例
<!DOCTYPE html><html><head> <script src="./dist/phaser-arcade-physics.min.js"></script> </head><body> <script></script></body></html>
var config = { type: Phaser.AUTO, width: 800, height: 600, physics: { default: 'arcade', arcade: { gravity: { y: 200 } } }, scene: { preload: preload, create: create }};var game = new Phaser.Game(config);function preload (){ this.load.setBaseURL('http://***'); this.load.image('sky', 'assets/skies/space3.png'); this.load.image('logo', 'assets/sprites/phaser3-logo.png'); this.load.image('red', 'assets/particles/red.png');}function create (){ this.add.image(400, 300, 'sky'); var particles = this.add.particles('red'); var emitter = particles.createEmitter({ speed: 100, scale: { start: 1, end: 0 }, blendMode: 'ADD' }); var logo = this.physics.add.image(400, 100, 'logo'); logo.setVelocity(100, 200); logo.setBounce(1, 1); logo.setCollideWorldBounds(true); emitter.startFollow(logo);}
總結(jié)
Phaser是一個非常強大的2D游戲引擎框架，感興趣的小伙伴不要錯過啦！
