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.

Saturday, 6 July 2013

Search for a Star Again

I took part in Aardvark Swift's Search for a Star. Like last year the second round fixing broken code and making a fun game out of it over the course of a week. It was coded in C++ with no middleware besides permitted use of the DirectX SDK and standard Windows system libraries.

Simple Polygon Wars
I used XAudio2 for music, SAPI for text-to-speech and basic DirectX for graphics. The game was a simple shoot 'em up. With a lot more work it would end up like a Polygon Wars clone. Rather than attempt to add advanced graphics I concentrated on events and getting audio working.

Enemies came onscreen timed to the music and voicing. The aim of the game was to keep your blue square alive as long as possible while shooting at enemies. Here's a video of the gameplay:


On the technical side C++11 features were used and an event handling system that bound lambda functions for execution later was implemented. I used a combination of Perlin noise and interpolation to move the enemies about in an interesting way.

I think a good addition would have been to use audio analysis features such as beat detection to influence the gameplay, maybe affecting movement of some enemies or the rate at which enemies came onscreen. Adding custom shaders and particle effects as well as a better HUD would be the best additions on the graphics side.

Here is a git repository with source code and binaries thrown in. The program is tested working with Windows 8 using Visual Studio 2012 and the DirectX SDK installed: https://github.com/Tw1ddle/SFAS-2012-2013