Progress bar?

[ripper9100]

Hi,
I've seen a few topics discussing the use of progressbars for health bars but I'm still not sure how to use a progressbar to suit my needs. I want to use a custom image I have made for a horizontal health bar, so how can I use this image in combination with the progressbar to create a health bar? Is this something that can be easily set up in the LayoutEditor or will I have to write a substantial amount of code to do this?

[CrazyEddie]

Hi,

You won't have to write any code, but you'll probably have to write/edit some XML.

You'll need to be more specific about exactly how you need things to be arranged; if it's a single image clipped as regards to progress, and no other imagery, then that's really simple to do; as you add frames, other imagery and/or more complex requirements the required XML also get more complicated.

Also note that prior to 0.6.0 (or maybe 0.6.1) there was a bug affecting the way that progress bars were drawn and the progress clipped, so that may be a factor for you also.

The layout editor can't be used to 'create' the progress bar definition, though once you have that, it can be used to subsequently use the new progress bar(s) in layouts.

Please give more specific info about the requirements of the progress bar, and hopefully we'll be able to be more specific about solutions.

HTH

CE.

[ripper9100]

Thank you for the response. I need something very simple so clipping the image that I want to use is what I had in mind. I have the latest version of CEGUI so I don't think the bug will be a problem.

[CrazyEddie]

Ok, this post attempts to demonstrate the most basic progress bar, as well as be a semi-tutorial.

Basically the requirements for a progress bar are as follows, this may not mean much to you, but stay with me

A NamedArea definition named "ProgressArea"; this defines a target area within the whole progress bar that will be used for rendering the actual progress imagery.
A StateImagery definition for the "Enabled" state; this is to draw auxiliary imagery (like a frame, or whatever) when the progress bar widget is enabled.
A StateImagery definition for the "Disabled" state; this is the same as for the "Enabled" except it's drawn when the progress bar is disabled.
A StateImagery definition for "EnabledProgress"; this is the imagery for the actual 'progress' part of the widget. There are two key points to consider for this imagery. First, imagery referenced here will be drawn into the previously mentioned "ProgressArea" definition; so if some of your imagery is defined as having a scale width of '1.0' that's relative to the named area and not necessarily the entire widget. Second, this imagery is clipped according to the current progress level.
A StateImagery definition for "DisabledProgress"; this is the same as for "EnabledProgress" but is drawn when the progress bar is disabled.

In addition you can initialise the "VerticalProgress" and/or "ReversedProgress" properties depending on the orientation and direction required.


This all probably seems like a lot of guff about nothing just to get a progress bar, and that's mostly correct Since you're after something basic, we can dispense with having to worry about most of this. All you need for the most basic progress bar is two of those things:
1) The named area "ProgressArea"; this will be set to the full size of the widget.
2) The StateImagery definition for "EnabledProgress".

In addition, you will require an ImagerySection that defines the actual image you'll be drawing to be referenced within the StateImagery. All the other parts will either be omitted, or for the StateImagery definitions, left empty.

The named area just needs to use the 'standard' full-widget area definition:

Code: Select all

    <NamedArea name="ProgressArea">
        <Area>
            <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
            <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
            <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
            <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
        </Area>
    </NamedArea>

The ImagerySection defines an image to be drawn, the area where it is to be drawn (remember this is relative to the above named area), and the formatting of the image. We want the imagery to use the full area, and stretch the image to fill that area - though you could also tile, or do other 'advanced' things, but that's not what we wanted here. So, the ImagerySection is named "progress_image" and looks like this:

Code: Select all

    <ImagerySection name="progress_image">
        <ImageryComponent>
            <Area>
                <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
                <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
            </Area>
            <Image imageset="MyImageset" image="MyProgressBarImage" />
            <VertFormat type="Stretched" />
            <HorzFormat type="Stretched" />               
        </ImageryComponent>

Finally, we need our StateImagery definition, here we will use a single layer and reference our ImagerySection as defined above:

Code: Select all

    <StateImagery name="EnabledProgress">
        <Layer>
            <Section section="progress_image" />
        </Layer>
    </StateImagery>

The other 'required' StateImagery definitions are not needed in our simple case, but we still have to define them, so they're just left as minimal references, like this:

