ASCII console display
ROT.Display
provides a canvas-based output that resembles a traditional TTY console.
Creating a display
var display = new ROT.Display({width:20, height:5});
SHOW(display.getContainer()); /* do not forget to append to page! */
Configuring the display
The display is configured using these values:
width
– horizontal size, in characters
height
– vertical size, in characters
fontSize
– in pixels, default 15
fontFamily
– string, default "monospace"
fg
– default foreground color; valid CSS color string
bg
– default background color; valid CSS color string
spacing
– spacing adjustment coefficient; 1 = normal, <1 tighter, >1 looser
layout
– what layouting algorithm shall be used; "rect" or "hex"
You can configure the display by passing a configuration object to the constructor; alternatively, all options can be changed at runtime using the setOptions
method.
var display = new ROT.Display({width:20, height:5});
SHOW(display.getContainer());
display.setOptions({
width: 30,
fontSize: 8,
fontStyle: "bold",
bg: "#a00"
});
Drawing individual characters
var display = new ROT.Display({width:40, height:9});
SHOW(display.getContainer());
display.draw(5, 4, "@");
display.draw(15, 4, "%", "#0f0"); /* foreground color */
display.draw(25, 4, "#", "#f00", "#009"); /* and background color */
Drawing strings
var display = new ROT.Display({width:40, height:20});
SHOW(display.getContainer());
display.drawText(5, 2, "Hello world");
/* last argument specifies maximum length */
display.drawText(20, 5, "This line of text is very long.", 16);
/* lines are broken at word boundaries; lines are trimmed */
var words = ["lorem", "ipsum", "dolor", "sit", "amet"];
var long = [];
for (var i=0;i<30;i++) { long.push(ROT.RNG.getItem(words)); }
long = long.join(" ");
display.drawText(1, 10, long, 38);
Specifying foreground/background color in strings
Colors can be changed using a trivial syntax, %c{ foreground }
and %b{ background }
. Empty color name switches to default.
var display = new ROT.Display({width:40, height:5});
SHOW(display.getContainer());
var str = "Goodbye %c{red}cr%b{blue}u%b{}el %c{}world"
display.drawText(5, 2, str);
Forced square aspect ratio
You can force a regular squared grid layout by using the forceSquareRatio:true
option.
var options = {
width: 20,
height: 8,
fontSize: 18,
forceSquareRatio:true
}
var display = new ROT.Display(options);
SHOW(display.getContainer());
var str = "Using a regular grid\n@....%b{blue}#%b{}##.%b{red}.%b{}.$$$";
display.drawText(2, 2, str);
Using drawOver
You can use drawOver to partially draw over existing data, for example if you wanted to preserve the map's background color without having to look it up when drawing a character.
var options = {
width: 20,
height: 4,
fontSize: 18,
}
var display = new ROT.Display(options);
SHOW(display.getContainer());
display.draw(1, 1, ".", "#0f0", "#00A");
/* Keep the previous background */
display.drawOver(1, 1, "@", "#fff", null);
display.draw(3, 1, "g", "#fff", null);
/* Apply a new background */
display.drawOver(3, 1, null, null, "#060");
/* If nothing has been drawn, this behaves like draw */
display.drawOver(5, 1, "g", "#0f0", null);