[Skins for Dummies] How to make a skin ?

For help with general CEGUI usage:
- Questions about the usage of CEGUI and its features, if not explained in the documentation.
- Problems with the CMAKE configuration or problems occuring during the build process/compilation.
- Errors or unexpected behaviour.

Moderators: CEGUI MVP, CEGUI Team

User avatar
Ceacy
Just popping in
Just popping in
Posts: 16
Joined: Sun May 22, 2005 20:28
Location: France, Paris.
Contact:

[Skins for Dummies] How to make a skin ?

Postby Ceacy » Mon Jul 24, 2006 20:36

Hi,
I've searched the wiki, but didn't found anything very clear : i need to make a skin (or to explain someone how to make a skin, he's more gifted than me in those things), and i dunno how.
What is the first step ? Create a .psd file with all the gui elements ? But which ones ? Is there a list of elements which must be defined in the imageset ?
And then, what to do ? Create the .imageset, create the .looknfeel file ? I'm rather lost :/

If someone could help me ...
Thanks,
Ceacy.

User avatar
spannerman
Home away from home
Home away from home
Posts: 330
Joined: Wed Jan 12, 2005 12:06

Postby spannerman » Mon Jul 24, 2006 21:01

I'd imagine the wiki really is the best referance for this sort of thing, are you sure you searched the docs and tutorials in there?

Anyway, to start off, start nice and easy. Dont make a complete skin replacement, rather create a new widget or two. Once youve done this, you will figure out how to do the lot.

Start with your own push button. Look at all the files that come with the WindowsLook skin in order to compare.

Make the images for your button:
Image

Make the imageset file that defines the boundaries of these images:
Zoom.imageset =

Code: Select all

<?xml version="1.0" ?>
<Imageset Name="ZoomImagery" Imagefile="ZoomImages.tga" NativeHorzRes="800" NativeVertRes="600" AutoScaled="true">
   <Image Name="ZoomInNormal" XPos="110" YPos="1" Width="17" Height="17" />
   <Image Name="ZoomInHover" XPos="93" YPos="1" Width="17" Height="17" />
   <Image Name="ZoomInPush" XPos="76" YPos="1" Width="17" Height="17" />
</Imageset>


Make the looknfeel file that defines the button. This here is pretty much a copy of the existing windowslook button except that it uses my images:
Zoom.looknfeel =

Code: Select all

<?xml version="1.0" ?>
<Falagard>
   
    <!--
    ***************************************************
        Zoom/ZoomInButton
    ***************************************************
    -->
    <WidgetLook name="Zoom/ZoomInButton">
        <Property name="WantsMultiClickEvents" value="False" />
        <ImagerySection name="normal">
            <ImageryComponent>
                <Area>
                    <Dim type="LeftEdge">
                        <AbsoluteDim value="0" />
                    </Dim>
                    <Dim type="TopEdge">
                        <AbsoluteDim value="0" />
                    </Dim>
                    <Dim type="RightEdge">
                        <UnifiedDim scale="1" type="RightEdge" />
                    </Dim>
                    <Dim type="BottomEdge">
                        <UnifiedDim scale="1" type="BottomEdge" />
                    </Dim>
                </Area>
                <Image imageset="ZoomImagery" image="ZoomInNormal" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Stretched" />
            </ImageryComponent>
        </ImagerySection>
        <ImagerySection name="hover">
       <ImageryComponent>
      <Area>
          <Dim type="LeftEdge">
         <AbsoluteDim value="0" />
          </Dim>
          <Dim type="TopEdge">
         <AbsoluteDim value="0" />
          </Dim>
          <Dim type="RightEdge">
         <UnifiedDim scale="1" type="RightEdge" />
          </Dim>
          <Dim type="BottomEdge">
         <UnifiedDim scale="1" type="BottomEdge" />
          </Dim>
      </Area>
      <Image imageset="ZoomImagery" image="ZoomInHover" />
      <VertFormat type="Stretched" />
      <HorzFormat type="Stretched" />
       </ImageryComponent>
   </ImagerySection>
   <ImagerySection name="pushed">
       <ImageryComponent>
      <Area>
          <Dim type="LeftEdge">
         <AbsoluteDim value="0" />
          </Dim>
          <Dim type="TopEdge">
         <AbsoluteDim value="0" />
          </Dim>
          <Dim type="RightEdge">
         <UnifiedDim scale="1" type="RightEdge" />
          </Dim>
          <Dim type="BottomEdge">
         <UnifiedDim scale="1" type="BottomEdge" />
          </Dim>
      </Area>
      <Image imageset="ZoomImagery" image="ZoomInPush" />
      <VertFormat type="Stretched" />
      <HorzFormat type="Stretched" />
       </ImageryComponent>
        </ImagerySection>
        <StateImagery name="Normal">
            <Layer>
                <Section section="normal" />
            </Layer>
        </StateImagery>
        <StateImagery name="Hover">
            <Layer>
                <Section section="hover" />
            </Layer>
        </StateImagery>
        <StateImagery name="Pushed">
            <Layer>
                <Section section="pushed" />
            </Layer>
        </StateImagery>
        <StateImagery name="Disabled">
            <Layer>
                <Section section="normal">
                    <Colours topLeft="FFDFDFDF" topRight="FFDFDFDF" bottomLeft="FFDFDFDF" bottomRight="FFDFDFDF" />
                </Section>
            </Layer>
        </StateImagery>
    </WidgetLook>
   
</Falagard>


Finally make your scheme file to tie together your imageset, the looknfeel and to tell the system that this is a PushButton:
Zoom.scheme -

Code: Select all

<?xml version="1.0" ?>
<GUIScheme Name="ZoomScheme">
   <Imageset Name="ZoomImagery" Filename="Zoom.imageset" />
   <LookNFeel Filename="Zoom.looknfeel" />
   <WindowSet Filename="CEGUIFalagardWRBase" />
   
   <FalagardMapping WindowType="Zoom/ZoomInButton" TargetType="CEGUI/PushButton" Renderer="Falagard/Button" LookNFeel="Zoom/ZoomInButton" />

</GUIScheme>


Test it in your application by loading the scheme file:

Code: Select all

SchemeManager::getSingleton().loadScheme("Zoom.scheme");

// Then create one of them and add it to your gui:

PushButton* pBtnZoomIn = (PushButton*)winMgr.createWindow("Zoom/ZoomInButton", "MyZoomInBut");
pBtnZoomIn->setWindowPosition(UVector2(cegui_reldim(0.1f), cegui_reldim(0.5f)));
pBtnZoomIn->setWindowSize(UVector2(cegui_reldim(0.02f), cegui_reldim(0.02f)));
guiSheet->addChildWindow(pBtnZoomIn);

User avatar
jacmoe
Just can't stay away
Just can't stay away
Posts: 136
Joined: Sun Apr 03, 2005 14:18
Location: Holbaek, Denmark
Contact:

Postby jacmoe » Mon Jul 24, 2006 22:35

This looks really hairy! :)

