0
\$\begingroup\$

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 :)

with grid without grid

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

rotate 90 rotate 180

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 tileset

Here's how this looks so far: iso

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.

progess

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?)

update

Improve this question
\$\endgroup\$
5
  • \$\begingroup\$ 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? \$\endgroup\$
    – DMGregory ♦
    Jun 4, 2018 at 22:17
  • \$\begingroup\$ 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. \$\endgroup\$
    – Yamahari
    Jun 4, 2018 at 22:46
  • \$\begingroup\$ (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? \$\endgroup\$
    – DMGregory ♦
    Jun 4, 2018 at 22:50
  • \$\begingroup\$ 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. \$\endgroup\$
    – Philipp
    Jun 5, 2018 at 22:46
  • \$\begingroup\$ 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. \$\endgroup\$
    – Yamahari
    Jun 5, 2018 at 23:29

1 Answer 1

Reset to default
2
\$\begingroup\$

Sharp edges are easy, you just subtract height times step height from the y coordinate and you're done.

Smooth edges on the other hand are a bit harder. For each tile you have to check the sorrounding 8 tiles and draw the correct step type (256 possibilities with 6 different cases) For instance, having only 1 raised corner tile around creates a tile with only 1 raised corner, 1 raised neighbouring tile makes the current one have a whole edge raised up and having two neighbouring raised tiles on two opposite edged creates a bridge or a saddle type structure.

The easiest solution to this would be to draw a polygon between the 4 corners of the tile and raise these corners separately.

Improve this answer
\$\endgroup\$
3
  • \$\begingroup\$ But what about the sides of the cliff? (the ones in gray). Should i add an entire new polygon for each of the faces whenever a sharp edge appears? \$\endgroup\$
    – Yamahari
    Jun 4, 2018 at 22:49
  • \$\begingroup\$ @Yamahari The polygons don't have to connect, only the 4 corners have to adapt to the neighbouring tiles if you want them to be in a smooth area \$\endgroup\$
    – Bálint
    Jun 5, 2018 at 6:08
  • \$\begingroup\$ I managed to get the sharp edges right now :) you can see the result in the edit \$\endgroup\$
    – Yamahari
    Jun 5, 2018 at 22:43

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .