How to blend separate sprites? or can textures in shader be moved around?

Help
, , ,
1

Godot 4

Hi! I want to force godot to render blending modes for separate sprites. I need this because I want to allow players to change base color of character sprite AND on top of that I want to allow them to add a pattern that also can be colored, moved around and scaled.

instruction
instruction2488×830 145 KB

I tried two aproaches:

  1. Making every layer as a seprate sprite2D. It allowed easy color manipulation and on top of that player could move and scale the pattern. Unfortunetly the blending modes were not working.
  2. Making a shader. It allowed smooth blending but I don’t see a way to a) apply pattern on top of base layer b) allow pattern to be moved around and scaled

My question is: how to aproach this issue? Can I blend separate sprites togheter or is it possible to impelement pattern inside a shader? Or maybe there is another third secret way I haven’t thought about?
Thanks in advance!

2

Both your approaches are valid.

I assume you added a canvas material to the sprite? I did a quick test and it works fine.

Whatever your secondary pattern is ( procedural or texture ). You would blend them within the fragment function.

I would start with the base color and then provide a uniform of type sampler2d for your pattern texture. Then also provide parameters for any transforms. Calculate the pixel you want to sample from the secondary texture and blend it with your primary fragment.

In the end you will always be using some form of shader either built in like the canvas material, or your own custom shader.

1000002175
10000021751920×864 221 KB

3

Thank you! Sorry I am writing back this late, I had to take a break from it cos I started to question my life choise during development of my project :laughing:

I didn’t know it was possible to blend images like that, but I will look into it! thank you ^^

4

Okey so things DO mix, I switched to visual shader, so it would be a little bit easier but I had run to 2 problems:

  1. how to acces secondary texture through code? I want to be able to change the texture and move it around

  2. how to move said texture?

5

I’m not sure how it’s done in the visual shader but to provide a control from CPU side is a modifier called uniform once added to a global variable within the shader you should the be able to access it via code and in the inspector panel under the shader resource.

To “move” a texture we need to offset the sample position. Usually you have a one-to-one texture(sampler2d,vec2). The sampler2d is the secondary texture and the vec2 is the position you wish to sample.

To move the image left or right you can take the vec2 and add to the x or y to offset the sample up down left or right.

To scale the image you multiply the vec2 by the ba an amount on x and y.

To rotate, there is a way but it’s a little more complicated.

To sheer, is also a little more complicated but there is a way.

Basically you modify the vec2 you use when sampling the sampler2d. If i were to take it I would setup a matrix transform and use the vec2 multiplied by the transform matrix to product the sample point vec2 to use.

6

It makes sense, thank you! :>