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

Question

I've made this little RPG Ruby game I did while learning and now I'd like to make it into a browser game. I've already set up Sinatra framework to serve it, so what I am looking for, before everything else, is a way to represent the game map in browser (location attributes are stored in DB).

A new map is randomly generated by code for each new game at each game start. For now forget DB, and let's say a map (say 100x100 "squares") is stored as a tridimensional array. (x,y, ...) Last "dimension" of array stores who & what is at that map cell: a player, a building, whatever. So all I have to do is render those "squares" or array cells 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, a technology which would allow me to do so in future would be a good reason for choosing it.

Things that I thought of: HTML tables, HTML5 canvas, some JS framework which is designed exactly with this purpose (which I do not know of = please advice).

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

I really don't know of any other alternatives, maybe there are 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 I'd like to start simple, and then gradually make it better, so, as I said before, I'd prefer something that will give me room for improvement or is headed toward new web technologies but which will also give me a bit of gratification in the beginning :)

p.s. Flash is excluded because I don't like it.

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

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 4

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.