Games with Grids / Tilemaps
When you are working on a game that needs a tile based world or a game that uses a board, like chess, checkers, etc The number one query that many developers have is how do I move the character to a particular square
While the most obvious answer is using math, it is not very helpful. The simple reason being that yes math does help, but how? After all most of game programming is all about math (who knew that Math could provide so much entertainment).
First Things First
What is a tile map? Seen a graph paper?
With a tile map editor, you can create a world on this graph like in the screenshot below
This is how the world might be constructed, divided up into smaller equi-sized squares. Each square could be set to an equivalent of some element in the tile world, like desert, grass, snow, tree, etc, etc.
For the purpose of this article, we go with the assumption that our device screen can only show 5x5 squares. The world is 14x14 large but we can only see 5x5 on the screen at any one time. We can scroll to see the other areas like in many other tile based games.
The Math
This is the bit that stumps many developers, so we'll go over this
Our device is for the sake of this article 320x480. Our tiles must have been 64x64 therefore we see 5 x 5 tiles on the screen (64 x 5 = 320)
With that knowledge, let us determine the position of the tiles with the index starting from 1 *not* 0
What we have done is simply obtained the x,y coordinates for the top left hand corner of the tile at Row, Col.
Let us get the reverse, if we have the x,y co-ordinates (say from a touch) how do we convert that into a tile row, col location?
The usage
We have our two functions that provide us with the x,y and the Row, Col we are all set. This function works fine if we have a fixed tile set on screen like the chess board, one that can be seen entirely on the screen.
The functions above will work fine on a board like this. In the second part of this article, we will look at how to manage boards that are larger and need to be scrolled. If the tiles are scrolled the row and column might not be accurate.
Note
While the map data from a map editor can allow for multiple layers and provide a visual interface to create tilemaps, you can also create them manually. If your game is a RPG/Pokemon type game then you are better off using a tile map editor to create the complex world. If you are an advance user or have a game with a smaller world, you can create these yourself with a few tricks and tip we will discuss in the article in later parts.
While the most obvious answer is using math, it is not very helpful. The simple reason being that yes math does help, but how? After all most of game programming is all about math (who knew that Math could provide so much entertainment).
First Things First
What is a tile map? Seen a graph paper?
With a tile map editor, you can create a world on this graph like in the screenshot below
This is how the world might be constructed, divided up into smaller equi-sized squares. Each square could be set to an equivalent of some element in the tile world, like desert, grass, snow, tree, etc, etc.
For the purpose of this article, we go with the assumption that our device screen can only show 5x5 squares. The world is 14x14 large but we can only see 5x5 on the screen at any one time. We can scroll to see the other areas like in many other tile based games.
The Math
This is the bit that stumps many developers, so we'll go over this
Our device is for the sake of this article 320x480. Our tiles must have been 64x64 therefore we see 5 x 5 tiles on the screen (64 x 5 = 320)
With that knowledge, let us determine the position of the tiles with the index starting from 1 *not* 0
function getXYForTile(theRow, theCol) local tileWidth = 64 -- set as per your tilesize local x, y = (theCol-1) * tileWidth, (theRow-1) * tilewidth return x, y end
What we have done is simply obtained the x,y coordinates for the top left hand corner of the tile at Row, Col.
Let us get the reverse, if we have the x,y co-ordinates (say from a touch) how do we convert that into a tile row, col location?
function getRowColforXY(xPos, yPos) local tileWidth = 64 -- set as per your tilesize local xCol, yRow = math.floor(xPos/64), math.floor(yPos/64) return yRow+1, xCol+1 endSince our tile indexes start from 1 not 0, we add the 1 to the calculated row, col
The usage
We have our two functions that provide us with the x,y and the Row, Col we are all set. This function works fine if we have a fixed tile set on screen like the chess board, one that can be seen entirely on the screen.
The functions above will work fine on a board like this. In the second part of this article, we will look at how to manage boards that are larger and need to be scrolled. If the tiles are scrolled the row and column might not be accurate.
Note
While the map data from a map editor can allow for multiple layers and provide a visual interface to create tilemaps, you can also create them manually. If your game is a RPG/Pokemon type game then you are better off using a tile map editor to create the complex world. If you are an advance user or have a game with a smaller world, you can create these yourself with a few tricks and tip we will discuss in the article in later parts.
Comments
Post a Comment