Tag: phaser

Episode 5: States

admin Leave a comment

I never realized this before working on this project, but there’s more to a game than just the part where you move your character around and shoot stuff. What I mean is that interacting with a game means traversing a number of different modes, menus, and interfaces. Let’s use Rare’s legendary first-person shooter, GoldenEye, as an example. Here’s how a player gets from powering on the system to completing a mission:

  • A number of logo images are shown
  • An animation is played (along with music)
  • The main menu is shown
  • The mission selection menu is shown
  • The mission is loaded and gameplay begins
  • The mission completion menu is shown
  • The main menu is shown

As you can see, the experience of playing GoldenEye is comprised of much more than just the gameplay. And although the gameplay is by far the most complex and important component, the rest of the game is certainly worthy of attention.

All this is to say I realized that I was going to have to create these different components and that I should probably keep them separate. It turns out that Phaser has a system for doing just that, and it calls these components states.

What Are States?

States are cool. In addition to separating the different phases of the game, states allow you to load stuff when it’s needed. Players generally don’t like waiting for their games to load, and states let you be strategic about when and where you load assets.

For example, the menu probably doesn’t need all of the sprites and sounds that are used during gameplay, so you can avoid loading them until you actually launch the gameplay state. However, you don’t want to start loading everything only after the player decides to start the game, so it would probably be smart to start preloading assets in advance. The strategy can be tricky, but the code is pretty straightforward.

States can be quickly and easily created…

1
2
// Create a state for booting the game
game.state.add('boot', bootState);

And starting them is a breeze…

1
2
// Start the boot state
game.state.start('boot');

Phaser’s states come with some functions that will automatically be called at various stages of the game. These include init, preload, create, render, and update. If you define these functions in the state, then Phaser will execute the code at the appropriate time.

We saw this in Episode 3 when we used the preload function to load an image asset…

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

The create function to enable the keyboard…

1
2
3
4
5
6
7
8
// Create in-game objects
function create() {
  // Create the player's sprite
  var player = Game.add.sprite(400, 300, 'ship');
 
  // Create keyboard cursor objects
  var cursors = game.input.keyboard.createCursorKeys();
}

And the update function to check for input…

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;
  }
}

So if we were to start whatever state these functions belong to, the preload and create functions would run as the state started, and the update function would be repeatedly called during the game loop until we started another state. Neat!

My States

I decided to use four states in Zyrian:

  1. Boot: initializes the Phaser engine, creates the game object, and launches the Preload state
  2. Preload: loads game settings, fonts, and all the assets for the Menu state, then launches the Menu state
  3. Menu: loads the menu interface, captures user input, loads all the assets for the Play state, and allows the player to launch the Play state
  4. Play: loads mission data, creates sprites, captures user input, and launches the Menu state if the player aborts or completes the mission

I initially thought of using a fifth state to handle the end of a mission (indicate success or failure, display the player’s score, give some menu options, etc.), but I decided that to just use the Menu state.

In the next episode I’ll talk about factories and how I separated the internal workings of the game from the states.

Episode 3: Getting Started with Phaser

admin Leave a comment

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.

Episode 2: The Framework

admin Leave a comment

In this post I’m going to talk bit about how and why I chose my programming language, IDE, and framework.

JavaScript

When I started this project, I was familiar with a number of languages including Java, C++, and PHP, but I had recently spent a lot of time using JavaScript for some web stuff, so I was kind of in the JavaScript zone. In addition, I really liked the idea that I could just upload the game to my website and let people play it in a browser, regardless of platform. I also love the fact that rebuilding my project means saving a text file and refreshing the browser. The console is also pretty awesome for debugging.

For these reasons I chose to use JavaScript as my programming language.

Sublime Text

I’m going to say something controversial right now. I use Windows. I’m sorry, and I regret it every time I talk to other programmers. I know I should have a MacBook Pro and be using the Linux terminal for everything, but I’ve always owned a PC with Windows, and I never used the Linux terminal until university.

Anyway, I had used Nodepad++ and other text editors in the past, but a friend had recently told me to check out Sublime Text, so I did, and I liked it. Sublime Text lets you open multiple files at once, save projects, search and replace in multiple files, customize colors and highlighting, and much much more!

Phaser

As I mentioned in the previous post, I had never used a game engine before, so I really had no idea what I was looking for. I basically Googled “JavaScript game engines” and quickly chose one that had good examples and documentation.

Having only used Phaser, I can’t really speak about its strengths or weaknesses. However, it seems easy to use, especially for 2D sprite-based games like Zyrian. I’ll talk more about Phaser in future posts, including examples and everything.