0
\$\begingroup\$

In XNA, how can I take any given texture, then render it so that it fits completely into a 64x31 (or 32x15) isometric tile such that it tessellates perfectly? My goal is to give various textures to my game, then have it generate an isometric tileset from the given textures, thus requiring pixel-perfect accuracy.

I have tried to use an orthogonal projection, which has good (but imperfect) results, but always ends up making odd-width textures instead, such as 61x29; no amount of adjusting the camera position or target or orthagonal settings seems to correct this, textures always end up with 1, 3, or 5 pixels on the top or bottom of the tile:

enter image description here How can I correct this behavior, or is there a better way I can create multiple isometric tiles easily?

Edit: Before anyone asks, I'm not trying to clip or mask anything when I render it. I'm trying to preserve as much of the texture as possible and push it cleanly into a specific space.

\$\endgroup\$
5
  • \$\begingroup\$ Please elaborate. If the phrase "texel alignment" doesn't mean anything to you, you probably need to do that. In terms of better ways, I'm not really clear on what exactly you are "generating". With this type of terrain, you can render a single quad (4 vertices) over and over again, swapping in the correct texture and world matrix/translation each time. Please let me know if either of these ideas sound relevant. \$\endgroup\$
    – Jon
    Commented Mar 13, 2016 at 4:24
  • \$\begingroup\$ I'm rendering it as a quad, but then exporting it as a .png so I can use it as a sprite. \$\endgroup\$
    – Kyle Baran
    Commented Mar 13, 2016 at 6:23
  • \$\begingroup\$ Is there a reason for doing this in code rather than using image editing software? \$\endgroup\$
    – Pikalek
    Commented Mar 13, 2016 at 18:20
  • \$\begingroup\$ I am incapable of drawing pixel art. \$\endgroup\$
    – Kyle Baran
    Commented Mar 14, 2016 at 2:38
  • \$\begingroup\$ It's time you learned, if you want to be a games developer. Working with images both manually and procedurally is non-optional. It's like being a mechanical engineer and refusing to do technical drawings. \$\endgroup\$
    – Engineer
    Commented Mar 21, 2016 at 9:32

1 Answer 1

Reset to default
0
\$\begingroup\$

To keep things simple, I'd do the following:

We assume as a starting point something like your target tile shape at the top - a 1-bit bitmap which I assume tesselates correctly - if not, get the tesselation working first.

Create a Tuple<float, float> array[64][31] reflecting the target pixels. Each such array cell is a UV coordinate (0.0->1.0 exclusive range) into any existing image you'd like to project into isometric space. For cells that aren't part of the tile, just use e.g. Float.MaxValue for x and y (and remember to check for those and skip them when processing - see below). For all valid cells, read on.

Populating valid cells is a matter of using a mapping formula from iso to ortho space, i.e. "for some isometric [x,y], what is the corresponding [x,y] in ortho space?" - this allows you to get the texel you want at the position you want it in the iso tile. There are plenty of posts around on isometric conversion formulae, see for example this answer. The end result is essentially that you will map every isometric-space tuple to an image-space UV coordinate.

Once you've populated this conversion array with the mappings, you could write a nice wrapper function that uses the mappings for any tile that wants to populate itself from an image:

tile = new Tile();
tile.FromImage("/images/myimage.jpg");

...which will run through the isometric array tuples and pull the corresponding coordinates from the named image, and possibly apply some smoothing / subtexel sampling.

\$\endgroup\$

You must log in to answer this question.

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