Glossy Serpent Skin / Theme for CEGUI 0.7

[dezGusty]

Hi Playerdark,

The most often used widgets are implemented with the same name from Taharez, so replacing the prefix could do the job. I hope you find all the widgets that you need in this skin.

Is there a higher resolution version available of the graphics? maybe 1024*1024?

For the time being: no. And there won't be one for some months. But once I finalize the list of widgets, I am planning on making a higher resolution version.

[dezGusty]

New release
Version 0.3:
~~~~~~~~~~~~
New widgets/windows:
- Radio Buttons
- Selection group
- Listbox
- ItemListbox
- MultiColumnList
Fixes:
- glyph allignment in buttons.

The multi-column-list seems to not play nice with ceed. So, no ceed version yet.

[Playerdark]

Ok I got it working in my program now. I didnt know I had to load the skin first like so:

Code: Select all

       CEGUI::SchemeManager::getSingleton().create( "GlossySerpent" );
      CEGUI::System::getSingleton().setDefaultMouseCursor("GlossySerpentCursors", "MouseArrow");
      CEGUI::System::getSingleton().setDefaultTooltip( "GlossySerpent/Tooltip" );


While the Layout editor does that silently. I'm adding it here in case other people run into the same problem. This seems to be a great and promising skin. I'm adding two screenshots here from my own game which will come out by the end of the year. I will certainly use this skin

Also, is there a way I can donate to your project? Do you have a paypal address? I really think something useful as this should be rewarded, especially when it is given away for free

Client Login Screen. The left thing is a multiline editbox which doesnt exist in GlossySerpent yet. I either wait if it becomes available or will replace it with a listbox


The main character inventory window that allows the player to equip clothes and weapons

[dezGusty]

Hi playerdark,

I didnt know I had to load the skin first like so: ...

I know, a tutorial/sample application is definitely something to add to the skin. And I'm glad you like it.
Up to now, I didn't even take into account the possibility of receiving donations. I guess I should add a page for that in the future. This definitely goes on the TODO list .

Nice screenshots! The 3d models don't have a high detail, but the lights and shadow play really nice together. Do you have a public webpage for the project? I would like to see what you manage to do with the skin as time goes by .

The multi-line-editbox should come in the next version. And maybe I'll also add some buttons optimized for a smaller size. Because the embellished ones look just cut-out when given a smaller size.

[Playerdark]

Hi dezGusty,

yes I have a facebook page where I post screenshots and daily updates: http://www.facebook.com/pages/wwwmikabo ... 036?v=wall

I have replaced more of the Taharez controls with yours in the meantime, the buttons on the right and the chat control at the bottom and will post more screenshots on my page later today. The transition in the Layout editor was really painless and I am still working on the programmable UI elements who's layouts I did not do in the editor.

By the way, one thing that's also needed is a drag and drop cursor, I am using the target cursor from the Taharez look now but something that is more intuitive and shows that the player is holding something with the mouse would be better. I keep checking here in the future for updates


Thanks again for this skin

[Playerdark]

Hey dezGusty,

how do I use the glyph button, I mean how to I add a graphic to it?

[dezGusty]

Hi,

how do I use the glyph button, I mean how to I add a graphic to it?

You can set the "GlyphImage" property of the button.
If you want to just try the feature, use the value "set:GlossySerpent image:GlyphShield" for the GlyphImage property. This will use a simple image with a shield.

You will need to define your own imageset for custom images. Have a look at the files in CEGUI_files\imagesets or at the code below for an example.

Code: Select all

<Imageset Name="Mikaboshi_Set" Imagefile="Mikaboshi.png" NativeHorzRes="1366" NativeVertRes="768" AutoScaled="true" >
  <!-- Place the 15x15 sized glyph in the Mikaboshi.png file-->
   <Image Name="Glyph_Mikaboshi1" XPos="5" YPos="125" Width="15" Height="15" />
</Imageset>


After that you can use the property

Code: Select all

<Property Name="GlyphImage" Value="set:Mikaboshi_Set image:Glyph_Mikaboshi1" />

You can also make the label central alignment take the glyph into account by setting the property TextUsesGlyph to 1.

For an example layout file, take a look at the use the CEGUI_files\layouts\Workbench.layout file

Code: Select all

<Property Name="GlyphImage" Value="set:GlossySerpent image:GlyphShield" />
<Property Name="TextUsesGlyph" Value="1" />


[dezGusty]

New release
Version 0.4:
~~~~~~~~~~~~
New widgets/windows:
- MultiLineEditbox

New cursors:
- Resize
- N-S
- E-W
- NW-SE
- NE-SW

Fixes:
- image sizes for buttons and progress bar. The minimum size for a nice look is 27 pixels (previously 30).

