TextureProgress help

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By duke_meister
:warning: Old Version Published before Godot 3 was released.

Can anyone tell me how to use a TextureProgress? Specifically I want to use it in radial mode and use it to tick off the seconds like on a watch face.

I haven’t used a TextureProgress in any mode.

Thanks.

Thanks for both answers! I’m giving the nod to @ericdl for having a sample project, but thanks to @jackmakesthings as well.

duke_meister | 2016-05-31 23:17

:bust_in_silhouette: Reply From: jackmakesthings

For a TextureProgress, you create several images that will basically be drawn on top of each other. I haven’t used a radial one yet, but here are two examples of textures for a linear TextureProgress; for a radial one, you could use something similar, it’d just be a circle instead of a line.

Base image, v1
Progress image, v1


Base image, v2
Progress image, v2


In both of those pairs, the top image is what I’d set as the “Under” texture, and the bottom is what I’d set as “Progress”. (I have yet to use the “Over” texture slot, but you could use it to do things like make your progress meter appear to be behind glass, or have shiny effects on top or whatnot.)

Anyway, you set the images up like that, and depending on the value set on the TextureProgress, a proportional amount of the top image will be drawn. So for the top example, assuming it’s set as linear left-to-right, if you set the progress value to 60, you’ll see three teal squares followed by two black ones. If you set it to 80, you get four teal squares. If you set it to 90, you get four and a half teal squares. And so on. Or, if you want a continuous bar from 0 to 100, you can use images like the bottom set.

It’s a pretty intuitive control once you start playing with it, so I recommend just adding one to your scene and messing around till you get it how you want it.

:bust_in_silhouette: Reply From: ericdl

TextureProgress takes three textures and layers them atop one another: Over texture (top), Progress texture (middle), and Under texture (bottom).

TextureProgress textures

Visibility of the ‘progress’ texture is determined by the value property, and can be modified in code via the set_value() method. In the case of a watch face, the TextureProgress Max Range property can be set to 60 to simulate seconds, and value can be decreased each second in the _process loop:

var timer = 0.0
var value
    
func _ready():
	set_process(true)
    
func _process(delta):
	timer += delta
	if timer >= 1.0:
		# One second has elapsed
		timer = 0.0
    		value = self.get_value()
    		self.set_value(value - 1)
    		if (value - 1) == 0:
    			# Do something here

Example project attached: https://drive.google.com/file/d/0BwnfZQAEnciAQUFkSnA5TVFXR0E/view?usp=sharing

Note: there is a quirk with TextureProgress, the Initial Angle property in the inspector editor sometimes comes pre-filled with the value ‘-nan’, change this to 0 (zero) to avoid crashing Godot.

Thanks. Before I knew about these radial progress bars I had already coded my own up (from a previous project) so now I’ll decide whether there’s benefit in using one of these instead. Always good to have less code to maintain. I want tick marks like a traditional clock face so I’ll see if I can do that.

duke_meister | 2016-05-31 23:19