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