Phaser is a HTML5 game framework for desktop and mobile. It's fast, free, and open source. Phaser is currently in version 2.0.7. It supports both WebGL and Canvas. It has a bunch of features to help you in your game development. It is like the Flixel game framework for ActionScript 3. In this article we will build a game skeleton with Phaser, making use of Phaser.State. For simplicity we won't use any Phaser game objects like sprites or groups. I will mention a little bit about tweens as well.
Installing Phaser
Phaser is available through bower using the following command:
[code]
bower install phaser-official --save
[/code]
Alternatively, you can grab the files directly from GitHub. The full version of Phaser is in the build directory. There are also customized builds, such as Phaser without the physics engine, located in the build/custom directory.
There are many community tutorials and getting started guides. I suggest you check out some of them in order to get familiar with Phaser. One of my favorites is a four part series on Flappy Bird. An extensive collection of tutorials, examples, and documentation is available on the official Phaser website.
Scaffolding Phaser
A Grunt-based Yeoman generator for Phaser is available for scaffolding projects. You can install it using the following commands:
[code]
npm install -g generator-phaser-official
yo phaser-official
[/code]
This generator is great for getting up and running quickly, however, for the purposes of this tutorial, we will start from scratch.
Phaser Directory Structure
Our Phaser project will use the directory structure shown below. main.js starts the game, while app.js defines our Phaser application. The prefabs directory is for your game objects, while the states directory is for your game states.
[code]
|-- app.js
|-- main.js
|-- prefabs
`-- states
|-- boot.js
|-- level_intro.js
|-- level_master.js
|-- level_round.js
|-- main_intro.js
|-- main_menu.js
`-- preload.js
[/code]
You have to pay attention to the order you include these files if you are including them with plain script tags. I prefer using RequireJS, another alternative is Browserify.
Phaser.State
This section will focus on the use of Phaser.State. Phaser state encapsulates the different states of your game. Examples of game states are preload, main menu, level 1, level 2, help, pause, etc. When a state starts, you create the game objects relevant to that state. Later, you can switch to a different state, and Phaser will clean up your old game objects so you can create new game objects and display them.
You define a state by defining an object with some hook methods. The important ones are:
init- A method called when a state starts. It is passed an argument to enable sharing data between states.preload- A method called when a state starts. It is used for loading assets before anything else.create- A method called afterpreload, used for creating game objects.update- A method called for every frame, which is used for user polling and collision detection.shutdown- A method called when a state is shutdown, which is used for cleaning up game objects.
Organizing State Flow
This is a state chart for our Phaser states. The Boot and Preload states are the defacto states for setting up configuration and loading the game assets. The MainMenu state is for displaying the main menu. Other level states are for actual game play and switching between different levels and rounds. The levels are split into rounds. Each level has some rounds, which once played, allow you to move to the next level.
Game States
The Boot state loads preloader assets in the preload hook method and sets up Phaser game settings like scaling and input pointers via the create method.
File: states/boot.js
[js]
function Boot() {};
Boot.prototype = {
preload: function() {
// load preloader assets
},
create: function() {
// setup game environment
// scale, input etc..
this.game.state.start('preload');
}
};
[/js]
The Preload state loads all the game assets, then switches to the main-intro state.
Continue reading %JavaScript Game Programming Using Phaser%