Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

27. May 2014


So I’ve been looking at creating games using Phaser with TypeScript and I’ve run into my first few annoyances.  The first of which is certainly debugging.  At first glance debugging looks wonderful then I realized my mistake.  In the previous post I said I had to add the generated JS file to the project for a breakpoint to be hit and suddenly I understand why.


You can’t debug TypeScript code in Chrome or Firefox.




If you set a breakpoint in Visual Studio in a TypeScript file:



Then run your application using Internet Explorer as the target:






Now switch to Chrome or Firefox and your breakpoint will never be hit.



Well that kinda sucks.  At the end of the day it’s not a deal breaker, Internet Explorer is getting better and with Windows Tablets and Phones, should probably be a device target for you, so using Internet Explorer as your debug platform shouldn’t be a huge deal, especially if you are using Visual Studio as your development device.



Debugging TypeScript in Firefox or Chrome


Of course both Firefox and Chrome have built in debuggers so you can easily debug the generated JavaScript.  However, if you want to develop in the language your programmed ( be it TypeScript, Dart or Coffeescript ) you need another option…


Source Maps.


All major browsers support source maps now, but may require you to jump through a a couple hoops.  A source map is basically what it says, a map from one language to another, so the debugger can run the JavaScript code but show you the line that actually generated it.


First we need to tell Visual Studio to generate a source map for our TypeScript project.  Right click your Project file in Solution Explorer and select Properties.



Select TypeScript Build and in the Debugging section check Generate Source Maps.



Now build your project and the file should be generated.


Source map with Chrome and TypeScript


Now let’s take a look at the process in Chrome.  Run the project in Chrome from Visual Studio.  In Chrome we now need to enable source maps.

Press F12 to bring up the developer tools if not already open.

Select the gear icon.



In the resulting window make sure Enable JavaScript source maps.



Now you will see your ts files are available in the sources tree.  Notice how I set a breakpoint in the TypeScript source ( line 12 )?



Now refresh in Chrome:



The corresponding line in the generated JavaScript will be triggered when the breakpoint is hit.


Not perfect but definitely better.


Source map with Firefox and TypeScript


From Visual Studio run in Firefox.

Load the Debugger ( CTRL + SHIFT + S or Tools –> Web Developer –> Debugger ).

Click the gear icon and now select Show Original Sources



Now Firefox will show your TS source ( and no JS files unlike Chrome, to see them turn Show Original Sources off ).  As you can see you can now set a breakpoint in the TypeScript source:



Unlike Chrome however the debugger also works with the TypeScript sources:





Summary and another gotcha!


If you are working in Visual Studio 2013 the VS debugger works flawlessly with Internet Explorer.

If you want to work in another browser with TypeScript use Source Maps if you don’t want to work with the generated JavaScript.  In terms of browsers, Firefox supports source maps much better than Chrome does.


Now another gotcha that took me a bit of time to stumble to the solution of.  When you create a source map its actually added at the bottom of the generated JavaScript file (app.js in this case), like so:

})(GameFromScratch || (GameFromScratch = {}));
//# sourceMappingURL=C:/temp/Phaser/TitleScreen/


Here is the gotcha, you absolutely cannot use that pathing in Chrome nor Firefox, you simply wont get a source map in either browser.  Instead edit it to use relative paths like:


})(GameFromScratch || (GameFromScratch = {}));

And you are good to go.


blog comments powered by Disqus

Month List

Popular Comments

Game development tutorial: Swift and SpriteKit - Part 5 Sprite Animation
Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon

Home > >

3. July 2014


Back in Part 3  of this SpriteKit/Swift tutorial series we looked at loading game sprites using a texture atlas and implemented a simple animation system.  At the time I said this wasn’t the way you perform animation and that I would cover the proper way later.  Then in Part 4 we covered SpriteKit actions showing how to perform a number of different actions.  Now we look to combine the two, using actions to perform sprite sheet based animations using a TextureAtlas.


This example is basically a perfect mash-up of the prior two tutorials, so it will be code heavy and explanation light.  So, on to the code!


import SpriteKit


class GameScene: SKScene {

    let textureAtlas = SKTextureAtlas(named:"jet.atlas")

    var spriteArray = Array<SKTexture>();


    var monsterSprite = SKSpriteNode();


    override func didMoveToView(view: SKView) {

        view.scene!.anchorPoint = CGPoint(x: 0.5,y: 0.5)









        monsterSprite = SKSpriteNode(texture:spriteArray[0]);

        monsterSprite.position = CGPoint(x:-view.bounds.width/2, y:0)

        monsterSprite.xScale = 2;

        monsterSprite.yScale = 2;




        let animateAction = SKAction.animateWithTextures(self.spriteArray, timePerFrame: 0.20);

        let moveAction = SKAction.moveBy(CGVector(view.bounds.width,0), duration: 1.4);

        let group =[ animateAction,moveAction]);

        let repeatAction = SKAction.repeatActionForever(group);




    override func update(currentTime: NSTimeInterval) {

        if(monsterSprite.position.x > self.view.bounds.width/2){

            monsterSprite.position.x = -self.view.bounds.width/2;






And when you run it:




Basically we create our texture atlas like we did before, but instead of creating individual SKSpriteNodes using the atlas, we instead create an array of SKTextures.  We then pass that array of textures, representing each animation frame, to the action animateWithTexture.  The parameter timePerFrame represents how long each individual frame will be shown.  The rest is just a couple more SKActions to make things interesting.  One to move the sprite from the left to the right, one to group the texture animation and move action together, then another action to repeat it forever.


As you can see, between TextureAtlas and animateWithTexture, creating animations in SpriteKit is pretty easy.

blog comments powered by Disqus

Month List

Popular Comments