Graphics Drawing character highlights/shadows for 2D games?

[MadPropz101]

I was wondering what you guys do when designing your 2D characters, specifically when it comes to lighting and shadows. I made a character in Photoshop for use in a game, but i wanna add highlights and shadows to give him more depth. The thing is that the light has to be coming from somewhere to make sense, and with 2D games and Gamemaker it doesn't work the same as it does in 3D engines.
Let's say that the Sun hits the character's back, so he is darker in the front...when he turns around, the sprite flips and now the highlights and shadows are flipped as well so it looks off.
How would i go about doing subtle shading so that it looks ok in any environment (maybe some levels are at night etc)?
I'm also curios if there is a way to achieve the same dynamic lighting effect in GMS 2 that is used in games like "Seasons after fall" or "Rayman Legends"?

 

[MadPropz101]

Anyone :S?

 

[JackTurbo]

If you want your lighting to be truly dynamic then you're gonna have to use normal maps and a proper lighting system. Check out Let Them Come. That's a gms game that makes extensive use of dynamic lighting.

A simpler approach is to have your lighting baked in to the sprite artwork. This will however be static. Most tend to create their artwork lit from above for this as generally it's rare to be lit from other angles so looks natural in most scenarios.

Another approach is to use depth to dictate highlights. Making elements of the sprite that are meant to be further from the camera slightly darker. This also works well as it's not effected by flopping the sprites.

Really what approach is best, like so many things in gamedev largely depends on your project, your scope/resources and personal tastes.

 

[YanBG]

These games look like drawn by hand(not pixel art), you need to learn how to do that from 2d artists.

 

[Khao]

I don't know about Seasons After Fall, but at least Rayman Legends doesn't truly have dynamic lighting, it just uses a simple yet effective method to appear as if it did.

This are the sprites for Rayman's face.

Notice how they do actually have shadows and highlights as part of the sprite itself.

But here's the thing.

Characters in this game have several overlays to simulate lighting. You literally just draw them on top of the sprite with an additive blend mode (and sometimes with a color!) and it really ends up feeling like proper lighting. You could also have a single overlay with for the whole sprite and then just draw parts of it by using surfaces to better simulate direction. Or you could have 2-3 separate overlays, all with their own lighting direction, though this might not be such a good idea with frame-by-frame animation, as you'd need those overlays for every single frame.

Alternatively, if you truly want it to feel properly dynamic, you might want to look into normal maps, which can absolutely be used with Game Maker.

 

[YanBG]

Alternatively, if you truly want it to feel properly dynamic, you might want to look into normal maps, which can absolutely be used with Game Maker.

How would you add a normal in 2d, with the blend mode?

 

[kburkhart84]

It takes a shader that does the work. You'd also want some kind of system to control your dynamic lights, maybe with a way to have priorities, but that depends on what you want. I know there are some assets on the marketplace that handle this for you as well.

Making the normal maps...that's another process. There are programs that do it semi-automatically for you, such as sprite-lamp. You could manually draw them, which would be quite tedious. Or if your sprites were 3d pre-rendered, then you could make the renderer render normal maps for you(this is my favorite method).

About manual highlights and shadows on hand-drawn(or pixel art) sprites...there is no perfect solution. The closest you could get would maybe be to have a few different versions, depending on game location. Most games just have something that is "good enough" and leave it like that. Those techniques, including the "depth" based mention above generally work fine, and in 2d games the whole "realism" thing doesn't have to be near as important as in the newest AAA games, so having lighting on your characters that doesn't perfectly match all the levels is not that big of a deal. Although, if you can get normal mapped lighting into it, and that fits your game, it can also be nice, and in general could be done on most modern PCs, even lower end ones with integrated graphics(if there aren't other things causing performance issues).

 

[Yal]

Most players won't notice, and you could always have the light come from straight up (instead of an angle) and then base your light/shadows on that - it lets you flip sprites left/right without making the light not make sense.

Also, draw_sprite_general() lets you specify four blend colors (one for each corner), you could simulate colored angled light using that, the correct blend mode (generally bm_add), and some maths to interpolate color values.

 

[Robert Russell]

Hardware heaven have a nice interview up on YouTube about the making of Legends and it shows that they used quite a few different techniques to 'fake' the lighting and maintain the hand drawn feel.

In its most basic form they drew an awful lot of sprites / sprite parts in different lighting conditions and then used a masking system to turn on different sprite images e.g. brighter, darker, rim lighting.

From a practical perspective with game character construction plan ahead:

• if possible decide on your look and feel and chose a colour palette .. Nocturne has some great to the point color theory resources at the top of one of the forums. The most useful part of this I always think is that it guides you for situations like desaturation colours for evening light or darkening colours better in the shadows.
• sketch everything out on paper even if you do it badly like I do .. it is much easier to push around a design on paper.
• when you transfer to Photoshop or Illustrator or Affinity etc construct in layers - diffuse (base colour), value (bright and shadow areas), specular highlights, rim lights in separate layers … this way you can really quickly redo for different lighting situations.
• decide on a sprite animation method. Rayman uses a large sprite atlas and then an animation system similar to Spine which allows you setup different skins depending on the lighting situation.

Dynamic shadows ON your Hero character are tricky. One method is to draw out as many states as is practical and then blend between them e.g draw diffuse layer of sprite depending on general environment lighting, then blend between shadow overlays.

Dynamic shadows behind your Hero are simplest if you stick to an offset (in the direction opposite to the light) dark semi-transparent version of your animated character .. if you have the horsepower left you can do this in steps which helps to pin the shadow correctly to the object where it might touch surfaces e.g. the shadow on the hero hedgehog below is simply the low opacity outline of the character drawn 10 x away from the light in 5 pixel steps (in this example it is actually subtracting itself from the light circle, but you can just do this with a simply sprite draw).

Sorry, its animation, which is a lot of work.

Regards, Rob.