rot-js/manual/pages/tiles.html

A roguelike toolkit in JavaScript

<h2>Graphic tiles</h2>

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

<div class="example">
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, "!");
}
</div>

<h2>Multiple tiles at one place</h2>

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

<div class="example">
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, ["#", "@"]);
}
</div>

<h2>Colorizing tiles</h2>

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

<div class="example">
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)");
}
</div>

<h2>Colorized tile stacks</h2>

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

<div class="example">
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);
}
</div>

<h2>Raster fonts</h2>

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

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

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

<h2>WebGL tiles</h2>

<p>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 <a href="https://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/">proper CORS headers</a>.

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

<div class="example">
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&lt;options.width; i++) {
		for (let j=0; j&lt;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();
}
</div>