Build isometric room

Unity Engine
,
1

Hey everyone,

I want to build an isometric room in Unity and make it possible for the character to move in this room.
But I can’t figure out how to properly import the parts of the room I drew (sprites).

So I have an isometric room drawn in Adobe Illustrator:

917×849 79 KB

Note: I don’t want to import this room into Unity as a vector .svg format. I want to export it first to the bitmap format .png.
And I’m stuck at this point. I can’t figure out how to properly divide this room into parts (and export each part of the room separately in .png format) in order to put it back together in Unity.

Note2: To do this, I also want to use the isometric tilemaps system in Unity.
So, first I create a 2D Object->Tilemap->Isometric:

744×429 8 KB

Then, I change the sort order as written in this documentation: Isometric 2D environments with Tilemap

740×510 25.3 KB

So, now I have this hierarchy of GameObjects:
(I also changed Grid Cell Size aspect ratio to x: 1, y: 1/sqrt(3)), since I drew the isometry at 30 degrees angle)

721×452 21.1 KB

So, how I tried to divide the room into parts:
(honestly, I’m already stuck at the stage of building the floor of the room)

  1. I was trying to separate the floor from the lower side walls of the room:
    But it turned out to be very difficult to put this together in Unity:

    To make everything connect correctly, I tried to import all the sprites at the same scale and the same size (100 x 58 px):
    1032×656 33.2 KB

But I have a problem in Unity. I can’t connect these parts correctly

1893×945 111 KB

I set all these sprites to pixels per unit, the same as their width: 100. And set the pivot value in the center (0.5, 0.5)

1149×535 71.5 KB

I guess the problem is related to the fact that the left and right walls/covers should have different values of pivot.
But I don’t want to fit these values. I want everything to connect from the “box” with the same value of pivot.
Perhaps someone knows how to properly create sprites (what size, maybe leave more size for transparency)?

  1. I was trying to combine all three parts of the floor as a single block/tile/platform and export it as a single sprite:

So, I created a tile of size (100 x 88 px):

1011×703 32.2 KB

I exported this to Unity and it works well. The floor tiles are connected correctly.

1906×608 98.9 KB

But after that I wanted to create the left wall of the room:

1199×726 80.1 KB

I exported the left wall as a sprite with the size: 76 x 102 px. I set the same value of the pivot element as the floor (0.5, 0.5).

I created a second Tilemap object and set its “Order in Layer” value to 1. But I couldn’t connect it correctly in Unity. The wall slides off the floor and goes beyond it:

1902×624 99.9 KB

Thus, I have the following questions:

  1. What is the best way to divide a room into parts so that it fits perfectly into the unity?
  2. Also, what size should the sprites be so that I don’t have to adjust the pivot value for each of them ?

I think it might be worth giving up using Tilemap. But it seems to me that further changing the room will be difficult to do. For example, it will be difficult to make a room door and animate its opening. Therefore, I think that the room should be built from parts.

Also, I noticed that when I connect several tiles together in Unity, there are translucent seams between adjacent tiles

I think this is because the tile is created at a 30 degree angle and because I export the tile with anti aliasing enabled:

802×464 2.32 KB

But if I turn off anti aliasing, the tile edges will look ragged. I can remove the seams between two tiles if I lower the pixel per unit value from 100 to 99 or less. (Note: tile size: 100 x 58 px). The seams will disappear due to the fact that adjacent tiles will overlap on top of each other. And I think this solution is very bad. Perhaps someone knows the better solution ? To make the tiles connect together perfectly ?

