+3 votes

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.


in Engine by (722 points)

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

2 Answers

+9 votes
Best answer

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

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.

by (1,316 points)
selected by

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.

+3 votes

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.

by (338 points)
Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read Frequently asked questions and How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to [email protected] with your username.