So I'm drawing sprites right now for my game world. It's going to be isometric, not rotatable, 2.5 Dimensional. Do I need to add in the shadow to my sprites right now (which would mean to have 5~6 variations of each sprite based on the shadow angle) or do I do that on runtime as the light source changes in the game?

Example: Say I have this drawn from a tileset.


The horizontal tiles (https://imgur.com/a/2pnK4) are reused on the top part of the wall and the bottom part of the wall. But the south side is lighter on the bottom part of the wall for reasons. I want to know if it's better to make 2 different images or make the color darker through coding. Thank you.

  • 3
    \$\begingroup\$ You don't have to do anything. You can choose either of the options you mention based on how much work you want to do with this and how much knowledge you have about these topics \$\endgroup\$ – Bálint Oct 20 '17 at 21:24
  • \$\begingroup\$ @Bálint I practically have no knowledge of game graphics. I did search extensively which method would be easier to implement but I found nothing on how to add shadow to graphic files. I'm quite lost and would really appreciate a starting point on resources to adding shadows to isometric tile files (which I have as png format). \$\endgroup\$ – Steven Oct 20 '17 at 21:27
  • 1
    \$\begingroup\$ Adding a shadow can be as simple as opening up your image editor and painting over the sprite with a low-opacity black. If you want to do something more complicated than that, you should edit your question to include details of the inputs you have and the output results you want. \$\endgroup\$ – DMGregory Oct 20 '17 at 21:33
  • \$\begingroup\$ Try this github.com/anlev/Unity-2D-Sprite-cast-and-receive-shadows . \$\endgroup\$ – Candid Moon _Max_ Oct 21 '17 at 0:45

When you are using a 2d engine, you likely won't get around doing shading while you create your sprite and tile images. Properly shading an object requires information about its 3d shape, which is - per definition - not available in a 2d engine. That's why there are very few 2d games which have changing light directions. Usually you just decide on a fixed light direction and then stick to it for all your sprites and tiles.

If you want dynamic lighting calculated at runtime, use a 3d engine and create your assets as 3d meshes.

Edit: Sidar mentioned an unorthodox but quite interesting new approach in the comments: Add a normal map to your 2d assets. That would allow you to shade them correctly with point-light sources. But I have never used that technique myself and I couldn't name any tools (sprite editors or 2d game engines) which support that.

| improve this answer | |
  • \$\begingroup\$ One such game is don't starve, but that's technically 3d and the sprites don't cast shadows \$\endgroup\$ – Bálint Oct 21 '17 at 8:51
  • \$\begingroup\$ @Bálint Don't Starve doesn't have light direction per-se. They are doing light sources by brightening up a circular area around each light source. Basically, the screen is one flat surface and the light shines onto it from above. You can do some really nice things with that technique (Terraria/Starbound is another great example), but it isn't solving the problem from the question. \$\endgroup\$ – Philipp Oct 21 '17 at 10:10
  • 1
    \$\begingroup\$ You can fake light by using normal maps for your 2D objects. New Super Mario bros does this as well. \$\endgroup\$ – Sidar Oct 21 '17 at 13:51
  • \$\begingroup\$ @Sidar That's a quite interesting approach. I added it to the answer. When you have any own experience with this technique, you might want to write your own answer. \$\endgroup\$ – Philipp Oct 21 '17 at 14:31
  • \$\begingroup\$ been addressed before though And here is another demo \$\endgroup\$ – Sidar Oct 21 '17 at 14:45

The question you need to ask yourself is: How would you add the shading at runtime? Maybe make a little test program that draws 4 sprites in a square and changes the shading. If it works the way you imagine it being, sure, do it in code.

This is not generally possible in a 2D tile based engine. The computer just sees a bunch of flat colors, and can’t tell which of those are texture, and which are shading.

At the least, you would have to create extra assets: Mask overlays containing the edges of your sprites in all 4 cardinal directions, I‘d try. Then you could tint those masks light or dark and draw them at 20% alpha on top of a sprite. To lighten/ darken the requisite parts.

The question you‘ll have to ask yourself is: Is it more work to do this shading in the directions you need manually, or to create fewer masks and write code to do it at play-time?

Also, figure out how you can „cheat“ with your lighting. Do you really need all directions, or can you maybe get away with drawing only a few (maybe even only 2, from left or from right), and then blending the two. E.g. if you are 1/3rd from a light on the right and 2/3rds from one on the left, could you composite „lit from right“ with 66% alpha over „lit from left“?

Also, could you maybe get away with a fixed shading and just draw bright radial gradients (again, at a low opacity like 20%) around every light source?

Could you maybe use a hybrid approach of the above approaches?

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.