HTML and CSS Reference
In-Depth Information
This is a neat technique that is common in rendering engines that only need to redraw themselves when changes
happen to the display. In this case, you want to render only once and not render when nothing is happening on the
screen. Rogue is turn based, so taking advantage of the invalid flag is a great way to control manually when something
renders to the screen. Run the example in the browser, and you should see that console.log gets called only once
(see Figure 19-11 ).
Figure 19-11. Now, your draw call happens only once
Also, make sure to set invalid to true by default so that the first time update gets called, draw does as well. After
a draw happens, it sets the invalid flag back to false and turns off the renderer. It's important to note that update is
still being called, but that is okay. You always want to be calculacting what the next frame should be doing, such as
accepting user input, calculating artificial intelligence (AI), or performing other processor-intensive tasks, while there
is no need to update the display. Now, all you have to do is to create your map and a way to render it.
To start, above the game.ts constructor, add the following property:
tiles: any[];
Then, before the render loop, create the following simple, two-dimensional array:
this.tiles = [["#","#","#","#","#","#","#","#","#"],
["#"," "," "," ","#"," "," "," ","#"],
["#"," "," "," "," "," "," "," ","#"],
["#"," "," "," ","#"," "," "," ","#"],
Search WWH ::

Custom Search