2
\$\begingroup\$

Example

In a 4x4 square tile, it's easy to know which pixels are inside the tile's boundaries. I know immediately that the 4th vertical pixel is supposed to be drawn but the 5th isn't.

However, on a rhombus' shaped tile, those boundaries aren't that obvious since the picture that contains it is a rectangle. This means that, within that rectangle, there will be pixels that are supposed to be seen and pixels which aren't.

If I'm drawing an isometric tile, how would you suggest I get to know which pixels are within its boundaries and which aren't?

I thought about drawing border lines so that I can draw the texture inside but since the texture should be a power-of-two size, there's no middle pixel on each axis, so it won't be just a matter of connecting 4 dots. So I decided to connect each of the 2 middle pixels in each edge, with the closest pixel on the closest edge (1st picture on top). However, if I draw inside of them, the texture won't reach the edge, which I imagine will create gaps. If this is the case, should I draw the lines one pixel beyond those two middle pixels in each side to get the outside boundaries (2nd image on top)? Are these lines a reliable indicator of which pixels should be seen?

\$\endgroup\$

1 Answer 1

Reset to default
1
\$\begingroup\$

To answer your second question first, I believe you should draw inside the lines of your second image. This will mean the tiles are all identical, and will pack tightly.

The first question, how to best determine what is inside the tile has at least two solutions.

The first is straightforward: use transparency. If you can put it in the tile itself, you are done. If you for some reason can't or don't want to, you can use one extra tile as a mask, and then just do a check, like this:

 foreach pixel x and y if(mask(x, y) == White) drawPixel(x, y, myTile(x, y))

Well of course you need modifications to handle pixels falling of the screen and choosing the correct tile and offsetting the pixels, but those are the same as for rect tile (whatever code you have, you can just dump in the mask code there).

The second solution is to use the lines you have already calculated. We can take a few shortcuts, and use the absolute value function to simplify the situation a bit.

foreach pixel x and y x1 = x - width / 2 + 0.5 //calculate relative to tile centre y1 = y - height / 2 + 0.5 if (abs(x1 + 2*y1) <= width/2 + 1) && (abs(x1 - 2*y1) <= width/2 + 1) drawPixel(x, y, myTile(x, y))

As before, you will need to calculate offsets and handle screen borders.

Of these, the first is much better, since it is much easier to modify if you decide to change your tiles. (Deriving the equations are in principle easy, but I find in practice I waste a lot of time tracing rounding, off-by-one, and other errors).

\$\endgroup\$

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.