Hacker News Reader

Comment by NohatCoder | Hacker News Reader

Nice guide, but one thing that seems slightly off: All the cubes don't look exactly cube shaped, they need to be slightly taller to look perfectly cube. If for instance a cube is 2x16 px wide, then the height at the side should be approximately 18 px.

View on HN

I'd say >19px.

19.5959179423 to be precise

16*cos(30)/(sin(30)*sqrt(2)) to be exact.

They're not using 30⁰ though, but rather 1:2 (approx 26.5⁰)

So this is 16 × √2 ≈ 22.6 or 23px, which seems over tall to me

30 deg is not angle of the lines on the projection. It's the angle at which camera must be oriented in 3d space to achieve ratio of 1:2 on projection.

Aah, that makes more sense

https://i.imgur.com/YnHiRTG.png

20px looks good to me, but maybe it's subjective.

Why is that?

One reason is, at least, that because pixel art "isometric" is actually 2:1 dimetric, the vertical axis is slightly less foreshortened than the two horizontal axes.

And why can't it be "true" isometric? Would it look bad?

Yeah it's what you get with 2:1 lines. Actual isometry would require some 1:1 "stairs" on these lines, making them look less nice.

Let's look at top surface. To have it 2 times wider horizontally than vertically in projection camera angle must be 30 deg down from horizon.

Ratio between the foreshortened diagonal of top surface and foreshortened height of the cube would be sin(30)/cos(30) if they were same length in 3d.

Since they don't have the same length in 3d (diagonal is sqrt(2) times longer than cube height) the final ratio in projection between cube height and diagonal comes out to be cos(30)/(sin(30)*sqrt(2)) so more than 19px and less than 20px (a little bit closer to 20px) for the foreshortened diagonal of 16px.

Reply on news.ycombinator.com