Phaser code

After spending sometime doing exercises in code academy, you should be familiar with some javascript syntax.

For example in javascript a variable is made like:

var x = "this is a variable with a string value ";

While you can still do this is Phaser, you will more commonly see the following format:

this.meh = "something";

Both formats do the same thing. so if you see something like

this.player = this.game.add.sprite(1,1,'sprite image);

this means that you've created a a variable called player that represents a sprite value.

The most important thing to understand are states.

States

Think of states in your game as being like chapters in a book. Each one having a specific designated task. Some common examples of states include:

• A preloader

• A main menu

• A level selection screen

• An intro sequence or story screen • A game level

• The game over sequence

• A high score screen

• An in-game weapon or items shop

• A Boss Fight

An so on. You don not need to break up your game into such small pieces, however it can help you manage and divide the up the work. In the case of the code I have provided for you, have 4 states: Main, Boot, Preload, and Game.

It's important to keep in mind that you can only have one state active at a time. So you can be in the Main Menu and the Game same time.

State terminology.

lets take a look at our preload state and break it down.

In this example, TopDownGame is our game object A formal definition of an object:An object is a collection of properties, and a property is an association between a name (or key) and a value. A property's value can be a function, in which case the property is known as a method.

Line 1 of the code shows the creation of an Object Class, a property of the Object known as TopDownGame.

Every State that we create is a property of our game object, so in this example TopDownGame.Preload is an Object Class.

Line 3

 TopDownGame.Preload.prototype = {

is required to for give our class Preload some methods. Think of these methods as functions that belong to the object class Preload.

In this class, we have 2 methods.preload and create. These two are predefined methods that the Phaser Framework will look for on its own but you can easily create your own methods that preform a specific task. For example if you wanted a method inside the Preload Class that added 1+1 you could write it using the following method format.

 // adder is the name of the method. 
 adder: function(){
    this. addResult = 1+1;
 }

This method doesn't really do anything important, but you must use the follow format to create any other method in an object class.

#Creating a state.

Let say I want to create a new state called BossBattle

First we need to create the class

TopDownaGame.BossBattle = function() {}

Then we initialize the prototype as follows:

TopDownGame.BossBattle.prototype = {

after this line we can begin to define the methods that this class will use. lets give it a create and update method.

 TopDownGame.BossBattle.prototype = {
     
     create: function() {
         // Do create stuff
     }
     // we use a comma to separate the methods from one another
     ,update: function () {
         // Do update stuff
     } 

 }; // last semi-colon lets phaser know there are no more methods to add

The final look of this new state would be:

 TopDownaGame.BossBattle = function() {}
  TopDownGame.BossBattle.prototype = {
     
     create: function() {
         // Do create stuff
     }
     // we use a comma to separate the methods from one another
     ,update: function () {
         // Do update stuff
     } 

 }; // last semi-colon lets phaser know there are no more methods to add

Know you should have an idea of how to create a state, and in general a whole new class ( this will come in handy when creating enemies or projectiles for your game, but thats for a later time).

Phaser Shortcuts

To load an image:

 // (ID of image, name of file in folder');
 this.game.load.image('logo', 'missionbit.png');

To load a Tile map:

 // ( 'ID of map' , 'name of json file', null, Type of tile map phaser is loading);
 this.load.tilemap('map', 'assets/tilemaps/testmap.json', null, Phaser.Tilemap.TILED_JSON);

get background image. First load the image, then use in the create method of your state:

  // (position x, position y, width, height, Image ID);
  this.game.add.tileSprite(0, 0, 1000, 600, 'background');

Add some user input;

 //create a variable
 this.left;
// give it the phaser input function 
this.leftKey = this.game.input.keyboard.addKey(Phaser.Keyboard.LEFT);

Phaser Resources:

You can do a lot with Phaser. If you don't know how to do something. GOOGLE it! searching for the answer to things you don't know how to do is part of the learning process. Every programer does it and its a useful skill to have

This wiki should serve as a basic rundown of how do some stuff in phaser, but there is more out there.

Here is a link to the Phaser example. They give you good a show you how do to some stuff. Just got to be willing to read the code.

phaser examples page

Also read the book I sent you.