Category Archives: groworld

Fast HTML5 sprite rendering

After quite a lot of experimentation with HTML5 canvas, I’ve figured out a way to use it with the kind of big isometric game worlds used for Germination X which are built from hundreds of overlapping sprites. There are lots of good resources out there on low level optimisations, but I needed to rethink my general approach in order to get some of these working.

It was quite obvious from the start that the simple clear screen & redraw everything way was going to be far too slow. Luckily HTML5 canvas gives us quite a lot of options for building less naive strategies.

A debug view of the game with 10 frames of changes shown with two plant spirits and one butterfly moving around.

The secret is only drawing the changes for each frame (called partial re-rendering in the link above). To do this we can calculate sprites which have changed and the ones they overlap with. The complication is maintaining the draw order and using clipping to keep the depth correct without needing to redraw everything else too.

In the game update we need to tag all the sprites which change position, rotation, scale, bitmap image, transparency etc.

Then in the render loop we build a list of all sprites that need redrawing, along with a list of bounding boxes for each overlapping sprite of the changed sprites that touch them. There may be more than one bounding box as a single sprite may need to be redrawn for multiple other changed sprites.

For each changed sprite:
    Get the bounding box for the changed sprite
    For each sprite which overlaps with this bounding box: 
        If overlapping sprite has already been stored:
            Add the bounding box to overlapping sprite's list 
            Store overlapping sprite and current bounding box.
    Add the changed sprite to the list.

Assuming the sprites have been sorted into depth order, we now draw them using the list we have made (we would only need to loop over the redraw list if we built it in depth sorted order).

For each sprite:
    If it's in the redraw list:
        If it's not one of the originally changed sprites:
            Set a clipping rect for each bounding box.
        Draw the sprite.
        Turn off the clipping, if it was used.

With complex scenes and multiple moving objects, this algorithm means we only need to redraw a small percentage of the total sprites visible – and we start to approach Flash in terms of performance for games (I suspect that flash is doing something similar to this under the hood). The code is here, currently written in HaXE, but will probably end up being ported to Javascript.

Germination X at Loading Bar, Falmouth

Where better for doing a game focus group test than in a games cafe? We had a fantastic turn out last night – we actually ran out of space! This was the third Lirec focus test using Germination X, but the first I’ve been physically involved in, and the biggest public event about this game I’ve done since last year’s draw your own plant spirit at Pixelache, way back at the start of the project.

Loading is based in the centre of Falmouth, and offers refreshment and the latest games to it’s dedicated clientele. We started off with around 45 minutes playing followed by a post-it note session covering the questions from SICS/mobile life, then a more freeform discussion on observations, many improvements and inevitable deep philosophy of game design as the evening wore on.

The participants included local people interested in permaculture and organic farming as well as those with a more games interest. Some interesting/unexpected things happened, and I haven’t even begun going through all the feedback, so more on that soon.

Edit: Following on from the focus group the game has it’s first ever review!

… one of the most drunken, slovenly and downright interesting game testing sessions in recorded history.

GX: Ancient oaks and tutorial info

Three hundred multicoloured oaks have been scattered around the Germination X world. These trees are all that remains of an ancient forest and require multiple players to find and sow plants around them in order to rejuvenate them into their former glory. This provides a simple additional community activity as well a first attempt at populating the wide expanses of the Germination X planet with landmarks – something that has been brought up in the focus group studies. There is also now an “oak score” to record the players who contribute bringing them back to life.

Also new today, a tutorial explaining how to do the basic picking and planting as well as some of the more advanced things (which are not so obvious and badly needing explanation) like sending seeds and fruit to other players and using butterflies to find out who planted things.

GX: Spirit personalities, asking players for help, twitter

Another Germination X server update happened yesterday, concentrating on the plant spirits.

We needed to log the emotional state of the spirits, so I thought twitter could be used for this, similar to the Naked on Pluto cleaner bot. In this case though, all three plant spirits have accounts, so they can have little conversations with each other – the wording is the same as the in game messages, and is chosen based on their current emotional state.

For the first time the plant spirit characters are programmed with different “personalities”, or settings for their FAtiMA roles, so we should see some different behaviours from them.

The last update broke the FAtiMA rules for diagnosis of ill plants and asking players for help, which is now fixed. The spirits now prioritise asking for help from players who have logged in recently, making it much more likely that currently active players see requests. The spirits are now also ‘summoned’ to ill plants throughout the entire world, meaning more activity generally – previously they were attracted to different locations by player activity only, and so would stay in the last area used (and could only “see” plants there) until new players came along.

GX: soil conditions, glowing plants and empathic spirits

Along with setting up interactive installations, the last week has been a fairly intense code sprint on Germination X, based on feedback from the second focus study by SICS/mobile life in Stockholm.

