Graphic tiles

The "tile" layout module is used to draw graphic tiles. You need to define a proper tileMap by mapping individual chars to offsets in your tileSet image. Please note that the image must be loaded before you attempt to use it.

var tileSet = document.createElement("img"); tileSet.src = "tiles.png"; var options = { layout: "tile", bg: "transparent", tileWidth: 64, tileHeight: 64, tileSet: tileSet, tileMap: { "@": [0, 0], "#": [0, 64], "a": [64, 0], "!": [64, 64] }, width: 3, height: 3 } var display = new ROT.Display(options); SHOW(display.getContainer()); tileSet.onload = function() { display.draw(1, 1, "@"); display.draw(0, 0, "#"); display.draw(0, 1, "#"); display.draw(1, 0, "#"); display.draw(0, 2, "#"); display.draw(2, 2, "a"); display.draw(2, 0, "!"); display.draw(2, 1, "!"); }

Multiple tiles at one place

It is possible to draw multiple tiles at one place: just pass an array of chars as the third argument to Display.prototype.draw. This can be used in other (non-tiled) backends as well, but brings almost no real usability.

var tileSet = document.createElement("img"); tileSet.src = "tiles.png"; var options = { layout: "tile", bg: "transparent", tileWidth: 64, tileHeight: 64, tileSet: tileSet, tileMap: { "@": [0, 0], "#": [0, 64] }, width: 1, height: 1 } var display = new ROT.Display(options); SHOW(display.getContainer()); tileSet.onload = function() { display.draw(0, 0, ["#", "@"]); }

Colorizing tiles

It is possibly to (partially) colorize a tile image. To do this, you first need to pass the tileColorize:true option to the ROT.Display constructor. Additional arguments to draw then specify foreground and background colors to be applied ("transparent" means no tinting). RGBA values can be used for partial tinting.

var tileSet = document.createElement("img"); tileSet.src = "tiles.png"; var options = { layout: "tile", tileWidth: 64, tileHeight: 64, tileSet: tileSet, tileMap: { "@": [0, 0], "#": [0, 64], "a": [64, 0], "!": [64, 64] }, width: 3, height: 2, tileColorize: true } var display = new ROT.Display(options); SHOW(display.getContainer()); tileSet.onload = function() { display.draw(0, 0, "@", "transparent"); display.draw(1, 0, "@", "green", "red"); display.draw(2, 0, "@", "rgba(30, 200, 30, 0.5)", "red"); display.draw(0, 1, "#", "transparent"); display.draw(1, 1, "#", "white"); display.draw(2, 1, "#", "transparent", "rgba(250, 250, 0, 0.5)"); }

Colorized tile stacks

You can apply colorization to multiple tiles as well. Just make sure you pass foreground/background colors as arrays.

var tileSet = document.createElement("img"); tileSet.src = "tiles.png"; var options = { layout: "tile", bg: "transparent", tileWidth: 64, tileHeight: 64, tileSet: tileSet, tileColorize: true, tileMap: { "@": [0, 0], "#": [0, 64] }, width: 1, height: 1 } var display = new ROT.Display(options); SHOW(display.getContainer()); tileSet.onload = function() { var ch = ["#", "@"]; var fg = ["rgba(255, 0, 0, 0.5)", "rgba(0, 0, 255, 0.5)"]; var bg = ["transparent", "transparent"]; display.draw(0, 0, ch, fg, bg); }

Raster fonts

Graphic tiles can be used to render raster fonts. You need the font image organized as a tileSet; you will also need to create a corresponding tileMap by mapping individual characters to their position inside of the tile set.

If you are using high-DPI screens (also known as Retina) that have a devicePixelRatio > 1, the canvas will get scaled. In order to get a perfect crisp scaling, you will need to apply the following CSS to your canvas:


canvas {
	image-rendering: -webkit-optimize-contrast; /* historic fallback */
	image-rendering: crisp-edges; /* standard property */
}

WebGL tiles

If you need better performance with (colorized) tiles, you can try the WebGL-based tile renderer. It uses the same API as other rendering backends; just pass `"tile-gl"` as the `layout` configuration option. Also please note that your tile images must be either loaded from the page's domain, or use the proper CORS headers.

To use this feature, the browser must support the WebGL2 API. Support can be detected using the `ROT.Display.TileGL.isSupported()` test.

SHOW(ROT.Display.TileGL.isSupported()); var tileSet = document.createElement("img"); tileSet.src = "tiles.png"; var options = { layout: "tile-gl", bg: "transparent", tileWidth: 64, tileHeight: 64, tileSet: tileSet, tileColorize: true, tileMap: { "@": [0, 0], "#": [0, 64], "a": [64, 0], "!": [64, 64] }, width: 10, height: 10 } var display = new ROT.Display(options); SHOW(display.getContainer()); let chars = ["#", "#", "@", "@", "a", "a", "!", "!", "@"]; function change() { for (let i=0; i<options.width; i++) { for (let j=0; j<options.height; j++) { let ch = chars.pop(); chars.unshift(ch); display.draw(i, j, ch, "rgba(255, 0, 255, 0.4)"); } } requestAnimationFrame(change); } tileSet.onload = function() { change(); }