Phaser Modules/Namespaces "Export"

[Riddle]

I'm somewhat confused with modules in typescript. I read somewhere that modules are now considered and written as namespaces; so should I be writing namespace instead of writing modules in my project? All tutorials that use modules instead of namespace seem to work regardless. Are they interchangeable words? namespace/module when coding.

I understand that you use import when using modules at the least but have seen no project that separates their files for Phaser use this.

 

I am also having trouble using module 'across'  different files; so am unable to break them up. I'm going through each phaser-typescript tutorial one at a time, and so for this first tutorial I am working through the issue I run into is this:

File#1

/// <reference path="../../engine/typescript/phaser.d.ts" /> 
//import Phaser = require('../../engine/typescript/phaser.d.ts');

module GamefromScratch{
     export class SimpleGame {
        game: Phaser.Game;

        constructor() {
            this.game = new Phaser.Game(800, 600, Phaser.WEBGL, 'content');

            this.game.state.add("GameRunningState", GameRunningState, false);
            this.game.state.add("TitleScreenState", TitleScreenState, false);
            this.game.state.start("TitleScreenState", true, true);
        }

    }
}

window.onload = () => {
    var game = new GameFromScratch.SimpleGame();
};
    
    

 

File#2

module GameFromScratch {

export class GameRunningState extends Phaser.State {
        constructor() {
            super();
        }
        textValue: Phaser.Text;
        updateCount: number;

        create() {
            var text = "Hello World!";
            var style = { font: "12px Arial", fill: "#fff", align: "center" };
            this.textValue = this.game.add.text(0, 0, "0", style);
            this.updateCount = 0;
            
        
        }

        update() {
            this.textValue.text = (this.updateCount++).toString();
        }

        render() {
            this.game.debug.text("This is drawn in render()", 0, 80);
        }
    }

}

 

File#3

module GameFromScratch {
    export class TitleScreenState extends Phaser.State {
        game: Phaser.Game;
        constructor() {
            super();
        }
        titleScreenImage: Phaser.Sprite;

        preload() {
            this.load.image("title", "TitleScreen.png");
        }
        create() {
            this.titleScreenImage = this.add.sprite(0, 0, "title");
            this.input.onTap.addOnce(this.titleClicked,this); // <-- that um, this is extremely important
        }
        titleClicked (){
            this.game.state.start("GameRunningState");
        }
    }
}

-When I put these altogether in one file it compiles seamlessly.

-When I compile separately I receive the error that suggests it can't find the ts files and doesn't know to search within itself either? ( just assuming that ) :

Quote

 error TS2304: Cannot find name 'GameRunningState'.
 error TS2304: Cannot find name 'TitleScreenState'.
 error TS2304: Cannot find name 'GameFromScratch'.

==========

FACTS:

1. I am using Brackets for this project. 

2. I 'think' that it has to do with csprog in Visual Studio or json with everything else. In one tutorial I was looking at I noticed csprog was there and it had every file used referenced. Likewise I keep reading about json file. I personally have never had to build a json file, and csprog seems to be built automatically when you use visual studio. 

3. However I can't understand why when I split the modules up into different files that it cannot even detect itself 'in the current' file I am running in.

 

I'm pondering if I don't have a json or csprog file that I should be using an import statement at least as it relates to TitlescreenState, or do I need to create a json file??? What do I do to solve this error?

 

 

 

 

[Tom Atom]

Hi, namespace x module. Read this: https://www.typescriptlang.org/docs/handbook/namespaces.html. In short since Typescript 1.5, preferred way is to use namespace to distinguish from modules (https://www.typescriptlang.org/docs/handbook/modules.html) (previously namespaces were internal modules and modules were external modules). I have no experience with (external) modules, but it names units loaded with module loader (http://fizzylogic.nl/2016/02/07/TypeScript-Internal-vs-External-Modules/). In all newer web games I use only namespaces and I am happy This sentence was useful for me - As they like to say these days: “This is Bill, he uses modules in NodeJS apps and namespaces in web apps. Bill is Smart. Be like Bill.”

 

 For splitting - order of files plays its role. If you get errors like those you posted, try to add line on top of file:

/// <reference path="FileName.ts" />

 I am using VS and that .csproj file contains names of all files in project - it looks like files are compiled in order in this file. I had never to write references in my small projects. If I ran into problems, I editted order of .ts files in .csproj manually. But I also wrote bigger one, which is on GitHub and some people had problems with it - I solved it with adding references.

 So, in your case

