This tutorial is a follow-up to the TypeScript with Phaser beginners guide. I will assume you have worked through that tutorial already and have a working set-up in which you can compile Phaser projects. From this base we will expand on the simple approach taken in the beginners guide and show how to structure a more advanced project that benefits from the power of TypeScript.

Create a new Project

In the first tutorial everything was hanging off a single app.ts file with one bundled class. This time around we’re going to break it up into more individual classes. In Visual Studio create a new empty TypeScript project, then add the phaser TypeScript definition and JS library files to it as outlined in Step 2 in the first tutorial.

Here we have created a new Module called Castlevania under which all of our game classes will live. Obviously you’d change this to whatever your game is actually called, unless you’re genuinely working on a Castlevania game, in which case I’m eternally jealous

The Game class is extending Phaser.Game. As a result we need to call super in the constructor and pass in our game settings. Once done we add 4 States to the game: Boot, Preloader, MainMenu and Level1, and then start the Boot state. You don’t have to add ALL of the States at this point, but there is no harm in doing so.

When adding this code in Visual Studio you may notice that Boot, Preload, MainMenu, and Level1 are underlined in red. This is because they don’t yet exist within the Project.

Let’s Boot

Create a new TypeScript file called Boot.ts and paste this code in:

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

moduleCastlevania{

export classBoot extendsPhaser.State{

preload(){

this.load.image('preloadBar','assets/loader.png');

}

create(){

// Unless you specifically need to support multitouch I would recommend setting this to 1

this.input.maxPointers=1;

// Phaser will automatically pause if the browser tab the game is in loses focus. You can disable that here:

this.stage.disableVisibilityChange=true;

if(this.game.device.desktop){

// If you have any desktop specific settings, they can go in here

this.stage.scale.pageAlignHorizontally=true;

}

else{

// Same goes for mobile settings.

}

this.game.state.start('Preloader',true,false);

}

}

}

Our Boot class is where we define global settings for the game. It’s also were we preload the graphics that will be used by the actual Preloader, in this case a simple loading bar image.

The create function is called after the image has loaded. In the code above you can see that we’re setting the maximum number of pointers to 1 and disabling the ‘pause’ checks. This isn’t a require of Phaser, it’s just a good example of the sort of things that go into a common Boot script. This is also where you would define how the game handles scaling. For example if this was aimed at mobile and needed to run at iPad resolution (1024×672) then we would usually add the following code into the ‘mobile settings’ part of the class:

JavaScript

1

2

3

4

5

6

7

8

9

// In this case we're saying "scale the game, no lower than 480x260 and no higher than 1024x768"

this.stage.scaleMode=Phaser.StageScaleMode.SHOW_ALL;

this.stage.scale.minWidth=480;

this.stage.scale.minHeight=260;

this.stage.scale.maxWidth=1024;

this.stage.scale.maxHeight=768;

this.stage.scale.forceLandscape=true;

this.stage.scale.pageAlignHorizontally=true;

this.stage.scale.setScreenSize(true);

The code above isn’t needed for this tutorial however.

When all of this has finished Phaser swaps to the Preloader state.

Creating our Preloader, extending a Phaser.State

Create a new TypeScript file called Preloader.ts and paste the following code in:

This class is extending Phaser.State. This means you’ve got instant access to all the properties of the State object. Phaser uses a set of specially named functions to perform tasks, one of which is preload. Inside here we can queue calls to Phasers asset loader. As you can see in the code above we’re loading a variety of assets: some images, a sprite sheet and an mp3.

We also create a sprite called preloadBar and link it to the asset loader. It will be automatically cropped as the files load in, making the effect of a preloader bar increasing over time as each file completes:

When the load is finished the create function is called, which is when we fade the preload bar away. On completion of that tween we start the main menu. If you run the game locally you probably won’t even see the preload bar fill-up as the assets will load from the local filesystem too fast to be noticed, but once out in the wild this won’t be an issue and it’ll be important to offer a decent looking preloader screen.

Once everything has finished we start the MainMenu.

The Main Menu

For this tutorial our menu is a picture and a game logo with a couple of simple tweens. Obviously you’ll want to enhance this for your own games, but it serves our purpose here. Create a new file called MainMenu.ts and paste this code in:

