2D Tile Maps – Tile Picking

Several months ago, I talked about the distinction between world space and screen space. As a recap, these are fundamental concepts that separate our game or simulation state from our drawn or rendered state. What gets drawn to the screen is not necessarily how things are laid out in the game’s actual (world) state. Check out the previous articles for more information.

The concept of tile picking involves a user hovering their mouse or some other input device over a tile in the game map. Usually the user is doing this in order to interact with the tile such as moving a unit to a location, placing an item on the tile, or inspecting the metadata of the tile. Fortunately for the developer, the process of picking is independent of the projection other than some simple math to do a conversion of coordinates.

Imagine that you are playing SimCity 2000, and you want to create a stretch of road from one location to another. The process involves the user hovering the starting tile, clicking the mouse, dragging the road to the end tile, and releasing the mouse. Tiles were picked out of the game map based on the mouse’s coordinates during game updates. Which space do we pick the tile from? Do we have to calculate if the mouse is contained within the projected tile or within the game’s world space coordinates?

Orthogonal

If the projection used in the game is orthogonal (think NES/SNES Zelda games), then the tile picking really is just a matter of answering the question, “Which tile contains the current mouse coordinate?” Answering the question is simple:

To explain briefly, we get the position of the mouse (I use SDL which has a function to get the mouse position). We then convert the coordinates from screen space into world space. Finally we get the tile that is stored in our tile collection at the world space coordinates. We floor the coordinate conversion because landing in the middle of a tile will result in a partial index.

worldspaceReference the grid to the left. For the sake of discussion, let us assume that each grid contains 16 x 16 tiles. The top left most pixel is located in world space [0,0] and at screen space (0,0). The top right most pixel is located in world space [5, 0] and at screen space (80,0).

If the user moves the mouse to the screen space coordinate (25, 50), then the math to calculate the picked tile is as follows (using the aforementioned technique).

worldspacetilepickPerforming that calculation, we get a result of the tile highlighted in blue.… Read more

2D Tile Maps – World and Screen Spaces

If you are not familiar with tile maps, please see the previous article in this series before reading this article.

Spaaaaaaace!

A space is simply some collection of points, vectors, shapes, and other objects that we use to store the state of our game or simulation. There are various kinds of spaces that can be employed during game development, but the two that I will focus on for this article are the concepts of world spaces and screen spaces. It is important to know the distinction and differences between these two spaces because it will make your game development journey much clearer and easier. Personally, it took me awhile before the concept of separating the spaces really “clicked” for me.

World Space

The most commonly understood space is the world space of the game. This is the space that contains the positions of all entities in the game. For example, if we have a 5 x 5 tile map where each tile is 16 x 16, worldspacewe can represent that map (as discovered in the previous article) as a two dimensional array where [0, 0] is the first tile and [5, 5] is the last tile. Where these tiles are drawn on screen is of no importance when you generate the tile indices in the representative array. The underlying world of your game is represented by this array. The entities live their lives in this boring, mundane, grid-like existence.

All the game interactions and logic take place within this world space because of how extremely simple and efficient it is to perform calculations if we assume our game is as simple as an evenly laid out grid. But when we plays most tile based games, we notice immediately that what we interact with certainly is not as boring as the pictured world space to the left This should make sense to you after thinking about it for a little bit. Think of games like SimCity, Diablo II, or The Legend of Zelda. Even though each of these games has different views and projections, they can still be represented by a very simple tiled world space.

Screen Space

So what about those various projections then? If games that rely on tiles are nothing more than glorified arrays, how do games get those pseudo 3D effects complete with movement, collisions detection, and tile selections with the mouse? This is where the screen space comes in to play. The screen space is nothing more than a visual representation (via rendering) of the underlying world space in which our entities live.

Remember when I said that isometric and oblique projections share the same data structure? I said it because they do! The world space for both projections is identical. Only when you look at their screen spaces do things begin to diverge. By performing the previously discussed transforms to our world space, we can end up with a nice looking screen space in which the player will act and react. In fact, the player does not even know or care about the world space!… Read more

2D Tile Maps – An Introduction

Tiles and You!

So maybe you have or have not heard about tiles within the context of video games. For those of you who have, great, tread onwards into the more advanced areas of the article. But to those of you who have not, take some time to let the information below soak in. I strongly suggest that you spend time implementing and testing some solutions of your own in throwaway projects just to see the results in real time and for yourself. Many people are hands on learners and doing a lot of the experimentation yourself goes a long way to understanding the concepts.

I plan to make a few articles about various topics in tiles, tile maps, rendering, and interacting. Part 1 will focus on the concepts behind two popular formats of tile maps and rendering techniques. Part 2 will delve more deeply into rendering isometric tile maps with an explanation of the differences between world space and screen space. Finally, in Part 3, I will discuss topics such as isometric tile picking and moving entities within an isometric tile space.

Before all that though, let’s begin with the basics, shall we?

Cartesian Tile Maps

Maps are often stored and displayed in equally sized tiles to make life easier on the renderer and the artists. It is usually easier to begin understanding a tile map in an oblique projection, which is one of the simplest (but very effective) forms of projecting your tiles. Many popular games from the 80s, 90s, and even 00s take advantage of this projection due to its relatively simple mathematics.iGpPx For example, in the Legend of Zelda on SNES, tiles were utilized to create structured maps with the ability to quickly re-use art assets and build customizable terrains. Notice how the bushes, rocks, fence posts, and walls can be evenly split into tiles of equal sizes? Can you see how this tile map could easily be stored in a data structure such as an array?

cartmapImagine storing a tile map in a two dimensional (or even one dimensional with some cleverness) array. Each cell of the tile map represents one index into the array with the origin most commonly being [0, 0]. Since each tile has a specific width and height (usually equal, but does not have to be), it is quite simple to render this map by simply using multiplication.

You can think of this as simply drawing your array to the screen with a specific texture based on the position.… Read more