Gui.animate material shader property

b-brtn · June 26, 2025, 3:34pm

Why is error when try animate material property on gui node

gui.animate(self.header, "tint", color, go.EASING_INOUTQUAD, 0.5, 0, function()
	gui.set(self.header, "tint", color)
end, go.PLAYBACK_ONCE_FORWARD)

Error: property ‘tint’ not found

And gui.set(self.header, “tint”, color) is work

Pawel · June 27, 2025, 6:52am

What material do you use? How are you familiar with materials in Defold?

If it’s a built-in material - it doesn’t have tint property:

This would be abnormal for a built-in gui material - if it happens, please upload a reproduction example.
For now, I made a simple repro - and using a gui with built-in material shows that we can’t set “tint”:

function init(self)
	self.header = gui.get_node("box")
	local color = vmath.vector4(1,0,0,1)
	gui.set(self.header, "tint", color)
	gui.animate(self.header, "tint", color, go.EASING_INOUTQUAD, 0.5, 0, function()
		gui.set(self.header, "tint", color)
	end, go.PLAYBACK_ONCE_FORWARD)
end

Throws in line 4 (so in gui.set()):

ERROR:SCRIPT: main/test.gui_script:4: Property 'tint' not found
stack traceback:
  [C]:-1: in function set
  main/test.gui_script:4: in function <main/test.gui_script:1>

ERROR:GAMESYS: Error when initializing gui component: RESULT_SCRIPT_ERROR.

If you’d comment out line 4 - it stills throw in line 5 same error - because you don’t have tint property in your shader.

Use gui node color property

If you only would like to change a color of a node in runtime use gui.set_color() and/or animate gui.PROP_COLOR:

	gui.set_color(self.header, color)
	gui.animate(self.header, gui.PROP_COLOR, color, gui.EASING_INBACK, 1, 0)

Build your own gui node shader

If you really would like to modify the shader for gui and add tint (so that you can still set color - but tint it with your tint, or anything else, or you just want to learn shaders ):

Copy the built-in gui.material, gui.fp and gui.fp into your project somewhere, you can rename it too:

In gui_tint.material make sure the vertex and fragment program are pointing to your newly copied files (gui_tint.fp and gui_tint.vp) :

And as you can see above add “Fragment Constant” - name it tint, type - “User” and assign some initial value.
Edit your gui_tint.fp - add ‘tint’ uniform and multiply output color by your tint:

#version 140

in mediump vec2 var_texcoord0;
in mediump vec4 var_color;

out vec4 out_fragColor;

uniform mediump sampler2D texture_sampler;

uniform TintBlock { mediump vec4 tint; };  // <- Add this line

void main()
{
    out_fragColor = texture(texture_sampler, var_texcoord0.xy) * var_color * tint; // <- Multiply by tint
}

You have to wrap tint vector declaration into a “uniform” block (otherwise it throws error, I just learned or maybe it’s regarding the fact we are using new SPIR-V pipeline)