AuthorTopic: Isometric pixel art, which tile variation?  (Read 4926 times)

Offline syranide

  • 0001
  • *
  • Posts: 5
  • Karma: +0/-0
    • View Profile

Isometric pixel art, which tile variation?

on: November 19, 2011, 11:57:42 pm
I've been toying with isometric pixel art a bit in the past, but I've never found any good explanation for which "tile variation" is preferable and when. To illustrate:



1. Tiles seamlessly, top and bottom edges are pointy.
2. Tiles seamlessly, left and right edges are pointy.
3. Tiles overlapping, all edges are pointy (has a sharp feel to it).
4. Tiles seamlessly, 3px/1px top and bottom edges (seems like it's used for more organic terrains).
5. Tiles overlapping, no edges are pointy (has a softer feel to it).
Or are there perhaps even more practical variations?

EDIT: So #1 and #2 and #4 seem to be the only reasonable non-overlapping variations (hmm, I'm guessing there are a few more, but might not be all that interesting, if you flip #4 vertically you get two other tiles, but that doesn't tile as neatly).

Anyone have any hints on which is preferred and when?
Is #3/#5 perhaps advisable when one is relying heavily on outlines as it seems adjacent outlines would then merge. Otherwise it seems to me like #1 would be generally preferable with the pointy bottom... but then again, I'm not really sure! ;)

Any insights would be greatly appreciated!

EDIT: Added variation #4 and #5.
« Last Edit: November 20, 2011, 11:51:39 am by syranide »

Offline surt

  • 0011
  • **
  • Posts: 570
  • Karma: +0/-0
  • Meat by-product
    • not_surt
    • http://pixeljoint.com/p/2254.htm
    • View Profile
    • Uninhabitant

Re: Isometric pixel art, which tile variation?

Reply #1 on: November 20, 2011, 01:15:19 am
Personally I reckon 1 the most natural.
Construct an edge grid, fill in the tile so it doesn't overlap its neigbours and that's what you get.

Personally I find the idea of engineering in unneeded overdraw highly offensive.

Offline DawnBringer

  • 0001
  • *
  • Posts: 51
  • Karma: +0/-0
    • View Profile

Re: Isometric pixel art, which tile variation?

Reply #2 on: November 20, 2011, 01:50:19 am
I think #2, with left-most pixel yellow. (Note to self: Have to sit down one day and hammer out all the logic behind isometrics & its transformations)

Offline syranide

  • 0001
  • *
  • Posts: 5
  • Karma: +0/-0
    • View Profile

Re: Isometric pixel art, which tile variation?

Reply #3 on: November 20, 2011, 11:22:25 am
Personally I reckon 1 the most natural.
Construct an edge grid, fill in the tile so it doesn't overlap its neigbours and that's what you get.

Personally I find the idea of engineering in unneeded overdraw highly offensive.

Being a bit of a perfectionist engineer, I myself has tried my hand at trying to find out if there is single "right one"... it's a very nice example with the grid you show there... however, if you approach the problem differently in that you consider a square, rotate it 45 degrees, and then shrink it to 50% on the height... then you end up with #2 instead (and possibly #4 depending on how you scale it... interestingly enough, you used #4 as an overlay in your second picture)!

But indeed, the fact that the outline in your example is a power of 2 128x64 ... is very nice indeed! ;D

And I remember even trying to construct perfectly tiling ~45 degree and ~22.5 degree slopes with both #1 and #2 to see if any of them showed a more "mathematically" quality, but from what I remember, both could be constructed with a fixed line stepping pattern. However, #1 was slightly ahead in visual quality as all edges are 2px wide, meaning the slopes connected a bit more beautifully. (Found the old image!)



#1 is to the left and #2 is to the right.
In this example, I would say that #1 is slightly ahead of #2 in terms of visual quality, in #1 both slopes connect well to the center and also to each other, they're also a bit more evently sized in #1.

Oh and I definately agree about the overdraw, but when you're using an outline, it might make sense, as in that the outline of two adjacent objects would then merge instead of forming a thicker outline, but only diagonally ... which your picture actually illustrates beautifully ... perhaps that's the way to go! #1 really seems to be "mathematically" favored and you can't argue against math! ;)

But I'm curious as to what the practical implications are for pixel art made using the various styles. E.g, using #4 has two center lines which may be very nice in a way, but makes diagonal grid lines impossible.

I think #2, with left-most pixel yellow. (Note to self: Have to sit down one day and hammer out all the logic behind isometrics & its transformations)

It's interesting from what I've seen on the internet in that it seems like neither of #1 or #2 is favored, both appear to be equally used, I've even seen a single pixel artist use both.

And from what I've seen when looking around it would seem like some prefer #2 as it has a softer feel to it, buildings and similar things don't get such prominently "angled" edges but rather gets a softer and flatter overall feeling. While #1 has really hard edges that really has a more 3D feeling to it. And #4 is kind of nice in that it does have center lines (vertically and horizontally), highly organic and non-regular tilesets seems to like use this one sometimes, but horrible if you want to draw a grid pattern.

What I mean is that, more realistically crafted pixel art seems to favor #2 to some degree while simpler and more abstract pixel art seems to favor #1 for having a bit more 3D to it and because the corners are all even in size.
« Last Edit: November 20, 2011, 01:22:19 pm by syranide »

Offline syranide

  • 0001
  • *
  • Posts: 5
  • Karma: +0/-0
    • View Profile

Re: Isometric pixel art, which tile variation?

Reply #4 on: November 20, 2011, 12:27:33 pm




Made a more complete and accurate "chart", #4 and #5 are technically the same (although I don't think I've ever seen them used), and as you can see the grid doesn't align nicely, but they are interesting in the sense that they have a vertical center line but no horizontal center line. But probably useless in practice.

Grey is the grid on which the colored tiles should be laid out (the grey tile can also be used as a tile with overlapping edges). The white cross in the middle shows the thickness of the corners, if it is 1px/3px thick then it means there is a center line for that variation.

To me it looks like a matter of whether one is going for hard/soft corners, whether tiles will have outlines and how well you want those outlines to merge.

Without outlines:
#1 has a hard bottom corner
#2 has a soft bottom corner
#3 has overall softer corners (probably useful when you don't need/want to show the tile pattern)

With outlines:
#1 has a soft bottom corner (outlines doesn't merge at corners)
#2 has a hard bottom corner (outlines doesn't naturally merge vertically, unless you always put outline to the right or left)
#3 kind of fuzzy corners (outlines merge vertically, but not perfectly at intersections, but still looks good)

I'm actually starting to like #3 a bit, I'll have to play around with it a bit I think.
« Last Edit: November 20, 2011, 01:31:17 pm by syranide »

Offline Pixelchaser

  • 0001
  • *
  • Posts: 2
  • Karma: +0/-0
    • View Profile

Re: Isometric pixel art, which tile variation?

Reply #5 on: January 13, 2012, 01:07:04 am
hi,

quite new to pixelart specifically and i had been debating this tiling arangment recently myself. with my fondness of minecraft i decided to adopt the overlap method. which isnt technically correct regards the 2:1 rule,(between blocks we have the annoyance) but its not so ugly either given minecraft base and necessity surrounding the tilling principle required. what you think ? i think ive followed similar to your variation 4 in your depiction with an overlap twist. the result a true tiled isometric 31 x 31 blocks. derived from a 32x32 pixel block.
« Last Edit: January 13, 2012, 07:24:09 pm by Pixelchaser »