this post was submitted on 17 Oct 2024
1 points (100.0% liked)

Godot: The open source game engine

21 readers
1 users here now

A community for discussion and support in development with the Godot game engine.

founded 1 year ago
MODERATORS
 
This is an automated archive made by the Lemmit Bot.

The original was posted on /r/godot by /u/simonhytte on 2024-10-17 15:12:03+00:00.


I've devised a new method for pixel art game shading. This is not an advanced shader processing happening in real-time however post processing done manually before it's fed into godot engine.

I've used couple of old comic books to study how the shading works and how one could apply this to pixel art without it looking like trash. As well I've looked into how shading in into the spiderverse and it's subsequent sequel across the spiderverse constructed it's shading.on the left you can see the original drawn in aseprite, no surprises there. on the right you can see the level after the processing is done

The Art of Spider-Man: Across the Spider-Verse, pg.103

The way it's done:

  1. First I've imported the full export into Photoshop in upscaled resolution,
  • if you're going to use higher resolution shading of this kind, never export it as 1:1,
  • don't draw obvious shadows on your pixel art
  1. I've made the basic half-tone shader layer, Blending Mode: Overlay, angle about 30 degrees with shader pattern I've premade.

  2. Real life comic books are never as sharp as the raw input, so I've made a subtle 1px blur & drew a simple mask using the soft brush. It's subtle, but I think it matters a ton! ^•ᴥ•^

  3. I added a subtle soft shade layer in the color of the level, set on overlay. this helps me to paint the lighter parts of the level to create contrast.

  4. I painted in shadows using the similar technique before. This time set to hardlight. It took a lot of fine-tuning and careful selection of these effects for them to work.

  5. See now it's coming together! I added a posterize filter that helps out bring the halftone texture from the things we did before. Soft shading in steps 4 and 5 help to give it this sense of space.

  6. little adjustment curves and we're basically done

no comments (yet)
sorted by: hot top controversial new old
there doesn't seem to be anything here