Wednesday, 10 July 2013

TypeScript for Games

Last year I attended a talk by graduate recruiter Mark Hope and Microsoft evangelist Lee Stott, talking about jobs in the games industry. I asked Lee about possible future use of TypeScript for browser games. At the time he said that TypeScript had it's place firmly in little 2D games and web applications.

That view was understandable - the problem I've ran into recently is that canvas rendering on mobile can be quite slow. I found this when I started porting The Crate Flood from ActionScript over to TypeScript and tried it out as a PhoneGap app. The canvas rendering times seemed poor (using a Sony Xperia P with stock browser):

The Crate Flood on HTML5 Canvas
The stats bars show the time spent in a rendering loop versus the update loop. Clearly something is going horribly wrong and I think it was down to a lack of hardware accelerated rendering. The code, both TypeScript and generated JavaScript, are available on github: https://github.com/Tw1ddle/The-Crate-Flood - it should run on most browsers. The JavaScript code is included.

The Crate Flood with a debug GUI, debug console and performance stats
A really nice thing I've noticed about TypeScript is how effortless the debugging is. There is good tools support in Visual Studio, and then at runtime it is dead easy to quickly add in libraries for use as debug terminals and GUIs for investigating problems or inspecting game objects.

It looks like in the past few years things have changed with regard to rendering performance. The Turbulenz engine and other trailblazers utilize a WebGL renderer for high performance rendering. They also use TypeScript to create a more maintainable and reliable games engine. Furthermore, Microsoft have delivered a build of Internet Explorer 11 in the Windows 8.1 preview that implements a good chunk of WebGL functionality.

However the main reason for me being attracted to TypeScript is that the optional type annotation provides a lot of the information that most JavaScript projects lack. It seems to me that projects such as three.js have struggled to make for up that in their documentation (though they do make up for it another way - with a huge set of examples).

Another great thing about TypeScript is that interfaces can be defined to existing JavaScript code, with many popular interfaces kept on github. Given time I intend to look at the three.js TypeScript interfaces and add more comments to improve the documentation that can be generated from them.

No comments:

Post a Comment