Difference between revisions of "CEGUI In Practice - Introduction"

Latest revision as of 04:13, 16 May 2014

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::System - The big Kahuna. This contains many of the functions for setting and getting defaults.
CEGUI::WindowManager - Manages the windows of CEGUI. If a new window is going to be created or Deleted WindowManager is gonna be your class.

CEGUI::SchemeManager - Manages Schemes.
CEGUI::FontManager - Manages the different fonts you will use in your application.

Getting Started

Let's 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:

Including necessary headers

#include <CEGUI.h>
#include <RendererModules/Ogre/Renderer.h>

import PyCEGUI
import PyCEGUIOgreRenderer

Bootstrapping CEGUI

CEGUI::OgreRenderer* renderer = &CEGUI::OgreRenderer::bootstrapSystem();

renderer = PyCEGUIOgreRenderer.OgreRenderer.bootstrapSystem()

[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.

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

<?xml version="1.0" ?>
<GUIScheme Name="TaharezLook">
	<Imageset Filename="TaharezLook.imageset" />
	<Font Filename="DejaVuSans-10.font" />
	<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>

The next script we will mention is the Layouts (*.layout). This is also an xml file, which 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:

<?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>

Another script which is useful to mention is a Font (*.font). This describes fonts which will be used in cegui. Below is an example:

<?xml version="1.0" ?>
<Font Name="DejaVuSans-10" Filename="DejaVuSans.ttf" Type="FreeType" Size="10" NativeHorzRes="800" NativeVertRes="600" AutoScaled="true"/>

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.

<?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>

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 Scheme can include an Imageset, lookNFeel, and font to use.

// Load the scheme
CEGUI::SchemeManager::getSingleton().createFromFile( "TaharezLook.scheme" );

# Load the scheme
PyCEGUI.SchemeManager.getSingleton().createFromFile( "TaharezLook.scheme" )

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:

// Set the defaults
CEGUI::System::getSingleton().getDefaultGUIContext().setDefaultFont("DejaVuSans-10");
CEGUI::System::getSingleton().getDefaultGUIContext().getMouseCursor().setDefaultImage("TaharezLook/MouseArrow");

# Set the defaults
PyCEGUI.System.getSingleton().getDefaultGUIContext().setDefaultFont( "DejaVuSans-10" )
PyCEGUI.System.getSingleton().getDefaultGUIContext().getMouseCursor().setDefaultImage("TaharezLook/MouseArrow")

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

CEGUI::Window* myRoot = CEGUI::WindowManager::getSingleton().createWindow( "DefaultWindow", "_MasterRoot" );

myRoot = PyCEGUI.WindowManager.getSingleton().createWindow( "DefaultWindow", "_MasterRoot" )

CEGUI::System::getSingleton().getDefaultGUIContext().setRootWindow( myRoot );

PyCEGUI.System.getSingleton().getDefaultGUIContext().setRootWindow( myRoot )

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!