What would be a good way to implement/render a 2D tiled map for a browser game?

Question

I coded a a little RPG in ruby and I used an array to contain the map squares. The elements of the array (which defines the X coordinates) are arrays themselves whose elements defines the Y coordinate, and each of these are arrays too which stores the terrain data on first position, and player/npc/objects/buildings on following positions.

What I am trying to do is render those terrain data "squares" to a 2D tiled map in the browser.

The map does not need to refresh or be dynamically fetched as you scroll it, (at least at this stage of development) but an implementation which would allow me to do so in future is a possible path.

Being a total beginner at web design/rendering the things that I thought of are: HTML tables, HTML5 canvas, some JS framework which is designed exactly with this purpose (which I do not know of = please advice).

I know about gameQuery but I've never used it and I don't know if it's going to slow everything down as I will be adding new features (scrolling, ajax).

I really don't know of any other alternatives, maybe there any lighter approaches? Easier or more minimalistic ways ? More targeted JS framework which is the right tool for the job? Maybe just some html canvas code, or even simple image maps, or images with absolute positioning will be enough?

The thing is that I'd like to start simple, and then gradually make it better, so I'd like something which will give me a bit of gratification in the beginning but that also has room for improvement and is headed toward new web technologies

p.s. Flash is excluded of course...

Update: rewrote the question in a more decent english (hopefully) :)

Answer 1

Let's start with the array. Don't think about it as tridimensional. Indeed, if you want to have stackable units there, it makes sense at first sight:

• first dimension is collumns of rows of tiles
• second dimension is rows of tiles
• third dimensions is tiles, i.e. arrays of units.

But this third dimension won't be consistent, as you will store there not only units, but also tile's properties like it's height or terrain type. Also, while tiles are fixed and don't move, a player will bring some units to front, move to other tiles etc, and so it doesn't behave like a dimension.

Create a two dimensional Array (a grid) of tiles, where a tile is an object with it's own properties, one of which is an Array of units residing there.

I also don't recommend using a framework to learn - Give yourself a try, and after a month or two you will know what features you need and only then look for a framework if you really need. But as it goes for 2D, features frameworks provide aren't astonishing. Keep in mind frameworks have their limits and with as simple things as 2D tile game I would rather create everything from scratch, then learn to use a framework.

I don't program in JS, so I can't recommend a good IDE, but I made something in JSFiddle for you, because I know that beginnings are hard.

http://jsfiddle.net/8adUK/1/

Answer 2

Renderer apart, consider reading the following articles to understand how older systems implemented optimal tile-based map traversal:

Tile-Based Games FAQ version 1.2, and Tile Graphics Techniques 1.0

They're indispensable guides for implementing tile based games on systems which may have limited resources. In terms of today's technology, HTML5-based games' loading-times are affected by HTTP connection speed, and it's still important to keep memory usage as low as possible.

The bottom line for optimal tile map rendering is breaking your map down into X*Y regions, and only loading those regions as they are needed. Once you can load, unload, and render a region, you're on your way to handling variably-sized maps.

(Another method would be to implement strip-loading; i.e. loading a strip of tiles as the user progresses through the map. When loading using AJAX or WebSockets, however, this mightn't be optimal.)

To start out, consider defining some logical entities, and progress from small to large.

• Tile: A single tiny entity which can have a terrain type, a graphic, an onEnter event, an onLeave event, an altitude,
• Region: A two-dimensional array of Tiles, which can also have onEnter and onLeave events. It should also have render functionality. When you're drawing content from the map, consider drawing it in a 3x3 array of regions.
• Map: A two-dimensional array of regions.
• Camera: A virtual object which has X,Y coordinates, which the player "controls" when he traverses the map. The Camera should know what Region it's currently viewing, as well as surrounding Regions in N/S/E/W and NE/NW/SE/SW directions. It has a clipping rectangle; when a region's border goes outside of the clipping rectangle, the player has traversed a region; the three 'out of sight' regions can be deleted from memory, and three 'new' regions loaded into memory.

Good luck!

Answer 3

I ended up using Fabric.js:

Fabric.js is a powerful and simple Javascript HTML5 canvas library.

Look at this:

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c');

// create a rectangle object
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
});

// "add" rectangle onto canvas
canvas.add(rect);

It has many more features and this was exactly the simple and "extensible" approach I was looking for for a start. At the time it was quite a big project for me and I needed all but adding tedious low-level canvas code to the mix.

Answer 4

Have a look at Impactjs. It is a game framework that allready implements a tile/camera system, -the tiles can even be animated- and offers a nice level editor. It is not free, it is 100 bucks, it uses html5 = canvas + javascript, is quite well written and documented, despite a few annoying design flaws, and there's a community around.
http://impactjs.com/
http://www.pointofimpactjs.com/

There's also Gamvas, a free javascript gaming framework, perfectly written and documented, but which does not handle tiles natively and has little community. (still it handles camera, physics with Box2D, animation, sound, events,...).
http://gamvas.com/

There are obviously a lot of other frameworks but they did not convince me, ...

Did you google for a javascript / canvas framework that does tiling ? maybe just by combining a few little frameworks together it might do it.
Crafty.js is a starter for instance :
http://craftyjs.com/
it is free, very small and does allready quite a few things for you.

Answer 5

I would strongly recommend using canvas, not discrete html elements. In my experience, you'll find that discrete HTML elements works ok when they are small in number, but becomes bad at scale. You may also find garbage collection pauses are worse when there are lots of html elements to GC rather than just Javascript objects (for example, if you used one html element for each particle or explosion)

You'll want to write your own (simple) renderer which performs culling, i.e. only renders those tiles within the displayed area (or perhaps slightly outside).

I wrote such a game and found that it performed very well on most desktop browser (yes - even Internet Explorer).

When you want to do more fancy effects, you will probably want to move to WebGL, because the performance of stuff like blending is going to be quite variable (i.e. poor) for 2d canvas.