I participated in the GDSE Game Jam over the weekend and ended up making a pretty cool game in a very short period of time. For those who are unfamiliar with game jams, you are given a theme at the start of the competition, and you have to make a game from scratch before Sunday at Midnight, using only freely available tools and art. Once the games are submitted, there is a voting period, and the one with the most votes wins.

The theme for this jam was “There can only be one”. It took a lot of thinking, but I finally thought of, and settled on programmable bots that would fight each other in a 2D arena. I didn’t want the bots to be futuristic, and so the medieval archer game Like Clockwork was born.

Like Clockwork’s documentation and source are available on bitbucket, and you can play it on my App Spot

Note that the battle field will only work in Firefox due to technical limitations. I hope to have a working version in Chrome soon. After this fix is made, Chrome users will have to enable the Experimental JavaScript flag in the browser because Chrome does not support the future JavaScript function yield out of the box.

For this game, I am using a technology stack that is completely new to me: CraftyJS, Blockly, Google App Engine, and the future JavaScript function yield. From a high-level, users stack blocks together in Blockly, then publish the generated JavaScript to Google App Engine’s cloud storage where they (and others) can select bots for battle, which then sends the JavaScript bots to the CraftyJS “battle engine” where you get to watch the bots move around and shoot arrows at each other.

The game took me almost exactly 30 hours of work from start to finish, and a lot of this time was spent reading documentation for the new technologies that I am using in this project. Here’s a rough timeline:

• Friday, Night Started to use CraftyJS, setting up a grid and going through tutorials
• Saturday, Mid-day 2D playing field with red squares shooting brown squares using hard-coded “scripts” with only movement and shooting
• Saturday, Evening Archers shooting arrows with sounds and animation
• Saturday, Night More scripting functionality: Scanning, stabbing, etc.
• Sunday, Mid-day Blockly was installed on a new Google App Engine and I could run the battle engine through it. Starting to play with the App Engine cloud storage tutorials. Decided to test in Chrome, whops, yield doesn’t work
• Sunday, Evening Added a couple custom blocks to Blockly. Listed scripts from App Engine on a web page
• Sunday, Night Oh boy, I really need to tie the ends together. Managed to get scripts going from end to end, then had a moment or two to add a new block or two, and the last crucial step: Names need to be displayed above the bots. Publish, document, submit.

The end was a bit tight. If I didn’t connect Blockly to the Battle Engine, I would have had nothing. Luckily, I came across very few roadblocks and was able to pull everything together in the last hours of the jam, :)

Here are some screenshots of programming and fighting:

Wish me luck in the polls!

I had some troubles getting Mercurial Particle Engine (MPE) to work in my game and I thought I’d share my experiences, how to avoid my mistakes, and how to get it working in your own project.

First off, I downloaded the binaries from their website, started up a particle testing ground and after a few fast fails (effect not initialised exception, etc.), I got some explosions rendering! I thought I was off to a great start until I noticed that I couldn’t scale it. Oh joy, there’s a Transpose property of the Renderer, but in the binary release, it apparently doesn’t pay attention to that. So I grabbed the “mainline” from their repository, which fixes this issue. Not a problem. There were a couple API differences, but nothing to worry about. First thing I noticed is that the RenderEffect method changed from:

// Old, binary release, 3.1
void RenderEffect(ParticleEffect effect);

to

// Mainline, 4.0
void RenderEffect(ParticleEffect effect, ref Matrix world, ref Matrix view, ref Matrix projection, ref Vector3 camera);

With no overloads. I thought: “Great! This can scale my explosion! I’m set”. I also noticed that I didn’t need to initialize my Effect anymore:

// Old, binary release, 3.1
myEffect = Content.Load<ParticleEffect>("BasicExplosion");
myEffect.Initialise();

vs

// Mainline, 4.0
myEffect = Content.Load<ParticleEffect>("BasicExplosion");

