Really basic question

[ShadowTiger]

Sorry for asking such a simple question but I have spent large amounts of time trying to figure this out and I read the tutorial and I browsed through many forum posts.

All I want to do is to replace the horizontal and vertical scroll bars from the windows look n feel with some custom images I have. I can't figure out where exactly Cegui gets the image path... none of the xml files seem to reference anything specifically.

I tried changing the images directly in my code as well, but the scrollbar objects don't have an image property. So obviously I'm looking at this wrong, but despite all the code i've written using Cegui i can't figure this out by myself. Please help!

[CrazyEddie]

Ok, some of this you may already know, some not, but I'll just take it from the top...

The basis of all rendering in current versions of CEGUI is the Imageset. An imageset effectively wraps one large image that contains many sub-images, or in other words it's a texture atlas. As well as wrapping the texture, it also defines the areas on the texture and gives each sub-image a name. This is the Imagset / Image name combination that's used throughout CEGUI for specifying images to be drawn. An imageset can be specified through code or XML. XML is more common where the source imagery is static, so for the WindowsLook, if you open the WindowsLook.imagset file in a text editor, the top of that file is like this:

Code: Select all

<?xml version="1.0" ?>
<Imageset Name="WindowsLook" Imagefile="WindowsLook.tga" NativeHorzRes="800" NativeVertRes="600" AutoScaled="true">
   <Image Name="Background" XPos="9" YPos="9" Width="2" Height="2" />
   <Image Name="WindowFrameLeft" XPos="2" YPos="9" Width="4" Height="2" />
   <Image Name="WindowFrameRight" XPos="14" YPos="9" Width="4" Height="2" />
...

You can see here the Imagefile attribute that specifies WindowsLook.tga - this is the image file that contains the actual imagery used - so to change the imagery at this level, you can edit this .tga file in a pixel image editor. The rest of the imageset XML file contains Image definitions that define the sub-images within the larger atlas. Again, to add or modify the size and position of images within the larger file, you can change these definitions. You can use the CEImagesetEditor to edit these files in a visual way, if that's your preference.

It's the looknfeel / skin file that determines how the above images are used for each UI element. If we look in WindowsLook.looknfeel XML file, in a text editor, and find the definition for the vertical scrollbar, we can see precisely how this is done.

Code: Select all

    <WidgetLook name="WindowsLook/VerticalScrollbar">

After opening the WidgetLook definition, we set a couple of properties to specify that this is a vertical scrollbar and that we so not want to hear about double or triple click events.

Code: Select all

        <Property name="VerticalScrollbar" value="True" />
        <Property name="WantsMultiClickEvents" value="False" />

The next part defines the required ThumbTrackArea. This is the region of the overall control where the thumb component widget will be allowed to move within. There are actually a couple of things in here that might be counter-intuitive, these being the fact that we're using the width of the widget to specify some parts related to the vertical positioning and height. This is because the increase and decrease buttons are defined to be always square and based on the width of the scrollbar, so by using the width we can specify vertical offsets and heights that allow space at either end of the track area for the buttons:

Code: Select all

        <NamedArea name="ThumbTrackArea">
            <Area>
                <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                <Dim type="TopEdge" ><UnifiedDim scale="1" type="Width" /></Dim>
                <Dim type="RightEdge" ><UnifiedDim scale="1.0" type="RightEdge" /></Dim>
                <Dim type="BottomEdge" >
                    <UnifiedDim scale="1.0" type="BottomEdge">
                        <DimOperator op="Subtract">
                            <UnifiedDim scale="1" type="Width" />
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
            </Area>
        </NamedArea>

Next we specify the increase button (which goes at the bottom). We specify a position of 0 and use BottomAlignment so it appears in the right place. The width and height are both specified to be equal to the scale width of the control, as mention above, for this skin the buttons are always square and based on the width. We then set the icon image to use for the button.

