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.
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.
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!
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.
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.