Fair enough. Maybe they found a way to initialize the effect inside the custom XML loader, right? Wrong. In the binary release, when I omitted myEffect.Initialise();, it threw an exception in my face. Wonderful! I added the line and moved on. In the mainline version, you need to go through each of your Effect.Emitters, and manually load the texture for them. If you don’t do this, it will happily draw nothing. Yup. Nothing. It will sit there and go if(veryImportantTexture != null){ draw(veryImportantTexture); } else{ /* fap fap fap */ }. Well there goes 6 hours of my life that I’ll never get back. Since I haven’t written an article on Failing Fast, that will be next (or at least very soon). Developers of a public API, scratch that, of ANY API should write code that makes it hard to make mistakes, and when you do make a glaring error (like a missing texture), make it obvious! Throw an exception! Stop executing! What MPE did here is called Failing Slowly. Instead of presenting me with an obvious error that could have been fixed within minutes, it rolled over this obvious error and did nothing. In short, you need to add this when you load your effects:

foreach(var emitter in myEffect.Emitters)
{
    emitter.ParticleTexture = Content.Load<Texture2D>(emitter.ParticleTextureAssetPath);
    emitter.Initialise();
}

Now that I knew my textures were loading, I continued to play around with the world, view, and projection matrices, in combination with the cameraPosition vector, but nothing drew. Hours went by while I researched matrix math, played around with these variables, looked up (outdated) samples of other people using MPE, and played with these variables some more. I finally started copying out bits out of their test suite. I changed my Renderer from SpriteBatchRenderer to QuadRenderer, and wow! It started to render! Now why doesn’t my SpriteBatchRenderer work? I know can use the QuadRenderer in a 2D game, but I wasn’t using Quads elsewhere in my game and would rather stick to the SpriteBatchRenderer.

In the test suite, they did something interesting with the SpriteBatchRenderer: they assigned a value to the renderer’s Transpose property on initialisation. I tried this, and what do you know! Something was rendering, yet again. Now… why does the SpriteBatchRenderer need 4 matices and a Vector3 to do its rendering? It doesn’t. I messed around with the parameters for the RenderEffect(...) method, and nothing changed. It doesn’t pay any attention to any of the 3 Matrix parameters or the camera position variables. All it cares about is that you set the Transpose property to something, anything. It does not assume the identity matrix and will again, draw absolutely nothing if not set. Here’s what you need at a minimum:

myRenderer.Transformation = Matrix.Identity;

Wow… so MPE does not tell you when you are doing it wrong, at all. If you plan to use the SpriteBatchRenderer, here’s a summary of what you need to do:

• You must load all ParticleTextures manually for each Emitter in your Effects
• You must set the Transformation property of the SpriteBatchRenderer to anything other than null
• Completely ignore the world, view, and projection matrix parameters to the RenderEffect method.

Something like this should work (partial code):

GraphicsDeviceManager graphics;
SpriteBatch spriteBatch;
SpriteBatchRenderer myRenderer;
ParticleEffect myEffect;

public void LoadContent()
{
    spriteBatch = new SpriteBatch(GraphicsDevice);

    myRenderer = new SpriteBatchRenderer();
    myRenderer.GraphicsDeviceService = graphics;
    myEffect = Content.Load<ParticleEffect>("EffectLibrary\\BasicExplosion");
    foreach(var emitter in myEffect.Emitters)
    {
        emitter.ParticleTexture = Content.Load<Texture2D>(emitter.ParticleTextureAssetPath);
        emitter.Initialise();
    }
    myRenderer.LoadContent(Content);
}

protected override void Update(GameTime gameTime)
{
    MouseState mouseState = Mouse.GetState();
    if (mouseState.LeftButton == ButtonState.Pressed)
    {
        Vector3 pos = new Vector3(mouseState.X, mouseState.Y, 0f);
        myEffect.Trigger(ref pos);
    }
    myEffect.Update((float)gameTime.ElapsedGameTime.TotalSeconds);
    base.Update(gameTime);
}

protected override void Draw(GameTime gameTime)
{
    GraphicsDevice.Clear(Color.CornflowerBlue);

    Matrix dummyMatrix = Matrix.Identity;
    Vector3 dummyVector3 = Vector3.Zero;
    myRenderer.Transformation = Matrix.Identity; /* set to your own transformation matrix */
    myRenderer.RenderEffect(myEffect, ref dummyMatrix, ref dummyMatrix, ref dummyMatrix, ref dummyVector3);

    base.Draw(gameTime);
}