Code: Select all

    <StateImagery name="Enabled" />
    <StateImagery name="Disabled" />
    <StateImagery name="DisabledProgress" />

Putting it all together, the final WidgetLook for "SimpleProgressBar" now looks like this:

Code: Select all

<WidgetLook name="SimpleProgressBar">
    <NamedArea name="ProgressArea">
        <Area>
            <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
            <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
            <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
            <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
        </Area>
    </NamedArea>
    <ImagerySection name="progress_image">
        <ImageryComponent>
            <Area>
                <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
                <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
            </Area>
            <Image imageset="MyImageset" image="MyProgressBarImage" />
            <VertFormat type="Stretched" />
            <HorzFormat type="Stretched" />               
        </ImageryComponent>
    </ImagerySection>
    <StateImagery name="EnabledProgress">
        <Layer>
            <Section section="progress_image" />
        </Layer>
    </StateImagery>
    <StateImagery name="Enabled" />
    <StateImagery name="Disabled" />
    <StateImagery name="DisabledProgress" />
</WidgetLook>

You'll also need a falagard mapping in the scheme file to tie all the various bits together, so that might look like this:

Code: Select all

<FalagardMapping WindowType="MyProgressBar" TargetType="CEGUI/ProgressBar" Renderer="Falagard/ProgressBar" LookNFeel="SimpleProgressBar" />

Here "MyProgressBar" is the type being defined, this is the type you'll use in either layouts or code. "CEGUI/ProgressBar" is the concrete 'logic' class in CEGUI that provides the basic function, "Falagard/ProgressBar" is the window renderer that takes the definitions in the looknfeel we defined and does something useful with them, and finally "SimpleProgressBar" is obviously the name of the widget looknfeel we defined above.

As stated, this is pretty much the simplest progress bar you can get, but is probably useful in many, many game based scenarios.

HTH

CE

[ripper9100]

Wow, thanks for taking the time to provide such an in depth response I finally got it working.

[ripper9100]

Sorry, looks like I spoke to soon when I said I got it working. I can create a layout file with the Myprogressbar widget but unfortunately when I try to load this file into my application and run it I get a "Runtime Error! This application has requested the Runtime to terminate it in an unusual way".

[CrazyEddie]

Hi,

Sorry to hear about the issues, although the fact it works in the editor seems to indicate a minor issue.

For the app, in the CEGUI.log are there any errors? If there are no errors, do you see a line that indicates that the falagard mapping for the new progress bar was created? Basically meaning: you did remember to create the mapping in the scheme file for your app, didn't you?

Aside from that, a callstack of some other diagnostic info would be useful.

CE.

[ripper9100]

Hi,
I created a scheme file that looks like this:

Code: Select all

<?xml version="1.0" ?>
<GUIScheme Name="MyProgressBar">
   <Imageset Name="Splash" Filename="Splashscr.imageset" />
   <Font Name="Commonwealth-10" Filename="Commonwealth-10.font" />
   <LookNFeel Filename="SimpleProgressBar.looknfeel" />
   <WindowRendererSet Filename="CEGUIFalagardWRBase" />
   <FalagardMapping WindowType="MyProgressBar/MyProgressBar" TargetType="CEGUI/ProgressBar" Renderer="Falagard/ProgressBar" LookNFeel="SimpleProgressBar" />   
</GUIScheme>


These are the errors I'm getting:
29/03/2009 03:06:19 (Error) Exception: WindowFactoryManager::getFactory - A WindowFactory object, an alias, or mapping for 'MyProgressBar/MyProgressBar' Window objects is not registered with the system.
29/03/2009 03:06:19 (Error) Exception: GUILayout_xmlHandler::startElement - layout loading has been aborted since no WindowFactory is available for 'MyProgressBar/MyProgressBar' objects.
29/03/2009 03:06:19 (Error) WindowManager::loadWindowLayout - loading of layout from file 'GUI.layout' failed.

[CrazyEddie]

Hi,

It seems like you're not loading the scheme file?

CE.

[ripper9100]

Hi,

Yeah that was the problem I wasn't loading the scheme file, it's working now. Thanks for all the help over the last couple of days.

[CrazyEddie]

NP. I try my best