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:

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