# Isometric Map with different Z-axis values

I want to create a isometric tile map editor just like the one shown in the images ( pictures are from the game Zoo Tycoon ). I know how to render the tiles when there is only one Z value ( zero ), but I have no clue how I could archieve something like in the pictures where you can raise certain tiles in 1/2 unit steps, either creating a sharp edge/cliff or a smooth transition.

Can anyone give me some good reference materials or help me out here? Thanks in advance :)

Oh yea and you can also rotate the view by 90 in any direction like this:

EDIT :

I am using SFML with C++ for this project. There I am creating an array of vertices, 4 of which represent an quad/tile in the map. In SFML each vertex has two main properties, a position in space and a position in the texture mapped to it. I adjust the first one based on the simple projection formula. The textures are represented in a simple tileset. I simply calculate the corresponding 4 edges of a tile in the texture based on a level data array that contains the number of the tile in the texture, starting from 0.

Here's a very very simple tileset that I made myself

Here's how this looks so far:

Oh yea and this is how far I come with rendering different z values. The 4 tiles on the top right are raised 1 unit. But as you can see the faces of the blocks are incomplete. I don't know how I draw them yet.

UPDATE : I managed to display sharp edges correctly now, even though it's really unoptimised (I am drawing every front-facing face of the blocks, even the ones that are covered by others. Any tips on how I can prevent this?)

• There are a lot of steps in setting up an isometric map, and you've probably already solved some of them. The solutions to the ones that remain will often depend on how you've built the foundation so far. So, to help ensure we can target our answers effectively to what will help you the most, we'll need some more background. Can you edit your question to describe what you've done so far, how you've attempted to solve this problem, and where it is that you're currently stuck? Jun 4, 2018 at 22:17
• I am using SFML with C++. There I have an array of vertices, 4 of which represent one tile in the grid. I simply loop over the entire array and adjust the position of individual vertices by the simple projection formula for isometric(dimetric) projection. I am loading a simple tileset from memory and texture those quads according to a level data array that contains the number of the tile in the tileset, starting from 0. It's really basic, around 100 lines of code, as I was just testing some ideas out. Jun 4, 2018 at 22:46
• (Don't tell me in the comments - edit your question so that in includes all relevant information) Can you clarify, do your 4 vertices for a tile correspond to the 3D corners of its diamond shape, or the corners of its screenspace-aligned bounding rectangle? (The latter is commonly used when drawing tiles as sprites) And does each tile have 4 unique vertices for its 4 corners, or does it share those vertices with adjacent tiles? ie. if I have a 3x3 grid of tiles, does it contain 16 vertices, or 36? Jun 4, 2018 at 22:50
• I wouldn't worry about culling the invisible surfaces at this time. Start thinking about it when you notice that your FPS go below 100. With that little stuff on the screen, that's not going to happen that soon. Jun 5, 2018 at 22:46
• Thanks, but this is a learning experience aswell so i am trying to learn as much as possible :) I am currently thinking about how i could rotate the map. I was thinking I could simply invert/swap the indices into the level data array depending on a flag that represents the orientation of the map. But i've yet to try that. Jun 5, 2018 at 23:29