Page 1 of 1

[SOLVED]How to make a wall-clock like ProgressBar?

Posted: Sat May 02, 2009 14:27
by lcy03406
Hi. Maybe frequently asked, but I cannot search out some answer.
I want to make something to show cooling down spells in a game. I think this could be a ProgressBar covering a static Image. But it seems that ProgressBar can be eithrer horizontal or vertical but not clockwise. How to make a wall-clock like ProgressBar? Or, how to clip an image into triangle with calculated angles?

Re: [HELP]How to make a wall-clock like ProgressBar?

Posted: Tue Jun 02, 2009 02:41
by songge3604
I want to make that, too.
help :)

Re: [HELP]How to make a wall-clock like ProgressBar?

Posted: Tue Jun 02, 2009 08:00
by scriptkid
Hi both :)

That sounds like a very custom requirement. What you want is drawing a 'pie' shape. But since Cegui doesn't support custom drawing internally, my suggestion would be to create a number of images ranging from empty to full. Then, when updating your progress you could show the image (setProperty("set:pies image:<current_progress>") corresponding to the current value, probably with a little alpha blending or such.

For this to work you need your own looknfeel definition, where the imagery consists of a background (for your spell icon) and a foreground(for the progress layer), both with their own property name to refer to.

Hope this puts you into the right direction for a little.

Re: [HELP]How to make a wall-clock like ProgressBar?

Posted: Thu Jun 25, 2009 08:46
by lcy03406
Thank you, both :D
I have written a Falagurd renderer (i call it "ProgressPie") for CEGUI widget ProgressBar, and add a ProgressPie child in my Spell's looknfeel.The only problem is to make the pie in z-order above the icon but below the text. I set the text layer's priority to 1000 and set the ProgressPie's z to 0.001, this does work, but i think it's so ugly using cegui's or falagurd's const numbers to calculate the z and setting z in looknfeel, any better ideas? How to set a child window's z-order between 2 layers of it's parent?

Re: [HELP]How to make a wall-clock like ProgressBar?

Posted: Thu Jun 25, 2009 09:12
by CrazyEddie
lcy03406 wrote:How to set a child window's z-order between 2 layers of it's parent?

The ability to have the rendering from a child kind of back projected into the parent layer is not something officially supported. Obviously, as you found, in current releases you can force it by using the layer priority hack, but that will almost certainly stop working from 0.7.0 onwards.

There may be a couple of approaches to get what you need, but you'll need to more precisely describe the arrangement of windows you have and their relationships, the arrangement of imagery you have, and the final result you're looking for. Because at the moment, I'm unsure of how you have these things arranged (it seems you have three items (icon, pie and text), but i'm unsure if these are layers of imagery or actual windows, and if they're actual windows are they always used to form a single window, or is there some other arrangement?).

CE.

Re: [HELP]How to make a wall-clock like ProgressBar?

Posted: Fri Jun 26, 2009 01:21
by lcy03406
Thank you patient CE!
My spell button is only a <WidgetLook> in looknfeel until yesterday, including a <layer> for background image, a <layer> for spell icon image, a <layer> for text, and a <layer> for some forground decoration image. It's a button, with no child widgets.
And I want the cooldown progress shown between the icon layer and the text layer.
Now i add a child "ProgressPie" widget into the button's looknfeel, and find the child widget drawn on the very forground, above all the 4 layers of the button.

I think maybe i can add the progressbar functionality into my customise "SpellButton" and change the child widget into a layer of image, or, change the text layer and forground layer into actual StaticImage child widgits. :roll:

Re: [HELP]How to make a wall-clock like ProgressBar?

Posted: Fri Jun 26, 2009 08:31
by CrazyEddie
Yeah, I understand what you want now.

I think the cleanest solution, as you mention, would be to develop a custom "SpellButton" or "ProgressButton", that effectively clones PushButton but adds some elements of the ProgressBar widget. Obviously this seems like more work at the outset.

If you do want to avoid creating the new widget type, and want to fudge it instead, I think that since the progress rendering is to overlay the button imagery having the progress as a child of the button is obviously logical, the issue is then how to get the text to appear over the progress rendering... There are a couple of options, one is to use a third widget - a StaticText is possible, though a little heavyweight - I think I'd use a DefaultWindow in this case. The second option is to have the progress pie itself draw the text - the downside is that you have to set the text on the progress widget instead, though you can use the PropertyLink Falagard element to link a new property on the parent (button) to the Text property of the child (progress).

Hope this gives some ideas of possible alternatives :)

CE.

Re: [HELP]How to make a wall-clock like ProgressBar?

Posted: Sat Jun 27, 2009 03:44
by lcy03406
CrazyEddie wrote:Yeah, I understand what you want now.

I think the cleanest solution, as you mention, would be to develop a custom "SpellButton" or "ProgressButton", that effectively clones PushButton but adds some elements of the ProgressBar widget. Obviously this seems like more work at the outset.
...
CE.

Not very hard. Only a "CurrentProgress" perporty is necessary. Set the pie drawing (in c++ "render" function) a fine z, <layer>s with higher priority will be above the pie. So I can use looknfeels to define the style of the rest of the button, and draw the pie in c++.
Thank you CE.

Re: [SOLVED]How to make a wall-clock like ProgressBar?

Posted: Sun Jun 28, 2009 08:42
by CrazyEddie
Cool, I'm glad you have a workable solution.