Code: Select all

        <Child  type="WindowsLook/IconButton" nameSuffix="__auto_incbtn__">
            <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="Width" /></Dim>
            </Area>
            <VertAlignment type="BottomAligned" />
            <Property name="IconImage" value="set:WindowsLook image:LargeDownArrow" />
        </Child>

Next there's the decrease button (which goes at the top). This is essentially the same as the increase button above, except the position is left at the default TopAligned, and of course we specify a different image for the button icon:

Code: Select all

        <Child  type="WindowsLook/IconButton" nameSuffix="__auto_decbtn__">
            <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="Width" /></Dim>
            </Area>
            <Property name="IconImage" value="set:WindowsLook image:LargeUpArrow" />
        </Child>

Now we specify the thumb widget. The look / skin of the thumb is defined as part of it's own widget, here we just specify some details about sizing and such. The actual position will be managed as part of the scrollbar operation, though will always be within the track area we defined above.

Code: Select all

        <Child  type="WindowsLook/VerticalScrollbarThumb" nameSuffix="__auto_thumb__">
            <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="0.2" type="Height" /></Dim>
            </Area>
        </Child>

Next there's an ImagerySection named 'main' this is where the main imagery for the scrollbar is specified. In this case it's just a single image thats drawn to form the background of the scrollbar, everything else - that is the buttons and thumb - is specified elsewhere. The defined area is basically the entire size of the window minus the space for the top and bottom icon images (actually this looks like a small error!). This is generally where modifications would be made if you wanted to add a frame or something to the scrollbar. The default is to use the generic Background image from the WindowsLook imageset and have it stretched in both directions over the defined area.

Code: Select all

        <ImagerySection name="main">
            <ImageryComponent>
                <Area>
                    <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge" ><ImageDim imageset="WindowsLook" image="LargeUpArrow" dimension="Height" /></Dim>
                    <Dim type="RightEdge" ><UnifiedDim scale="1.0" type="RightEdge" /></Dim>
                    <Dim type="BottomEdge" >
                        <UnifiedDim scale="1.0" type="BottomEdge">
                            <DimOperator op="Subtract">
                                <ImageDim imageset="WindowsLook" image="LargeDownArrow" dimension="Height" />
                            </DimOperator>
                        </UnifiedDim>
                    </Dim>
                </Area>
                <Image imageset="WindowsLook" image="Background" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Stretched" />
            </ImageryComponent>
        </ImagerySection>

Finally we have the state specifications that specify which imagery sections to draw for which states used by the Scrollbar. The scrollbar itself just needs the Enabled and Disabled states, we use a single layer and reference the ImagerySection 'main' from above. We additionally specify some modulative colours to apply in each state to give the grey colour we desire.

Code: Select all

        <StateImagery name="Enabled">
            <Layer>
                <Section section="main">
                    <Colours topLeft="FFDFDFDF" topRight="FFDFDFDF" bottomLeft="FFDFDFDF" bottomRight="FFDFDFDF" />
                </Section>
            </Layer>
        </StateImagery>
        <StateImagery name="Disabled">
            <Layer>
                <Section section="main">
                    <Colours topLeft="FFBFBFBF" topRight="FFBFBFBF" bottomLeft="FFBFBFBF" bottomRight="FFBFBFBF" />
                </Section>
            </Layer>
        </StateImagery>

As you can probably tell, this does not tell where the images for the buttons - other than the icons - or the images for the thumb are specified. These are specified in their own WidgetLook parts in the same XML file. For the buttons that is:WindowsLook/IconButton and for the thumb: WindowsLook/VerticalScrollbarThumb.

Anyhow, that's the anatomy of the Scrollbar looknfeel and also covers where the imagery is defined. Hope this is in some way helpful

CE.

[ShadowTiger]

Thanks for the help. I had actually looked through all the tga's and it just occurred to me that the UI is constructed from pieces that are probably reused in some cases. I'm guessing that the gray stuff in the corner is whats used to make the "bar" part of the scrollbar. I think I can have the artist do a quick mod for now and then go back and modify the imagesets later.