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();
}