Problem with Phaser and TypeScript

[Ahmed Khalifa]

Hello everyone attached is my current running code,

 

https://dl.dropboxusercontent.com/u/9791999/WorkingCode.zip

 

I tried to separate and make it more organized and more readable, I don't have any problems in Typescript (no compiling problems) but when I run it, it through run time error

Uncaught TypeError: Cannot read property 'stars' of undefined

Here is the non working code :S

 

https://dl.dropboxusercontent.com/u/9791999/NotWorkingCode.zip

 

Any help plz, The only difference I made a new class called StarEntity and just capsuled everything in it

[Batzi]

In your GameplayWorld.ts

this.stars = game.game.add.group();

remove one of the 'game' :-)

[Ahmed Khalifa]

Thanks for replying but That's not a problem, it must be two game.game because the first game is from SimpleGame class (my class) and the second game is a Phaser.Game object that is in my SimpleGame class

 

Its not the line causing the error (sorry for confusing terminology) but if you remove it the Typescript won't compile because add is only a part of Phaser.Game object

[rich]

Just a heads-up, but it's very unlikely people here will download a zip file of code just to pour through it and see what's wrong. Code should really be posted to the forum, just paste into code blocks, and ideally keep it as short as possible - there's no point pasting in hundreds of lines of code as, again, people are not likely to have the time to sit and work through it all.

 

I would suggest you start by breaking it down. You say you don't get any compiler errors, yet the issue you've got is simply one of JS scope - you're trying to access something that either doesn't exist, or  simply doesn't exist in the context in which it's being accessed. My guess (without looking at the code) would be you're mixing use of JS globals somewhere, otherwise TS would flag the scope issue for you.

[Ahmed Khalifa]

Sorry for that I will try to write the code down in that post, Yup I am using one global variable which is an object of my SimpleGame class. I don't know how to handle that properly as I never coded in Typescript but I am using my knowledge from OOP in C# and Java and Python and other languages to figure it out.

 

It would be nice if you have a good code that shows how to OOP your game using Phaser and Typescript.

 

So my code is the code for the Simple Game in the tutorial section but trying to write it in Typescript and organize it. The code is divided into 4 classes:

- SimpleGame class contains object of Phaser.Game and object of GameplayWorld

- GameplayWorld contains groups of object and references to all objects in the game (it has stars:Phaser.Group, platforms:Phaser.Group, player:PlayerEntity)

- PlayerEntity contains a Phaser.Sprite object

- StarEntity use the global variable of the simpleGame to access the GameplayWorld object which it access the stars group inside it to add one starEntity.

 

here is the code of the StarEntity:

class StarEntity{    sprite:Phaser.Sprite;        constructor(x:number, y:number){        this.sprite = game.currentWorld.stars.create(x, y, 'star');        this.sprite.body.gravity.y = 60;        this.sprite.body.bounce.y = 0.7 + Math.random() * 0.2;        this.sprite.body.collideWorldBounds = true;    }}

the error is in trying to access stars group in the currentWorld object.

 

The definition of the global object is the main class file:

class SimpleGame {        game: Phaser.Game;    currentWorld:GameplayWorld;        constructor() {        this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content', {             preload: this.preload, create: this.create, update: this.update });    }    preload(){        //loading images    }    create() {        this.currentWorld = new GameplayWorld();    }        update(){        this.currentWorld.update();    }}var game:SimpleGame;window.onload = () => {    game = new SimpleGame();};

I hope that is clear enough to help me understand why the error is happening because as for any normal structured language. What I did seems to work even the complier thinks its alright and the autocomplete shows that game.currentWorld.stars exists in the context but in the run time it think currentWorld is undefined or doesnt have the definition of stars inside it.

 

Sorry again for improper way to post but I couldn't know which part to show and write

[rich]

I would suggest you avoid using any global objects at all, so get rid of all calls to 'game' within your classes. Otherwise TS cannot help you when it compiles, plus it's something you want to avoid doing anyway really.

 

Personally I would make SimpleGame extend Phaser.Game, then you don't have to have a local 'game' property, it would just be the game. I would also use a State to handle your GameWorld (so GameWorld extends Phaser.State). It will make things a lot clearer.

 

SimpleGame extends Phaser.Game

GameWorld extends Phaser.State

 

Stars extends Phaser.Group and is created by GameWorld.

 

Then ideally your Stars class could have a method 'createStar' which creates a StarEntity object. Or if there are likely to be too many different object types to handle this then I would make StarEntity accepts the Group you want to add it to as a constructor argument.

[Ahmed Khalifa]

Wooow thanks for reply its a lot clearer to use that way but I want to make sure when you create an object that extends from Phaser.Group I need to add it to Phaser.State to be rendered isn't it? Sorry for my stupidity but is there a post that shows how Phaser work because I can't understand how to add because the starting tutorial uses game object to create/add sprites and groups but I can't understand to add an extended class. Is there an open source game written well in typescript and phaser so I can learn more about Phaser hierarchy and how its working?

 

Sorry I know I am super annoying but I can't find any help from anyone and googling I only find people making simple games and not caring about OOP and all these, my problem is I want to use Phaser as my default tool instead of FlashPunk (which I used it a lot). I didn't like Unity so my only hope now on MAC is Phaser with Typescript

 

Thanks again and Sorry

[Ahmed Khalifa]

Also do you suggest continuing to use Typescript or try just learn plain Javascript? I just feel lost in all these Javascript, I can't get the grip about it?

[rich]

http://www.gamefromscratch.com/page/Adventures-in-Phaser-with-TypeScript-tutorial-series.aspx