Hi!
How do I change tint on a Spine object?
I want to do this:
sprite.set_constant("#sprite", “tint”, color)
but with Spine
I was thinking giving it own material and changing the FP, but I can’t figure out where you set the material for a spine object.
I don’t think this is possible. @sicher do you know if this can be achieved?
This can be achieved by creating your own material.
In Blossom Blast Saga we created a new fragmentshader like this:
varying mediump vec4 position;
varying mediump vec2 var_texcoord0;
uniform lowp sampler2D DIFFUSE_TEXTURE;
uniform lowp vec4 tint;
uniform lowp vec4 saturation;
uniform lowp float desat;
void main()
{
// Pre-multiply alpha since all runtime textures already are
lowp vec4 tint_pm = vec4(tint.xyz * tint.w, tint.w);
lowp vec4 color = texture2D(DIFFUSE_TEXTURE, var_texcoord0.xy);
if (saturation.x < 1.0) {
lowp float desat = (color.x + color.y + color.z) / 3.0;
color.x = ((desat-color.x)*saturation.x)+color.x;
color.y = ((desat-color.y)*saturation.x)+color.y;
color.z = ((desat-color.z)*saturation.x)+color.z;
}
gl_FragColor = color * tint_pm;
}
Then you can send in tint value just like any other go.property.
You set the material in the Spinemodel (where you set scene and default animation as well)
/A
Can you please clarify this.
I have a spine model with this special FP. If I manually change the tint constant in the .material file it changes color - so the shader works.
I don’t really get how I can update the tint variable though.
I tried writing
go.propery("tint", vmath.vector4(1,0,0,1))
at the top of the GO that holds the spine-model but it didn’t work.
I’ve updated shader constants with Sprites using sprite.set_constant, but there is no spine.set_constant?
No. spine.set_constant() is missing. It’s in the backlog.
DEF-1556
Aight, but you still can do as @Andreas_Jirenius described earlier with go.property somehow?
What’s unclear to me is how I change the “tint” property.
Yeah, you can set the constants buffer in the render script. See http://www.defold.com/ref/render#render.constant_buffer
Probably best to feed the values through messages though.
Wouldn’t this approach result in that all Spines with the same tag in the material would change color at once?
Do you think it’s possible to somehow just change the tint of one specific Spine?
Yes, it would. The workaround is to create a separate material for the spines you want to tint (with a unique tag) and draw that separately, but if you need to dynamically choose which spine to tint, it’s gonna be hairy.
OMG I’m so sorry about this one.
I thought I remembered how I did it previously but I was obviously wrong.
Now I know you’ve already shipped your game but here’s the CORRECT solution anyway 
use go.set ! Nothing else.
Tint is already in the material and should be set if using go.set
In shame I created a full tutorial video about how you can do this (that might help others as well with the first steps in Spine handling)
https://www.livecoding.tv/video/defold-spine-and-materialsshaders/
Hope that will help some more 
Don’t worry @Andreas_Jirenius 
Thank you for the clarification!!
Hi, thanks for “saturation shader” example.
My question touch this example not a topic starter theme. I think better continue thread here without start new topic.
You example works perfect! But only for sprite component. If i try do same with tilemap - nothing changed.
But this dont work ( I use tilemape as mask for level with background, background affected saturation (with another custome material) but tilemap - no. I check changes several tries i dont foun error. Maybe i do something else wrong?
Thanks.
i use “in material” saturation constant, but now change to right way throught message like
go.set("/background#sprite", "saturation", vmath.vector4(1, 0, 0, 0))
All good, saturation applyed.
But for tilemap with modified tile map material
go.set("/background_mask#tilemap", "saturation", vmath.vector4(1, 0, 0, 0))
i catch error "’/background_mask#tilemap’ does not have any property called ‘saturation’"
of cause i setup “saturation” constant in material definition.
Is material not properly applyed to tilemap ?
I test “tint.w” and see that this property appllyed properly
go.set("/background_mask#tilemap", "tint.w", 0.1)
all is good, tint works perfectly.
Maybe tilemap material defold user cannot change and used old “buildins” material in all cases (even if change it)?
You are probably not using your custom material properly. I tried adding saturation to a copy of the tilemap material from builtins and it worked like a charm. Double check that you aren’t accidentally using the wrong material or that the material is referencing the fragment shader from builtins.
Thkx for investigation, this is helpfull. Ok i tripple check this stuff tomorrow. Sorry for trouble (
Sorry, i found missprint in multi layer scene (
Yes, all working good, thanks.
Update to answer the original question:
Duplicate a default spine.material and spine.fp and spine.vp to customize them.
On your spine.material, add in the field “Fragment Constants” a new field “saturation”. Only the “x” will be used.
Now in the file “spine.fp”
varying mediump vec4 position;
varying mediump vec2 var_texcoord0;
varying lowp vec4 var_color;
uniform lowp sampler2D texture_sampler;
uniform lowp vec4 tint;
uniform lowp vec4 saturation;
uniform lowp float desat;
void main()
{
// Pre-multiply alpha since var_color and all runtime textures already are
lowp vec4 tint_pm = vec4(tint.xyz * tint.w, tint.w);
if (saturation.x < 1.0) {
lowp vec4 color = texture2D(texture_sampler, var_texcoord0.xy);
lowp float desat = (color.x + color.y + color.z) / 3.0;
lowp vec4 tex = texture2D(texture_sampler, var_texcoord0.xy);
gl_FragColor = vec4(vec3(dot(tex.rgb, vec3(saturation.x, saturation.x, saturation.x))), tex.a * var_color.a);
} else {
lowp vec4 color_pm = var_color * tint_pm;
gl_FragColor = texture2D(texture_sampler, var_texcoord0.xy) * color_pm;
}
}
You can call from your script
go.set("#spinemodel", "saturation", vmath.vector4(0.5, 1, 1, 1))
0.5 is grey, 1 is normal, 0 is black.