1. change module into namespace,
2. play with order of files,
3. add references

[Riddle]

Thankss that helped a lot, I've changed modules to namespace that was easy part XD. I've been trying this since yesterday rearranging the files and the order but I'm still having no luck. I feel so stuck. I've added both the reference path and imports and try rearrange them, at the top of the file, even created an import file with all the files in there, but then I just get "Cannot find module" and "cannot find name", so I just feel stuck !

 

 

[Riddle]

EDIT UPDATE: Well I fixed the "is not a module" by adding export in front of all the "namespace"s as well as keeping the original class export structure which fixed that problem. So back to the same issue "Cannot find name". I'm sure it's something simple, I just wonder what it is. Have added  all references + imports. I tried "console.log(GameRunningState());" just to see if I could at least call it (assuming that is how you call a function with  javascript) and still have nothing.

 

 

---- "Below is now irrelevant" but will keep it there in case someone ever has that issue.

After playing around with it, I think I'm getting somewhere. So my tsconfig file is in another folder (I guess you can't have more than two, so I removed one) my root seems to be in the folder 'behind' my current folder. so played around with adding these ../../etc. eventually I just dropped every single file into the same folder since I knew 100% that ../fileitsin/filename works.

Now I have a new issue:

practice1.ts(16,53): error TS2304: Cannot find name 'GameRunningState'.
practice1.ts(17,53): error TS2304: Cannot find name 'TitleScreenState'.
practice1.ts(25,36): error TS2339: Property 'SimpleGame' does not exist on type
'typeof GameFromScratch'.

 

And the error I now receive is no longer, 'not found' but 'this file is not a module'. 

All have been changed to "namespace" the code above has not changed" other than this:

File#1 (not reference changes): Practice1.ts

/// <reference path="../../engine/typescript/phaser.d.ts" /> 
/// <reference path="../practice/import.d.ts" /> 




namespace GamefromScratch{
     export class SimpleGame extends Phaser.Game{
        game: Phaser.Game;

        constructor(config:Phaser.IGameConfig) {
            
            super(config);
            this.game = new Phaser.Game(800, 600, Phaser.WEBGL, 'content');
        
            this.game.state.add("GameRunningState", GameRunningState, false);
            this.game.state.add("TitleScreenState", TitleScreenState, false);
            this.game.state.start("TitleScreenState", true, true);
        }

    }
}

window.onload = () => {
    var game = new GameFromScratch.SimpleGame();
};
    

File #2: Import.d.ts

/// <reference path="../practice/practice-gamerunning.ts" /> 
import Running = require('../practice/practice-gamerunning.ts');

/// <reference path="../practice/practice-titlescreen.ts" /> 
import Titlescreen = require('../practice/practice-titlescreen.ts');

/// <reference path="../practice/practice1.ts" /> 
import Self = require('../practice/practice1.ts'); //- error practice1.ts is not a module

 

[Tom Atom]

Do not use import - it is for that (external) modules, which is what you do not need at all. Use only namespaces and references if needed.

1. In your original post in File #1 your module / namespace is "GamefromScratch", but in other two files you have "GameFromScratch"!!! Typescript / Javascript are case sensitive, so you have two different modules! This is sure one source of problems,
2.  if 1. does not solve your problems, then add references into files. In fact I see only one place for it now (I may be wrong) and it is File #1 as you are using some classes (GameRunningState, ...), that are defined later in other files.

[Riddle]

Oh wow, that fixed the GameFromScratch namespace export not being found!  I'm not sure why GameRunningState and TitleScreenState can't be found.

I then receive these errors: with the following file. 

../practice/practice1.ts(16,53): error TS2304: Cannot find name 'GameRunningState'.
../practice/practice1.ts(17,53): error TS2304: Cannot find name 'TitleScreenState'.
../practice/practice1.ts(25,16): error TS2346: Supplied parameters do not match
any signature of call target.

 

File#1

/// <reference path="../../engine/typescript/phaser.d.ts" /> 
/// <reference path="../practice/practice-gamerunning.ts" /> 
/// <reference path="../practice/practice-titlescreen.ts" /> 
/// <reference path="../practice/practice1.ts" /> 



export namespace GameFromScratch{
     export class SimpleGame extends Phaser.Game{
        game: Phaser.Game;

