2D Sprites with dynamic (3D) lighting

[Suro]

Right now I'm trying my hardest to "get" shader coding, to get dynamic lighting working with 2D sprites.
In my current setup I have:
When light is in front of the 2D sprite (the blue and red light in the image) I can position lights "around" the character and it reacts properly. Light left of the sprite is less likes to reach the right border, and vice versa.
I also use "translucency" so that if a light is behind the sprite, it will shimmer through and work as a harsh shoulder/rim light.


My take right now is, to have a set of 3 images:
- the main texture
- a normal map (greyscale heightmap / automated in photoshop - basically the alpha of the main texture shrunken and blurred)
- a greyscale image of the edges (basically the difference of the alpha of the main texture and the shrunken/blurred one)


This is all fine and dandy, but I'm sure I can cut out the additional 2 images and generate the normal map and the "edge" image on the fly, with only the alpha of the main texture as a source.
Sadly, I'm completely uncapable of doing it. Several days of googling, reading about shaders and looking for various tutorials didn't help since I simply don't "get" the math behind it. What I do understand is the set of actions in photoshop I do (e.g. select all pixel and shrink down the selection by x pixels) to automate all the things needed to have the whole set of images.

If anybody can hint me into the right direction, I would REALLY appreciate it.

[Amplify_Borba]

Hello, thank you for getting in touch and for your support!

I honestly wouldn't recommend doing those operations in runtime as part of some sort of automated workflow, the baked approach is far more performant and common although it does require additional manual work.

You could consider using an external tool to facilitate this, here's a list containing a few valid options.

[Suro]

Hey there! Thanks for the reply.

As you can read in my initial post, I have no problem to generale a normal map in photoshop. I automated the whole process via actions, so suggesting another tool to basically do the exact same job, only "different" is not needed.

As I want to use frame by frame animation, I don't have the luxuary of creating one big spritesheet. It is very likely that a single character will be broken up into several different spritesheets. The last time I tried this (granted, it has been a while), the spritesheet worked fine for any animation, but of course the normal map didn't switch with the spritesheet.
Also, I want to be able to change things like "how much of a slope do I want at the edges?" or "should the edges be linear or not".

If it is not possible with Amplify Shader Editor, it's fine. A bit of a bummer, but I will research other editors or alternatives. Though creating the normales / heightmaps for edges that will double or potentially triplle my 1000+ frames of animation is something I want to avoid.

[Amplify_Borba]

Apologies for not being thorough in my previous reply, although it would be ideal for you to use a regular texture with alpha and a normal map texture in terms of performance, there are a few ways of achieving what you intend through ASE.

Upon some further investigation, I believe that the ideal method would require you to use SDF textures, which you can generate within Unity with the free SDF Toolkit ( or any other alternative, should you prefer ). In this workflow, you would have to create a SDF Texture with the Alpha and generate a Normal through shader code, while also using the SDF as the edge. This would provide great results, while allowing you to cut back on the two additional images as you intend.

For your convenience, we've set up a simple sample with a fair amount of control, together with a new Shader Function asset based on our Normal Create node but adapted for this specific purpose:

SDF_Normal_Edge_Sample.zip

(28.62 KiB) Downloaded 329 times

Please let us know if this helps, thanks!

[jarestrepogu]

Hi, I've been trying to achieve this effect for my sprites following the node setup proposed here but something weird happened.
We are animating our characters with Puppet2D wich creates a rig with the associated sprites, these sprites uses the Default Sprite Shader and if I change it for my custom one it renders transparent... Have you seen this behavior before? Do you know how could I fix it or which way should I look?

Thanks!

[Amplify_Borba]

We're not at all familiar with Puppet2D but I will assume that, since it uses the Default Sprite Shader, you might not be able to use a Standard shader without issues. It could also be related to what you have connected to the Opacity Port or to the property names of your shader, have you tried setting your main Texture Sample's 'Property Name' to '_MainTex'?

Alternatively, although you can generally use a Standard Surface shader for Sprites, we also provide a Default Sprite Template that you can use to create shaders specifically for this use:



Since this shader type has different ports and is set up differently, you can look into the two samples we share in the following folder:

AmplifyShaderEditor \ Examples \ Official \ TemplateExamples \ Sprites

Do note that you also have a specific node for templates, the Template Parameter node, which allows you to access pre-existing properties of the Template.

In any case, I'd advise that you reach them out through their forum or via email, as the developer might be able to provide better insight regarding his tool's requirements.