[Skins for Dummies] How to make a skin ?

[Ceacy]

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.

[spannerman]

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:


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

[jacmoe]

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!

[spannerman]

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!

Of course, I forgot about the imageset editor tool

[Ceacy]

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

[Sereal]

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

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:




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

I hope that this update can helppng0

[jacmoe]

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