1
\$\begingroup\$

I'm trying to make an isometric tactical rpg type of game. One issue I encountered is that if I elevate an tile, then it starts to block the view behind it. The game is 2D, so there is no freely rotating cameras.

Example:

Flat ground with a person on the top tile Flat ground with an person on a tile

Elevated ground blocking the person

Elevated ground blocking the person

Some of the options that I've thought about include:

  1. When the character is blocked by a tile, display the outline of the character. But I don't like this option because it kind of breaks immersion, and makes it difficult to do "surprise" kind of factor where an enemy character jumps out from behind a blocked tile.
  2. Have the option to rotate the camera by 90 degrees, 180 degrees, and 270 degrees, so you can have see all around it. However, this still doesn't solve the issue where if you have a 4 really tall tiles blocking a single tile in between since no matter how you rotate it, it's still being blocked.
  3. Bigger character and smaller elevation so that even when there's elevation, you can still see part of the character behind it. This only mitigates small elevation differences like hills, but not when you are trying to make a cliff type of terrain.
  4. Have only higher tiles near top of the map, and lower tiles near the bottom. This avoids blocked tile completely, but sets constraints on map making.
  5. Have the option to toggle flattening the map. Such that when turned off, you can see the elevation but blocks the tile behind, and when it is turned on, you don't see elevation, but you can see all tiles.
  6. Combination of the above

So the question is, is there any other ways to solve this issue?

\$\endgroup\$
  • \$\begingroup\$ I think you already answered your own question pretty well. \$\endgroup\$ – Philipp Dec 23 '18 at 23:24
1
\$\begingroup\$

Yes; I have seen games that have a dithered transparency effect to show both the character and the blocking object in an (opinion) elegant way. Here's an example:

image with hand-drawn isometric artstyle that keeps in mind the grid, but does not strictly obey it whatsoever. in it we see the characters or objects present on a 2x2 grid: a flower on the west tile, singular characters on the north and east tiles, and a large object in the south tile that partially obstructs the characters. to convey the information of both the characters AND their obstructor, a 50% basic dithering pattern is used.

Here is one example of how you could implement this, presented in pseudocode:

  1. draw objects that are "closer to the camera" first, then those that are further away
  2. [if no overlap is found, proceed to step 3] during the exact moment a foreground object is found to be overlapping a background object that's been tagged as important (such as the player), proceed to the following substeps:
  3. There are two steps:
    1. define the overlapping area, pixel by pixel, until all overlapping pixels have been found
    2. apply a dithered mask effect only to the {background element that has been drawn on top of the foreground element} as defined by the overlapping region found in substep 'a' [you can have an option in the settings to alter the amount of dithering used, but i'd suggest a 50% checkerboard style as a default]
  4. proceed to step 1, drawing the next row of further background elements until there are no more rows to draw. if complete, end this loop
\$\endgroup\$
  • 1
    \$\begingroup\$ +1 for that picture! \$\endgroup\$ – Tim Holt Jun 3 at 21:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.