Spaces:
Running
Running
File size: 2,792 Bytes
87b3b3a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<h2>ASCII console display</h2>
<p><code>ROT.Display</code> provides a canvas-based output that resembles a traditional TTY console.</p>
<h3>Creating a display</h3>
<div class="example">
var display = new ROT.Display({width:20, height:5});
SHOW(display.getContainer()); /* do not forget to append to page! */
</div>
<h3>Configuring the display</h3>
<p>The display is configured using these values:</p>
<ul>
<li><code>width</code> – horizontal size, in characters</li>
<li><code>height</code> – vertical size, in characters</li>
<li><code>fontSize</code> – in pixels, default 15</li>
<li><code>fontFamily</code> – string, default "monospace"</li>
<li><code>fps</code> – int, target frames-per-second rate, default 25</li>
<li><code>fg</code> – default foreground color; valid CSS color string</li>
<li><code>bg</code> – default background color; valid CSS color string</li>
<li><code>spacing</code> – spacing adjustment coefficient; 1 = normal, <1 tighter, >1 looser</li>
<li><code>layout</code> – what layouting algorithm shall be used; "rect" or "hex"</li>
</ul>
<p>You can configure the display by passing a configuration object to the constructor; alternatively, all options can be changed at runtime using the <code>setOptions</code> method.</p>
<div class="example">
var display = new ROT.Display({width:20, height:5});
SHOW(display.getContainer());
display.setOptions({
width: 30,
fontSize: 8,
fontStyle: "bold",
bg: "#a00"
});
</div>
<h3>Drawing individual characters</h3>
<div class="example">
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 */
</div>
<h3>Drawing strings</h3>
<div class="example">
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);
</div>
<h3>Specifying foreground/background color in strings</h3>
<p>Colors can be changed using a trivial syntax, <code>%c{ foreground }</code> and <code>%b{ background }</code>. Empty color name switches to default.</p>
<div class="example">
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);
</div>
|