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