        constructor(config:Phaser.IGameConfig) {
            
            super(config);
            this.game = new Phaser.Game(800, 600, Phaser.WEBGL, 'content');
        
            this.game.state.add("GameRunningState", GameRunningState, false);
            this.game.state.add("TitleScreenState", TitleScreenState, false);
            this.game.state.start("TitleScreenState", true, true);
        }

    }
}

window.onload = () => {
    var game = new GameFromScratch.SimpleGame();
};
    
    

 

So I removed this: /// <reference path="../practice/practice1.ts" /> 

These are the new errors:

../practice/practice-gamerunning.ts(3,39): error TS2304: Cannot find name 'Phase
r'.
../practice/practice-gamerunning.ts(7,20): error TS2503: Cannot find namespace 'Phaser'.
../practice/practice-gamerunning.ts(13,35): error TS2339: Property 'game' does not exist on type 'GameRunningState'.
../practice/practice-gamerunning.ts(24,18): error TS2339: Property 'game' does not exist on type 'GameRunningState'.

../practice/practice-titlescreen.ts(2,43): error TS2304: Cannot find name 'Phaser'.
../practice/practice-titlescreen.ts(3,15): error TS2503: Cannot find namespace 'Phaser'.
../practice/practice-titlescreen.ts(7,27): error TS2503: Cannot find namespace 'Phaser'.
../practice/practice-titlescreen.ts(10,18): error TS2339: Property 'load' does not exist on type 'TitleScreenState'.
../practice/practice-titlescreen.ts(13,42): error TS2339: Property 'add' does not exist on type 'TitleScreenState'.
../practice/practice-titlescreen.ts(14,18): error TS2339: Property 'input' doesnot exist on type 'TitleScreenState'.
 

File#1 (Update)

/// <reference path="../../engine/typescript/phaser.d.ts" /> 
/// <reference path="../practice/practice-gamerunning.ts" /> 
/// <reference path="../practice/practice-titlescreen.ts" /> 







export namespace GameFromScratch{
     export class SimpleGame extends Phaser.Game{
        game: Phaser.Game;

        constructor(config:Phaser.IGameConfig) {
            
            super(config);
            this.game = new Phaser.Game(800, 600, Phaser.WEBGL, 'content');
        
            this.game.state.add("GameRunningState", GameRunningState, false);
            this.game.state.add("TitleScreenState", TitleScreenState, false);
            this.game.state.start("TitleScreenState", true, true);
        }

    }
}

window.onload = () => {
    var game = new GameFromScratch.SimpleGame();
};
    

 

 

File: TitleScreenState

export namespace GameFromScratch {
    export class TitleScreenState extends Phaser.State {
        game: Phaser.Game;
        constructor() {
            super();
        }
        titleScreenImage: Phaser.Sprite;

        preload() {
            this.load.image("title", "TitleScreen.png");
        }
        create() {
            this.titleScreenImage = this.add.sprite(0, 0, "title");
            this.input.onTap.addOnce(this.titleClicked,this); // <-- that um, this is extremely important
        }
        titleClicked (){
            this.game.state.start("GameRunningState");
        }
    }
}

File: GameRunningState

export namespace GameFromScratch {

export class GameRunningState extends Phaser.State {
        constructor() {
            super();
        }
        textValue: Phaser.Text;
        updateCount: number;

        create() {
            var text = "Hello World!";
            var style = { font: "12px Arial", fill: "#fff", align: "center" };
            this.textValue = this.game.add.text(0, 0, "0", style);
            this.updateCount = 0;
            
        
        }

        update() {
            this.textValue.text = (this.updateCount++).toString();
        }

        render() {
            this.game.debug.text("This is drawn in render()", 0, 80);
        }
    }

}

 

Update: I fixed the above errors by adding "/// <reference path="../practice/practice1.ts" />  to each of the other files (gamerunning.ts and titlescreen.ts) at the top of each file that isn't the main file (which contains references to the other two files)

Now I receive this error:

../practice/practice1.ts(16,53): error TS2304: Cannot find name 'GameRunningState'.
../practice/practice1.ts(17,53): error TS2304: Cannot find name 'TitleScreenState'.
../practice/practice1.ts(25,16): error TS2346: Supplied parameters do not match any signature of call target.
 

