What is Phaser?
Phaser is an HTML 5 game framework in which you can make cross-browser games. The only requirement is that your browser should support the canvas tag.
As we all know, “Gaming Industry” is growing faster day by day and Phaser is one of the best ways to achieve what time demands. Anyone with the basic knowledge of coding can start working with Phaser.
Basic requirement to start with Phaser3.
We need IDE to write code, local web server to run the program and latest version of Phaser3
Picking an IDE
You’re going to need an editor for preparing your JavaScript code.
There are many options available like Sublime Text, Visual Studio Code or you can use notepad / notepad++.
There are different options available for local servers like WAMP, XAMPP and MAMP server.
Downloading Phaser
Phaser is an open source project and you can download it for free.
You can download with following command in terminal
NPM
npm install phaser@3.55.2
You can also use CDN
CDN
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script> <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
You can download js file or whole zip file to start your work
Downloading file
Click on the Phaser to download.
Our folder structure would look like this.
Assets folder will include Images & Spritesheet.
Sounds folder contain Audio files which we are using in the game.
index.html file is where our main html code and we are using Phaser.min.js for phaser.
How to load Assets?
Phaser will automatically look for the “preload” function at the starting. It will load anything defined inside preload().
You need to load your assets in the preload function.
How to load an image in Phaser 3?
Syntax to load an image :
this.load.image("Key_Name',’path_of_the_image’);
Let’s see Example
function preload ()
{
this.load.image('space', 'assets/blue-space-bg.png');
this.load.image('star', 'assets/star.png');
}
How to load sound in Phaser 3?
Syntax to load sound :
this.load.audio("Key_Name',’path_of_the_sound’);
function preload ()
{
this.load.audio('default', 'sounds/default-sound.mp3');
}
How to display your assets in Phaser 3?
In the last steps we learned how to load your assets but to display this asset we need to use another function which is the “create” function.
How to display images in Phaser 3?
Syntax To display image :
function preload ()
{
this.add.image(X_Position, Y_Position, "Key_Name');
}
Let’s see example
function create ()
{
this.add.image(400, 300, 'space');
}
Similarly we can load sprite image and Sound,
Let’s see example of covering sound, image and Spritesheet
To load all the assets we will do something like this.
function preload ()
{
this.load.image('space', 'assets/blue-space-bg.png');
this.load.spritesheet('dude','assets/dude-2.png',
{ frameWidth: 32, frameHeight: 48 });
this.load.audio('default', 'sounds/default-sound.mp3');
}
To display this loaded assets let’s see our create function
function create ()
{
this.add.image(400, 300, 'space');
Var music = this.sound.add(‘default’);
music.play();
music.loop = true;
this.anims.create ({
key:'left',
frames:this.anims.generateFrameNumbers('dude',{start:0, end:3 } ),
frameRate:10,
repeat:-1
});
this.anims.create ({
key:'center',
frames:[{ key: 'dude', frame:4 }],
frameRate:20
});
this.anims.create ({
key:'right',
frames:this.anims.generateFrameNumbers('dude', { start:5, end:8 } ),
frameRate:10,
repeat:-1
});
cursors = this.input.keyboard.createCursorKeys();
}
Creating a world for our game.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Game development in Phaser 3</title>
<script src="phaser.min.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
scale:{
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
width: 800,
height: 600
},
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
var platforms;
var player;
var music;
function preload() {
this.load.image('space', 'assets/blue-space-bg.png');
this.load.image('platform', 'assets/blue-platform.png');
this.load.image('ground', 'assets/base-platform.png');
this.load.audio('default', 'sounds/default-sound.mp3')
this.load.spritesheet('dude', 'assets/dude-2.png', { frameWidth: 32, frameHeight: 48 });
}
function create() {
this.add.image(400, 300, 'space');
// background music added to the game
music = this.sound.add('default');
music.play();
music.loop = true;
platforms = this.physics.add.staticGroup();
platforms.create(400, 568, 'ground').setScale(2).refreshBody();
platforms.create(640, 400, 'platform');
platforms.create(50, 300, 'platform');
platforms.create(700, 200, 'platform');
// Adding Player sprite image to the screen
player = this.physics.add.sprite(320, 450, 'dude');
// Player physics properties. Give the little guy a slight bounce.
player.setBounce(0.2);
player.setCollideWorldBounds(true);
// Our player animations, turning, walking left and walking right.
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'turn',
frames: [ { key: 'dude', frame: 4 } ],
frameRate: 20
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
frameRate: 10,
repeat: -1
});
// Input Events
cursors = this.input.keyboard.createCursorKeys();
// Collide the player and the platforms
this.physics.add.collider(player, platforms);
}
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('turn');
}
if (cursors.up.isDown && player.body.touching.down)
{
player.setVelocityY(-330);
}
}
</script>
</body>
</html>
Output
Here is the link for the above example: Webprojects
Conclusion
Hope this blog will be helpful for starting work in Phaser 3.
There will be more blogs on Phaser 3 and we will complete this game in the next few blogs.
You may also like
Top Laravel Development Companies in India to Watch Out For in 2024
Today’s modern-day consumers demand aesthetically pleasing...
Laravel 11: Suite of New Features Unlocked!
Web application development is at an all time high. And, so is the PhP framework giant- Laravel. Wit...
Why Your Business Need to Hire a Professional Web Development Company?
Businesses of all walks and sizes hinge on web development c...