Please help me, I have been trying to find a solution to these problems for a very long time, but unfortunately I was not able to do it(

2

I work in isometric. I make my sprites a little bit bigger than the ‘perfect’ amount to avoid the seams. If using mipmaps - depending on the detail of your sprites - you may need a bit more so when zoomed out lower mips levels don’t produce seams.

Pivots: I adjust pivots on everything. It’s less of a big deal once sprites overflow a bit b/c your pivots don’t need to be 100% precise.

That said, it can be annoying, but you may be able to improve your workflow like this: Anchor the SpriteEditor to a window to left of the scene, and view the scene to the right, you can quickly readjust the pivot to find the sweet spot. Normally the SpriteEditor is a free-floating window; that can be very annoying b/c then you have to tab between windows. Avoid huge spritesheets b/c when the SpriteEditor refreshes after Apply you can lose your zoom position.

To accommodate slightly enlarged sprites, my textures are the nearest power of 2 size. For example, if I’m making a 128x128 iso-square with 128 pixels-per-unit PPU I will use 256x256 to ensure I have that buffer. More realistically, I tend to have a spritesheet with several related sprites on it, say 1024x1024. Then, these are combined into a SpriteAtlas so the wasted space from the source textures is eliminated. You could conceivably lower PPU for the same effect I suppose.

3

Do I understand correctly that you get rid of the seams as follows:

  1. For example, make a sprite of size 128 x 128 px
  2. And in Unity, set the PPU value to 256 ?

Also wanted to ask, are you making isometric tiles at an angle of atan(1/2) ~ 26.565… that is, with a ratio of 2:1 ?
And what if I make tiles at an angle of 30 degrees, do I need to make sprites of the size of a power of two? Can you recommend any resources related to isometry ? Or maybe you have an example of your project related to isometry that you can share ? And can you suggest how you would divide the parts of the isometric room into sprites so that they can easily be put back together in Unity? Thanks!

4

No, basically I add a few buffer pixels on the top

7035529--833902--c - Copy.png
7035529--833902--c - Copy.png805×461 3.8 KB

The 256x256 px ensures none get cutoff. Then I use 128 PPU. Though you could size this exactly, like 132x132 or something, since it’s going into a SpriteAtlas anyway. So power of 2 isn’t strictly necessary. Power of 2 just helps compression, if you’re using that, but I think the rule really is “divisible by 4.” Depends on the compression type.

5

Personally I use “true isometric” as opposed to dimetric (see: https://en.wikipedia.org/wiki/File:Comparison_of_graphical_projections.svg).

6

Hard to comment in the abstract b/c people have very different goals.

The easiest is to use blocks like your cube but taller for walls.

You could have thin walls (see Project Hospital), which may look better, but that will require a RuleTile to choose the correct piece to place in a cell depending on the neighboring walls, and then you need sprites for all the different possible side/corner possibilities.

Separate walls from floor. Floor uses a lower Order in Layer in different tilemap.

7

I’m trying to understand what you mean when you say you’re adding buffer pixels.
Are you just adding a few pixels here?

So your tile doesn’t keep the original aspect ratio ? But why don’t you then add a few buffer pixels from the bottom ? It is possible that this tile will be located in the middle, and another tile will be connected to it from below, and then the seams will be visible…
Also, I want to understand, do you use anti aliasing? So, do you have slightly transparent pixels on the edges of the tile? And if so, how then is it correct to add a few buffer pixels at the edges ?

And also I want to understand how do you align your tile relative to the sprite? Do you align it in the center or at the bottom ?
I can do something like this:

So the sprite size will be 256 x 256 px, but the center-aligned tile size will be 128 x 73.9135 px

Or I can change the position of the tile in the sprite and align it to the bottom, like this:

Or I can change the sprite size to 128 x 128 px and leave the tile size the same, like this:

So, what do you think is the best choice for sprite alignment?

Thank you so much for your help, but could you please show me an example of your tile with its dimensions and how you added a few pixels to it? I think that would be very clear.

8

7036822--834124--ex - Copy.png
7036822--834124--ex - Copy.png1077×343 276 KB

Hopefully this clarifies. Here’s an example with a floor sprite. Ignore the crazy colors, that’s shader related.

Top or bottom, buffer works whichever. Here I do both about evenly. For others, it’s top or bottom skewed. You may need to experiment with different TilemapRenderer Sort Orders, which may affect whether top or bottom is preferable. The “grid cell” shows where grid lines would be for that cell.

Pivot centered, shifted up or down slightly by eye.

This isn’t very scientific: just add some extra pixels until there are no lines. Top or bottom, whatever works for your requirements. If insufficient add a bit more. If you plan on using mipmaps, make sure that at your maximal zoom out it’s still good.

Aspect ratio of a tile doesn’t matter: that’s a concern for the screen. Do the tiles come together to look good? That’s the primary concern.

There’s no AA, no need.

9

So, As I understand it, you create a tile with a few buffer pixels on the edges and adjust all the parameters (such as PPU, size) so that the tile slightly extends at the edges beyond the grid cell and overlaps the neighboring tiles ?

I think this effect could be achieved if you draw a tile with buffer pixels at the edges (for example, the size of the sprite with buffer pixels is 132x132px, and the size of the desired part of the tile is 128x128px) and set the PPU value to 128.

Do I understand correctly that you did so?
Can you tell the size of your tile with and without buffer pixels (approximately) and what PPU value you specified?
Thanks!

10

Yes, you understand correctly.

As for the exact size, you should experiment to see what works! It’ll be particular to your tile size. As I said, it’s not a scientific process: export your png into Unity, then adjust in your image editor, then export again, then adjust. That’s the best process for discovering what you need.

11

I have tested several ways with adding buffer pixels and yes, they all work perfectly. No seams appear between tiles
I want to sum up the results. Perhaps this will be useful to other developers who have encountered a similar problem when working with isometry:
I created 4 sprites: 2 of them are simple tiles. The other 2 of them are the block (floor base):

All of these sprites are 132x132px in size. But the desired tile size is 128x128px. So there are somewhere around 4 buffer pixels at the edges to avoid seams.
I also tried to align each of the tiles in the center and at the bottom.
Note: although the size of the sprites is 132x132px, in fact the tile height is smaller than 132px, which is calculated according to the isometry of 30 degrees.

I exported all these tiles in .png format (with anti-aliasing enabled) and added them to Unity and set each of them to a PPU value of 128.

See the result below:




Thus, when connecting several such tiles, the seams will disappear, as the adjacent tiles will overlap each other.

I also continued building the isometric room and tried exporting the walls of the room.
I created a floor base with a width of 132px (so the floor base has size: 132 x 132px) and adjusted the zoom of the left and right walls so that they perfectly connect to the floor base. It turned out that the wall sprites should have a size: 284 x 392 px. So all the parts of the room connect together perfectly in Adobe Illustrator, but not in Unity.

I exported sprites with this size and added them to Unity. I still set the PPU value to 128 for the base of the floor, and I set the PPU value to 284 for the left and right walls.
But I faced with the following problem:

The walls can’t connect together perfectly. There is always an empty space between them. And as I understand it, changing the pivot value won’t help here. As I understand it, the problem is related to the fact that the sprite size of the walls and their PPU value are incorrectly selected.

Maybe you know how to solve this problem ? Perhaps you know what sizes of sprites should be on the walls? Perhaps the wall sprites should contain a bit of transparent space? Or perhaps the sprites should have the same width and height? And Do I understand correctly that in order for the parts of the room to connect in Unity, they must be “of the same scale”( I mean that they must connect perfectly in Adobe Illustrator) ?
Thanks

12

Try walls that occupy 1 tile instead of 2. This will sort better against a character sprite too. Then use the same process – export png, adjust within image editor, export, adjust – until there are no gaps.

Though do be aware: with the skinny style of wall (i.e. not occupying the full cell) you will likely find that you need custom corner pieces and intersection pieces. This may require quite a few sprites to handle all of the different situations, intersections etc. It may be a wise decision to limit this in some way to avoid the art burden, unless you’re up for it.

As for myself, I once used a similar style but switched to cubes (imagine your floor… but taller) because it was simpler and I could support more variety of walls, which was more important to me. That said, the thin style wall when well executed looks better imo.

A RuleTile can be used to have your walls automatically select the correct sprite to place in the cell in consideration of its neighbors.

To get all these pieces to line up, it may require well-chosen pivots, so I would re-recommend the workflow detailed in my previous post: Build isometric room