Emission map for 2d textures

Nano-95

Hey everyone,

I don't have much knowledge on this, but i ran across a tutorial by Brackeys for a 2d glow shader in Unity. Before i switched to Godot, i actually was able to follow the tutorial and get it to work. I was hoping to find a way to do this with Godot... and I swear someone in the Godot community made a tutorial to do this but with Godot, and i can't find it. Maybe im crazy. Either way in that video around minute 8, and 9 seconds he shows what I have below, but in his respective way for the tutorial.

My understanding is that if I add an emission map to my texture, then I would be able to have my sprite's shader only show where my normal map is white.

For example, with this sprite:

I created this:

I believe this is not a normal map, but rather an emission map, so forgive the confusion if this is the case.

What i essentially want to happen is that the black area does not react to what my shader is doing, and the white area does react to it.... so in this case i want just like the outline of the sprite, and the middle of the sword to light up yellow. I'll mess around with colors but first i need to get it to work :)

Is this possible?

Thank you!

Nano-95

For anybody that is interested in a potential solution... here is a video that explains how to do this with WorldEnvironment node and a shader.

Only problem with this for me, is that you should be using GLES3, and unfortunately i am not. So if there is a way to still have a yellow shader react to your emission_map, please let me know :)

TwistedTwigleg

Maybe have the texture use a CanvasMaterial with the render mode set to add? I've used this several times to get a glow-like effect on GLES2 platforms. In the case of the emission texture, using add should work, since black pixels will not add anything since their value is (0,0,0) while colored pixels should.

The only downside with using a CanvasMaterial with the render mode to add is that you don't get the spreading glow effect, only the pixels in the texture will glow. I've found that using two textures generally gives a more visually pleasing effect: one texture for the pixels that glow, and then a large, mostly transparent circular texture that provides the illusion of a spreading glow.

If you want, I can make a quick example project showing what I mean, if it would help :smile:

Nano-95

@TwistedTwigleg said: Maybe have the texture use a CanvasMaterial with the render mode set to add? I've used this several times to get a glow-like effect on GLES2 platforms. In the case of the emission texture, using add should work, since black pixels will not add anything since their value is (0,0,0) while colored pixels should.

The only downside with using a CanvasMaterial with the render mode to add is that you don't get the spreading glow effect, only the pixels in the texture will glow. I've found that using two textures generally gives a more visually pleasing effect: one texture for the pixels that glow, and then a large, mostly transparent circular texture that provides the illusion of a spreading glow.

If you want, I can make a quick example project showing what I mean, if it would help :smile:

I actually do not mind that it does not have a glowing effect. I mostly need the shader to fade in and out using cos(TIME), to kind of make it obvious that my button is interactable. Our other idea, is just to spawn an arrow animation after a few seconds of no interaction, but i wanted to try this before resorting to that.

TwistedTwigleg

Sorry about the delay in replying! I only just remembered this post and realized I didn’t reply again.

I think you can use a shader like this to get it to glow over time:

shader_type canvas_item;
uniform sampler2D glow_texture;
uniform float glow_strength = 1.0;
uniform float glow_speed = 1.0;

void fragment() {
COLOR = texture(TEXTURE, UV);
float time = COS(TIME * glow_speed);
COLOR = COLOR + (texture(glow_texture, UV) * time * glow_strength);
}

Nano-95

@TwistedTwigleg said: Sorry about the delay in replying! I only just remembered this post and realized I didn’t reply again.

I think you can use a shader like this to get it to glow over time:
shader_type canvas_item;
uniform sampler2D glow_texture;
uniform float glow_strength = 1.0;
uniform float glow_speed = 1.0;

void fragment() {
COLOR = texture(TEXTURE, UV);
float time = COS(TIME * glow_speed);
COLOR = COLOR + (texture(glow_texture, UV) * time * glow_strength);
}

Haha no problem!

Something interesting is happening here... So with the black map above, with that code, i was seeing that the square would also get added, so there was a black square also.

So i created a new sprite that has the same white outline but i deleted the black color from the sprite. so i passed this sprite to the glow_texture.

with this new sprite i'm seeing this.. which is strange... the glow_strength is at 1 so i can better show you. (btw i added abs() to time so that it doesn't go negative -- i was seeing some darkness)

so here it is when the time value i assume is at 0. the sprite is at a normal state.

When the time value is at it's highest, and GLOWING :), then it has an interesting result...

I'm not sure why that middle area is being illuminated... but what I also don't get is, why is it not just the shape of the outline that is being added to the rest of the image? Why is the entire sprite (minus the weird shape) turning white?

I'm going to mess with it some more after running some errands but maybe i am missing something obvious...

Thanks so much!

TwistedTwigleg

Huh strange, that is not what I would expect. I do not think its anything wrong on your end, I probably messed something up in the shader. Let me see if I can get a quick test project with the shader working :smile:

Edit: Okay, I think I got it working. I did it a couple different ways, both of which are shown in the project :sunglasses:

Nano-95

@TwistedTwigleg said: Huh strange, that is not what I would expect. I do not think its anything wrong on your end, I probably messed something up in the shader. Let me see if I can get a quick test project with the shader working :smile:

Edit: Okay, I think I got it working. I did it a couple different ways, both of which are shown in the project :sunglasses:

Man, you're the bomb! Admin of the year award please! I really appreciate how much you go out of your way to help!

That project makes sense! COLOR.rgb still is a bit confusing... not sure why this worked but COLOR alone did not. Is there a quick summary as to why?

Nano-95

also am i having a massive brain fart? How do i mark your answer above as accepted answer? I've done it before but i do not see it anywhere here

Megalomaniak

@Nano-95 said:

That project makes sense! COLOR.rgb still is a bit confusing... not sure why this worked but COLOR alone did not. Is there a quick summary as to why?

Might have something to do with COLOR being a vec4 and having a Alpha component as well.

@Nano-95 said: also am i having a massive brain fart? How do i mark your answer above as accepted answer? I've done it before but i do not see it anywhere here

I've changed the topic type from discussion to a question so you should see the prompt now.

TwistedTwigleg

@Nano-95 said:

@TwistedTwigleg said: Huh strange, that is not what I would expect. I do not think its anything wrong on your end, I probably messed something up in the shader. Let me see if I can get a quick test project with the shader working :smile:

Edit: Okay, I think I got it working. I did it a couple different ways, both of which are shown in the project :sunglasses:

Man, you're the bomb! Admin of the year award please! I really appreciate how much you go out of your way to help!

Great, I’m glad it’s working! :smiley:

That project makes sense! COLOR.rgb still is a bit confusing... not sure why this worked but COLOR alone did not. Is there a quick summary as to why?

As @Megalomaniak mentioned, the alpha component was what was messing up using a color map where black is unlit and white is lit, so using rgb on both the texture and COLOR makes it where the color map only affects color while still using the transparency/alpha of the original image.