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 thir 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)");
}