I won’t explain all of it because it should start becoming quite familiar by now. A couple of Sprites, tweens to make them appear. Then the game waits for an input event before fading out and starting the Level1 class. When you run it the menu will look like this:

Not too bad

Extending Phaser.Sprite

Create a new TypeScript file called Level1.ts and add this code to it:

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

moduleCastlevania{

export classLevel1 extendsPhaser.State{

background:Phaser.Sprite;

music:Phaser.Sound;

player:Castlevania.Player;

create(){

this.background=this.add.sprite(0,0,'level1');

this.music=this.add.audio('music',1,false);

this.music.play();

this.player=newPlayer(this.game,130,284);

}

}

}

We aren’t going to cover creating a fully working game here, but I do want to use this file to highlight extending Phaser Sprites. In the code above you’ll see a local variable called player that is an instance of Castlevania.Player. Create a new TypeScript file called Player.ts and paste this code in:

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

moduleCastlevania{

export classPlayer extendsPhaser.Sprite{

constructor(game:Phaser.Game,x:number,y:number){

super(game,x,y,'simon',0);

this.anchor.setTo(0.5,0);

this.animations.add('walk',[0,1,2,3,4],10,true);

game.add.existing(this);

}

update(){

this.body.velocity.x=0;

if(this.game.input.keyboard.isDown(Phaser.Keyboard.LEFT)){

this.body.velocity.x=-150;

this.animations.play('walk');

if(this.scale.x==1){

this.scale.x=-1;

}

}

elseif(this.game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)){

this.body.velocity.x=150;

this.animations.play('walk');

if(this.scale.x==-1){

this.scale.x=1;

}

}

else{

this.animations.frame=0;

}

}

}

}

Here our Player object is extending Phaser.Sprite. As a result we have direct access to all Sprite properties from within it, which is why we can set the velocity directly on the body for example. Upon instantiation a few visual properties are set and an animation walk cycle added. Finally the sprite is added to the game world via game.add.existing(this).

Once the sprite is added to the game world its update function will be called every frame. So to take advantage of this we set the players velocity if the left or right arrow keys are held down. As you’d expect this allows you to make the player walk left or right and animate accordingly. The end result looks like this:

We didn’t have to check for input within the Player class. We could have added an update function to the Level1 class instead and then told the Player to move as a result of that, but it highlighted an important choice: it’s up to you how your code is structured. So long as you adhere to a few basic rules and remember the names of the special Phaser functions, you can achieve pretty much any set-up you require or are familiar with.

Compiling to a single JS file

I’m sure you are keen to try out the project, but first let’s make a couple of small but vital tweaks so we can build it. Enter the Project properties by selecting Properties from the Project menu. Then click the TypeScript Build category on the left and change the settings to match this:

The important things to do are:

Make sure the ECMAScript version is set to ECMAScript 5.

Set the Module system to None

Check ‘Combine JavaScript output into file’ and enter ‘game.js’ as the filename

Save the changes to the Project Properties. What we’ve done is make sure that the whole project will be compiled into a single JavaScript file called game.js. This won’t include Phaser but it will include all of your game code. The last couple of changes we need to make are to the default.htm and app.ts files:

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>TypeScript HTML App</title>

<link rel="stylesheet"href="app.css"type="text/css" />

<script src="phaser.js"></script>

<script src="game.js"></script>

</head>

<body>

<h1>TypeScript HTML App</h1>

<div id="content"></div>

</body>

</html>

Here we’ve included the single output file game.js. And app.ts is reduced to simply this:

JavaScript

1

2

3

4

5

window.onload=()=>{

vargame=newCastlevania.Game();

};

With all of these files in place you should be able to compile and build the project. And with it you should have a pretty good base from which to build out a complete future game. You can also download all of the Visual Studio project files. We’ve more Phaser tutorials coming, so keep an eye out for them and subscribe to our Phaser newsletter for details.

How are resources unloaded? When I switch to a new state, does the old state’s assets get unloaded automagically or I need to call manually some function? Can I keep a state in memory so I can pop back to it. I’ve seen engines with a state stack approach, would that work with Phaser or would I need to reload all resources when going back and forth between states? Just wondering how I can build my screens with phaser at this point. Excellent work btw! You gave my the push I needed to work in typescript

