Javascript-Driven Tile Engine

By Bobby on Thu, 1 Jan 2009 06:06:00 +0000

: javascript, tile engine,

The tile engine on this page is a "proof of concept" showing that Javascript scrollers are possible. Performance varies with the number of layers and autonomous tiles/sprites.

Demo

Here is a demo using tiles from Shining Force II (use the arrow keys to move/scroll):

Implementation


To make the most out of native Javascript routines the tile-grids are implemented as tables. The tiles are set as the background-image for each table cell (when necessary the background is offset to give the illusion of smooth scrolling).

In this demo i used 48 by 48 pixel tiles and three layers:

  • the background layer

  • the character layer (contains everyone except the main character)

  • the main character layer


Creative Commons License The Javascript-Driven Tile Engine article by Bobby Soares, unless otherwise expressly stated, is licensed under a Attribution-Noncommercial-Share Alike 3.0 United States License.

  • Imre Tabori on Sat, 14 Mar 2009 08:06:26 +0000 says:
    Nope :) However mine lacks of layers, scrolling etc... I'm glad that I'm not alone with my gaming hobby ;) Cheers!
  • Brandon Thomson on Sun, 5 Apr 2009 00:21:42 +0000 says:
    Interesting. I'm thinking about writing one of these too. I'm hoping Chrome/Webkit/Tracemonkey ought to help out somewhat with larger sizes, although it may still be impossible to get smooth scrolling with anything much larger than your example.
  • Niels 'That Guy' Groot Obbink on Fri, 15 Jan 2010 09:55:25 +0000 says:
    Somewhat late, but still: nice. I've been busy with javascript tile engines myself lately, although mine uses the <canvas> tag (which means crappy browser support) and 16x16 (pokemon) tiles. Check it out here: http://that-guy.net/projects/Beacon-engine/

Comment moderation is on, so your comments may not be visible immediately after posting.



(see all) web service, tile engine, google docs, flash, window, penn, pixel, python, game, compiler, server, tlslite, token, reference, rtmp, vmware, p vs np, Google Docs, poweredge, javascript, component, vbulletin, proxy, networking, vmware esxi, GData, forum, plugin, gwt, outlook, scales, puzzle, GWT, java, attach, shining force, subsets, appengine, permutations, pong, authentication, roland, screenshot, np-complete, gdata, neural net, php, latex, audio, AppEngine