New skin: Sunrise (2 colour schemes) - v1.2 released

[radical-dev]

Hello folks,

i'm working on a GUI-based game and therefore i've created a new skin. This skin will be provided for free in thanks to this great GUI library.

List of widgets:
- FrameWindow (including Closebutton & Titlebar-Childs)
- PushButton
- Checkbox
- Radiobutton
- Editbox
- MultilineEditbox
- IconButton
- Scrollbars
- Combobox
- Listbox
- ItemListbox
- Progressbar
- Slider (Horizontal & Vertical)
- Spinner
- Menubar / PopupMenu / Menuitem
- MultiColumnList
- Tooltip
- ScrollablePane
- StaticImage & StaticText
- Groupbox
- Tabs
- SimpleFrame
- SimpleLabel

Sunrise Yellow:

Download: http://www.file-upload.net/download-3638418/SunriseYellow_v1_2.zip.html - (v1.2)

Sunrise DarkBlue:

Download: http://www.file-upload.net/download-3638420/SunriseDarkBlue_v1_2.zip.html - (v1.2)

AI files (Adobe Illustrator) are included in both packages too - for simple colour conversion.

License: Creative Commons Attribution 3.0 (http://creativecommons.org/licenses/by/3.0/)

Font licence:
Font Cantarell is provided from Dave Crossland (look at http://abattis.org/cantarell/) - Licence: http://scripts.sil.org/OFL_Web
You like this font and want to donate for this? Look at https://www.tug.org/donate.html

Waiting for feedback about this skins - whether positive or negative

Best regards
radical-dev

[Kulik]

Very nice, CEGUI is in dire need of skins so all efforts are very welcome

[CrazyEddie]

I agree!

CE

[radical-dev]

First post updated.

A question: i was spending much time at those damn scrollbars. My intention was to resize the scrollbar "thickness" depending on size of the MultiLineEditbox. Now its fixed to 20px which will be very small on 1920x1080px but on 640x480 its truly to big. I tried to use parent widget height or width as base to size the scrollbars, but depending on the parent widget size this seems weird .

Any suggestions for this?

** EDIT **
Yesterday evening i had a idea for this. What about changing looknfeel to have a native resolution like the imageset and font-files? Or a new Dim called ScreenDim (eg. <ScreenDim type="Width" />).

For imageset and font i use this code in my project to care of the different screen formats (4:3, 5:4, 16:9, 16:10):

Code: Select all

f64 ScreenResRatio = 1280.0 / m_GameConfig.ScreenSize.Width;
m_NativeResolution = CEGUI::Size(1280.0, (m_GameConfig.ScreenSize.Height * ScreenResRatio));

The native resolution in the XML is 1280x720px (f64 is an irrlicht double-typedef). Works truly well on all resolution - the radiobuttons stay round and the checkboxes stay quadratic.

** /EDIT **


Greetings
radical-dev

[radical-dev]

Hello folks!

I'm stuck at the moment. Just working on Listbox/Combobox. My problem is if i add a ListBoxTextItem via code my looknfeel-entry isn't recognized.

First the definition of the ListBoxItem:

Code: Select all

<!--
    ***************************************************
    Sunrise/ListboxItem
    ***************************************************
    -->
    <WidgetLook name="Sunrise/ListboxItem">
   
      <PropertyDefinition name="TextColour" initialValue="FF000000" redrawOnWrite="true" />
      <PropertyDefinition name="SelectedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" />
      <PropertyDefinition name="SelectionBrush" initialValue="set:Sunrise image:SimpleFrameActiveBrush" redrawOnWrite="true" />
      <PropertyDefinition name="SelectionColour" initialValue="FFF15A24" redrawOnWrite="true" />
      <Property name="Selectable" value="True" />
        <Property name="MouseInputPropagationEnabled" value="True" />
      
      <NamedArea name="ContentSize">
         <Area>
            <Dim type="LeftEdge" >
               <AbsoluteDim value="0" />
            </Dim>
            <Dim type="TopEdge" >
               <AbsoluteDim value="0" />
            </Dim>
            <Dim type="Width" >
               <FontDim type="HorzExtent" padding="6" />
            </Dim>
            <Dim type="Height" >
               <FontDim type="LineSpacing" />
            </Dim>
         </Area>
      </NamedArea>
      
      <ImagerySection name="label">
         <TextComponent>
            <Area>
               <Dim type="TopEdge">
                  <AbsoluteDim value="0" />
               </Dim>
               <Dim type="LeftEdge">
                  <AbsoluteDim value="3" />
               </Dim>
               <Dim type="RightEdge">
                  <UnifiedDim scale="1" offset="-3" type="RightEdge" />
               </Dim>
               <Dim type="BottomEdge">
                  <UnifiedDim scale="1" type="BottomEdge" />
               </Dim>
            </Area>
         </TextComponent>
      </ImagerySection>
      
      <ImagerySection name="selection">
         <ImageryComponent>
            <Area>
               <Dim type="TopEdge">
                  <AbsoluteDim value="0" />
               </Dim>
               <Dim type="LeftEdge">
                  <AbsoluteDim value="0" />
               </Dim>
               <Dim type="RightEdge">
                  <UnifiedDim scale="1" type="RightEdge" />
               </Dim>
               <Dim type="BottomEdge">
                  <UnifiedDim scale="1" type="BottomEdge" />
               </Dim>
            </Area>
            <ImageProperty name="SelectionBrush" />
            <ColourProperty name="SelectionColour" />
            <VertFormat type="Stretched" />
            <HorzFormat type="Stretched" />
         </ImageryComponent>
      </ImagerySection>
      
      <StateImagery name="Enabled">
         <Layer>
            <Section section="label">
               <ColourProperty name="TextColour" />
            </Section>
         </Layer>
      </StateImagery>
      
      <StateImagery name="Disabled">
         <Layer>
            <Section section="label">
               <ColourProperty name="TextColour" />
            </Section>
         </Layer>
      </StateImagery>
      
      <StateImagery name="SelectedEnabled">
         <Layer>
            <Section section="selection" />
            <Section section="label">
               <ColourProperty name="SelectedTextColour" />
            </Section>
         </Layer>
      </StateImagery>
      
      <StateImagery name="SelectedDisabled">
         <Layer>
            <Section section="selection" />
            <Section section="label">
               <ColourProperty name="SelectedTextColour" />
            </Section>
         </Layer>
      </StateImagery>

If i add them via code, text will be white and has no selection highlight. If i use XML-Layout everything looks fine.

Any help so far?

** EDIT **
Image:

** /EDIT **

[CrazyEddie]

HI,

For the earlier post / issues:
I know what you mean with the scrollbar thickness issue, the situation is currently not ideal. There are some options (non ideal!), one way would be to set the max/min size properties (UnifiedMaxSize and UnifiedMinSize IIRC), which uses the unified co-ordinates - the key thing about that is that the scale component is screen relative, so you should be able to work something out with those. I agree something more useful is needed there, the suggestion you made has been suggested before and is on my local TODO list for the skinning system, though I have no idea when that will eventually get done.

For the new post:
Items for the classes CEGUI::Listbox and CEGUI::Combobox (this is CEGUI::ListboxItem based content - including the subclass CEGUI::ListboxTextItem) are not skinned the the xml system - they're just very simple types that do very basic rendering. The CEGUI::ItemEntry based content used with CEGUI::ItemListbox is skinned using the xml system, though there is not yet a Combobox that uses that. Another option is to use a custom CEGUI::ListboxItem that can draw xml based content, I gave an example of that here: viewtopic.php?p=21975#p21975 though this is most certainly a hack

CE.

[radical-dev]

Hi CE!

to the scrollbar issue:

I've changed looknfeel so that the scrollbar widgets have their own property definitions (HScrollbarSize respectively VScrollbarSize), that will be linked on every widget which uses them as child (via PropertyLinkDefinition). But i can't test if it works because i don't get the code to access the widget properties for the scrollbars (thanks to my monday morning dumbness i think - or is there just no chance to access them?). My intention is if the scrollbar properties are changed all widgets using them as child should use this new values. Is that even possible?

To the other issue:
Hrm...so my resolution picker will be a ItemListbox i think

Greetings
radical-dev

P.S. First post updated with a download link - i would be glad to get some feedback how this look and feel to you

[kornerr]

Thanks for the skin!

[radical-dev]

It's not completed so far...but i'm on it ^^

Greetings
radical-dev

[radical-dev]

Hello folks,

skin is completed. Take a look in the first post. Please try it and if you find any bugs, report to me.

Best regards,

radical-dev

[radical-dev]

Hello folks!

A new version is released - v1.2:
- Added SimpleFrame-Widget - a widget that do nothing as just to be a container for other widgets
- Added SimpleLabel-Widget - a widget for simple labels w/o any Frames or scrollbars
- changed some colours

Best regards

radical-dev

[CrazyEddie]

Awesome stuff

<Applause />

CE.

[jacmoe]

Wow - I love this!

You are my CEGUI skin hero!

<edit>
Mouse cursor is called MouseCursorNormal:

Code: Select all

        CEGUI::System::getSingleton().setDefaultMouseCursor("Sunrise", "MouseCursorNormal");


</edit>

[jacmoe]

I converted(ish) the yellow looknfeel to CEGUI 0.8:
http://pastebin.com/uesFf8ES
CEED doesn't really like it too much, but I am not really an expert of the look'n'fool feature of CEGUI.
But it works.

<edit>
Grab the converted skins from one of the links in the following posts.
</edit>

[radical-dev]

Thx for the flowers jacmoe

And also thx for converting it, probably CEED don't like it because of the really much property definitions - they're intended to make the skin flexible and easy to recolour.

Best regards

radical-dev