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"
fps
– int, target frames-per-second rate, default 25
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(words.random()); }
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);