In the last sprite art tutorial, you learned about how using the direction of light can help you create 3D-looking box/pyramids like this one.
Its certainly a good start and there's much more to learn, so lets get started. This tutorial is a bit different than the last. Instead of learning simply by example, you're going to be learning the "rules of depth", or, that's what I like to call them.
Rule 1 : Thickness Equals Depth
The "thickness" of the highlight and shadow areas in comparison to the flat area determine the perceived depth. When you compare the two sprites below, pretend that you are looking down on a couple of pyramids.
One is obviously taller. The left one seems taller because its highlight and shadow areas are thicker. Now imagine that these are objects protruding from a wall. Which "protrudes" farther? The left one.
Rule 2 : The Background is Added to The Total Depth
Take a look at this one.
The center square sits on a background square. It uses the exact same colors as the background square, and yet, it is perceived to be higher than the background. This is because the background is added to the total depth. Our brain takes a look at the center square and calculates its depth based on where it is. It's on a raised platform. Therefore, it must be higher than the background platform.
Rule 3 : Reversing Highlight and Shadow Produces Inset
Assuming that the direction of light is consistent, reversing the highlight and shadow produces an inset.
The center square now seems to be "sunk" into the background platform. All that had to be done was reverse the shadow and inset. Everything else is the same. You can stack "inset" as well as you can stack protrusion.
Practical Applications
The rules of depth govern almost all regular tiles in 2D. Really. Take a look at these examples :
Markings in a long forgotten temple :
A frame of a window, picture, tv screen, or the rim of a pit to oblivion :
A friendly and informative sign :
A complicated network of pipes :
Conclusion
You have learned the basics of depth as it applies to 2D sprites. In the future, you will learn to make more complicated and detailed sprites by expanding this technique.
What Next?
- Learn to make a brick wall in our sprite art tutorial : Sprite Art 101 - Brick Wall I
Something Easier?
- If you want something a bit easier, you can try the last tutorial : Sprite Art 101 - The Direction of Light
Talk
Talk about this page, leave a comment, ask a question.