In this tutorial, we will be using Phaser.js to create a platform game. The objective of the game is for the player to move around, collect stars, and reach the end. Let’s get started!
Setup the Project
To begin, make sure you have an empty folder and run the following commands:
npm init -y
This will initialize a minimal package.json
file for your project. Then, install Phaser by running:
npm install phaser
If you haven’t already, install Parcel (a bundler) by running:
npm install -g parcel-bundler
Create an app.js
file and run the following command:
parcel watch app.js
This command will tell Parcel to build your game in the dist/app.js
file.
Next, create an index.html
file with the following content:
<!DOCTYPE html>
<html>
<head>
<script src="./dist/app.js"></script>
</head>
</html>
To run an HTTP server with the content of the folder, install browser-sync
by running:
npm install -g browser-sync
Then, run the following command:
browser-sync start --server --files "."
This will launch a web server on port 3000 and automatically open a browser window to connect to the server. Anytime you make changes to your files, the browser will refresh, making the development process faster.
Initialize Phaser
Open the app.js
file and import Phaser:
import Phaser from 'phaser'
Add the following minimal configuration to create a game:
const config = {
width: 800,
height: 600,
backgroundColor: 0xffffff,
scene: {
preload,
create,
update
},
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
}
}
const game = new Phaser.Game(config)
Now, let’s create the necessary functions: preload()
, create()
, and update()
:
function preload() {
// Preload assets here
}
function create() {
// Create game elements here
}
function update() {
// Update game logic here
}
Add the Artwork
Download the following image files and save them in an assets
folder:
Now, load the assets in the preload()
function:
function preload() {
this.load.image('ground', 'assets/ground.png')
this.load.image('island', 'assets/island.png')
this.load.image('star', 'assets/star.png')
this.load.spritesheet('player', 'assets/player.png', {
frameWidth: 32,
frameHeight: 48
})
}
Create the Platforms
We will create platforms for the player to stand on. Add the following code to the create()
function:
let platforms = this.physics.add.staticGroup()
platforms.create(400, 588, "ground")
platforms.create(600, 450, "island")
platforms.create(50, 250, "island")
platforms.create(650, 220, "island")
platforms.create(250, 520, "island")
platforms.create(250, 320, "island")
Add the Player
Next, let’s add the player character. Declare a variable called player
outside any function at the top of the file:
let player
In the create()
function, add the following code to create and set up the player:
player = this.physics.add.sprite(380, 500, "player")
player.setBounce(0.2)
player.setCollideWorldBounds(true)
this.physics.add.collider(player, platforms)
Make the Player Move
To allow the player to move, add the following code to the update()
function:
function update() {
if (cursors.left.isDown) {
player.setVelocityX(-160)
} else if (cursors.right.isDown) {
player.setVelocityX(160)
} else {
player.setVelocityX(0)
}
}
Animate the Player
Now it’s time to make the player’s image change when it’s moving. In the create()
function, add the following code to create animations for the player:
this.anims.create({
key: 'still',
frames: [{ key: 'player', frame: 4 }],
frameRate: 20
})
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
})
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('player', { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
})
Then, in the update()
function, update the code as follows:
function update() {
if (cursors.left.isDown) {
player.setVelocityX(-160)
player.anims.play('left', true)
} else if (cursors.right.isDown) {
player.setVelocityX(160)
player.anims.play('right', true)
} else {
player.setVelocityX(0)
player.anims.play('still')
}
}
Jump
To enable the player to jump, add the following code to the update()
function:
if (cursors.up.isDown && player.body.touching.down) {
player.setVelocityY(-330)
}
Add the Stars
Let’s add stars for the player to collect. In the create()
function, add the following code:
let stars = this.physics.add.group()
stars.create(22, 0, "star")
stars.create(122, 0, "star")
stars.create(222, 0, "star")
stars.create(322, 0, "star")
stars.create(422, 0, "star")
stars.create(522, 0, "star")
stars.create(622, 0, "star")
stars.create(722, 0, "star")
this.physics.add.collider(stars, platforms)
Allow the Player to Collect Stars
To enable the player to collect stars, update the create()
function as follows:
let score = 0
let scoreText = this.add.text(16, 16, "Stars: 0", {
fontSize: "32px",
fill: "#000",
})
this.physics.add.overlap(
player,
stars,
(player, star) => {
star.disableBody(true, true)
score += 1
scoreText.setText("Stars: " + score)
},
null,
this
)
That’s it! You have created a platform game using Phaser.js. Have fun expanding on this foundation and adding more features to create your own unique game.