Pixelation

Critique => Pixel Art => Topic started by: Vinik on October 11, 2017, 03:53:41 am

Title: Trouble with isometric shading
Post by: Vinik on October 11, 2017, 03:53:41 am
Hello everyone, I have finally started experimenting with isometric tiles after avoiding it for a while. I surrendered to classic isometric 2/1 neat diagonals after feeling the recurrent urge of having diagonal rooms in my topdown prototype, instead of only rooms aligned to the xy axis. I naturally realized in shock that 2/1 regular diagonals do not match front facing 4:3 or 3:2 parallel perspectives tile-sets, and that raster diagonals that match those angles are jagged and bad for pixel art. You can see high school level geometry inst my forte, given that it took me so long to realize that.

Anyway, i think I got the basics covered, but I am struggling with properly shading isometric tiles when various ramps are involved. Specifically, I cant decide in a clear logical way which shade to put correctly in which face given the chosen light source, leading to neighbor faces with apparently to much contrast between each other (top right and bottom left diagonal faces of the "solids" being worst offenders), and I  also end up with a higher color count than I imagined to be necessary for such basic shapes.

Thank you all in advance for any pointers and tips which might help to improve this and correct the shading. This is what I came up with for a template:

(https://i.imgur.com/6tx9MMH.png)
Title: Re: Trouble with isometric shading
Post by: Darien on October 11, 2017, 05:52:47 am
Biggest thing is the bottom left face of the cube (and all corresponding faces) is way too light considering the light source.  I think it should be about the same shade as the top of the cube, but maybe just slightly darker to differentiate.  Overall I think it looks pretty good.
Title: Re: Trouble with isometric shading
Post by: Vinik on October 11, 2017, 02:56:44 pm
Thank you, do you mean it is darker than it should be instead of lighter? Because the top is the second lighter shade. The reason I made it darker is because the light is supposed to come from an upper angle, slightly higher than 45º from the ground, so that the right ramp facing up is the brightest, but still not getting super light from glare.

The main error seems to come from the fact that I tried to reuse colors, when it should actually be one color for each specific angle of the faces. In any case there seems to be 9 visible angles, but 9 shades of every color ramp from dark to mid tones is way over what I am comfortable to work with. Even if I connect the color ramps and reuse the last two darks it would still demand a larger palette than I would like.That is why I tried to reuse the shades on faces that wouldn't touch each other, but as you can see, that is difficult to predict, there can always be a construction that would make them touch and break the sense of volume.

For instance, I know the top right ramp on the larger "dome" should be a lot darker considering the angle of light, but whenever I painted it darker, it didn't looked like a opaque prism anymore, and was implying some sort of crystal. The makeshift lighter tone seems to be acting like a back light or difuse light somehow, and adds to the shape, but it is incorrect and wasn't intentional.

Thanks again, I think I need references to study since instinct alone isn't making it.
Title: Re: Trouble with isometric shading
Post by: Vinik on October 11, 2017, 03:40:35 pm
(https://i.imgur.com/MFT37eU.png)

Let me illustrate the issue. Above is an early attempt to do all the faces with only 5 colors (good tier ramp for me). However, it immediately feels "crystalline" as if the darker faces were reflecting some other source of light, which might even be cool, but wasn't intended, and it totally fails with the different construction below, while using the same angles.
Title: Re: Trouble with isometric shading
Post by: Vinik on October 11, 2017, 04:53:43 pm
Dear diary, today I learned Rhombicomboctahedrons are things, and everybody renders or take pictures of them with frontal, centered or uniform diffuse light to avoid serving as reference.

(https://sites.google.com/site/saccopoulos/_/rsrc/1472691290603/conceptual-design-1/model.jpg?height=146&width=200)

(https://i.pinimg.com/736x/68/90/70/6890700c3b70d8059d129a7ddf02203c.jpg)

(http://pubs.rsc.org/services/images/RSCpubs.ePlatform.Service.FreeContent.ImageService.svc/ImageService/Articleimage/2015/NJ/c4nj02032d/c4nj02032d-f3_hi-res.gif)

But not all is lost, and apparently the triangular faces can be darker than their neighbor slanted faces, if renders are to be trusted:

(http://www.3dcontentcentral.com/ShowModels/ContentCentral/small%20rhombicuboctahedron/small%20rhombicuboctahedron.JPG)
Title: Re: Trouble with isometric shading
Post by: Vinik on October 11, 2017, 05:32:30 pm
So, I think that's all folks, I believe I have reached a compromise on 7 shades, which I cannot see how would they clash and break the sensation of volume, regardless of the construction.
(https://i.imgur.com/oxWadXC.png)

I am not completely satisfied with it, but i will do for the time being as light map for any of the objects in the game. Thank you, and sorry to bother you guys with something as simple as a paint-bucket color filling :D.
Title: Re: Trouble with isometric shading
Post by: Cherno on October 11, 2017, 10:43:43 pm
If you want to keep the color count down, you could also try dithering to get more shades out of less colors.
Title: Re: Trouble with isometric shading
Post by: Vinik on October 12, 2017, 01:55:59 pm
True, with dither only 3 shades can cover all possible angles, although the problem would remain that should north-south slopes and top-right diagonal walls ever superimpose each other they would be indistinguishable without an outline:
(https://i.imgur.com/alrAF04.png)
 However, I am not a fan (or very competent with) dithering myself. I wouldn't dither large areas and full surfaces to represent an intermediate shade for instance, unless in order to give it a texture. On isometric tilesets, extensive 1x1 dithering would also worsen the readability of the borders of surfaces, I think, because it would interfere with clarity of the 2x1 diagonals with the alternation between single pixels of the two colors used to dither.
Title: Re: Trouble with isometric shading
Post by: eishiya on October 12, 2017, 04:02:40 pm
How will these be used? Have you made any mockups? Is using colour to distinguish different objects an option? I feel like you might be worrying too much about the colours being the same. Depending on how you use these surfaces, you might not even need to use different colours to distinguish adjacent surfaces on the same objects because other details and patterns could do the trick.
Title: Re: Trouble with isometric shading
Post by: Curly on October 12, 2017, 11:10:24 pm
It reminds me of Kirby's Dream Course. Give it a look, it might give you ideas.
(https://imgur.com/8cHucJw.png)
Title: Re: Trouble with isometric shading
Post by: Vinik on October 13, 2017, 06:04:51 am
Eishiya, sorry for the late reply, busy holiday around here. This is a mockup which shows some of the difficulties of repeating colors, which, as you mentioned, can be solved by other factor on final tiles, such as detail and textures, since the current tiles are basically only a height map to help visualize forms and proper collisions:

(https://i.imgur.com/BZ7qRSp.png)

I'll have to redraw most of the actual tiles with proper detail in order to match isometric view (was previously working with 4:3 rectangular tiles only).

Curly, thanks for the reference, I'll look into other games with similar shapes, and I do remember a sonic game with isometric tiles which might have something along these lines
Title: Re: Trouble with isometric shading
Post by: Hunited on October 13, 2017, 02:42:40 pm
There's also a beyblade game for the gba with tiles like that that might help you.
Title: Re: Trouble with isometric shading
Post by: Vinik on October 13, 2017, 06:08:16 pm
Oh, thanks, I'll check into pretty much any game with slanted tiles.
Here I am trying to apply the 7 shades logic on the mockup, also reducing the need for outlines as much as possible:
(https://i.imgur.com/N95He5M.png)
Notice I shifted the brightest tiles from the top on the mockup to the top left slope just like in the template, and tried to mach the diverging of the two color ramps with the brightness of the corresponding faces.

If I were to keep to plain tiles without further detailing I could even use the ds grid to render mini maps or zoom in dynamically by feeding smaller chunks:
(https://i.imgur.com/XCcnw7b.png)