Rotating a 2.5D isometric map feature - Office Management 101

The near-isometric (the 2.5D or 3/4 perspective) projection, which I’ll refer to as just isometric for the sake of convenience, has a certain distinctive charm to it, which is probably why it’s been used in so many games. A lot of them also happen to be my childhood favorites and it’s a style that has been firmly imprinted in my brain.

But the isometric view also comes with a lot of inherited problems, some of which I went into in one of my previous articles. Essentially it’s trying to fake a three dimensional world while actually still using only two dimensions. Aside from the technical complexity, the perspective can hide objects or the characters that happen to be behind something (like a wall or a bigger object) from the the player and from a gameplay point of view that can be really annoying.

A good way to solve most of the involved problems is to render the game in 3D and position the camera at an angle that displays the world or the level in the isometric perspective. It’s a working solution that is used often these days with good results, but not something I wanted to go with myself when I started on Office Management 101. Nostalgia is a powerful emotion and the isometric look of the 90’s is certainly closer to my heart, not to mention that I didn’t have a clue how to do anything involving 3D… Well, not like I had a clue about isometrics either though at that point :)

Anyway. Some games have opted to working around the problems - design the levels in a way that objects will never end up behind walls, make the objects display as a shadow through the walls, hide some of the walls around the object, etc. I recently implemented one of those solutions myself. I drew a minimized version of all my wall tiles and the player can toggle the walls on and off, plus some of the walls are automatically minimized around the mouse cursor.

But there was one question that came up more often than others, when I’ve been showing a playable build of the game to people - “Can I rotate the map?”. My first reaction was confusion. You don’t rotate isometric maps. They’re essentially 2D, right? There’s not even map data available for the other side of the walls, since it’s just an illusion of sort. And I couldn’t think of any isometric games with that option off the top of my head.

I had put together my map in the popular Tiled editor, but I even had to fake the look of the building having multiple floors (as in stories), while ending up with an unmanageable mess of layers upon layers. All just for a better looking building, since in game the player can only interact with the top floor. Still, I had considered coding my own map editor instead to add the support for actual multiple floors that the player can choose between (like the old X-COM games), which was another feature people were often curious about. Also I had redone the LibGDX (the Java library powering the game) isometric renderer anyway, so there wasn’t much holding me back there either.

So after pondering a bit I figured, okay, I have drawn four sides of each furniture item anyway, so I guess I could rotate them with the map in 90 degree intervals. Same with the characters. But what about the walls? If the walls were whole tile-sized and looked the same from each direction, then it wouldn’t be a problem. But I’m using thin walls that are placed between tiles and they may have one wallpaper on one side and another on the other side. Well... turns out, it’s actually quite simple. Just store the wall data for all 4 sides of the tile and that’s it.

I have started working on the map editor with all this in mind and although I have not gotten around to adding the support of the new maps to the game itself, it’s all coming along nicely. Also it’s something I can ship with the game, so the players can make their own maps if they want to and that’s always a nice option to have.

Since a picture tells more than a thousand words, here’s how the coordinate system rotates:

So here we have a map of 6x6 tiles. Each tile has an id referring to a floor sprite and another 4 id’s referring to wall sprites of each side. If I place a wall in one tile and the tile next to it has no wall, the editor engine sets the opposing side on the other tile too. And if a wall already exists on the neighboring tile, then it’s just left alone.

Tile coordinate calculations are as follows (if rotation is clockwise):
90 degrees: x = width - y - 1; y = x
180 degrees: x = width - x - 1; y = height - y - 1
270 degrees: x = y; y = height - x - 1

And if you store the facing direction as 0 degrees = 0, 90 degrees = 1, 180 degrees = 2 and 270 degrees = 3, you can just use this simple formula to get the final display rotation of each object or tile:

final rotation = (object rotation + map rotation) % 4

And that’s all the magic there is. Now when I think about it, it’s quite odd more games aren’t using this.

If you know any isometric games (that are not actually 3D) that allow you to rotate the map, please share in the comments. I’d love to check them out and see how they’ve implemented it.

I did some research into it myself now and found out that the classic RollerCoaster Tycoon had this option. It seems they generated 2D tiles out of 3D models, which is a bit of a different solution from my own hand pixelated art, but it looks very good nonetheless. Also I found out that I’ve been missing out on an awesome game :)

Thanks for reading!

Cheers,
Riho

@tulevik.EU | Facebook | OfficeManagement101.com | DevLog on TIGForums