Just in case I added the reference files into the main file without using import.d.ts (no imports are in it, it's just references as all imports have been removed), adding the same references and moving them around within the main file itself; I receive the same error.  "Cannot find name" but now "supplied parameters do not match any signature (etc)"

Summary:

1. I removed all imports.
2. I added references into the main.file at the top (they were always there, but I removed imports, so now it's just the references)
3. My other files GameRunningState and TitleScreenState have not changed or been modified in anyway. I did however add a reference page to the main.file at the top of each one.  
4. I've doublechecked for spelling and perhaps I am missing something; but I can't see any spelling errors or cases in those other two files. Still uncertain, will continue troubleshooting.

 

Update: I moved the /// <reference path="../practice/practice1.ts" />  back to the main.file because I receive the same error, so I figure adding to each other file and removing it from the main file was a bit redundant, since same error either way.

5. Removed /// <reference path="../practice/practice1.ts" />  from GameRunningState and TitleScreenState and added it back to File#1 (MainFile)

[Riddle]

Just a rundown (everything looks like this):

File#1: Practice1.ts "SimpleGame"

/// <reference path="../../engine/typescript/phaser.d.ts" /> 
/// <reference path="../practice/practice-gamerunning.ts" /> 

/// <reference path="../practice/practice-titlescreen.ts" /> 

/// <reference path="../practice/practice1.ts" /> 




export namespace GameFromScratch{
     export class SimpleGame extends Phaser.Game{
        game: Phaser.Game;

        constructor(config:Phaser.IGameConfig) {
            
            super(config);
            this.game = new Phaser.Game(800, 600, Phaser.WEBGL, 'content');
        
            this.game.state.add("GameRunningState", GameRunningState, false);
            this.game.state.add("TitleScreenState", TitleScreenState, false);
            this.game.state.start("TitleScreenState", true, true);
        }

    }
}

window.onload = () => {
    var game = new GameFromScratch.SimpleGame();
};
    
    

 

Files#2 TitleScreenState

export namespace GameFromScratch {
    export class TitleScreenState extends Phaser.State {
        game: Phaser.Game;
        constructor() {
            super();
        }
        titleScreenImage: Phaser.Sprite;

        preload() {
            this.load.image("title", "TitleScreen.png");
        }
        create() {
            this.titleScreenImage = this.add.sprite(0, 0, "title");
            this.input.onTap.addOnce(this.titleClicked,this); // <-- that um, this is extremely important
        }
        titleClicked (){
            this.game.state.start("GameRunningState");
        }
    }
}

 

File#3 GameRunningState

 

 

export namespace GameFromScratch {

export class GameRunningState extends Phaser.State {
        constructor() {
            super();
        }
        textValue: Phaser.Text;
        updateCount: number;

        create() {
            var text = "Hello World!";
            var style = { font: "12px Arial", fill: "#fff", align: "center" };
            this.textValue = this.game.add.text(0, 0, "0", style);
            this.updateCount = 0;
            
        
        }

        update() {
            this.textValue.text = (this.updateCount++).toString();
        }

        render() {
            this.game.debug.text("This is drawn in render()", 0, 80);
        }
    }

}

 

[Tom Atom]

... and works? Also, I think, that references should be relative to file in which they are. So, you probably have all files in one folder and references should be

/// <reference path="practice-gamerunning.ts" />

[Riddle]

No it does not work. 

Changing it to ///<reference path="practice-gamerunning.ts" /> causes the "File not found" error, this is because practice is not my main folder, my main game folder has a tsconfig file in the folder behind "../practice/practice1.ts"

 

I tried removing the tsconfig file and adding it into practice1.ts but it didn't work so I left it alone and just corrected the ../../<-- I eventually dropped all the files into one folder because figuring out these ../../../ and how many to use was getting confusing.

My errors are currently as followed:

../practice/practice1.ts(16,53): error TS2304: Cannot find name 'GameRunningState'.

-->    this.game.state.add("GameRunningState", GameRunningState, false);

../practice/practice1.ts(17,53): error TS2304: Cannot find name 'TitleScreenState'.

-->            this.game.state.add("TitleScreenState", TitleScreenState, false);

../practice/practice1.ts(26,16): error TS2346: Supplied parameters do not match any signature of call target.

With Error 16,53 and 27,53 representing  my attempt to call GameRunningState; and with Error 26,16 referencing my attempt to call the SimpleGame module here:

window.onload = () => {
    var game = new GameFromScratch.SimpleGame(); //<---  this is line 26, with line 16 being SimpleGame line.
};

 

Whatever this issue is, it seems to be related to how I am calling and using modules. I just can't figure it out.

[Tom Atom]

... and yes, there is another issue. Your simple game class is wrong - your constructor is taking config as parameter, but you are not passing it anything, when creating game with

var game = new GameFromScratch.SimpleGame();

 this is why you get " Supplied parameters do not match any signature of call target."

Second wrong thing is, that you are extending Phaser.Game , calling super constructor AND creating another Phaser.Game inside constructor with:

this.game = new Phaser.Game(800, 600, Phaser.WEBGL, 'content');

... so you have Phaser.Game in SimpleGame, which in turn is also Phaser.Game.

 Change it like this - it is from one of my very simple games:

namespace GoblinRun {

    export class Game extends Phaser.Game {

        // -------------------------------------------------------------------------
        public constructor() {
            // init game
            super(Global.GAME_WIDTH, Global.GAME_HEIGHT, Phaser.AUTO, "content");

            // states
            this.state.add("Boot", Boot);
            this.state.add("Preload", Preload);
            this.state.add("Play", Play);

            // start
            this.state.start("Boot");
        }
    }
}

 Notice, that I am extending Phaser.Game. I do not have any parameters in constructor and inside of it I call super constructor with paramaters I need.

[Riddle]

File Attempt #1:

/// <reference path="../../engine/typescript/phaser.d.ts" /> 
/// <reference path="../practice/import.d.ts" /> 




export namespace GameFromScratch{
     export class SimpleGame extends Phaser.Game{
       

        public constructor() {
            
            super(Global.GAME_WIDTH, GLOBAL.GAME_HEIGHT, Phaser.AUTO, "content");
            //this.game = new Phaser.Game(800, 600, Phaser.WEBGL, 'content'); ignored
        
            this.state.add("GameRunningState", GameRunningState, false);
            this.state.add("TitleScreenState", TitleScreenState, false);
            this.state.start("TitleScreenState", true, true);
        }

    }
}


window.onload = () => {
    var game = new GameFromScratch.SimpleGame();
};
  
    

Errors:

../practice/practice1.ts(13,19): error TS2304: Cannot find name 'Global'.
../practice/practice1.ts(13,38): error TS2304: Cannot find name 'GLOBAL'.
../practice/practice1.ts(16,48): error TS2304: Cannot find name 'GameRunningState'.
../practice/practice1.ts(17,48): error TS2304: Cannot find name 'TitleScreenState'.

 

File Attempt #2:

/// <reference path="../../engine/typescript/phaser.d.ts" /> 
/// <reference path="../practice/import.d.ts" /> 




export namespace GameFromScratch{
     export class SimpleGame extends Phaser.Game{
       

        public constructor() {
            
            super();
            //this.game = new Phaser.Game(800, 600, Phaser.WEBGL, 'content'); ignored
        
            this.state.add("GameRunningState", GameRunningState, false);
            this.state.add("TitleScreenState", TitleScreenState, false);
            this.state.start("TitleScreenState", true, true);
        }

    }
}


window.onload = () => {
    var game = new GameFromScratch.SimpleGame();
};

Error:

../practice/practice1.ts(16,48): error TS2304: Cannot find name 'GameRunningState'.
../practice/practice1.ts(17,48): error TS2304: Cannot find name 'TitleScreenState'.

File Attempt #3:

Added this.game back to everything along with this.game= etc. same as original except with super(); empty 

export namespace GameFromScratch{
     export class SimpleGame extends Phaser.Game{
       

        public constructor() {
            
            super();
            this.game = new Phaser.Game(800, 600, Phaser.WEBGL, 'content'); 
        
            this.game.state.add("GameRunningState", GameRunningState, false);
            this.game.state.add("TitleScreenState", TitleScreenState, false);
            this.game.state.start("TitleScreenState", true, true);
        }

    }
}


window.onload = () => {
    var game = new GameFromScratch.SimpleGame();
};

Error:

../practice/practice1.ts(14,18): error TS2339: Property 'game' does not exist on type 'SimpleGame'.
../practice/practice1.ts(16,18): error TS2339: Property 'game' does not exist on type 'SimpleGame'.
../practice/practice1.ts(16,53): error TS2304: Cannot find name 'GameRunningState'.
../practice/practice1.ts(17,18): error TS2339: Property 'game' does not exist on type 'SimpleGame'.
../practice/practice1.ts(17,53): error TS2304: Cannot find name 'TitleScreenState'.
../practice/practice1.ts(18,18): error TS2339: Property 'game' does not exist on type 'SimpleGame'.

 

Not sure where I'm on the right or wrong track with either one of these, but feel like I'm getting closer to a solution !!

[Tom Atom]

Attempt #2 is right step. Now try to add reference to GameRunningState (path relative to practice.ts)

[Riddle]

Yes GameRunningState is in there (it's called import.d.ts) which looks like this:

/// <reference path="../practice/practice-gamerunning.ts" /> 

/// <reference path="../practice/practice-titlescreen.ts" /> 

/// <reference path="../practice/practice1.ts" /> 

/// <reference path="../../engine/typescript/phaser.d.ts" /> 

//--import.d.ts contains this code. Just in case, I took it out and put this in here, but it compiles with the same error. With the added error that states practice1.ts can't reference itself. But same error either way!

/// <reference path="../practice/practice-gamerunning.ts" /> 

/// <reference path="../practice/practice-titlescreen.ts" /> 

/// <reference path="../practice/practice1.ts" /> 




export namespace GameFromScratch{
     export class SimpleGame extends Phaser.Game{
       

        public constructor() {
            
            super();
            //this.game = new Phaser.Game(800, 600, Phaser.WEBGL, 'content'); 
        
            this.state.add("GameRunningState", GameRunningState, false);
            this.state.add("TitleScreenState", TitleScreenState, false);
            this.state.start("TitleScreenState", true, true);
        }

    }
}


window.onload = () => {
    var game = new GameFromScratch.SimpleGame();
};
  
    

 

Error.

../practice/practice1.ts(16,48): error TS2304: Cannot find name 'GameRunningState'.
../practice/practice1.ts(17,48): error TS2304: Cannot find name 'TitleScreenState'.
 

 

Also question: "            //this.game = new Phaser.Game(800, 600, Phaser.WEBGL, 'content'); " if this is no longer referenced in the game, how do I adjust screen size and call the Phaser Game Loop?

 

[Tom Atom]

Can you put somewhere whole zipped project (without graphics assets)?

[Riddle]

Yes! I attached the entire folder here. Note that there is a tsconfig folder two folders behind it:

www/resources/practice

the www folder contains a tsconfig file.

practice.zip

[Tom Atom]

Hi, get file below. It should now work. I made lot of small changes, probably I will forgot some here, so go through files to see it. I added folder with phaser engine and d.ts files, but it was not problem (I was just missing it as you have it somewhere else on disk)

• index.html - be sure to always add all scripts. If you passed your compilation errors, you would be missing scripts here. Change it to (do not forget to change back path to Phaser):

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Hello Phaser</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="phaser/phaser.js"></script>
    <script src="practice1.js"></script>
    <script src="practice-gamerunning.js"></script>
    <script src="practice-titlescreen.js"></script>
</head>
<body>
    <div id="content"></div>
</body>
</html>

• there was error in practice-titlescreen.ts. Change:

        titleClicked (){
            this.state.start("GameRunningState");
        }

 to

        titleClicked (){
            this.game.state.start("GameRunningState");
        }

• leave only this in import.d.ts:

/// <reference path="practice-gamerunning.ts" /> 
/// <reference path="practice-titlescreen.ts" /> 
/// <reference path="practice1.ts" /> 

• !!! remove "export" in front of "namespace" in all files !!! very important.
• paths in reference should be relative to file in which it is used. Notice I deleted all that wild pathes. (do not forget to change back phaser reference in practice1.ts)

Here is working project: practice.zip

[Riddle]

!!!! Wow. I just went in to my own file and removed all the exports, fixed the .game (I had removed it during troubleshooting) and it compiled on fixing that alone! I have a few questions:

1. Why did export namespace create that problem?
2. I understood that this was my gameloop: this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { create: this.create }); (and would also be what I would use to adjust the size of my canvas if I wanted); but I'm looking at this new one, and I can't figure out what is representing the game loop, or how the Phaser Game Loop was called?
3. In TitleScreenState, when it's changed to this.game.state.start -- where was (game) declared or defined?

Thank you so much for your help! Man I've been on this for days!

[Tom Atom]

Quote

Why did export namespace create that problem?

To be honest, I do not know...  Only example I found was here (https://www.typescriptlang.org/docs/handbook/namespaces.html) with nested namespaces

namespace Shapes {
    export namespace Polygons {
        export class Triangle { }
        export class Square { }
    }
}

import polygons = Shapes.Polygons;
let sq = new polygons.Square(); // Same as 'new Shapes.Polygons.Square()'

 

Quote

I understood that this was my gameloop: this.game = new Phaser.Game(800, 600, Phaser.AUTO, 'content', { create: this.create }); (and would also be what I would use to adjust the size of my canvas if I wanted); but I'm looking at this new one, and I can't figure out what is representing the game loop, or how the Phaser Game Loop was called?

Your SimpleGame object extends Phaser.Game, so SimpleGame IS Phaser.Game. You can define constructor for your SimpleGame like:

public constructor(width: number, height: number) {

     let renderer = Phaser.AUTO;

     if (something) {
         renderer = Phaser.CANVAS;
     }

     super(width, height, renderer, "content");
}

 This is just example, but you can now pass width and height. Inside constructor renderer is set based on some code and conditions. Finally, call to super constructor passes all these as arguments along with "content". It is up to you, what you put into arguments and what you set inside constructor. Important is, that SimpleGame IS Phaser.Game, so it sets game loop and so on. It then check states for methods like create, preload, update, ... and if found, it calls it.

 

Quote

In TitleScreenState, when it's changed to this.game.state.start -- where was (game) declared or defined?

This is similar. As you extend Phaser.State, then your TitleScreenState is Phaser.State. So, it inherits all properties and methods of Phaser.State object and you can call it from your derived class. "game" property is one of these inherited properties.

I do not know, whether you have some OOP (Object Oriented Programming) knowledge? If not, then look for "Inheritance", "Polymorphism" and "Encapsulation" - three basic OOP concepts.

[Riddle]

I do have some OOP knowledge; I never quite mastered Inheritance, Polymorphism and encapsulation though and this seems like a great opportunity to learn.

I'm not sure why, but I get all sorts of compiler issues when I try to move my "Practice" phaser into a subfolder of my main project and reference within the file itself. The game compiles accurately, everything works, but node.js spits compiler errors at me saying it can't find namespaces etc.

If I follow the compiler messages then I break my game and it doesn't work. But when I ignore them the game compiles and runs and plays anyway. If I ignore them and another problem comes up, the compiler won't help me figure it out because of previous errors it's caught on. So i'm confused because normally I trust what the compiler tells me but if I listen to it, it I'll break my game.

I suspect it's do with referencing 'wild paths' you have mentioned/ having multiple phaser projects in sub folders if I understand wild paths from this context correctly. Node.Js doesn't seem to like that/is finicky about referencing and subfolders/folders. Can I ask: "What are wild paths in this context" ? as I suspect this may be one of the culprits next to export.

 

Note: I have never heard the term wild paths before so somewhat confused about what they mean, but do think the paths are part of the problem with the errors.

 

Quote

Update: Yeah the "Wild Paths" definitely created issues. The issue with the compiler completely removes itself when I move it outside of the sub paths and correct the references to reflect the change. Not sure why Node.Js doesn't like referencing sub folders etc. But this was good to learn! <--This whole paragraph is false. I thought it had compiled with no errors when moving the folder but it didn't.

Quote

updatet#2: No moving it out of the directory doesn't fix the problem, I don't know if I can fix this. Thought typescript would be easier coming from a C# background but  I'm just puzzled right now as to why it would give compile errors but then run perfectly. I think it has something to do with the references. I'm playing around with that to figure out what's causing this issue for typescript, idk. I miss C# XD. <--figured it out.

 

Update#3: So I figured out the errors. For whatever reason even when it's in its own folder I have to write:

../practice/phaser/phaser.d.ts

instead of /phaser/phaser.d.ts

this suggests that node.js thinks that the 'root' is in the folder behind it, but it does this no matter where I move it. Not sure why that's happening for me, but "referencing" sensitivity may have been the culprit in my case.

 

[Tom Atom]

Quote

I have never heard the term wild paths before so somewhat confused about what they mean, but do think the paths are part of the problem with the errors.

Hahaha, "wild path" was kind of joke. I called it "wild" as your paths were compicated a lot, while it had to be as simple as only file name

This path: " ../practice/phaser/phaser.d.ts " says: go one folder up (..), there is practice folder, so go into it, then into phaser. In your practice.zip pckage all .ts files were in the same folder, so path had to be as simple as " import.d.ts", not any "../practice/import.d.ts"

 I may be wrong, but for me it always worked when reference path was relative to file in which it was used.

[Riddle]

Thanks Tom, I get it now xD

I understand that (..) this says to go one file up; I'm just not sure 'why' it's making me go up one file since it is in it's own file away from all the other projects now directly in C://User and is still telling me to go one file up (by this I mean it's separate to everything and everything is now relative instead of behind). Src is referencing it fine without me having to tell it to go up one file, but really struggling with node. I think the problem is that for whatever reason node.js thinks the root file is one file behind my project (even when I move it). I did some research as I realized this is a referencing problem altogether and discovered that node is having a problem figuring out the files that are relative to my own project. That's when the lightbulb came on for me. Tsconfig.json is supposed to help the compiler know where the root folder is; but for some reason it's not reading my tsconfig.json file. It completely ignores it. As  a result I had to create import.d.ts and manually add the <references> with tsconfig.

Making everything relative certainly helped my issues because now it's not soooo complicated with all the go up 3 times, then do this, so that helped a lot; but curious as to how to get this project to read my tsconfig file so that I don't even have to add the references or at least how to get it to stop making me write 'go up a file' when everything is now relative to it.

If interested I dropped a zip of this current one, I moved all the references even the phaser one into import.d.ts because I was testing the reference problem I was having. The only thing I can think of is that I used  a command in my previous project to create a .json tsconfig file /simply add it (don't remember what command it was I was following a tutorial). But now whenever I move the file around it treats it as if the root is always behind it. I'm far away from that project but don't understand why it's doing that. My only problem right now is:

1. Getting it to acknowledge my tsconfig.json file, so I can put all my 'references' there instead of bothering with all the references in import.d.ts
2. Getting it to stop making me write to go up one file in order to acknowledge what is relative to it.

 

 

practice-version 2.zip

[Tom Atom]

Here is new project: practice.zip

Do this changes:

• tsconfig.json - you have to change paths to source files, so compiler knows where to look for it:

{
"compilerOptions":{
  "module": "commonjs",
  "target": "ES6",
  "sourceMap": true,
  "moduleResolution": "node",
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "removeComments": false,
  "noImplicitAny": false
},
  
  "files": [
    "phaser/phaser.d.ts",
    "states/practice-gamerunning.ts",
    "states/practice-titlescreen.ts",
    "practice1.ts"
  ]
}

•  import.d.ts - again: simplify paths and delete rest of file. Whole file is now:

/// <reference path="phaser/phaser.d.ts" /> 
/// <reference path="states/practice-gamerunning.ts" /> 
/// <reference path="states/practice-titlescreen.ts" /> 
/// <reference path="practice1.ts" /> 

• adjust practice1.html - correct paths (delete leading slash):

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Hello Phaser</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="phaser/phaser.js"></script>
    <script src="practice1.js"></script>
    <script src="states/practice-gamerunning.js"></script>
    <script src="states/practice-titlescreen.js"></script>
</head>
<body>
    <div id="content"></div>
</body>
</html>

=> it now compiles without errors...

 

 

 

[Tom Atom]

Hi, in recent days I had to work with TypeScript compiling from command line and all above can be simplified in two points:

1] in your tsconfig.json, you do not have to list files at all. Compiler automatically takes all .ts ant.tsx files from curent directory and all subsequent directories. Your tsconfig can be as simple as this:

{
    "compilerOptions": {
        "module": "none",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": true,
        "outFile": "my_final_output.js"
    }
}

 If you use outFile, then all output is merged into single output file.

2] you do not need any references in any source. It is not necessary anymore.

To compile, just run tsc.exe in directory, where is tsconfig located. WARNING! There is bug in TypeScript 1.8.* and this will not throw any error, but it also will not produce any output (see for eaxmple this: https://github.com/Microsoft/TypeScript/issues/8344). As workaround write:

tsc -p <full_path_to_your_tsconfig.json>\tsconfig.json

 When full path to project is provided, then everything works.

 

 

[yahiko]

You can even generate the tsconfig.json with this command:

tsc --init

Also, TypeScript 2.0 RC is quite stable and it is not a big risk to use it now:

npm install -g typescript@rc