A modular system for isometric pixel blocks | Hacker News Reader

A modular system for isometric pixel blocks

c6y.github.io

Since there's no mention yet: this was done by eBoy, a long-running design agency famous for their gigantic and quirky pixel cityscapes (among many other beautiful pieces)

https://hello.eboy.com

This seems to be just one approach to the problem. To my taste, the way they're drawing the vertical lines is ugly (because of the asymmetry), so it made me curious how notable professional isometric pixel art has solved the problem.

I checked two games: Rollercoaster Tycoon 2 and X-COM: UFO Defense. Interestingly, they solve the vertical line problem in the same way as each other, but it's in a different way from the link.

In those games, instead of having an explicit line border, the line is implied by a shading difference between the two faces, which eliminates the asymmetry. Additionally, the corners at top, middle, and bottom are 4 pixels wide instead of 2.

(This strengthens my conviction in the following rule of thumb: when it comes to art, it's better to study professional work I like than to trust a guide.)

This is from the studio "eboy", who's been doing professional isometric pixel work for a good while. When you're a multi-person studio who regularly does sprawling multi-artist projects (https://hello.eboy.com/pool/~Pixorama/1?q=project) then it's well worth documenting what you are choosing to standardize on.

I'm not a huge fan of their signature look either, but this is a nice little list of "what to expect if you're gonna work with us" IMHO. :)

I think the asymmetry is a great rule that discourages the artist from just illogically and lazily flipping things.

Handedness in video game sprites is a great example of the weird dissonance created by mirroring.

RollerCoaster Tycoon isn't actually "pixel art", but, instead, renderings of 3D models. It just looks like pixel art because of the vibrant palette and small pixel-level art. Pixel art "techniques" do not apply because it wasn't drawn pixel-by-pixel.

Interesting point. That's definitely visible in the overall art style.

But at least regarding the edges and corners of an isometric rectangular cuboid tile, I'm not convinced that there's a meaningful difference between pixel-by-pixel drawing vs non-anti-aliased rendering--the rendering turns out so precisely regular that it might as well have been drawn manually.

Reminds me of this guide, from a year or so ago. It's really good with real-world examples and great coloration.

https://pixelparmesan.com/fundamentals-of-isometric-pixel-ar...

> Dual Pixels sit at the heart of the isometric grid. They encapsulate the 2/1 proportion inherent to isometric pixel art.

Honestly I never thought about this, but that's really neat.

I'd go with higher cubes because those look squashed. Ratio between height of the cube and it's width (diagonal) should be as close to cos(30deg)/(sin(30deg)*sqrt(2))/2 as possible. So since single cell cube is 25px wide, it should be around 15px high (not 13px as in this system).

16px looks even better but it would clash with "grid lines" creating line clusters.

Having cubes slightly higher so that wall-lines are slightly offset (15px instead of 13px, so +2px, a single micro-grid cell) from the floor-lines makes it better looking and easier to tell apart where walls occlude floors on the picture (or the other way around) or where different levels of floors are next to each other.

4X4 cube should theoretically have 59px height (not 49px as in this system) but it might be more pragmatic to use 57px so that you can stack 4x1 cubes to get to 4-cube height.

Apart from that, this system great! I especially like the rule about vertical lines on right pixels only.

The price I pay for better proportions is that height is divisible by 2 and 7, while floors are divisible by 2, 3 and 6.

But it might make sense that walls have different patterns of division than floors. And dividing walls evenly might be not that useful (except for levels of buildings) and placing things equidistantly between the ceiling and floor on the walls is also not very useful.

I don't get the tiling. Cells are 7x7 dual (?) Pixels yet they can be divided by 2,3 and 6?

Cubes are 4x4x4 cells yet can be divided by 3?

How does that work out?

In spite of what the page says, the cell isn't 7x7. One diamond-shaped cell is 24 pixels wide, measuring from the center of the leftmost pixel to the center of the rightmost pixel, and 12 pixels tall center-to-center.

You mean that a cell has a diameter of 24 pixels. “Width” would be measured along one of the (angled) sides of the cell.

By dual pixel they mean a horizontal line that is one pixel tall and two pixel wide. Each cell's side is 7 such dual pixels arranged diagonally. But since you stack tiles so that the grid line overlaps, it means that two 7-wide cells are together only 13-wide (and not 14). The top dual pixel of one is the bottom dual pixel of the other.

Going smaller, two 4-wide cells will again lose one line to the overlap and thus join to make a 7 (that's how 7 divides by 2).

Three 3-wide cells join and lose two lines to overlap and thus again join to make 33-2 = 7

Six 2-wide cells join and lose fives lines to overlap 62-5 = 7.

Or in general for n cells, there are n-1 overlaps, so if they are k-wide the combined cell will be n*k - (n-1) wide.

It makes more intuitive sense when you notice 7-1 = 6.

All "outer" dimensions are 6*n + 1.

So 4 cells are actually 4*6+1 not 4*7

So you can see that 4 cells can be divided into 3 parts in this way:

3*4*6+1 = 3*4*2*3+1 = 3*2*4*3+1

All of that is because there's 1px overlap between neighboring cells.

Reply on news.ycombinator.com