Gamedevlog: Tilemap part 1
Published: 2020-09-13 12:47:19

# What is a tilemap and why am I using one
A tile map is a method of creating a level from a grid of tiles, it’s a common method in 2D games and allows a small number of images (sprites) to be repeated to build up a level.

![Simple 2D TileMap example](https://dev-to-uploads.s3.amazonaws.com/i/k1tm74fmn84bojjs9v57.jpeg)

In the above image we can see that with only 3 sprites we can create a whole platformer level. 

I am using a tile map to limit the size of the scene I need to render, instead of always drawing the whole scene.

![My TileMap use](https://dev-to-uploads.s3.amazonaws.com/i/9jlnqkvffg42jwrkl6vr.jpeg)

Imagine the image above is a birds eye view of the scene, if the player is in the tile at 0,0 then we only need to render the surrounding tiles highlighted green, as the player moves to the next tile then the map can be updated to keep the players tile always in the center. 

In future we can also use this to limit the number objects we need to perform collision detection on, but that is for another post. 

# The Tile Class
This class represents each tile that makes up the scene. 
It holds an <code>ArrayList</code> of models which are static within the tile, to start, this will just be a single <code>baseModel</code> which is passed as a constructor parameter, but going forward will include other models like trees, houses, fences etc. 

# The TileMap Class
This class holds an array of 9 <code>Tiles</code>, the one the player is currently in and the 8 surrounding. 

# Putting this into action
To implement this I needed to pass the <code>TileMap</code> class the the <code>VrRenderer</code> so that the models can be initialised and rendered with an active OpenGL context, this would leak a lot of unnecessary implementation details to the  <code>VrRenderer</code> when the only two functions it would need are an initialisation function and a draw function, to clean this up I created a <code>DrawableInterface</code> which only specified the two necessary functions, this was then implemented by the <code>TileMap</code> and <code>Tile</code> classes and a parameter of the <code>DrawableInterface</code> type was passed to the <code>VrRenderer</code>.

Once each tile is initialised, I needed to set the offset for that tile, to do this, and to allow me to move the tiles I created a <code>setTileOffset</code> function in the  <code>Tile</code> class which removed the current offset (originally 0) and then applied the new offset to all models in the tile.

![setTileOffset function](https://dev-to-uploads.s3.amazonaws.com/i/9270218l2tnrc4ujp7am.PNG)

To try this out I created 9, alternating black and white tiles, with the numbers 1 to 9, added them to the model loader class and set each one as the <code>baseModel</code> for the 9 tiles. 

# The finishing touches
To finish this step of the development I wanted to see how it would look to move from the center tile and have the tiles adjust themselves. 

To simulate this i added a function to the <code>TileMap</code> class to take in the players current position and target movement delta and return the new player position.

If applying the target delta would take the player outside the center tile i.e. more than half the tile size from the origin, then I subtracted or added the tile size to take the player to the opposite side of the tile. 

![getPlayerPositionOnTileMap function](https://dev-to-uploads.s3.amazonaws.com/i/lwbhr906c5h32o8x58zg.PNG)

This function is Called from the <code>adjustPlayer</code> function, I created a new interface to allow me to just pass in this function. 

![passing the tilemap as an interface](https://dev-to-uploads.s3.amazonaws.com/i/egnyx4btsvo4n3g0rvtz.PNG)

and it is then called from the body of the function like:

![Setting Player Position](https://dev-to-uploads.s3.amazonaws.com/i/v38ai4bup981n2j3bpyc.PNG)

Running the game, this method looks a bit strange as the tiles are not updated at the same time as moving the player out of a tile but I think the principal seems to work. 

![Gif of the player moving across the tile map](https://dev-to-uploads.s3.amazonaws.com/i/1hk8rv04avb4kf5rgebe.gif)

# Conclusion
This development is another step closer to a playable game and every step forward is a win, the next step will be to shuffle the tiles around when the player transitions from one to the next to give the illusion of continuous movement across a scene.

The code at this point of the project can be found [here](https://github.com/longevity-software/AndroidVrGameDemo/releases/tag/B1.11).