Gui.animate material shader property

Questions
1

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

1 Like
2

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:

image
image1235×748 39.9 KB

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 :wink: ):

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

image

  1. 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) :

image
image644×435 22.5 KB

  1. And as you can see above add “Fragment Constant” - name it tint, type - “User” and assign some initial value.

  2. 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 :sweat_smile: or maybe it’s regarding the fact we are using new SPIR-V pipeline)

  1. In your gui add in “Materials” your material gui_tint:

image
image533×389 14.8 KB

  1. In your node use that material (set property “Material”):

image
image533×661 26 KB

Effect:

image
image407×227 123 Bytes

3

Oh, well… You’re right @b-brtn !

So, while writing above I indeed recreated the thing you say - gui.set works, but gui.animate doesn’t :confused:

Here’s a small repro:

gui_tint.zip (53.2 KB)

Because in manual it there is such example for gui.animate:

I think it’s worth raising a ticket, as it looks like a bug:

1 Like