Canvas Tiles… And more Tiles

Glacial Flame is the name, isometric is the game. So many tile based classics have created game changing impacts, containing addictive crack like play that a list would be unorthodox. The term tile based doesn’t reflect the game style, instead the engine and method of game creation. Graciously used for memory restrictions on early consoles, formulating all time 1980s iconic arcade games, top down godly views and side scrolling platformers, both simulation development and strategy domination, fantasy worlds and 8 bit screens tile based games have rendered it all.

Computer games have come a long way in the last thirty years but the fundamentals for tile based engines have always been the same. Image repetition provided through tile sets or sprite sheets allow for reusable tiles that can be applied over and over from level to level. Instead of drawing out each level on a giant canvas (referred to as art based in the Flash world) each level is stored as a data structure that contains what tile images should be drawn and where. Evolving from a flat top-down perspective into isometric allowing for a greater sense of depth, tile games have remained popular through game advancement over the years.

Glacial Flame uses a tile based engine for creating the visual world. Although each tile starts its life in an array as a single integer it quickly develops into a fully visible and possibly attractive part of your game view.

Outdoor area consisting of 10,000 tiles.

Currently our tile engine allows for any size of map to be loaded and scrolled via placing your mouse to the sides of the game screen. Dynamically loaded from a database via PHP and relayed as XML, the world editor allows for saving and loading of different areas which can be of various sizes. As the map is scrolled the engine removes non-visible tiles and introduces those that are in view of the window port. Tiles and objects are correctly layered in the appropriate depths with any object being positional on top of any ground tile. While the prior map was an area consisting of 10,000 tiles the following screenshot shows that of a far smaller 3×3 map made of 9 tiles. Taking full advantage of the particle engine, tiles can have effects applied to them like the prior wall candles and the following candle stands.

Smaller 3x3 map made of 9 tiles

So how is a tile map drawn? In fact it can be rather simple in HTML5 Canvas. As stated in the previous post we will discuss how elements are achieved and put together various tutorials on creating your own. The following will presume you have a basic grasp of Canvas and are using an up to date browser which supports it. Having setup ctx as your canvas element and set body to call init() onLoad the following can be setup inside the init() function.

var map = Array([1,0,1,0,1], [1,1,1,0,1], [1,0,1,0,1]);

// Your map array as it sounds is basically your
// world and what will be drawn. Using a two
// dimensional Array we store the rows and columns
// To keep it simple we will use the Canvas fillRect
// call to only draw tiles represented by the number
// one.

for(var i=0;i<map.length;i++) {
    for(var j=0;j<map[i].length;j++) {
        // Now we loop through our map from start to end via
        // the length of dimensional array.
        if(map[i][j]) {
            ctx.fillStyle = '#FF0000';
            ctx.fillRect(j*20,i*20,20,20);
        }
    // Draw a rectangle at i + j position * 20 so that
    // our 20x20 pixel squares are correctly positioned.
    }
}

And that really is the basic minimum needed for creating a tile world. Next steps would be to replace the if statement with an array lookup using the value of the current tile to return an image or graphic.

As Glacial Flame progresses we will create more in depth tutorials aimed at various skill levels of programming, hopefully beginners and intermediates will find some of the content helpful.