CEGUI Wiki - Crazy Eddie's GUI System (Open Source) - User contributions [en]

Build PyCEGUI from source for Linux

2011-07-06T20:02:37Z

Snizzo: added category howto

= Ubuntu 11.04 =
Version shipped in repositories is 6.0 so if we want 7.x we need to build it from source.

* Install dependency packages: <code>sudo apt-get install build-essential pkg-config python-dev libfreetype6-dev libpcre3-dev libboost-python-dev libglut3-dev libpng-dev libmng-dev libjpeg-dev libfreeimage-dev</code>
* Obtain a copy of CEGUI [http://prdownloads.sourceforge.net/crayzedsgui/CEGUI-0.7.5.tar.gz?download here]
* Extract to a folder
* Before we build, we have to symlink the site-packages directory correctly, so it installs to the correct place.
sudo rmdir /usr/local/lib/python2.6/site-packages
sudo ln -s /usr/local/lib/python2.6/dist-packages/ /usr/local/lib/python2.6/site-packages
* Build CEGUI with python support
./configure && make && sudo make install && sudo ldconfig
* ''Note: On some Ubuntu systems it seems that CEGUI's configure system does not correctly detect the Python headers. To solve this, do the following:''
export CXXFLAGS=-I/usr/include/python2.6
./configure && make && sudo make install && sudo ldconfig

= Still not working? =
You can try running your program with:
PYTHONPATH="/usr/local/lib/python2.7/site-packages:$PYTHONPATH" python <file.py>

'''Note for Panda3D users'''
You can run your program at the same way, using:
PYTHONPATH="/usr/local/lib/python2.7/site-packages:$PYTHONPATH" ppython <file.py>

[[Category:HowTo]]

Build PyCEGUI from source for Linux

2011-07-06T19:55:11Z

Snizzo: /* Still not working? */

Build PyCEGUI from source for Linux

2011-07-06T19:54:48Z

Snizzo: creating page for ubuntu users

= Ubuntu 11.04 =
Version shipped in repositories is 6.0 so if we want 7.x we need to build it from source.

* Install dependency packages: <code>sudo apt-get install build-essential pkg-config python-dev libfreetype6-dev libpcre3-dev libboost-python-dev libglut3-dev libpng-dev libmng-dev libjpeg-dev libfreeimage-dev</code>
* Obtain a copy of CEGUI [http://prdownloads.sourceforge.net/crayzedsgui/CEGUI-0.7.5.tar.gz?download here]
* Extract to a folder
* Before we build, we have to symlink the site-packages directory correctly, so it installs to the correct place.
sudo rmdir /usr/local/lib/python2.6/site-packages
sudo ln -s /usr/local/lib/python2.6/dist-packages/ /usr/local/lib/python2.6/site-packages
* Build CEGUI with python support
./configure && make && sudo make install && sudo ldconfig
* ''Note: On some Ubuntu systems it seems that CEGUI's configure system does not correctly detect the Python headers. To solve this, do the following:''
export CXXFLAGS=-I/usr/include/python2.6
./configure && make && sudo make install && sudo ldconfig

= Still not working? =
You can try running your programs with:
PYTHONPATH="/usr/local/lib/python2.7/site-packages:$PYTHONPATH" python <file.py>

'''Note for Panda3D users'''
You can run your programs at the same way, using:
PYTHONPATH="/usr/local/lib/python2.7/site-packages:$PYTHONPATH" ppython <file.py>

CEGUI In Practice - Creating widgets

2011-03-12T20:55:33Z

Snizzo:

{{VersionBadge|0.7}}
{{Series|CEGUI In Practice|2}}

== CEGUI In-Practice 2 ==

Welcome back. This is the second installment of CEGUI In-Practice tutorial series. In this we will build upon the previous tutorial, [[CEGUI In Practice - Introduction]]. We will show how to create Widgets and manage them.

=== The Widget ===

In the last example we showed how to bootstrap the system with Ogre, and gave a brief introduction to CEGUI's script files. Now we will work on understanding what a widget is and how to use them. Lets jump in and create a window which will display a box with an image in the middle of the screen:

<tabs>
<tab title="C++">
<source lang="cpp">
CEGUI::Window *myImageWindow = CEGUI::WindowManager::getSingleton().createWindow("TaharezLook/StaticImage","PrettyWindow" );
</source>
</tab>
<tab title="Python">
<source lang="python">
myImageWindow = PyCEGUI.WindowManager.getSingleton().createWindow("TaharezLook/StaticImage","PrettyWindow" )
</source>
</tab>
</tabs>

CEGUI uses numerous derived classes code-side to create windows. The base class CEGUI::Window is the generic window. the CEGUI::WindowManager calls a factory class when creating a window which returns the windows pointer. The first argument, "TaharezLook/StaticImage" tells the factory what kind of window to make. These windows are defined in .scheme, which are subsequently defined more depth in other .xml files. The second argument is the name which the window will have.

[Note: As a point to note, there is no strict requirement on naming of windows, except to avoid repeat names. Some users tend to prefer a naming convention using ParentName/ChildName. ie. "ConsoleWindow/SendButton" or "_MasterRoot/HealthBar"]

Once we have created the window, myImageWindow will be a pointer to a CEGUI::{{DoxygenClass|DefaultWindow|0.7}} which is derived from CEGUI::{{DoxygenClass|Window|0.7}}. If you look in the .scheme file you can see can see what a Widget is derived from via the TargetType= tag.

Next we need to set some properties for this window. There are two ways of doing this. The first is via the propertyset, or the second way by calling the function. The latter way can be more annoying at times, as you may have to cast the window to the correct type to get access to the member functions, but may be more intuitive depending on how you think.

=== The Unified Dimension System ===

We created our widget, now we need to position it and define its size. Lets do that via code shall we?

Before we jump in too far, we need to understand how CEGUI Handles positions. CEGUI Uses a Unified Dimension system.

<tabs>
<tab title="C++">
<source lang="cpp">
CEGUI::UDim(scale,offset);
</source>
</tab>
<tab title="Python">
<source lang="python">
PyCEGUI.UDim(scale,offset)
</source>
</tab>
</tabs>

The first number is the relative point on the screen between (0,1). So if we were looking at the X axis (left to right on the screen) a UDim(0.5,0) would be Halfway across the screen with zero pixels offset. Udim(0.0,50) would be starting at the left side of the screen +50 pixels. You can combine them too Udim(0.75,10) would be 3/4 of the way across the screen, with an additional 10 pixels.

A point on the screen (or a UVector2) is made up of two UDims:

<tabs>
<tab title="C++">
<source lang="cpp">
CEGUI::UVector2(UDim x,UDim y);
</source>
</tab>
<tab title="Python">
<source lang="python">
PyCEGUI.UVector2(UDim x, UDim y)
</source>
</tab>
</tabs>

As such, a CEGUI::Rect is as you would imagine, 4 UDims

<tabs>
<tab title="C++">
<source lang="cpp">
CEGUI::URect(CEGUI::Udim left,CEGUI::Udim top,CEGUI::Udim right,CEGUI::Udim bottom);
</source>
</tab>
<tab title="Python">
<source lang="python">
PyCEGUI.URect(PyCEGUI.Udim left, PyCEGUI.Udim top, PyCEGUI.Udim right, PyCEGUI.Udim bottom)
</source>
</tab>
</tabs>

So now that we know how positions are done, lets move our created window to the middle of the screen:
==== The Widget in Practice ====

<tabs>
<tab title="C++">
<source lang="cpp">
myImageWindow->setPosition(CEGUI::UVector2(CEGUI::UDim(0.5,0),CEGUI::UDim(0.5,0)));
</source>
</tab>
<tab title="Python">
<source lang="python">
myImageWindow.setPosition(PyCEGUI.UVector2(PyCEGUI.UDim(0.5,0), PyCEGUI.UDim(0.5,0)))
</source>
</tab>
</tabs>

That may look a little ugly but break it down. setPosition takes a UVector2, and each UVector2 is made up of an X and Y Udim, which is made up of a Scale and Absolute float.

So, we have moved our window to the middle of the screen.. but CEGUI doesn't know how big to make it? So set its size to 150 pixels by 100 pixels [Note: I dropped the namespace for this to increase readability].

<tabs>
<tab title="C++">
<source lang="cpp">
myImageWindow->setSize(UVector2(UDim(0,150),UDim(0,100)));
</source>
</tab>
<tab title="Python">
<source lang="python">
myImageWindow.setSize(UVector2(UDim(0,150),UDim(0,100)));
</source>
</tab>
</tabs>

In this case we specified the Udim using 0 for scales, and the actual pixel size in the absolute argument. The Absolute argument is additive to the scale, and in this case we didn't want to have the size be affected by the scale argument. If we were creating a splash screen that took up the entire window, we would likely want the size to be UVector2(UDim(1,0),UDim(1,0) with the position being at UVector2(Udim(0,0), UDim(0,0).

Now that we have created the window to the size we want. We need to tell it what image to display! That we will do by using the PropertySet as follows.

<tabs>
<tab title="C++">
<source lang="cpp">
myImageWindow->setProperty("Image","set:TaharezLook image:full_image");
</source>
</tab>
<tab title="Python">
<source lang="python">
myImageWindow.setProperty("Image","set:TaharezLook image:full_image")
</source>
</tab>
</tabs>

The first agument is what Property we want to set, and the second argument is what value to set. The second argument is a string broken into two pieces in this example. We need to know what ImageSet we are looking in, which is referenced following the 'set:' portion. And then the image via the 'image:' portion. In this case we want it to show the full_image.

A Listing of properties for TaharezLook is available here [http://cegui.org.uk/static/TaharezLookProperties.html]

Now that we have created the window. We need to attach it to the current root window.

<tabs>
<tab title="C++">
<source lang="cpp">
CEGUI::System::getGUISheet()->addChildWindow(myImageWindow);
</source>
</tab>
<tab title="Python">
<source lang="python">
PyCEGUI.System.getGUISheet().addChildWindow(myImageWindow)
</source>
</tab>
</tabs>

This will allow the Window to be displayed.

==== Conclusion ====

So with this quick tutorial we got a very short introduction to PropertySet usage (Important!) and a little bit about how the Unified Dimension System in CEGUI Works. While still not terribly useful, we're beginning to understand how to use some of CEGUI's faculties. Next up, we'll learn how to get some interactivity from this thing.

[[Category:Tutorials]]

CEGUI In Practice - Creating widgets

2011-03-12T20:53:19Z

Snizzo: added python code

{{VersionBadge|0.7}}
{{Series|CEGUI In Practice|2}}

== CEGUI In-Practice 2 ==

Welcome back. This is the second installment of CEGUI In-Practice tutorial series. In this we will build upon the previous tutorial, [[CEGUI In Practice - Introduction]]. We will show how to create Widgets and manage them.

=== The Widget ===

In the last example we showed how to bootstrap the system with Ogre, and gave a brief introduction to CEGUI's script files. Now we will work on understanding what a widget is and how to use them. Lets jump in and create a window which will display a box with an image in the middle of the screen:

<tabs>
<tab title="C++">
<source lang="cpp">
CEGUI::Window *myImageWindow = CEGUI::WindowManager::getSingleton().createWindow("TaharezLook/StaticImage","PrettyWindow" );
</source>
</tab>
<tab title="Python">
myImageWindow = PyCEGUI.WindowManager.getSingleton().createWindow("TaharezLook/StaticImage","PrettyWindow" )
</tab>
</tabs>

CEGUI uses numerous derived classes code-side to create windows. The base class CEGUI::Window is the generic window. the CEGUI::WindowManager calls a factory class when creating a window which returns the windows pointer. The first argument, "TaharezLook/StaticImage" tells the factory what kind of window to make. These windows are defined in .scheme, which are subsequently defined more depth in other .xml files. The second argument is the name which the window will have.

[Note: As a point to note, there is no strict requirement on naming of windows, except to avoid repeat names. Some users tend to prefer a naming convention using ParentName/ChildName. ie. "ConsoleWindow/SendButton" or "_MasterRoot/HealthBar"]

Once we have created the window, myImageWindow will be a pointer to a CEGUI::{{DoxygenClass|DefaultWindow|0.7}} which is derived from CEGUI::{{DoxygenClass|Window|0.7}}. If you look in the .scheme file you can see can see what a Widget is derived from via the TargetType= tag.

Next we need to set some properties for this window. There are two ways of doing this. The first is via the propertyset, or the second way by calling the function. The latter way can be more annoying at times, as you may have to cast the window to the correct type to get access to the member functions, but may be more intuitive depending on how you think.

=== The Unified Dimension System ===

We created our widget, now we need to position it and define its size. Lets do that via code shall we?

Before we jump in too far, we need to understand how CEGUI Handles positions. CEGUI Uses a Unified Dimension system.

<tabs>
<tab title="C++">
<source lang="cpp">
CEGUI::UDim(scale,offset);
</source>
</tab>
<tab title="Python">
PyCEGUI.UDim(scale,offset)
</tab>
</tabs>

The first number is the relative point on the screen between (0,1). So if we were looking at the X axis (left to right on the screen) a UDim(0.5,0) would be Halfway across the screen with zero pixels offset. Udim(0.0,50) would be starting at the left side of the screen +50 pixels. You can combine them too Udim(0.75,10) would be 3/4 of the way across the screen, with an additional 10 pixels.

A point on the screen (or a UVector2) is made up of two UDims:

<tabs>
<tab title="C++">
<source lang="cpp">
CEGUI::UVector2(UDim x,UDim y);
</source>
</tab>
<tab title="Python">
PyCEGUI.UVector2(UDim x, UDim y)
</tab>
</tabs>

As such, a CEGUI::Rect is as you would imagine, 4 UDims

<tabs>
<tab title="C++">
<source lang="cpp">
CEGUI::URect(CEGUI::Udim left,CEGUI::Udim top,CEGUI::Udim right,CEGUI::Udim bottom);
</source>
</tab>
<tab title="Python">
PyCEGUI.URect(PyCEGUI.Udim left, PyCEGUI.Udim top, PyCEGUI.Udim right, PyCEGUI.Udim bottom)
</tab>
</tabs>

So now that we know how positions are done, lets move our created window to the middle of the screen:
==== The Widget in Practice ====

<tabs>
<tab title="C++">
<source lang="cpp">
myImageWindow->setPosition(CEGUI::UVector2(CEGUI::UDim(0.5,0),CEGUI::UDim(0.5,0)));
</source>
</tab>
<tab title="Python">
myImageWindow.setPosition(PyCEGUI.UVector2(PyCEGUI.UDim(0.5,0), PyCEGUI.UDim(0.5,0)))
</tab>
</tabs>

That may look a little ugly but break it down. setPosition takes a UVector2, and each UVector2 is made up of an X and Y Udim, which is made up of a Scale and Absolute float.

So, we have moved our window to the middle of the screen.. but CEGUI doesn't know how big to make it? So set its size to 150 pixels by 100 pixels [Note: I dropped the namespace for this to increase readability].

<tabs>
<tab title="C++">
<source lang="cpp">
myImageWindow->setSize(UVector2(UDim(0,150),UDim(0,100)));
</source>
</tab>
<tab title="Python">
myImageWindow.setSize(UVector2(UDim(0,150),UDim(0,100)));
</tab>
</tabs>

In this case we specified the Udim using 0 for scales, and the actual pixel size in the absolute argument. The Absolute argument is additive to the scale, and in this case we didn't want to have the size be affected by the scale argument. If we were creating a splash screen that took up the entire window, we would likely want the size to be UVector2(UDim(1,0),UDim(1,0) with the position being at UVector2(Udim(0,0), UDim(0,0).

Now that we have created the window to the size we want. We need to tell it what image to display! That we will do by using the PropertySet as follows.

<tabs>
<tab title="C++">
<source lang="cpp">
myImageWindow->setProperty("Image","set:TaharezLook image:full_image");
</source>
</tab>
<tab title="Python">
myImageWindow.setProperty("Image","set:TaharezLook image:full_image")
</tab>
</tabs>

The first agument is what Property we want to set, and the second argument is what value to set. The second argument is a string broken into two pieces in this example. We need to know what ImageSet we are looking in, which is referenced following the 'set:' portion. And then the image via the 'image:' portion. In this case we want it to show the full_image.

A Listing of properties for TaharezLook is available here [http://cegui.org.uk/static/TaharezLookProperties.html]

Now that we have created the window. We need to attach it to the current root window.

<tabs>
<tab title="C++">
<source lang="cpp">
CEGUI::System::getGUISheet()->addChildWindow(myImageWindow);
</source>
</tab>
<tab title="Python">
PyCEGUI.System.getGUISheet().addChildWindow(myImageWindow)
</tab>
</tabs>

This will allow the Window to be displayed.

==== Conclusion ====

So with this quick tutorial we got a very short introduction to PropertySet usage (Important!) and a little bit about how the Unified Dimension System in CEGUI Works. While still not terribly useful, we're beginning to understand how to use some of CEGUI's faculties. Next up, we'll learn how to get some interactivity from this thing.

[[Category:Tutorials]]

CEGUI In Practice - Introduction

2011-03-12T20:18:03Z

Snizzo:

{{VersionBadge|0.7}}
{{Series|CEGUI In Practice|1}}

== CEGUI In-Practice ==

Welcome to the first in a series of tutorials based on how to use CEGUI. The majority of the tutorials will be done in code. I may attempt to sprinkle in uses of .layouts throughout the tutorial. But once you understand how to use many of the Widgets in code it becomes easy to use them via script.

[Please note, I am an Ogre3d user, so the initial setup will be how to bootstrap and start with ogre3d.]

=== Introducing CEGUI ===
First notes, CEGUI uses a number of Singleton classes. These, if not experienced with singletons, allow global access to a Class globally in the code, while ensuring only a 'single'ton instance is ever created. The following are the Singletons we will be using
in this example.

'''CEGUI::{{DoxygenClass|System|0.7}}''' - The big Kahuna. This contains many of the functions for setting and getting defaults. 
'''CEGUI::{{DoxygenClass|WindowManager|0.7}}''' - Manages the windows of CEGUI. If a new window is going to be created or Deleted WindowManager is gonna be your class. 

'''CEGUI::{{DoxygenClass|SchemeManager|0.7}}''' - Manages Schemes. 
'''CEGUI::{{DoxygenClass|FontManager|0.7}}''' - Manages the different fonts you will use in your application. 

==== Getting Started ====

Lets jump in and get some stuff setup. The first thing we need to do is get the system up and running. Since I am an Ogre user, I will show the code to get the system up and running with ogre. There are methods of getting it started for numerous other Rendering systems. Shown here [[The Beginner Guide to Getting CEGUI Rendering]]. 

The Ogre3d Method is shown here:

<source lang="cpp">CEGUI::OgreRenderer* renderer = &CEGUI::OgreRenderer::bootstrapSystem();</source>

[Note: This is a newer method using the bootstrapSystem, this was introduced in CEGUI 0.7.1. There are examples on this wiki using older versions of CEGUI. Please make note of which version you are using] 

The above code creates an instance of the Ogre3d Render interface between Ogre3d and CEGUI. You will not need to deal with this much after the above code has been run. This creates the link which Ogre will use to render CEGUI. Please note, you will want to call this if Ogre is auto-creating the render window ( pretty common ). If you are manually creating the Ogre3d window, you will need to use the ''CEGUI::OgreRenderer::bootstrapSystem(Ogre::RenderWindow *)'' overload.

And additional point to mention, is that the bootstrapSystem() will create an instance of CEGUI::System. This is important as if you already have created CEGUI::System, an exception will be thrown.

==== Oh there will be scripts ====

Now that we've called the very meager function above. We need to cover some very basic information about CEGUI before we proceed.

CEGUI is a VERY heavily scripted library. Much of what defines the artistic content of CEGUI is defined in various .xml files. The beginning script we will mention is the '''Scheme''' (*.scheme). Every widget you will use in your GUI will be defined in the .scheme file. It will also contain information for about subscripts which will be used, described below. Later tutorials will describe this file in greater detail. Below is an example if you run across one:

<source lang="xml"><?xml version="1.0" ?>
<GUIScheme Name="TaharezLook">
<Imageset Filename="TaharezLook.imageset" />

<LookNFeel Filename="TaharezLook.looknfeel" />
<WindowRendererSet Filename="CEGUIFalagardWRBase" />
<FalagardMapping WindowType="TaharezLook/Button" TargetType="CEGUI/PushButton" Renderer="Falagard/Button" LookNFeel="TaharezLook/Button" />
<FalagardMapping WindowType="TaharezLook/Checkbox" TargetType="CEGUI/Checkbox" Renderer="Falagard/ToggleButton" LookNFeel="TaharezLook/Checkbox" />
</GUIScheme></source> 

The next script we will mention is the '''Layouts''' (*.layout). This is also an xml file, and will defines the layout (obviously!) of the window we want to display on the screen. For example, if we wanted a to create a Chat window, we would probably have a ChatWindow.layout file somewhere. This would describe how the window looks (How big, where on the screen its displayed, etc), where the typing box would be located within this window, and where the button to 'send' the chat message would be. Below is a quick example of what a .layout file looks like:

<source lang="xml"><?xml version="1.0" encoding="UTF-8"?>
<GUILayout >
<Window Type="TaharezLook/FrameWindow" Name="ConsoleRoot" >
<Property Name="Text" Value="Chat Window" />
<Property Name="TitlebarFont" Value="DejaVuSans-10" />
<Property Name="TitlebarEnabled" Value="True" />
<Property Name="UnifiedAreaRect" Value="{{0.114991,0},{0.358182,0},{0.519469,0},{0.775455,0}}" />
<Window Type="TaharezLook/Editbox" Name="ConsoleRoot/EditBox" >
<Property Name="MaxTextLength" Value="1073741823" />
<Property Name="UnifiedAreaRect" Value="{{0.0201637,0},{0.787097,0},{0.694549,0},{0.957693,0}}" />
<Property Name="TextParsingEnabled" Value="False" />
</Window>
</GUILayout></source>
Another script which is useful to mention is a '''Font''' (*.font). This describes fonts which will be used in cegui. Below is an example:

<source lang="xml"><?xml version="1.0" ?>

</source>

Lastly, '''LookNFeel''' (*.looknfeel). This is a fairly evil looking file, and to save everyone from nightmarish horrors, I will not post an example (and to save space). This is the file which determines how every widget (CEGUI speak for window/object/item) looks and acts. For example, what it looks like when you mouse over a button, or how to build the border and background of a Window. Each scheme will generally have its own LookNFeel to allow more customization of the basic construction of CEGUI Widgets.

Another important script is the '''Imageset''' (*.imageset). This is the file which determines the visuals of each widget. In CEGUI the visual part of a widget which the user see's is a small X/Y coordinate on a larger texture file. For example, a basic Button will have the graphics defined in a .imageset to be a certain position on a texture image (*.png, *.bmp, *.jpg, etc) with a certain height and width. It may be located at Pixel 100x320 and be 50x50 in size. This will be defined in the imageset. Below is an example.

<source lang="xml">
<?xml version="1.0" ?>
<Imageset Name="TaharezLook" Imagefile="TaharezLook.tga" NativeHorzRes="800" NativeVertRes="600" AutoScaled="true">
<Image Name="MouseArrow" XPos="138" YPos="127" Width="31" Height="25" XOffset="0" YOffset="0" />
</Imageset>
</source>

Lastly, '''LookNFeel''' (*.looknfeel). This is a fairly evil looking file, and to save everyone from nightmarish horrors, I will not post an example (and to save space). This is the file which determines how every widget (CEGUI speak for window/object/item) looks and acts. For example, what it looks like when you mouse over a button, or how to build the border and background of a Window. Each scheme will generally have its own LookNFeel to allow more customization of the basic construction of CEGUI Widgets.

==== Back to Getting Started ====

Now that we have a minimal idea about what scripts CEGUI uses (and don't worry, they make more sense and are less intimidating as you proceede. You will likely use .layout the most in the beginning) lets start doing something useful!

Where we left off, CEGUI was just started. But in and of itself, it doesn't know what you want to do. First thing we should do is tell it what Scheme we want to use. As mentioned above, a .Scheme contains a listing of Widget and Other scripts to include. a Scheem can include an Imageset, looknFeel, and font to use.

<tabs>
<tab title="C++">
<source lang="cpp">
// Load the scheme
CEGUI::SchemeManager::getSingleton().create( "TaharezLook.scheme" );
</source>
</tab>
<tab title="Python">
<source lang="python">
# Load the scheme
PyCEGUI.SchemeManager.getSingleton().create( "TaharezLook.scheme" )
</source>
</tab>
</tabs>

If you wanted to use an imageset or Font which is not designated in the .Scheme file its easy to do. Simply use the associated manager to load them. Since i'm trying my best to keep this as an introductory tutorial, I'll keep to the mission and explain these managers in a later tutorial.

Next up, lets define a few defaults:

<tabs>
<tab title="C++">
<source lang="cpp">
// Set the defaults
CEGUI::System::getSingleton().setDefaultFont( "DejaVuSans-10" );
CEGUI::System::getSingleton().setDefaultMouseCursor( "TaharezLook", "MouseArrow" );
</source>
</tab>
<tab title="Python">
<source lang="python">
# Set the defaults
PyCEGUI.System.getSingleton().setDefaultFont( "DejaVuSans-10" )
PyCEGUI.System.getSingleton().setDefaultMouseCursor( "TaharezLook", "MouseArrow" )
</source>
</tab>
</tabs>

These calls will summon the CEGUI::System from global scope and set the DefaultFont, and the default Mouse Cursor. If you reference TaharezLook.scheme (located in the cegui/datafiles/schemes folder). You will see that it loaded a font named DejaVuSans-10.font with the tag in the .scheme. The MouseArrow is found inside the imageset called "TharezLook" under the tag of "MouseArrow". Pretty self explanetory I'd hope.

Alright, now CEGUI knows about some basic defaults we want to use. Lets create a window which will be the Root window we will put everything on from here on out.

CEGUI uses a Parent/Child system for organizing the windows. So the first useful thing to do is create a parent which all other windows will be the child

<tabs>
<tab title="C++">
<source lang="cpp">
CEGUI::Window* myRoot = CEGUI::WindowManager::getSingleton().createWindow( "DefaultWindow", "_MasterRoot" );
</source>
</tab>
<tab title="Python">
<source lang="python">
myRoot = PyCEGUI.WindowManager.getSingleton().createWindow( "DefaultWindow", "_MasterRoot" )
</source>
</tab>
</tabs>

The above function calls upon the WindowManager singleton, and creates a window of type "DefaultWindow" named "_MasterRoot". The default window is just that. a default window, which is blank (or transparent). You can give the root window any name you like, however, i like using _MasterRoot as its unlikely any other window I ever use will have the name.

Now that we have created the window, we need to set it as the root window.

<tabs>
<tab title="C++">
<source lang="cpp">
CEGUI::System::getSingleton().setGUISheet( myRoot );
</source>
</tab>
<tab title="Python">
<source lang="python">
PyCEGUI.System.getSingleton().setGUISheet( myRoot )
</source>
</tab>
</tabs>

This calls upon the system, and assigns myRoot as the default window. Recall myRoot was created above with the name "_MasterRoot".

==== Conclusion ====

While not a super exciting tutorial. At this point CEGUI is now setup, and we could begin adding windows and doing such GUI shenanigans as making windows, buttons, clicking, and fun. Later tutorials will demonstrate how to have CEGUI Recognize clicking, dragging of windows, typing, and more! Thanks for reading!

[[Category:Tutorials]]

CEGUI In Practice - Introduction

2011-03-12T20:13:26Z

Snizzo:

{{VersionBadge|0.7}}
{{Series|CEGUI In Practice|1}}

== CEGUI In-Practice ==

Welcome to the first in a series of tutorials based on how to use CEGUI. The majority of the tutorials will be done in code. I may attempt to sprinkle in uses of .layouts throughout the tutorial. But once you understand how to use many of the Widgets in code it becomes easy to use them via script.

[Please note, I am an Ogre3d user, so the initial setup will be how to bootstrap and start with ogre3d.]

=== Introducing CEGUI ===
First notes, CEGUI uses a number of Singleton classes. These, if not experienced with singletons, allow global access to a Class globally in the code, while ensuring only a 'single'ton instance is ever created. The following are the Singletons we will be using
in this example.

'''CEGUI::{{DoxygenClass|System|0.7}}''' - The big Kahuna. This contains many of the functions for setting and getting defaults. 
'''CEGUI::{{DoxygenClass|WindowManager|0.7}}''' - Manages the windows of CEGUI. If a new window is going to be created or Deleted WindowManager is gonna be your class. 

'''CEGUI::{{DoxygenClass|SchemeManager|0.7}}''' - Manages Schemes. 
'''CEGUI::{{DoxygenClass|FontManager|0.7}}''' - Manages the different fonts you will use in your application. 

==== Getting Started ====

Lets jump in and get some stuff setup. The first thing we need to do is get the system up and running. Since I am an Ogre user, I will show the code to get the system up and running with ogre. There are methods of getting it started for numerous other Rendering systems. Shown here [[The Beginner Guide to Getting CEGUI Rendering]]. 

The Ogre3d Method is shown here:

<source lang="cpp">CEGUI::OgreRenderer* renderer = &CEGUI::OgreRenderer::bootstrapSystem();</source>

[Note: This is a newer method using the bootstrapSystem, this was introduced in CEGUI 0.7.1. There are examples on this wiki using older versions of CEGUI. Please make note of which version you are using] 

The above code creates an instance of the Ogre3d Render interface between Ogre3d and CEGUI. You will not need to deal with this much after the above code has been run. This creates the link which Ogre will use to render CEGUI. Please note, you will want to call this if Ogre is auto-creating the render window ( pretty common ). If you are manually creating the Ogre3d window, you will need to use the ''CEGUI::OgreRenderer::bootstrapSystem(Ogre::RenderWindow *)'' overload.

And additional point to mention, is that the bootstrapSystem() will create an instance of CEGUI::System. This is important as if you already have created CEGUI::System, an exception will be thrown.

==== Oh there will be scripts ====

Now that we've called the very meager function above. We need to cover some very basic information about CEGUI before we proceed.

CEGUI is a VERY heavily scripted library. Much of what defines the artistic content of CEGUI is defined in various .xml files. The beginning script we will mention is the '''Scheme''' (*.scheme). Every widget you will use in your GUI will be defined in the .scheme file. It will also contain information for about subscripts which will be used, described below. Later tutorials will describe this file in greater detail. Below is an example if you run across one:

<source lang="xml"><?xml version="1.0" ?>
<GUIScheme Name="TaharezLook">
<Imageset Filename="TaharezLook.imageset" />

<LookNFeel Filename="TaharezLook.looknfeel" />
<WindowRendererSet Filename="CEGUIFalagardWRBase" />
<FalagardMapping WindowType="TaharezLook/Button" TargetType="CEGUI/PushButton" Renderer="Falagard/Button" LookNFeel="TaharezLook/Button" />
<FalagardMapping WindowType="TaharezLook/Checkbox" TargetType="CEGUI/Checkbox" Renderer="Falagard/ToggleButton" LookNFeel="TaharezLook/Checkbox" />
</GUIScheme></source> 

The next script we will mention is the '''Layouts''' (*.layout). This is also an xml file, and will defines the layout (obviously!) of the window we want to display on the screen. For example, if we wanted a to create a Chat window, we would probably have a ChatWindow.layout file somewhere. This would describe how the window looks (How big, where on the screen its displayed, etc), where the typing box would be located within this window, and where the button to 'send' the chat message would be. Below is a quick example of what a .layout file looks like:

<source lang="xml"><?xml version="1.0" encoding="UTF-8"?>
<GUILayout >
<Window Type="TaharezLook/FrameWindow" Name="ConsoleRoot" >
<Property Name="Text" Value="Chat Window" />
<Property Name="TitlebarFont" Value="DejaVuSans-10" />
<Property Name="TitlebarEnabled" Value="True" />
<Property Name="UnifiedAreaRect" Value="{{0.114991,0},{0.358182,0},{0.519469,0},{0.775455,0}}" />
<Window Type="TaharezLook/Editbox" Name="ConsoleRoot/EditBox" >
<Property Name="MaxTextLength" Value="1073741823" />
<Property Name="UnifiedAreaRect" Value="{{0.0201637,0},{0.787097,0},{0.694549,0},{0.957693,0}}" />
<Property Name="TextParsingEnabled" Value="False" />
</Window>
</GUILayout></source>
Another script which is useful to mention is a '''Font''' (*.font). This describes fonts which will be used in cegui. Below is an example:

<source lang="xml"><?xml version="1.0" ?>

</source>

Lastly, '''LookNFeel''' (*.looknfeel). This is a fairly evil looking file, and to save everyone from nightmarish horrors, I will not post an example (and to save space). This is the file which determines how every widget (CEGUI speak for window/object/item) looks and acts. For example, what it looks like when you mouse over a button, or how to build the border and background of a Window. Each scheme will generally have its own LookNFeel to allow more customization of the basic construction of CEGUI Widgets.

Another important script is the '''Imageset''' (*.imageset). This is the file which determines the visuals of each widget. In CEGUI the visual part of a widget which the user see's is a small X/Y coordinate on a larger texture file. For example, a basic Button will have the graphics defined in a .imageset to be a certain position on a texture image (*.png, *.bmp, *.jpg, etc) with a certain height and width. It may be located at Pixel 100x320 and be 50x50 in size. This will be defined in the imageset. Below is an example.

<source lang="xml">
<?xml version="1.0" ?>
<Imageset Name="TaharezLook" Imagefile="TaharezLook.tga" NativeHorzRes="800" NativeVertRes="600" AutoScaled="true">
<Image Name="MouseArrow" XPos="138" YPos="127" Width="31" Height="25" XOffset="0" YOffset="0" />
</Imageset>
</source>

Lastly, '''LookNFeel''' (*.looknfeel). This is a fairly evil looking file, and to save everyone from nightmarish horrors, I will not post an example (and to save space). This is the file which determines how every widget (CEGUI speak for window/object/item) looks and acts. For example, what it looks like when you mouse over a button, or how to build the border and background of a Window. Each scheme will generally have its own LookNFeel to allow more customization of the basic construction of CEGUI Widgets.

==== Back to Getting Started ====

Now that we have a minimal idea about what scripts CEGUI uses (and don't worry, they make more sense and are less intimidating as you proceede. You will likely use .layout the most in the beginning) lets start doing something useful!

Where we left off, CEGUI was just started. But in and of itself, it doesn't know what you want to do. First thing we should do is tell it what Scheme we want to use. As mentioned above, a .Scheme contains a listing of Widget and Other scripts to include. a Scheem can include an Imageset, looknFeel, and font to use.

<tabs>
<tab title="C++">
<source lang="cpp">
// Load the scheme
CEGUI::SchemeManager::getSingleton().create( "TaharezLook.scheme" );
</source>
</tab>
<tab title="Python">
<source lang="python">
# Load the scheme
PyCEGUI.SchemeManager.getSingleton().create( "TaharezLook.scheme" )
</source>
</tab>
</tabs>

If you wanted to use an imageset or Font which is not designated in the .Scheme file its easy to do. Simply use the associated manager to load them. Since i'm trying my best to keep this as an introductory tutorial, I'll keep to the mission and explain these managers in a later tutorial.

Next up, lets define a few defaults:

<source lang="cpp">
// Set the defaults
CEGUI::System::getSingleton().setDefaultFont( "DejaVuSans-10" );
CEGUI::System::getSingleton().setDefaultMouseCursor( "TaharezLook", "MouseArrow" );
</source>

These calls will summon the CEGUI::System from global scope and set the DefaultFont, and the default Mouse Cursor. If you reference TaharezLook.scheme (located in the cegui/datafiles/schemes folder). You will see that it loaded a font named DejaVuSans-10.font with the tag in the .scheme. The MouseArrow is found inside the imageset called "TharezLook" under the tag of "MouseArrow". Pretty self explanetory I'd hope.

Alright, now CEGUI knows about some basic defaults we want to use. Lets create a window which will be the Root window we will put everything on from here on out.

CEGUI uses a Parent/Child system for organizing the windows. So the first useful thing to do is create a parent which all other windows will be the child

<source lang="cpp">
CEGUI::Window* myRoot = CEGUI::WindowManager::getSingleton().createWindow( "DefaultWindow", "_MasterRoot" );
</source>

The above function calls upon the WindowManager singleton, and creates a window of type "DefaultWindow" named "_MasterRoot". The default window is just that. a default window, which is blank (or transparent). You can give the root window any name you like, however, i like using _MasterRoot as its unlikely any other window I ever use will have the name.

Now that we have created the window, we need to set it as the root window.

<source lang="cpp">
CEGUI::System::getSingleton().setGUISheet( myRoot );
</source>

This calls upon the system, and assigns myRoot as the default window. Recall myRoot was created above with the name "_MasterRoot".

==== Conclusion ====

While not a super exciting tutorial. At this point CEGUI is now setup, and we could begin adding windows and doing such GUI shenanigans as making windows, buttons, clicking, and fun. Later tutorials will demonstrate how to have CEGUI Recognize clicking, dragging of windows, typing, and more! Thanks for reading!

[[Category:Tutorials]]

CEGUI In Practice - Introduction

2011-03-12T20:11:41Z

Snizzo:

{{VersionBadge|0.7}}
{{Series|CEGUI In Practice|1}}

== CEGUI In-Practice ==

Welcome to the first in a series of tutorials based on how to use CEGUI. The majority of the tutorials will be done in code. I may attempt to sprinkle in uses of .layouts throughout the tutorial. But once you understand how to use many of the Widgets in code it becomes easy to use them via script.

[Please note, I am an Ogre3d user, so the initial setup will be how to bootstrap and start with ogre3d.]

=== Introducing CEGUI ===
First notes, CEGUI uses a number of Singleton classes. These, if not experienced with singletons, allow global access to a Class globally in the code, while ensuring only a 'single'ton instance is ever created. The following are the Singletons we will be using
in this example.

'''CEGUI::{{DoxygenClass|System|0.7}}''' - The big Kahuna. This contains many of the functions for setting and getting defaults. 
'''CEGUI::{{DoxygenClass|WindowManager|0.7}}''' - Manages the windows of CEGUI. If a new window is going to be created or Deleted WindowManager is gonna be your class. 

'''CEGUI::{{DoxygenClass|SchemeManager|0.7}}''' - Manages Schemes. 
'''CEGUI::{{DoxygenClass|FontManager|0.7}}''' - Manages the different fonts you will use in your application. 

==== Getting Started ====

Lets jump in and get some stuff setup. The first thing we need to do is get the system up and running. Since I am an Ogre user, I will show the code to get the system up and running with ogre. There are methods of getting it started for numerous other Rendering systems. Shown here [[The Beginner Guide to Getting CEGUI Rendering]]. 

The Ogre3d Method is shown here:

<source lang="cpp">CEGUI::OgreRenderer* renderer = &CEGUI::OgreRenderer::bootstrapSystem();</source>

[Note: This is a newer method using the bootstrapSystem, this was introduced in CEGUI 0.7.1. There are examples on this wiki using older versions of CEGUI. Please make note of which version you are using] 

The above code creates an instance of the Ogre3d Render interface between Ogre3d and CEGUI. You will not need to deal with this much after the above code has been run. This creates the link which Ogre will use to render CEGUI. Please note, you will want to call this if Ogre is auto-creating the render window ( pretty common ). If you are manually creating the Ogre3d window, you will need to use the ''CEGUI::OgreRenderer::bootstrapSystem(Ogre::RenderWindow *)'' overload.

And additional point to mention, is that the bootstrapSystem() will create an instance of CEGUI::System. This is important as if you already have created CEGUI::System, an exception will be thrown.

==== Oh there will be scripts ====

Now that we've called the very meager function above. We need to cover some very basic information about CEGUI before we proceed.

CEGUI is a VERY heavily scripted library. Much of what defines the artistic content of CEGUI is defined in various .xml files. The beginning script we will mention is the '''Scheme''' (*.scheme). Every widget you will use in your GUI will be defined in the .scheme file. It will also contain information for about subscripts which will be used, described below. Later tutorials will describe this file in greater detail. Below is an example if you run across one:

<source lang="xml"><?xml version="1.0" ?>
<GUIScheme Name="TaharezLook">
<Imageset Filename="TaharezLook.imageset" />

<LookNFeel Filename="TaharezLook.looknfeel" />
<WindowRendererSet Filename="CEGUIFalagardWRBase" />
<FalagardMapping WindowType="TaharezLook/Button" TargetType="CEGUI/PushButton" Renderer="Falagard/Button" LookNFeel="TaharezLook/Button" />
<FalagardMapping WindowType="TaharezLook/Checkbox" TargetType="CEGUI/Checkbox" Renderer="Falagard/ToggleButton" LookNFeel="TaharezLook/Checkbox" />
</GUIScheme></source> 

The next script we will mention is the '''Layouts''' (*.layout). This is also an xml file, and will defines the layout (obviously!) of the window we want to display on the screen. For example, if we wanted a to create a Chat window, we would probably have a ChatWindow.layout file somewhere. This would describe how the window looks (How big, where on the screen its displayed, etc), where the typing box would be located within this window, and where the button to 'send' the chat message would be. Below is a quick example of what a .layout file looks like:

<source lang="xml"><?xml version="1.0" encoding="UTF-8"?>
<GUILayout >
<Window Type="TaharezLook/FrameWindow" Name="ConsoleRoot" >
<Property Name="Text" Value="Chat Window" />
<Property Name="TitlebarFont" Value="DejaVuSans-10" />
<Property Name="TitlebarEnabled" Value="True" />
<Property Name="UnifiedAreaRect" Value="{{0.114991,0},{0.358182,0},{0.519469,0},{0.775455,0}}" />
<Window Type="TaharezLook/Editbox" Name="ConsoleRoot/EditBox" >
<Property Name="MaxTextLength" Value="1073741823" />
<Property Name="UnifiedAreaRect" Value="{{0.0201637,0},{0.787097,0},{0.694549,0},{0.957693,0}}" />
<Property Name="TextParsingEnabled" Value="False" />
</Window>
</GUILayout></source>
Another script which is useful to mention is a '''Font''' (*.font). This describes fonts which will be used in cegui. Below is an example:

<source lang="xml"><?xml version="1.0" ?>

</source>

Lastly, '''LookNFeel''' (*.looknfeel). This is a fairly evil looking file, and to save everyone from nightmarish horrors, I will not post an example (and to save space). This is the file which determines how every widget (CEGUI speak for window/object/item) looks and acts. For example, what it looks like when you mouse over a button, or how to build the border and background of a Window. Each scheme will generally have its own LookNFeel to allow more customization of the basic construction of CEGUI Widgets.

Another important script is the '''Imageset''' (*.imageset). This is the file which determines the visuals of each widget. In CEGUI the visual part of a widget which the user see's is a small X/Y coordinate on a larger texture file. For example, a basic Button will have the graphics defined in a .imageset to be a certain position on a texture image (*.png, *.bmp, *.jpg, etc) with a certain height and width. It may be located at Pixel 100x320 and be 50x50 in size. This will be defined in the imageset. Below is an example.

<source lang="xml">
<?xml version="1.0" ?>
<Imageset Name="TaharezLook" Imagefile="TaharezLook.tga" NativeHorzRes="800" NativeVertRes="600" AutoScaled="true">
<Image Name="MouseArrow" XPos="138" YPos="127" Width="31" Height="25" XOffset="0" YOffset="0" />
</Imageset>
</source>

Lastly, '''LookNFeel''' (*.looknfeel). This is a fairly evil looking file, and to save everyone from nightmarish horrors, I will not post an example (and to save space). This is the file which determines how every widget (CEGUI speak for window/object/item) looks and acts. For example, what it looks like when you mouse over a button, or how to build the border and background of a Window. Each scheme will generally have its own LookNFeel to allow more customization of the basic construction of CEGUI Widgets.

==== Back to Getting Started ====

Now that we have a minimal idea about what scripts CEGUI uses (and don't worry, they make more sense and are less intimidating as you proceede. You will likely use .layout the most in the beginning) lets start doing something useful!

Where we left off, CEGUI was just started. But in and of itself, it doesn't know what you want to do. First thing we should do is tell it what Scheme we want to use. As mentioned above, a .Scheme contains a listing of Widget and Other scripts to include. a Scheem can include an Imageset, looknFeel, and font to use.

<tabs>
<tab title="C++">
<source lang="cpp">
// Load the scheme
CEGUI::SchemeManager::getSingleton().create( "TaharezLook.scheme" );
</source>
</tab>
<tab title="Python">
<source lang="python">
// Load the scheme
PyCEGUI.SchemeManager.getSingleton().create( "TaharezLook.scheme" )
</source>
</tab>
</tabs>

If you wanted to use an imageset or Font which is not designated in the .Scheme file its easy to do. Simply use the associated manager to load them. Since i'm trying my best to keep this as an introductory tutorial, I'll keep to the mission and explain these managers in a later tutorial.

Next up, lets define a few defaults:

<source lang="cpp">
// Set the defaults
CEGUI::System::getSingleton().setDefaultFont( "DejaVuSans-10" );
CEGUI::System::getSingleton().setDefaultMouseCursor( "TaharezLook", "MouseArrow" );
</source>

These calls will summon the CEGUI::System from global scope and set the DefaultFont, and the default Mouse Cursor. If you reference TaharezLook.scheme (located in the cegui/datafiles/schemes folder). You will see that it loaded a font named DejaVuSans-10.font with the tag in the .scheme. The MouseArrow is found inside the imageset called "TharezLook" under the tag of "MouseArrow". Pretty self explanetory I'd hope.

Alright, now CEGUI knows about some basic defaults we want to use. Lets create a window which will be the Root window we will put everything on from here on out.

CEGUI uses a Parent/Child system for organizing the windows. So the first useful thing to do is create a parent which all other windows will be the child

<source lang="cpp">
CEGUI::Window* myRoot = CEGUI::WindowManager::getSingleton().createWindow( "DefaultWindow", "_MasterRoot" );
</source>

The above function calls upon the WindowManager singleton, and creates a window of type "DefaultWindow" named "_MasterRoot". The default window is just that. a default window, which is blank (or transparent). You can give the root window any name you like, however, i like using _MasterRoot as its unlikely any other window I ever use will have the name.

Now that we have created the window, we need to set it as the root window.

<source lang="cpp">
CEGUI::System::getSingleton().setGUISheet( myRoot );
</source>

This calls upon the system, and assigns myRoot as the default window. Recall myRoot was created above with the name "_MasterRoot".

==== Conclusion ====

While not a super exciting tutorial. At this point CEGUI is now setup, and we could begin adding windows and doing such GUI shenanigans as making windows, buttons, clicking, and fun. Later tutorials will demonstrate how to have CEGUI Recognize clicking, dragging of windows, typing, and more! Thanks for reading!

[[Category:Tutorials]]

CEGUI In Practice - Introduction

2011-03-12T20:07:09Z

Snizzo:

{{VersionBadge|0.7}}
{{Series|CEGUI In Practice|1}}

== CEGUI In-Practice ==

Welcome to the first in a series of tutorials based on how to use CEGUI. The majority of the tutorials will be done in code. I may attempt to sprinkle in uses of .layouts throughout the tutorial. But once you understand how to use many of the Widgets in code it becomes easy to use them via script.

[Please note, I am an Ogre3d user, so the initial setup will be how to bootstrap and start with ogre3d.]

=== Introducing CEGUI ===
First notes, CEGUI uses a number of Singleton classes. These, if not experienced with singletons, allow global access to a Class globally in the code, while ensuring only a 'single'ton instance is ever created. The following are the Singletons we will be using
in this example.

'''CEGUI::{{DoxygenClass|System|0.7}}''' - The big Kahuna. This contains many of the functions for setting and getting defaults. 
'''CEGUI::{{DoxygenClass|WindowManager|0.7}}''' - Manages the windows of CEGUI. If a new window is going to be created or Deleted WindowManager is gonna be your class. 

'''CEGUI::{{DoxygenClass|SchemeManager|0.7}}''' - Manages Schemes. 
'''CEGUI::{{DoxygenClass|FontManager|0.7}}''' - Manages the different fonts you will use in your application. 

==== Getting Started ====

Lets jump in and get some stuff setup. The first thing we need to do is get the system up and running. Since I am an Ogre user, I will show the code to get the system up and running with ogre. There are methods of getting it started for numerous other Rendering systems. Shown here [[The Beginner Guide to Getting CEGUI Rendering]]. 

The Ogre3d Method is shown here:

<source lang="cpp">CEGUI::OgreRenderer* renderer = &CEGUI::OgreRenderer::bootstrapSystem();</source>

[Note: This is a newer method using the bootstrapSystem, this was introduced in CEGUI 0.7.1. There are examples on this wiki using older versions of CEGUI. Please make note of which version you are using] 

The above code creates an instance of the Ogre3d Render interface between Ogre3d and CEGUI. You will not need to deal with this much after the above code has been run. This creates the link which Ogre will use to render CEGUI. Please note, you will want to call this if Ogre is auto-creating the render window ( pretty common ). If you are manually creating the Ogre3d window, you will need to use the ''CEGUI::OgreRenderer::bootstrapSystem(Ogre::RenderWindow *)'' overload.

And additional point to mention, is that the bootstrapSystem() will create an instance of CEGUI::System. This is important as if you already have created CEGUI::System, an exception will be thrown.

==== Oh there will be scripts ====

Now that we've called the very meager function above. We need to cover some very basic information about CEGUI before we proceed.

CEGUI is a VERY heavily scripted library. Much of what defines the artistic content of CEGUI is defined in various .xml files. The beginning script we will mention is the '''Scheme''' (*.scheme). Every widget you will use in your GUI will be defined in the .scheme file. It will also contain information for about subscripts which will be used, described below. Later tutorials will describe this file in greater detail. Below is an example if you run across one:

<source lang="xml"><?xml version="1.0" ?>
<GUIScheme Name="TaharezLook">
<Imageset Filename="TaharezLook.imageset" />

<LookNFeel Filename="TaharezLook.looknfeel" />
<WindowRendererSet Filename="CEGUIFalagardWRBase" />
<FalagardMapping WindowType="TaharezLook/Button" TargetType="CEGUI/PushButton" Renderer="Falagard/Button" LookNFeel="TaharezLook/Button" />
<FalagardMapping WindowType="TaharezLook/Checkbox" TargetType="CEGUI/Checkbox" Renderer="Falagard/ToggleButton" LookNFeel="TaharezLook/Checkbox" />
</GUIScheme></source> 

The next script we will mention is the '''Layouts''' (*.layout). This is also an xml file, and will defines the layout (obviously!) of the window we want to display on the screen. For example, if we wanted a to create a Chat window, we would probably have a ChatWindow.layout file somewhere. This would describe how the window looks (How big, where on the screen its displayed, etc), where the typing box would be located within this window, and where the button to 'send' the chat message would be. Below is a quick example of what a .layout file looks like:

<source lang="xml"><?xml version="1.0" encoding="UTF-8"?>
<GUILayout >
<Window Type="TaharezLook/FrameWindow" Name="ConsoleRoot" >
<Property Name="Text" Value="Chat Window" />
<Property Name="TitlebarFont" Value="DejaVuSans-10" />
<Property Name="TitlebarEnabled" Value="True" />
<Property Name="UnifiedAreaRect" Value="{{0.114991,0},{0.358182,0},{0.519469,0},{0.775455,0}}" />
<Window Type="TaharezLook/Editbox" Name="ConsoleRoot/EditBox" >
<Property Name="MaxTextLength" Value="1073741823" />
<Property Name="UnifiedAreaRect" Value="{{0.0201637,0},{0.787097,0},{0.694549,0},{0.957693,0}}" />
<Property Name="TextParsingEnabled" Value="False" />
</Window>
</GUILayout></source>
Another script which is useful to mention is a '''Font''' (*.font). This describes fonts which will be used in cegui. Below is an example:

<source lang="xml"><?xml version="1.0" ?>

</source>

Lastly, '''LookNFeel''' (*.looknfeel). This is a fairly evil looking file, and to save everyone from nightmarish horrors, I will not post an example (and to save space). This is the file which determines how every widget (CEGUI speak for window/object/item) looks and acts. For example, what it looks like when you mouse over a button, or how to build the border and background of a Window. Each scheme will generally have its own LookNFeel to allow more customization of the basic construction of CEGUI Widgets.

Another important script is the '''Imageset''' (*.imageset). This is the file which determines the visuals of each widget. In CEGUI the visual part of a widget which the user see's is a small X/Y coordinate on a larger texture file. For example, a basic Button will have the graphics defined in a .imageset to be a certain position on a texture image (*.png, *.bmp, *.jpg, etc) with a certain height and width. It may be located at Pixel 100x320 and be 50x50 in size. This will be defined in the imageset. Below is an example.

<source lang="xml">
<?xml version="1.0" ?>
<Imageset Name="TaharezLook" Imagefile="TaharezLook.tga" NativeHorzRes="800" NativeVertRes="600" AutoScaled="true">
<Image Name="MouseArrow" XPos="138" YPos="127" Width="31" Height="25" XOffset="0" YOffset="0" />
</Imageset>
</source>

Lastly, '''LookNFeel''' (*.looknfeel). This is a fairly evil looking file, and to save everyone from nightmarish horrors, I will not post an example (and to save space). This is the file which determines how every widget (CEGUI speak for window/object/item) looks and acts. For example, what it looks like when you mouse over a button, or how to build the border and background of a Window. Each scheme will generally have its own LookNFeel to allow more customization of the basic construction of CEGUI Widgets.

==== Back to Getting Started ====

Now that we have a minimal idea about what scripts CEGUI uses (and don't worry, they make more sense and are less intimidating as you proceede. You will likely use .layout the most in the beginning) lets start doing something useful!

Where we left off, CEGUI was just started. But in and of itself, it doesn't know what you want to do. First thing we should do is tell it what Scheme we want to use. As mentioned above, a .Scheme contains a listing of Widget and Other scripts to include. a Scheem can include an Imageset, looknFeel, and font to use.

<source lang="cpp">
// Load the scheme
CEGUI::SchemeManager::getSingleton().create( "TaharezLook.scheme" );
</source>

If you wanted to use an imageset or Font which is not designated in the .Scheme file its easy to do. Simply use the associated manager to load them. Since i'm trying my best to keep this as an introductory tutorial, I'll keep to the mission and explain these managers in a later tutorial.

Next up, lets define a few defaults:

<source lang="cpp">
// Set the defaults
CEGUI::System::getSingleton().setDefaultFont( "DejaVuSans-10" );
CEGUI::System::getSingleton().setDefaultMouseCursor( "TaharezLook", "MouseArrow" );
</source>

These calls will summon the CEGUI::System from global scope and set the DefaultFont, and the default Mouse Cursor. If you reference TaharezLook.scheme (located in the cegui/datafiles/schemes folder). You will see that it loaded a font named DejaVuSans-10.font with the tag in the .scheme. The MouseArrow is found inside the imageset called "TharezLook" under the tag of "MouseArrow". Pretty self explanetory I'd hope.

Alright, now CEGUI knows about some basic defaults we want to use. Lets create a window which will be the Root window we will put everything on from here on out.

CEGUI uses a Parent/Child system for organizing the windows. So the first useful thing to do is create a parent which all other windows will be the child

<source lang="cpp">
CEGUI::Window* myRoot = CEGUI::WindowManager::getSingleton().createWindow( "DefaultWindow", "_MasterRoot" );
</source>

The above function calls upon the WindowManager singleton, and creates a window of type "DefaultWindow" named "_MasterRoot". The default window is just that. a default window, which is blank (or transparent). You can give the root window any name you like, however, i like using _MasterRoot as its unlikely any other window I ever use will have the name.

Now that we have created the window, we need to set it as the root window.

<source lang="cpp">
CEGUI::System::getSingleton().setGUISheet( myRoot );
</source>

This calls upon the system, and assigns myRoot as the default window. Recall myRoot was created above with the name "_MasterRoot".

==== Conclusion ====

While not a super exciting tutorial. At this point CEGUI is now setup, and we could begin adding windows and doing such GUI shenanigans as making windows, buttons, clicking, and fun. Later tutorials will demonstrate how to have CEGUI Recognize clicking, dragging of windows, typing, and more! Thanks for reading!

[[Category:Tutorials]]