Performance Problems when coding in Typescript

[Akshar Patel]

I'm creating a 2D platformer. I coded the game (boot, preload, mainmenu and level1) in Typescript. All was well, untill I noticed that after about 15 seconds, the framerate starts to drop to a point that the fps is around 4-5.

 

I tried to various solutions such as running the game with bare minimum graphics, commented helper functions and so on. At the end I only had my player and the tilemap exported from Tiled. But the problem persisted.

 

So I tried different version of Phaser. Same Problem.

 

Next, I tried writing the entire game in pure javascript from scratch with no change in the logic or implementation. The problem got solved. The game runs at more than 50 fps.

 

Is this a known issue with typescript? Is there any additional step needed to code in typescript?

[jpdev]

Since typescript is converted to javascript this can't be a typescript issue, it has to be something in your code.

 

Most likely you create an object over and over in the game loop in the typescript version and you didn't do that in the javascript version.

 

If you show a minimal example we might be able to find the problem.

 

All my phaser typescript games have no performance issues.

[Akshar Patel]

@jpdev : Thanks for replying. I'll try to post the code as soon as possible. Meanwhile, can you tell me how do you compile your typescript during development phase : in a single file or as multiple files?

[jpdev]

Hi,

 

I am using Webstorm to code with phaser & typescript.

As of this week, webstorm has now integrated the typescript compiler, so that every edit to a ts file is instantly converted into javascript.

(Before version 10 it used to do that on every save via filewatchers.)

 

Not only does it take care of the compiling, it also has perfect auto complete.

 

Only when I want to build a release, I use a grunt script that:

a) compiles into js files,  merges all js files into one and c) minifies this new file.

[clark]

In Visual Studio I have a src/ directory which contains say src/Project.ts

 

Right click on your project in solution explorer (the project, not the solution parent), and go to properties, then go to the "TypeScript Build" Tab, and check the "Combine JavaScript output file into file: ".  I put my path to "js/project.js"

In index.html I reference /js/project.js

 

But all my other code is written in src/ in TypeScript.

 

For example a typical structure for me personally:

 

/src/Project.ts

/src/states/

/src/states/Boot.ts

/src/states/Preload.ts

/src/states/MainMenu.ts

/src/states/Engine.ts

/src/game/ui/

/src/game/objects/

 

etc

It all comes out to project.js 

I also wrap code in a module in each class file.

 

module Project {    export class Game extends Phaser.Game {        constructor(gameWidth: number, gameHeight: number, canvasID: string) {            super(gameWidth, gameHeight, Phaser.AUTO, canvasID);            //add the states used            this.state.add(GameStates.BOOT, Boot, true);    //////////////////Project.Boot > src/states/Boot.ts etc            this.state.add(GameStates.PRELOADER, Preloader, false);            this.state.add(GameStates.MAINMENU, MainMenu, false);            this.state.add(GameStates.GAME, SpotEngine, false);        }    }    //should be in a different file really but I was a lazy bastard and now its in all 5 games. It is actually pointless, but I just do not do direct strings so meh    export class GameStates {        static BOOT: string = "boot";        static PRELOADER: string = "preloader";        static MAINMENU: string = "mainMenu";        static GAME: string = "game";    }}

Then I would say in index.html somewhere when the page has loaded phaser.js and project.js, I also presume that "canvas" has been setup. 

var game = new Project.Game(100, 100, "canvas"); //small game

If course, this is by no way carved into granite as a correct way, but it has worked well enough for the last 5-6 games. 


 

[Akshar Patel]

Thanks @clark and @jpdev.

 

@clark : It is a nice workflow. I'll remember it for the next time I use Visual Studio for Typescript.

 

@jpdev : I too am using Webstorm 10. And you were right. I was doing a very expensive operation in the update method that I didn't do in the javascript version. Thanks for pointing in the right direction.