Create Skins (Looknfeel-Files)

[Donner]

Hey,

I read the Tutorial "Creating Skins" in the Wiki and I think I got it so far, but I have one question:

Could someone explain the XML-codes in the article?

Code: Select all

<Child type="Vanilla/Titlebar" nameSuffix="__auto_titlebar__">
           <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" ><FontDim type="LineSpacing" padding="14" /></Dim>
           </Area>
           <Property name="AlwaysOnTop" value="False" />
       </Child>


I dont understand, what the <Dim> Tag is, what it does and what parameters it expects. Also what the AbsoluteDim is, is my question (Whats the difference between Dim and AbsoluteDim)?

Code: Select all

<NamedArea name="ClientWithTitleWithFrame">
           <Area>
               <Dim type="LeftEdge"><AbsoluteDim value="7" /></Dim>
               <Dim type="TopEdge"><WidgetDim widget="__auto_titlebar__" dimension="BottomEdge" /></Dim>
               <Dim type="RightEdge"><UnifiedDim scale="1" offset="-7" type="RightEdge" /></Dim>
               <Dim type="BottomEdge"><UnifiedDim scale="1" offset="-7" type="BottomEdge" /></Dim>
           </Area>
       </NamedArea>

And here: what is __auto_titlebar__ etc.?

Maybe someone could help me with explaining the code a little bit...


Thanks a lot
Donner

[scriptkid]

Hi,

the "dim" tags say how the widget gets positioned and sized. Where AbsoluteDim means simple pixel values, UnifiedDim means more advanced settings, such as a combination of relative ("scale") and pixels ("offset"):

http://www.cegui.org.uk/wiki/index.php/ ... zes_System

For example to have a widget's Width set to its full parent size minus 10 pixels, say:

Code: Select all

<Dim type="Width" ><UnifiedDim scale="1" offset="-10" type="Width" /></Dim>


To answer your second question, when you define a Child, what happens is that a truely new Window instance will automatically be created for you and added to the 'main' widget. Using this, you can make highlevel "prefab" widgets so to speak. The whole underscore usage in their names was -i guess- done to differentiate easily when looking at a logfile or so.

HTH.

[CrazyEddie]

Also see: http://www.cegui.org.uk/FalDocs for the official documantation

CE

[Donner]

Hey guys,

thanks a lot! I didn't know the falagard docs, that really helped!

Well, now I created, based on the "WindowsLook", which is in the SDK, my own looknfeel file and imageset, atm it contains only a standard button.

And there I have already my first problem.

The frame of my button is strange. In the corners, there is a transition between the color, my frame has, and grey, how you can see in the following picture:


But my ButtonNormalTop-Image has only one color and the ButtonNormalTopLeft-Image is red - why is there a transition in color? I don't want that, but I must have done something in the looknfeel-file, which is wrong...

Here the needed files:
The imageset-graphics-file (.TGA)
The imageset-file (.imageset)
The looknfeel-file (.looknfeel)


Thanks for the help!
Donner

[CrazyEddie]

Hi,

Firstly, thanks for posting all the information and the files - it helps immensely when trying to answer questions.

Ok, the issue is because of the filtering performed when stretching the edge pieces - what happens is that the hardware will 'borrow' a pixel at either end that is outside of the area defined in the xml (note this is a hardware thing, it's not something CEGUI does of its own volition). Basically the solution is to set the image definitions for anything that will get stretched such that there is an extra pixel of the appropriate colour outside of the image as defined in the imageset which will then get used for the filtering. That's just a long way of saying move the image definition over by one pixel and make it 2 pixels less in size

For example, where you have:

Code: Select all

<Image Name="ButtonNormalTop" XPos="9" YPos="0" Width="5" Height="2" />

Change it to:

Code: Select all

<Image Name="ButtonNormalTop" XPos="10" YPos="0" Width="3" Height="2" />

and all should be well.

Just to be explicit, this only affects stretched images, so the corner pieces will be generally be fine when defined to be exactly the size of the source sub-image (there are, as always, places where this may not be so, though it's not an issue here).

HTH

CE

[Donner]

Thank you, your solution solved the problem.

Now I have another question: The corners of my button are rounded off. The Problem is, that the inner area of the button, which is defined in the looknfeel file - it has a certain color, is "on top" of the frame, so you can actually see the corners of the inner area - or in other words, a part of the frame (the inner side of the corners) is covered by the color.

Here I sketched the problem:

On the left side you can see, how the button looks like, on the right side, how it should look like.


What would you suggest, to solve the problem? Since the color of the inner area is not a simple color but a transition in color, between black and grey (from top to bottom, i didn't show this in the sketch above), and so I cant make the border just as thick as the corners... Is it somehow possible, to draw the Frame of a button on top of the rest?

Thank you,
D.

[CrazyEddie]

Hi,

Yes, it's possible to prioritise parts of imagery. The parts with separate priorities need to be in their own named ImageySection parts, then when you list the parts to be drawn in the StateImagery parts - within Layers - you are able to use multiple layers with different priorities. For example, if you have one ImagerySection named "frame" another named "background" and one named "label", you might arrange one of the StateImagery parts like this:

Code: Select all

<StateImagery name="Normal">
    <Layer priority="0">
        <Section section="background" />
    </Layer>
    <Layer priority="1">
        <Section section="label">
            <ColourProperty name="NormalTextColour" />
        </Section>
    </Layer>
    <Layer priority="2">
        <Section section="frame" />
    </Layer>
</StateImagery>

Here I have split everything into their own layers. I have put the background part onto layer 0 - this is the default priority value and the priority attribute is only included there for completeness. Then I have the text label on layer 1 and finally the frame parts on layer 2. This also means you have the text label sandwiched between the background and the frame imagery - which can also sometimes look better then text overwriting the frame part where the text is close to the edges

Obviously this means you are likely to have to split out parts of a single ImagerySection into multipe ImagreySections. Looking at the looknfeel from before, all you need to do is move the ImageryComponents used for the background parts into their own named ImagerySection and follow what was described above (if the background parts are all the same you only need one, obviously).

HTH

CE.

[Donner]

Yeah, thanks a lot. It works.