Glossy Serpent Skin / Theme for CEGUI 0.7

Help and discussion regarding skinning, themes, and other artistic content.

Moderators: CEGUI MVP, CEGUI Team

User avatar
dezGusty
Not too shy to talk
Not too shy to talk
Posts: 37
Joined: Wed Sep 07, 2011 13:26
Location: Brasov, Romania

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby dezGusty » Sun Mar 11, 2012 07:06

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.

User avatar
dezGusty
Not too shy to talk
Not too shy to talk
Posts: 37
Joined: Wed Sep 07, 2011 13:26
Location: Brasov, Romania

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby dezGusty » Sun Mar 11, 2012 22:58

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
Quite a regular
Quite a regular
Posts: 47
Joined: Fri May 28, 2010 04:40

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby Playerdark » Mon Mar 12, 2012 05:34

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
Image

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

User avatar
dezGusty
Not too shy to talk
Not too shy to talk
Posts: 37
Joined: Wed Sep 07, 2011 13:26
Location: Brasov, Romania

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby dezGusty » Mon Mar 12, 2012 19:28

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 :D.

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
Quite a regular
Quite a regular
Posts: 47
Joined: Fri May 28, 2010 04:40

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby Playerdark » Tue Mar 13, 2012 00:06

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
Quite a regular
Quite a regular
Posts: 47
Joined: Fri May 28, 2010 04:40

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby Playerdark » Sat Mar 17, 2012 00:38

Hey dezGusty,

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

User avatar
dezGusty
Not too shy to talk
Not too shy to talk
Posts: 37
Joined: Wed Sep 07, 2011 13:26
Location: Brasov, Romania

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby dezGusty » Sat Mar 17, 2012 18:40

Hi,

Playerdark wrote: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" />

User avatar
dezGusty
Not too shy to talk
Not too shy to talk
Posts: 37
Joined: Wed Sep 07, 2011 13:26
Location: Brasov, Romania

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby dezGusty » Sat Mar 17, 2012 18:50

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
Quite a regular
Quite a regular
Posts: 47
Joined: Fri May 28, 2010 04:40

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby Playerdark » Sun Mar 18, 2012 02:26

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

User avatar
dezGusty
Not too shy to talk
Not too shy to talk
Posts: 37
Joined: Wed Sep 07, 2011 13:26
Location: Brasov, Romania

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby dezGusty » Sun Mar 18, 2012 17:32

Thanks for sharing :),

I'll have a look at it.

Playerdark
Quite a regular
Quite a regular
Posts: 47
Joined: Fri May 28, 2010 04:40

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby Playerdark » Wed Mar 28, 2012 01:46

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 :)

User avatar
dezGusty
Not too shy to talk
Not too shy to talk
Posts: 37
Joined: Wed Sep 07, 2011 13:26
Location: Brasov, Romania

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby dezGusty » Wed Mar 28, 2012 07:00

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
Quite a regular
Quite a regular
Posts: 47
Joined: Fri May 28, 2010 04:40

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby Playerdark » Thu Mar 29, 2012 00:59

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

User avatar
dezGusty
Not too shy to talk
Not too shy to talk
Posts: 37
Joined: Wed Sep 07, 2011 13:26
Location: Brasov, Romania

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby dezGusty » Tue Apr 03, 2012 15:56

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
Quite a regular
Quite a regular
Posts: 47
Joined: Fri May 28, 2010 04:40

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby Playerdark » Thu Apr 05, 2012 08:33

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

Don't forget a donate button :)


Return to “Skins and Themes”

Who is online

Users browsing this forum: No registered users and 2 guests