建立一個現代化的項目,並開始使用Phaser 3構建JavaScript HTML5遊戲
Phaser是一個了不起的平台,它使創建遊戲變得非常簡單,還支持物理引擎。它足夠受歡迎,你可以找到插件和工具來更好地構建遊戲並更快地構建遊戲。
它基於HTML5技術,這意味著您可以通過Web進行遊戲分發,並且如果需要,也可以將其打包為桌面或移動應用程序。
遊戲編程是一個大的主題,在這個介紹中,我想談談基本知識,這些基本知識足以創建簡單的遊戲。
在這個教程中,我想詳細介紹一個最佳設置,以使用Phaser 3構建遊戲。
讓我們在文件夾中使用npm安裝phaser
:
npm init -y
npm install phaser
現在讓我們設置 Parcel 來打包我們的遊戲:
npm install -g parcel-bundler
現在創建一個 game.js
文件,內容如下:
import Phaser from 'phaser'
new Phaser.Game()
現在運行
parcel watch game.js
Parcel將在 dist/game.js
文件中生成我們的JavaScript代碼。
現在創建一個 index.html
文件,內容如下:
<!DOCTYPE html>
<html>
<head>
<script src="./dist/game.js"></script>
</head>
</html>
安裝 browser-sync
以運行一個包含這個文件夾內容的HTTP服務器:
npm install -g browser-sync
然後運行
browser-sync start --server --files "."
上述命令將監視當前文件夾(和所有子文件夾)中的所有文件的變化,并在端口3000上啟動一個Web服務器,自動打開一個瀏覽器窗口連接到服務器。
每次您更改文件時,瀏覽器將自動刷新。
在我們原型開發遊戲時,這將非常有用。
您現在應該在瀏覽器中看到一個空白屏幕,因為我們初始化了Phaser:
import Phaser from 'phaser'
new Phaser.Game()
但是什麼都沒有發生。
將以下代碼複製到 game.js
中:
import Phaser from 'phaser'
function preload() {
this.load.setBaseURL('http://labs.phaser.io')
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')
const particles = this.add.particles('red')
const emitter = particles.createEmitter({
speed: 100,
scale: { start: 1, end: 0 },
blendMode: 'ADD'
})
const logo = this.physics.add.image(400, 100, 'logo')
logo.setVelocity(100, 200)
logo.setBounce(1, 1)
logo.setCollideWorldBounds(true)
emitter.startFollow(logo)
}
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 200 }
}
},
scene: {
preload: preload,
create: create
}
}
const game = new Phaser.Game(config)
注意:您可以從https://github.com/photonstorm/phaser3-examples/tree/master/public/assets下載這些資源。
然後您應該很快就會在瀏覽器中看到Phaser示例應用程序運行:
這是Phaser系列的介紹帖子。查看其他帖子。