When you swap state you have the option to clear either just the world (which is the same as clearing the display list), or clearing the cache. This will nuke anything loaded by that point. The default is not to do this, so assets persist from state to state. It’s up to you to decide which to kill or not really

After this, my intellisense stops working. Very frustrating. Does anyone have any advice on how i might be able to resolve this output? Thank you.

Morgan

March 5th 2014 at 2:16 am

In Response to my last comment, i fixed my issue by disabling the TypeScript build option ‘Combine JavaScript output into file’, Cleaning and re-building my solution. Sorry guy’s, i spend my days in eclipse/Drupal land, and its been awhile since i have worked with VS. However if anyone has any further advice to add, i would love to hear it. Thank you for the great tutorial, and please, keep ’em coming!

Juan Camilo

April 20th 2014 at 3:52 am

Thanks! This framework is really Amazing, only one thing, it threw an error saying that body was undefined, I had to add the line “game.physics.enable(this, Phaser.Physics.ARCADE)” in player constructor to properly run the example. Could you update that please?

Craig

April 20th 2014 at 8:55 am

It looks like the physics body was not set up on the Sprite? I get this:

Uncaught TypeError: Cannot read property ‘velocity’ of null in update() on class Player from this line of code:

in above post, i cannot get the level sprite to load, niether the player nor the backgrou nd will load after manin menu screen. how can I fix it?

Billy

May 6th 2014 at 5:41 pm

update, I have decided to abandon typescript and go with plain JS. much less problems this way imo. Did the dev stop work on typescript too?. I really like typescript in theory, but i dont think its ready for this type of use yet, at least not without a team of devs to work on it regularly.

PriorBlue

May 7th 2014 at 6:35 pm

@Craig:

i have added this line to the constructor:
game.physics.enable(this, Phaser.Physics.ARCADE);

Now it works for me.

Noam

May 21st 2014 at 12:05 am

Im using visual studio 2012 and for some reason i dont have that TypeScript Build section in the properties, what am i supposed to do/do you know what this would happen?
Also, is there anyway to run the program while coding in a debug sort of way?

Reisor

May 21st 2014 at 12:26 am

You forget to add two things that are critical if you want to run the game, because without them you will get a black screen when starting ‘Level1’ and an error that ‘Player’ didn’t have the ‘velocity’ property

In Boot.ts you need to add this line before calling the Preloader:

this.game.physics.startSystem(Phaser.Physics.ARCADE);

And in the Player.ts you have to add:

this.game.physics.arcade.enableBody(this);

Dan

May 21st 2014 at 5:07 pm

Hi – I’m new using typescript and Phaser. Im OSX using Webstorm, I would really be grateful if you could outline how to combine the JS into a single file if your not using VS. Or an alternative to getting the demo working in Webstorm. Appreciate your effort supporting the community!

Aykut

May 24th 2014 at 9:15 pm

@Reisor
Thank you. That helped a lot.

Gaz

September 1st 2014 at 6:26 pm

Hey, great tutorial here. I’m having a little trouble with this line though:

this.input.onDown.addOnce(this.fadeOut, this);

The problem is with this.fadeOut, it doesn’t know what that is. I get the red underline and the message when I hover over is “the property ‘fadeOut’ does not exist on value of type ‘MainMenu’.”

Can anyone help?

Gaz

September 1st 2014 at 6:28 pm

Nevermind, I’m an idiot it seems. Needed to add the function, duh.

Ey

December 10th 2014 at 10:06 am

Hi! Is there a way to do this in Visual Studio 2012? There are some function that isn’t available in VS2012. Your response is very much appreciated. Thank you!

Justin

December 15th 2014 at 10:25 pm

Having a heck of a time getting this working. Had to convert stuff to newer syntax, such as in Boot I had to change this.scale.stage.pageAlignHorizontally to just this.scale.pageAlignHorizontally. After completing the tutorial, it generates the game.js correctly, confirmed it is indeed loading everything, but all I see is a black box – never gets to any state or doesn’t show anything. When trying to download the project files above, it runs, but after trying to add in all the assets it still cannot display any of the assets(Nor play the music), just shows the quads(two triangles) untextured.

I have a feeling this is just really out of date? Does anyone have a working/newer sample?