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: - 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:

Friday, 28 June 2013

Damselfly Catcher

For my final university project I made a game to investigate an effect called motion dazzle. This effect is hypothesized to make tropical "helicopter" damselflies harder to capture while on the wing. The idea was to test whether the whirling of the markings on the damselfly wingtips could make it harder for predators to estimate the speed and trajectory of these damselflies.

Megaloprepus caerulatus damselfly (Steven Johnson).

The principle behind the effect can be compared to ship "camouflage" schemes in the World Wars that were designed to make the actual size and velocity of a vessel difficult for hostile submarines to determine, rather than aiming to make the ships harder to spot at a distance.

Dazzle-painted warship.

A similar principle may apply that could help large, conspicuous and slow Neotropical damselflies avoid predators. Ambush predators like perching birds might swoop in on a damselfly but be confused out of a kill due to the motion of the damselfly wing markings.

The cross-discipline aspect had me presenting these ideas to biologists, psychologists, physicists and artists in order to source assets and provide a solid basis for investigating the hypothesized effect for the first time in this context.

Rufous-tailed Jacamar (Magnus Manske).

The game is available free on iPad and was written in C++ with the Cinder framework. The game is called Damselfly Catcher. Crowdsourcing the creation of experimental results was done, with about five thousand crushed-damselflies worth of data voluntarily collected over the first few days.

Unfortunately the results of the experiment were not conclusive due to limitations of the experimental design, however research into the effect is going to carry on. Human applications of the effect could include the use of specialized paint schemes to protect moving vehicles in low tech warzones.