Moving a player around the world.
Now that we have defined our world, we can add the player and allow him to explore.
Previously we mentioned that our world is 16 x 16 tiles in size. If our tiles are also 16 x 16 pixels in size then we can calculate that our world is 256 pixels wide by 256 pixels in height. Using mode 15 on the Pokitto allows us to display 220 x 176 pixels of that world. As such we can only show a portion of the world and will need to scroll this view as the player moves. The visible section of the world is known as the ‘viewport’.
Imagine the player starts near the top-left of the world. When rendering the screen, we typically render the player in the middle of the viewport and hence the middle of the screen. When the viewport is positioned in the top, left-hand corner, as shown below, the world has an offset of x = 0, y = 0 relative to the viewport.
Now let’s assume the player moves diagonally down towards the bottom, right-hand corner. The viewport moves along with the player so that when rendering the player is still in the centre. At this stage, the viewport has on offset of x = 16, y = 32 relative to the top-left corner of the world.
Finally, the player reaches a point where the viewport is now touching the right-hand and bottom edges of the world. The viewport offsets (x = 32 and y = 80) can be calculated as the difference in size between the world and the size of the viewport. The world’s width is 256 pixels wide and the viewport is only 220 pixels resulting in a difference of 32 pixels. Likewise, the height of our world, 256 pixels, is 80 pixels larger than our viewport height, 176 pixels.
Download and review the code in the repo https://github.com/filmote/Tilemap_1 if you haven’t already.
The code below shows how the pressing of the directional buttons on the Pokitto will control the movement of the viewport. Pressing the left button will decrease the player’s x position and pressing right will increase it.
int16_t x = -20;
int16_t y = -50;
while (PC::isRunning()) {
...
if (PC::buttons.pressed(BTN_LEFT) || PC::buttons.repeat(BTN_LEFT, 1)) {
x = x - 1;
}
if (PC::buttons.pressed(BTN_RIGHT) || PC::buttons.repeat(BTN_RIGHT, 1)) {
x = x + 1;
}
if (PC::buttons.pressed(BTN_UP) || PC::buttons.repeat(BTN_UP, 1)) {
y = y - 1;
}
if (PC::buttons.pressed(BTN_DOWN) || PC::buttons.repeat(BTN_DOWN, 1)) {
y = y + 1;
}
...
tilemap.draw(x, y);
PD::drawBitmapData(centreScreenX, centreScreenY,
12, 15, Data::girl12x15Pixels);
}
A simple check of the player coordinates ensures that the player is unable to move outside of the world. As mentioned earlier, worldHeight and worldWidth describe the dimensions in pixel and the two ‘magic’ numbers 12 and 15 are the players width and height, respectively.
if (x < 0) x = 0;
if (x > worldWidth - 12) x = worldWidth;
if (y < 0) y = 0;
if (y > worldHeight - 15) y = worldHeight;
Part 1 of 9: Building a Simple Tilemap Game
Part 2 of 9: Moving a Player Around the World
Part 3 of 9: Rendering the Viewport and Player
Part 4 of 9: Detecting Obstacles
Part 5 of 9: Adding Enemies
Part 6 of 9: Using FemtoIDE and Piskel
Part 7 of 9: Doors and Inventory Items
Part 8 of 9: Multiple Worlds
Part 9 of 9: Sixteen Tiles Only?