Fortunately, martignasse has created an imageset editor:
http://www.cegui.org.uk/phpBB2/viewtopic.php?t=1346

If we encourage him enough, send in patches or help him out, I am sure this tool will evolve! :wink:

User avatar
spannerman
Home away from home
Home away from home
Posts: 330
Joined: Wed Jan 12, 2005 12:06

Postby spannerman » Mon Jul 24, 2006 22:37

jacmoe wrote:This looks really hairy! :)

Fortunately, martignasse has created an imageset editor:
http://www.cegui.org.uk/phpBB2/viewtopic.php?t=1346

If we encourage him enough, send in patches or help him out, I am sure this tool will evolve! :wink:


Of course, I forgot about the imageset editor tool :hammer:

User avatar
Ceacy
Just popping in
Just popping in
Posts: 16
Joined: Sun May 22, 2005 20:28
Location: France, Paris.
Contact:

Postby Ceacy » Wed Jul 26, 2006 05:16

Thanks, i will take a look at this. I hope i'll manage to make something :wink:

Sereal
Just popping in
Just popping in
Posts: 1
Joined: Wed Jan 16, 2013 17:27

Re: [Skins for Dummies] How to make a skin ?

Postby Sereal » Wed Jan 16, 2013 18:04

Hi Ceacy thanks for you post it realy help but unfortunatly is from 2006 an I am in 2013 a CEGUI has changed for that reasion I am going to update you post because. I thin is better than create a new one:

