Can anyone guide me how to make circular resource bars like below in Gdevelop? While I am able to create and change values of circular bars, I am unable to change the bars animation to follow the circular background.
Had a recent conversation on the discord about this, and still have the screenshot. Here’s how I would do it with a shape painter:
The only event you really need is the second to last, although the last 2 make it a gradual increase over time.
Edit: You can change/increase that variable for the “end angle” however you like to track whatever info you want. Just remember that it’s degrees from 0 to 360, and that 0 starts at due east (the right).
3 Likes
That’s helpful!
How do you change the animation of the bar with with the max/value parameters as we do in horizontal resource bars?
Sorry, not sure what you are asking. There is no animations in the custom resource bar object. Only flat sprites.
Do you mean the easing on how it fills? You would just update the angle variable using an easing expression in a separate action. That’s mostly how the custom object does it, too.
Currently I create the resource bar using New Object> Resource bar (continous)
And then set/change its properties either by clicking the object or by adding the events/conditions in the event sheet.
I am wondering how to implement similar configuration setup for circular ones in the event sheets. I am thinking of a function that will cover/change all the necessary values as per event. I am not sure how to implement the value changes with radians. Do you recommend any better way?
You could create a behavior extension with all of the parameters and put that on your shape painter, but it’s not necessarily going to be any faster than just setting up events that updates the variable used for the bar angle (Which is your “current value”).
If you’re wanting an “empty” bar beneath it, you’d need a separate shape painter that draws a circle with whatever color you want + make sure it’s drawing the shape at the same position as the “current value” shape painter.
Easings are just something you’d update on the current value variable as part of whatever event you set up to update it.
Keep in mind all of the custom objects (such as toggles or resource bars) are just events being applied to a preset combination of objects.
Once it’s created, it’s just adding an extension to your project. You can open that project to see how it’s built, the same as any other extension:
Thank you for helping me understand the whole setup. I was little hesitate to convert the parameters to behavior extension thinking that it might be a complicated affair, but now it seems that it makes things easier in the long run.
Thank you so much again for your inputs. You are awesome!
1 Like