Tily

A basic font-based tile engine.

Features

• Uses Canvas to render tiles.
• Switch between buffers with a configurable fade transition.
• Each tile is a string character or multiple characters drawn on top of each other, so rendering is independent of resolution and pixel-ratio.
• Can use Web Fonts and Icon Fonts for custom icons. I recommend using Web Font Loader.
• Pan and zoom the camera for scrolling buffers.
• Tiles can have transitions and animations for movement, scaling and rotation amongst other things.
• Cell-loading for infinite or procedurally-generated buffers.

Setting it up

Just load tily.min.js in your page and create a Tily.Main instance, passing in the canvas element on which you want to render as an argument, like so:

<script src="tily.min.js"></script>
<canvas id="tily-canvas"></canvas>
<script>

var tily = new Tily.Main(document.querySelector("#tily-canvas"));

</script>

Documentation

Demos

• Moving a player around the screen
• A really big buffer
• Lots of animations and transitions
• An infinite procedurally-generated buffer
• Map Painter