In order to get a more interesting world, and shake things up a little, soil conditions now vary quite dramatically. Some areas are friendlier to plants, and some very much harder to grow in than before. We’ve talked a lot in the design process about having different types of plants for different soil types or whole regions, this is a step in that direction.

The feedback from both the focus groups in Stockholm agreed that the little star sprites used to signify plants you’d planted were confusing as they looked like flowers. I’ve removed them and added a little glow around the plants instead.

The biggest change this time is probably with the plant spirits. The FAtiMA AI system has been upgraded and as well as a bunch of fixes on my end to improve responsiveness and message wording, I’ve focused on a whole range of emotions called “fortune of others”. The OCC-model (Ortony et al., 1988) defines them like this:

I’ve attached actions to each of these four emotions which cause the spirits to react with empathy to events in the world that don’t concern them directly, depending on how much they like each other, or if the events are good or bad for the plant spirit in question. This starts to more effectively exhibit interesting properties of the FAtiMA system.

Germination X: striving for simplicity

In late December the Mobile Life Centre in Stockholm ran the first focus test for Germination X, and last week I met up with them to get the feedback in detail. Even for a small study of 5 players, this was very detailed – but the broad conclusions were that the underlying ‘ecological model’ of permaculture is being communicated very effectively via the game – the players got the idea of this quickly through playing, without it being explicitly communicated in a didactic manner.

On the downside, the role of the spirits were not clear to players at all – confusion from the quantity of messages, players constantly logging out to see what was going on from the public message timeline, and both the characters emotional state and connections between them and the permaculture plant layers were completely lost in the noise. Added to this, with the short duration of the study (1.5 hours) the pick power restriction was a massive problem, leaving players with nothing to do for long periods of time.

With more focus studies planned I’ve updated the game to deal with some of these issues as best I can:

Pick power is now recharged much faster. To balance this out, and add to the challenge of foraging for seeds and fruit they now regrow much slower and are harder to find in the world.

The way spirit messages are dealt with is now completely overhauled. All messages they send are viewable by all players all the time. They are displayed as speech bubbles by the spirits, making it clearer that they are responsible for them. They are now filtered out of players timeline messages to avoid problems with spamming too many messages.

There are also a bunch of updates to improve responsiveness of the world and make reactions to player’s activity faster to experience. Plant no longer gain health from nearby plants which are ill, which means reactions to new plants happen faster. The season length is shorter again (10 minutes for a full year cycle). Some optimisation of the mongodb code dealing with message dispatching means I’ve been able to double the refresh rate of the game (number of world tiles updated per second) while also reducing overall server CPU usage.

MapReducing plants and players

I haven’t been doing much work on Germination X lately, but we are now up to 101 players, and 766 plants alive at time of writing. Of the 101 players 60 of them are on the first “level” of planting ground cover plants, 24 are at level 2 planting shrubs and 4 have made it to tree planting. 13 have completed the tree planting level and are free to plant what they like.

The mongodb database the game now uses allows you to connect via a console and pull out some statistics using bits of JavaScript with a feature called mapReduce – an idea based on the lisp functions map and reduce (or fold in Scheme) and made popular by Google with it’s search algorithm.

Each tile in the world contains a list of entities (each plants is an entity), so we can “map” over the tiles, creating a new list of plant counts. Then we “reduce” over the counts with another function to find the total. This approach allows the database to do the operations in parallel, and control the amount of memory required – which would be necessary if we had a fair few more players :)

    // map fn 
    function() { 
    // reduce fn
    function(key, values) { 
        var result={count:0}; 
        values.forEach(function(v) { 
        return result;
    // tell it to spit out the result in the console
    {out: {inline:1}}

This more complex example tells us the distribution of players by how far they have got:

    // map fn
    function() { 
        if (this.layer==0) emit("ground cover",{count:1}); 
        if (this.layer==1) emit("shrub",{count:1}); 
        if (this.layer==2) emit("tree",{count:1}); 
        if (this.layer==3) emit("complete",{count:1}); 
    // reduce fn
    function(key, values) { 
        var result={count:0}; 
        values.forEach(function(v) { 
        return result;}, 
    {out: {inline:1}}

GX: Intelligent butterflies etc

Over the last couple of weeks Germination X has managed to attract 70 players picking and planting in a permaculture world, with plants now covering 92 5×5 tiles – watch out Zynga :) This week has seen some more additions, firstly giving gifts to spirits has a large effect on their emotions positive and negative, and while it needs a bit more work – the wording of messages is modified according to the spirit’s emotional state at the time they send them.

The other big change is a new activity for when you are out of picking power which can give you more information about the other player’s plants – the butterflies can be drag-dropped over plants to find out who planted them.

Having this kind of information available makes some open ended meta games possible, such as a group of players getting together to take over part of the world. The role of the spiders remains mysterious, but I’m trying to figure it out…