Introduction to TypeScript: Building a Rogue-like Engine - HTML5 Game Development Insights - page 310

So, with a cleaned-up map, you are able to create a placeholder position for the player. To do this, add the
following property to your game class:
playerPosition: geom.Point;
You will set that up following the map in your constructor:
this.playerPosition = new geom.Point(1,1);
This will put the player in the upper-left corner of your map, in an open tile. To draw the player, simply add the
following line of code after rendering the map in your draw call, then reset the invalidate property:
this.renderer.drawTile(this.playerPosition.x, this.playerPosition.y, "@");
If you save, check the compiler, and refresh your browser. You will see that you now have a red square
representing your player, as illustrated in Figure 19-15 .
Figure 19-15. You should now see the red square, which is the player
By exposing the internal method of the renderer for drawing a single tile, you can use it to place additional tiles
on top of the map. You can render out the entire map and then do another pass to render out the player, monsters,
treasure chests, and decoration. You may be thinking, “Why not do this all in a single pass?” The reason is that you
want these graphics to sit on top of the map. Right now, you don't notice the difference, as they are all squares of
the same size. However, if your player were a sprite and had transparency, you would want it to appear on top of the
floor; through optimization techniques, you could cut down on the additional draw calls by simply rendering out only
what's in the player's immediate field of vision. Now, let's make this player move.