Tag Archives: html5 canvas

Aniziz (the soil)

The borrowed scenery game has been named ‘Aniziz’ – from the 12th century Lingua Ignota used by Hildegard of Bingen. The term means “the soil” and represents the game’s role in the wider project, for nurturing plants found in the city, as well as the mapping element.

It’s working much more like a proper multiplayer game now as it has player accounts, using four types of avatar from Theun which represent patabotanical tarot versions of the hermit, hierophant, magician and high priestess. Your avatar will be picked when you register, in the form of a ‘reading’ ritual – still to be designed.

The text rendering has been greatly improved – the support provided by HTML5 canvas is quite basic, so you need to do things like word wrapping yourself. Particle systems now provide more interactivity for the fungi and the game includes a chat mode for players using the same font as on the tagged city plants and the the android app. The thinking behind this is to create a situation where interpretation is encouraged over direct text communication, inspired (as in previous multiplayer online games I’ve worked on) by Tale of Tale’s Endless Forest.

The game will be made public closer to the event, but the code and assets for all these projects are now available on FoAM’s git repository.

Borrowed Scenery – spacesuits for plants and full screen scrolling in HTML5 canvas

Lots more of Theun’s new artwork which is coming on quickly over the last few days has been added to the game, the glass bubbles (more precisely cloches) are space suits for the plants from our world to live in, in their new patabotanical environment. Information about tagged plants is printed in a Voinych Manuscript inspired font.

I’ve been doing a bit more research into HTML5 canvas, turns out the the screen size doesn’t affect rendering framerate too much, and it now adapts to the browser size. Full screen scrolling is working – centring the view on the player. It wasn’t immediately obvious how this could be done without redrawing all the sprites each frame (which is way too slow), in this respect HTML5 development is really reminding me of 16bit era – hacking things like this to work quickly. It turns out it’s possible to use drawImage using the current canvas as it’s own input – so redrawing the whole thing with an offset:

function scroll(diff_x,diff_y) {
    // calculate the source and destination offsets - whether we offset
    // the source or destination rectangle depends on which direction 
    // we are travelling in 
    var sx=0;
    var dx=diff_x;
    var width=this.ctx.canvas.width-diff_x;
    if (diff_x<0) {
        sx=-diff_x;
        dx=0;
        width=this.ctx.canvas.width+diff_x;
    }
        
    var sy=0;
    var dy=diff_y;
    var height=this.ctx.canvas.height-diff_y;
    if (diff_y<0) {
        sy=-diff_y;
        dy=0;
        height=this.ctx.canvas.height+diff_y;
    }

    // remember to convert to ints, subpixel 
    // scrolling results in crazy artifacts
    this.ctx.drawImage(this.ctx.canvas,
                       ~~(sx),~~(sy),~~(width),~~(height),
                       ~~(dx),~~(dy),~~(width),~~(height));
}