Episode 3: Getting Started with Phaser

admin Episodes

As I mentioned before, I had no idea how to use a framework or build a proper game heading into this. In the past I’d just aimlessly start coding a random feature until it was sort of working, then I’d move on to another random feature. I had no strategy, no direction, and no plan.

This time was different – I had a framework, I had examples, and I had documentation. So I started by trying to get Phaser to do some useful stuff.

The Basics

First I learned how to add Phaser to my code…

1
2
3
4
5
6
// Create the game object
var game = new Phaser.Game(800, 600, Phaser.AUTO, null, {
  preload: preload,
  create: create,
  update: update
});

Then I learned how to load a sprite…

1
2
3
4
// Preload image asset
function preload() {
  game.load.image('ship', 'ship.png');
}

And draw it to the screen…

1
2
3
4
// Create in-game objects
function create() {
  var player = Game.add.sprite(400, 300, 'ship');
}

Then I learned how to add controls…

1
2
3
4
// Create keyboard cursor objects
function create() {
  var cursors = game.input.keyboard.createCursorKeys();
}

And move the player…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Detect input from the user and update in-game objects
function update() {
  // Reset movement
  player.body.velocity.x = 0;
  player.body.velocity.y = 0;
 
  // Check if we should move left or right
  if (cursors.left.isDown) {
    player.body.velocity.x = -25;
  } else if (cursors.right.isDown) {
    player.body.velocity.x = 25;
  }
 
  // Check if we should move up or down
  if (cursors.up.isDown) {
    player.body.velocity.y = -25;
  } else if (cursors.down.isDown) {
    player.body.velocity.y = 25;
  }
}

I learned how to prevent the player from leaving the screen…

1
2
3
4
// Enable physics and boundaries
game.physics.startSystem(Phaser.Physics.ARCADE);
game.physics.arcade.enable(player);
player.body.collideWorldBounds = true;

Or kill the them when they leave the screen…

1
2
3
// Disable boundaries and kill the player when they leave the screen
player.body.collideWorldBounds = false;
player.outOfBoundsKill = true;

At this point I was feeling really good about the whole framework thing. Rather than trying to figure out how to write code that would draw and move stuff, I was just drawing and moving stuff. It was empowering.

After spending a few days playing around with sprites, I tried adding music and sound effects…

1
2
3
4
5
6
7
8
9
10
// Preload music asset
function preload() {
  game.load.audio('music', 'music.mp3');
}
 
// Create and play music object
function create() {
  var music = game.add.audio('music');
  music.play();
}

And text too.

1
2
// Create a text object
var text = game.add.text(10, 10, 'A BUNCH OF TEXT', { fontSize: '20px', fill: '#ffffff' });

For everything I could think of adding to my game, Phaser could do it. All I had to do was Google “Phaser add sprite” or “Phaser play music” and the answer would come up! My framework was allowing me to turn my ideas into code at an incredible rate.

This is probably super obvious to any experienced game developer, but for me it was eye-opening. Game-makers make game-making faster and easier! Who knew?

I’ll be including more code examples in future posts, but I won’t be going into too much detail. In other words, I’m going to focus on what I did, not how I did it. If you want to learn more about using Phaser, check out the examples and tutorials on their site.

Leave a Reply