HTML and CSS Reference
In-Depth Information
Rendering Sprites
You can extend the
CanvasMapRenderer
to use images, or sprites, instead of just drawing colors. Follow these
easy steps:
1.
Create a preloader to handle loading in images before the game runs.
Extend the
CanvasMapRenderer
with a new
SpriteMapRenderer
.
2.
Override the
drawTile
method with a way to look up sprites and paint them to the canvas.
3.
Replace the reference to the old
CanvasMapRenderer
with the new
SpriteMapRenderer
;
everything should work just the same, but with new images instead of colored boxes.
4.
Rendering Larger Maps
Right now, the map renderer simply draws every tile you give it. It doesn't even follow the player around. This could
be really bad for performance and gameplay. If you want to have much larger maps, create a
MapSelection
class that
can capture a range of tiles from the map and better manage how you render it. Here is what that would look like:
Create a
MapSelection
class that wraps the map class and that can access and manipulate
the tile data.
1.
2.
Add new methods onto the map class to make it easier to select tiles from rows by range,
for example, getting five tiles around a center point, which would represent the player.
3.
Update the selection class's center point, based on the player's position as it moves
through the levels.
Use the
MapSelection
tiles instead of all the tiles from the map when you call the renderer.
4.
As you can see, this engine is easily extensible, and you have set up enough of the foundation to allow you to
continue to build on top of it and make the game your own. Rogue games are great engines to build when you are
starting out making games in a new language. Hopefully, you now have greater insight into how TypeScript can be
a very useful addition to any traditional JavaScript game's architecture. Even if you write the core of the engine in
TypeScript and implement it in JavaScript, you still have the additional help that a compiler offers: checking over your
code and making sure that you don't make easy-to-overlook mistakes.