HOW TO MAKE A SKIN FOR DUMMIES 2013 EDITION (original version spannerman 2006)

1) Download the picture of the 3 magnifying glasses at the beginning with the name "ZoomImages.PNG" dont forget the format "PNG" , and put it in "XXXXX\CEGUI-SDK-0.7.5-vc10\datafiles\imagesets"

2) Make the imageset file that defines the boundaries of these images:
Zoom.imageset =

Code: Select all

<?xml version="1.0" ?>
<Imageset Name="ZoomImagery" Imagefile="ZoomImages.png" NativeHorzRes="800" NativeVertRes="600" AutoScaled="true">
   <Image Name="ZoomInNormal" XPos="110" YPos="1" Width="17" Height="17" />
   <Image Name="ZoomInHover" XPos="93" YPos="1" Width="17" Height="17" />
   <Image Name="ZoomInPush" XPos="76" YPos="1" Width="17" Height="17" />
</Imageset>


(this is the same code as the orioginal)

and save it in: "XXXXX\CEGUI-SDK-0.7.5-vc10\datafiles\imagesets"

3) Make the looknfeel file that defines the button. This here is pretty much a copy of the existing windowslook button except that it uses my images:
Zoom.looknfeel =

Code: Select all

<?xml version="1.0" ?>
<Falagard>
   
    <!--
    ***************************************************
        Zoom/ZoomInButton
    ***************************************************
    -->
    <WidgetLook name="Zoom/ZoomInButton">
        <Property name="WantsMultiClickEvents" value="False" />
        <ImagerySection name="normal">
            <ImageryComponent>
                <Area>
                    <Dim type="LeftEdge">
                        <AbsoluteDim value="0" />
                    </Dim>
                    <Dim type="TopEdge">
                        <AbsoluteDim value="0" />
                    </Dim>
                    <Dim type="RightEdge">
                        <UnifiedDim scale="1" type="RightEdge" />
                    </Dim>
                    <Dim type="BottomEdge">
                        <UnifiedDim scale="1" type="BottomEdge" />
                    </Dim>
                </Area>
                <Image imageset="ZoomImagery" image="ZoomInNormal" />
                <VertFormat type="Stretched" />
                <HorzFormat type="Stretched" />
            </ImageryComponent>
        </ImagerySection>
        <ImagerySection name="hover">
       <ImageryComponent>
      <Area>
          <Dim type="LeftEdge">
         <AbsoluteDim value="0" />
          </Dim>
          <Dim type="TopEdge">
         <AbsoluteDim value="0" />
          </Dim>
          <Dim type="RightEdge">
         <UnifiedDim scale="1" type="RightEdge" />
          </Dim>
          <Dim type="BottomEdge">
         <UnifiedDim scale="1" type="BottomEdge" />
          </Dim>
      </Area>
      <Image imageset="ZoomImagery" image="ZoomInHover" />
      <VertFormat type="Stretched" />
      <HorzFormat type="Stretched" />
       </ImageryComponent>
   </ImagerySection>
   <ImagerySection name="pushed">
       <ImageryComponent>
      <Area>
          <Dim type="LeftEdge">
         <AbsoluteDim value="0" />
          </Dim>
          <Dim type="TopEdge">
         <AbsoluteDim value="0" />
          </Dim>
          <Dim type="RightEdge">
         <UnifiedDim scale="1" type="RightEdge" />
          </Dim>
          <Dim type="BottomEdge">
         <UnifiedDim scale="1" type="BottomEdge" />
          </Dim>
      </Area>
      <Image imageset="ZoomImagery" image="ZoomInPush" />
      <VertFormat type="Stretched" />
      <HorzFormat type="Stretched" />
       </ImageryComponent>
        </ImagerySection>
        <StateImagery name="Normal">
            <Layer>
                <Section section="normal" />
            </Layer>
        </StateImagery>
        <StateImagery name="Hover">
            <Layer>
                <Section section="hover" />
            </Layer>
        </StateImagery>
        <StateImagery name="Pushed">
            <Layer>
                <Section section="pushed" />
            </Layer>
        </StateImagery>
        <StateImagery name="Disabled">
            <Layer>
                <Section section="normal">
                    <Colours topLeft="FFDFDFDF" topRight="FFDFDFDF" bottomLeft="FFDFDFDF" bottomRight="FFDFDFDF" />
                </Section>
            </Layer>
        </StateImagery>
    </WidgetLook>
   