[Playerdark]

Cool thanks a lot

I had a problem in my program, as you can see from the screenshot I have some sort of transparent list on the left side where the chat messages are being shown. New to CEGUI I did this with a slider and a bunch of static text lines which turned out to be WAY too slow. The original listbox wasnt usable becasue it had the slider on the right and had a solid background. I found a solution which I also integrated into GlossySerpent (of course you could put this into any skin) but I include the solution here. Maybe you want to add it to the standard GlossySerpent versin since it is quite useful in my eyes. It's just a small change.

In GlossySerpent.looknfeel add:

Code: Select all


    <!--
    ***************************************************
        GlossySerpent/ListboxTransparent
        (based on the Taharez Look)
    ***************************************************
    -->
    <WidgetLook name="GlossySerpent/ListboxTransparent">
        <!-- The size of the scrollbar + buttons -->
        <PropertyDefinition name="ScrollBarPreferredSize" initialValue="24" redrawOnWrite="true" layoutOnWrite="false" />

        <NamedArea name="ItemRenderingArea">
            <Area>
                <Dim type="LeftEdge" ><ImageDim imageset="GlossySerpent" image="ListboxLeft" dimension="Width" /></Dim>
                <Dim type="TopEdge" ><ImageDim imageset="GlossySerpent" image="ListboxTop" dimension="Height" /></Dim>
                <Dim type="RightEdge" >
                    <UnifiedDim scale="1" type="RightEdge">
                        <DimOperator op="Subtract">
                            <ImageDim imageset="GlossySerpent" image="ListboxRight" dimension="Width" />
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
                <Dim type="BottomEdge" >
                    <UnifiedDim scale="1" type="BottomEdge">
                        <DimOperator op="Subtract">
                            <ImageDim imageset="GlossySerpent" image="ListboxBottom" dimension="Height" />
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
            </Area>
        </NamedArea>
        <NamedArea name="ItemRenderingAreaHScroll">
            <Area>
                <Dim type="LeftEdge" ><ImageDim imageset="GlossySerpent" image="ListboxLeft" dimension="Width" /></Dim>
                <Dim type="TopEdge" ><ImageDim imageset="GlossySerpent" image="ListboxTop" dimension="Height" /></Dim>
                <Dim type="RightEdge" >
                    <UnifiedDim scale="1" type="RightEdge">
                        <DimOperator op="Subtract">
                            <ImageDim imageset="GlossySerpent" image="ListboxRight" dimension="Width" />
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
                <Dim type="BottomEdge" >
                    <UnifiedDim scale="1" type="BottomEdge">
                        <DimOperator op="Subtract">
                            <WidgetDim widget="__auto_hscrollbar__" dimension="Height" />
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
            </Area>
        </NamedArea>
        <NamedArea name="ItemRenderingAreaVScroll">
            <Area>
                <Dim type="LeftEdge" ><AbsoluteDim value="25" /></Dim>
                <Dim type="TopEdge" ><ImageDim imageset="GlossySerpent" image="ListboxTop" dimension="Height" /></Dim>
                <Dim type="RightEdge" ><UnifiedDim scale="1" type="Width" /></Dim>
                <Dim type="BottomEdge" >
                    <UnifiedDim scale="1" type="BottomEdge">
                        <DimOperator op="Subtract">
                            <ImageDim imageset="GlossySerpent" image="ListboxBottom" dimension="Height" />
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
            </Area>
        </NamedArea>
        <NamedArea name="ItemRenderingAreaHVScroll">
            <Area>
                <Dim type="LeftEdge" ><AbsoluteDim value="25" /></Dim>
                <Dim type="TopEdge" ><ImageDim imageset="GlossySerpent" image="ListboxTop" dimension="Height" /></Dim>
                <Dim type="RightEdge" ><UnifiedDim scale="1" type="Width" /></Dim>
                <Dim type="BottomEdge" >
                    <UnifiedDim scale="1" type="BottomEdge">
                        <DimOperator op="Subtract">
                            <WidgetDim widget="__auto_hscrollbar__" dimension="Height" />
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
            </Area>
        </NamedArea>
        <Child  type="GlossySerpent/HorizontalScrollbar" nameSuffix="__auto_hscrollbar__">
            <Area>
                <Dim type="LeftEdge" ><AbsoluteDim value="3" /></Dim>
                <Dim type="TopEdge" ><AbsoluteDim value="-3" /></Dim>
                <Dim type="Width" >
                    <UnifiedDim scale="1" type="Width">
                        <DimOperator op="Subtract">
                            <PropertyDim name="ScrollBarPreferredSize">
                                <DimOperator op="Add">
                                    <AbsoluteDim value="4" />
                                </DimOperator>
                            </PropertyDim>
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
                <Dim type="Height" >
                    <PropertyDim name="ScrollBarPreferredSize" />
                </Dim>
            </Area>
            <VertAlignment type="BottomAligned" />
        </Child>
        <Child  type="GlossySerpent/VerticalScrollbar" nameSuffix="__auto_vscrollbar__">
            <Area>
                <Dim type="LeftEdge" ><AbsoluteDim value="0"  /></Dim>
                <Dim type="TopEdge" ><AbsoluteDim value="3" /></Dim>
                <Dim type="Width" ><AbsoluteDim value="20" /></Dim>
                <Dim type="Height" >
                    <UnifiedDim scale="1" type="Height">
                        <DimOperator op="Subtract">
                            <PropertyDim name="ScrollBarPreferredSize">
                                <DimOperator op="Add">
                                    <AbsoluteDim value="4" />
                                </DimOperator>
                            </PropertyDim>
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
            </Area>
            <HorzAlignment type="LeftAligned" />
        </Child>
        <ImagerySection name="main">
            <FrameComponent>
                <Area>
                    <Dim type="LeftEdge" ><AbsoluteDim value="20" /></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>
            </FrameComponent>
        </ImagerySection>
        <StateImagery name="Enabled">
            <Layer>
                <Section section="main" />
            </Layer>
        </StateImagery>
        <StateImagery name="Disabled">
            <Layer>
                <Section section="main">
                    <Colours topLeft="FF7F7F7F" topRight="FF7F7F7F" bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" />
                </Section>
            </Layer>
        </StateImagery>
    </WidgetLook>


