如何使用Phaser.js創建平台遊戲
在這個教程中,我將使用Phaser.js創建一個平台遊戲。
玩家可以使用左/右箭頭鍵移動,使用上箭頭鍵跳躍。目標是收集遊戲中的所有星星:
當玩家收集到所有星星時,我們將在頂部顯示“遊戲結束”,然後沒有其他操作。
雖然這非常簡單,但這是開始一個非常有趣的遊戲的開始,並且這也是展示Phaser以及JavaScript作為遊戲創作編程語言的絕佳方式。
設置專案
創建一個空文件夾,然後運行以下命令:
1 | npm init -y |
這將初始化一個最小的’package.json’文件。
然後運行以下命令:
1 | npm install phaser |
如果尚未安裝Parcel,請運行以下命令:
1 | npm install -g parcel-bundler |
現在創建一個’app.js’文件,然後運行:
1 | parcel watch app.js |
這將告訴Parcel在’dist/app.js’文件中構建我們的遊戲。
創建一個’index.html’文件,內容如下:
1 | <!DOCTYPE html> |
安裝’browser-sync’以運行包含此文件夾內容的HTTP服務器:
1 | npm install -g browser-sync |
然後運行以下命令:
1 | browser-sync start --server --files "." |
以上命令會觀察當前文件夾(以及所有子文件夾)中的所有文件的變化,並在端口3000上啟動一個Web服務器,自動打開一個瀏覽器窗口以連接到服務器。
每次更改文件,瀏覽器都會刷新,因此我們可以更快地進行開發。
太好了!我們可以開始了。
初始化Phaser
打開’app.js’並編寫以下代碼:
1 | import Phaser from 'phaser' |
讓我們添加一個最小的配置:
1 | const config = { |
現在創建3個函數’preload()’、’create()’和’update()’:
1 | function preload() { |
添加藝術品
我稱之為“藝術品”,但它是我創建的,是你能找到的最醜的藝術品。
但是對於我們簡單的遊戲來說是可以的。下載那些文件並保存為:
ground.png
island.png
player.png
star.png
在創建一個“assets”文件夾,將它們放在其中。
創建一個畫布
現在回到’app.js’。
我們首先要做的是在’preload()’中加載資源:
1 | function preload() { |
我們為每個資源分配一個標籤。前三個使用’this.load.image()’加載,最後一個使用’this.load.spritesheet()’,因為該圖像包含多個小圖像,我們將用它們來繪製角色動畫。
因此,我們還必須設置精靈表中每個圖像的尺寸(32x48像素)。
創建平台
現在來創建平台。
我們將創建一個新的物理靜態組來保存它們,因為它們是靜止的對象。
1 | let platforms = this.physics.add.staticGroup() |
然後我們添加地面:
1 | platforms.create(400, 588, "ground") |
還有5個島:
1 | platforms.create(600, 450, "island") |
這些數字表示2D空間中相對於左上角的X和Y坐標,並且參照每個圖像的中心。
這是您此時應該看到的畫面:
添加玩家
現在讓我們添加玩家。
在文件的頂部,在任何函數之外創建一個名為’player’的變量:
1 | let player |
然後在’create()’中,將其添加到屏幕底部的中間:
1 | player = this.physics.add.sprite(380, 500, "player") |
我們設置一個小的彈跳效果:
1 | player.setBounce(0.2) |
這樣它就能在放到屏幕上之後迅速停止彈跳,並且我們設置它不能超出屏幕範圍:
1 | player.setCollideWorldBounds(true) |
這樣它就會出現,彈跳幾下後就會停在屏幕底部。
然而,我們希望玩家能停在地面上方。
我們可以通過在玩家和平台之間添加一個碰撞規則來實現這一點:
1 | this.physics.add.collider(player, platforms) |
這樣,玩家不僅會站在地面上,還會停在屏幕上漂浮的其他5個島上。
使玩家移動
現在讓我們使玩家移動。
在文件的頂部,在’player’聲明附近添加一個變量:
1 | let cursors |
然後在’create()’中添加以下代碼:
1 | cursors = this.input.keyboard.createCursorKeys() |
以允許訪問鍵盤事件。
現在在現在是空的’update()’函數中,我們要檢查此變量:
1 | function update() { |
‘update()’由遊戲循環連續調用,因此每當有一個鍵被按下,我們就在X軸上更改玩家的速度。如果沒有按下鍵,則將其設置為保持靜止。
使玩家動畫
現在讓我們在移動時使玩家圖像改變。
在’create()’中,我們創建了3個動畫:當玩家靜止,向左移動時,向右移動時:
1 | this.anims.create({ |
‘still’並不是真正的動畫,因為它只有一個幀。但’left’和’right’各由4個幀組成,並且它們被無限重複以模擬走路。
現在我們需要在’update()’中激活這些動畫:
1 | function update() { |
‘left’和’right’的’true’參數設置了動畫循環。
跳躍
為了讓玩家能夠跳躍,在’update()’中添加以下代碼:
1 | if (cursors.up.isDown && player.body.touching.down) { |
每當玩家站在底部(’player.body.touching.down’)並按下上箭頭時,我們就向上推它。重力會模擬類似於我們在現實世界中做的跳躍。
添加星星
現在讓我們將星星添加到屏幕中。
我們通過創建一個物理組來添加8個星星,並且使它們與平台碰撞,這樣它們就會停在平台上:
1 | let stars = this.physics.add.group() |
允許玩家收集星星
為了讓玩家收集星星,我們將在’create()’中添加一個碰撞檢測的物理效果,當玩家接觸到一顆星星時觸發:
1 | this.physics.add.overlap(player, stars, (player, star) => {}, null, this) |
當這種情況發生時,我們將隱藏星星:
1 | this.physics.add.overlap( |
讓我們創建一個星星計數器。當收集到一顆星星時,我們將其進行增加:
1 | let score = 0 |
我們可以在屏幕上方顯示它:
1 | let score = 0 |
完成!我們的小遊戲可以運行了!
tags: [“phaser”, “platform game”, “JavaScript”, “game development”, “tutorial”]