</Falagard>

(again the same code)
and save it in: "XXXXX\CEGUI-SDK-0.7.5-vc10\datafiles\looknfeel"

4)
HERE IS A CHANGE
If you use the original code you are going to have many errors because the code has evolved
the new one is:

Code: Select all

<?xml version="1.0" ?>
<GUIScheme Name="ZoomScheme">
   <Imageset Name="ZoomImagery" Filename="Zoom.imageset" />
   <LookNFeel Filename="Zoom.looknfeel" />
   <WindowRendererSet Filename="CEGUIFalagardWRBase" />
   
   <FalagardMapping WindowType="Zoom/ZoomInButton" TargetType="CEGUI/PushButton" Renderer="Falagard/Button" LookNFeel="Zoom/ZoomInButton" />

</GUIScheme>


Change:
WindowSet for WindowRendererSet
and the reason is explained here:
http://crayzedsgui.sourceforge.net/phpBB2/viewtopic.php?f=10&t=5675 :lol:

with all that we are almost finished

Now is time to put all that in your program:
But first you must know that I did not use OGRE. I use OSG http://www.openscenegraph.org/projects/osg
and I use the book http://www.packtpub.com/openscenegrap-3-for-advanced-3d-programming-using-api-cookbook/book for the integration. (chapter 9 pg 365)

but I hope that is more or less the same for OGRE or others like it

well now time for code:

Code: Select all


CEGUI::SchemeManager::getSingleton().create("Zoom.scheme");

CEGUI::Window* root = CEGUI::WindowManager::getSingleton().createWindow( "DefaultWindow", "Root" );
CEGUI::System::getSingleton().setGUISheet( root );

CEGUI::PushButton* pBtnZoomIn = (CEGUI::PushButton*)CEGUI::WindowManager::getSingleton().createWindow("Zoom/ZoomInButton", "MyZoomInBut");

pBtnZoomIn->setPosition(CEGUI::UVector2(cegui_reldim(0.1f), cegui_reldim(0.5f)));
pBtnZoomIn->setSize(CEGUI::UVector2(cegui_reldim(0.02f), cegui_reldim(0.02f)));
root->addChildWindow(pBtnZoomIn);



And if you did your homework and have patience and read that book
your result will be:


Image

visit my blog http://designers3dbolivia.blogspot.com

I hope that this update can helppng0
Last edited by Sereal on Wed Jan 16, 2013 19:31, edited 1 time in total.

User avatar
jacmoe
Just can't stay away
Just can't stay away
Posts: 136
Joined: Sun Apr 03, 2005 14:18
Location: Holbaek, Denmark
Contact:

Re: [Skins for Dummies] How to make a skin ?

Postby jacmoe » Wed Jan 16, 2013 18:57

This is really the best use of topic necromancy I've seen, ever. :hammer:


Return to “Help”

Who is online

Users browsing this forum: MSN [Bot] and 10 guests