And in GlossySerpent.scheme add:

Code: Select all

   <FalagardMapping WindowType="GlossySerpent/ListboxTransparent"           TargetType="CEGUI/Listbox"           Renderer="Falagard/Listbox"           LookNFeel="GlossySerpent/ListboxTransparent" />


What I also did was to set the listbox in code so that it would always show the vertical slider, then I set the listbox to passthrough mouseclicks and then got a pointer to the vertical slider and reverted the passthrough so that it would receive its own mouselicks and voila, you have a system that can be used to show transparent texts on the left side of the screen;

Code: Select all

   mpc_listbox->setShowVertScrollbar( true );
   mpc_listbox->setMousePassThroughEnabled( true );
   mpc_listbox->getVertScrollbar()->setMousePassThroughEnabled( false );


Maybe somebody can use this

[dezGusty]

Thanks for sharing ,

I'll have a look at it.

[Playerdark]

Here is another idea:

I suppose your graphics are all made with a 3D program and rendered. How about you render them multiple times with some different colours. The red part could be blue, green, amber, and some sort of luminous gemstone colours. the frame part could also be in a brass version.

This could make for multiple skins or, even better, combine them all in one image and offer multiple versions of each control element, each using a different color/frame combinations

[dezGusty]

Actually, it's all made 2D, using GIMP (high resolution images, multilayer, scaled down). The coloring of the inner parts is done via a single color screen layer , so I can change the color easily.

I took into account the option to change the display color (for the time being only the main reddish color). And it's already in place for some widgets... ok, just one:GlossySerpent/ProgressBar, using the BarFillColour property.

Code: Select all

<Window Type="GlossySerpent/ProgressBar" Name="DemoProgressBar" >
    <Property Name="InheritsAlpha" Value="False" />
    <Property Name="StepSize" Value="0.01" />
    <Property Name="CurrentProgress" Value="0.34" />
    <Property Name="UnifiedAreaRect" Value="{{0.01,0},{0.25,0},{0.868219,0},{0.40,0}}" />
    <!--<Property Name="BarFillColour" Value="FF13C6BB" /> <!-- teal -->
    <!--<Property Name="BarFillColour" Value="FFFF8410" /> <!-- brown/orange -->
</Window>


But it has 2 drawbacks:
- It's just a bit more difficult to get the right nuance.
- It's slower. Not sure how much, but definitely slower. (I assume something around 10-20%, but I haven't done any tests/calculations for it).

EDIT: Btw: I didn't check your ListboxTransparent implementation yet, as I was really busy with ... Mass Effect 3, but I will have time for that this weekend

[Playerdark]

Heh it's ok, I can easily put it into any new version you make.

I was thinking it over and maybe you just make multiple skins with different glossy colours. We can simply load multiple schemes and then use any control from any of those skins, no need to have them all in one picture so this would be just another picture and then change GlossySerpent with some other names in the scripts and we would have multiple colors

[dezGusty]

Hi Playerdark,

I finally got around to testing the transparent list box that you submitted. I think it will find its uses, so I'll include it in the next version, along with the sample application.

[Playerdark]

Cool
I switched everything in my application to your skin and it works everywhere, thanks.

Don't forget a donate button