Chris Gomez

Development topics for the indie programmer

Philly Code Camp – Web developers are already game developers

Thanks to everyone who attended my session: Web developer by day, Game developer by night at Philly.NET Code Camp 2015.  I’m so grateful that so many people would take the time out from important topics in the .NET world and beyond to come have a little fun learning about hobbyist game development.  The key message that I hope was well-received is ASP.NET developers are well-suited to put their skills to work building high performance games.

Game development seems like a black art.  If you were a career developer (on any platform) you often found the style of program flow to be foreign if you were switching from event driven programming to game programming.

Modern web development frameworks and events are working pretty hard to minimize the boilerplate code you have to write in your game loop.  In some cases, it even begins to feel somewhat event driven again.  I don’t want to oversell that.  Even in the code we wrote during the Code Camp session, we were still thinking about “what do we have to update every frame”. 

We looked at Phaser, a JavaScript framework that helps you build fast action video games.  Phaser offers plenty of great tools to help you “set-and-forget” attributes of your game components and then let the engine take care of it.

This was a very code focused session with few slides.  I tried something I hadn’t done before in that I really just walked you through the very same tutorial you can complete yourself at Making your first Phaser game right on the web site.  I always try to invent my own project and release the code for it, but I wanted to see if it would help people to have a complete reference to go back to when they get home from a long day (or weekend) at Code Camp.  So you can walk through the same tutorial complete with explanation from Alvin Ourrad and Richard Davey.


Where’s the code?

For now, the best place for you to go to put together the tutorial is the Phaser website.  Below you will also find links to the other examples we looked at.  The reason for this is to avoid any issues with varying licenses for the work and creative assets.

Making your first Phaser game

Audio Sprite sample

Breakout and Invaders Sample

The complete Phaser Examples library – Try out the samples and look at the code right in the browser!


I forgot what tools we discussed again?

This is NOT a complete list of tools, but we briefly discussed these tools at the talk.

Inkscape – Vector graphics editor.  Open source and cross platform

Spriter – 2D Animation Creator

Tiled – Tile based map editor.  Free. Exports to a JSON format that Phaser already supports.  For a complete demonstration see Brandon Clapp’s post: Creating and Importing a Map for Phaser Using Tiled.

Audacity – Free, open source, cross-platform audio recording and editing software.  You could use this to combine sounds into audio sprites.


Cross Platform with Apache Cordova

We had run out of time, but as people were shuffling off to lunch I did show those remaining that with just one change (to the size of the HTML5 canvas and positioning of the platforms), the code ran with minor changes in the Nexus emulator:

Screenshot of tutorial code running with Apache Cordova with little change

What were the changes?  I changed the resolution of the HTML5 canvas to match the emulator’s dimensions.  Then I moved the platforms, since they were hardcoded to screen space.  Of course the code needs more work to be mobile ready, but the value of developing games with web technologies is evident with this kind of portability!


Where else can I go?

Follow @photonstorm on Twitter.  When the Phaser community adds more help, tutorials, and expertise, it’s often mentioned here.  Come see us at Philly GameWorks, the game developer group that meets in Malvern.  Don’t hesitate to reach out to me directly!


Try it now!

Try out Phaser right in your browser at Phaser Sandbox. Select a template and go!



I received some great questions and topic ideas during the session.  Thank you all for the interesting ideas to cover!  I am going to list them here and as I work through them I can come back and update this post linking to the answers and more demonstrations!

What specifically is the advantage of loading assets in preload()? 

What happens if we use game.load.xxxx methods somewhere else?

How would we load assets as needed “on-the-fly” during gameplay?

How do you profile memory usage / garbage collection? (This could end up being a general JavaScript answer, but nonetheless a great question)

Does every frame of an animation have to be the same dimensions?  What if some frames extend much further along than others?

How do we solve the “audio format” problem (previously no one format was supported in all browsers) with Phaser?

Can I combine what I am doing with phaser with other web technologies (web apis, mobile services, websockets)?

Go into a deeper look at the four main Phaser functions (preload, create, update, render).

blog comments powered by Disqus