History: Using CEGUI in OgreDotNet

Source of version: 2 (current)

!!Introduction
Remark: The code is (''seems to be'') in visual basic.

In my own use of Ogre Dot Net, I have noticed that there are some differences in the implementation of CEGUI versus the normal C++ implementation used with regular Ogre. I am creating this page to help people not only get the basics down, but also to provide some insight in to good design for coded GUI systems in .NET.

It all starts with setting up your GUI objects in your main project. For my project, I have my "MainWindow" class that contains my renderwindow object, and the Ogre "Root" object, etc. Whatever class you happen to have that handles all of this, is where you begin.

{maketoc}

!!Setting up your GUI System
The first step in any CEGUI implementation is setting up your GUI System in the class where you have your renderwindow and "root" ogre object. This class will likely require the following Imports statements:

{CODE(wrap="1", colors="vbnet")} Imports CeguiDotNet
 Imports OgreDotNet
 Imports OgreDotNet.Cegui
{CODE}
You then have your declarations of your GUI objects.

{CODE(wrap="1", colors="vbnet")}        Public GUI As OgreCEGUIRenderer
        Public GUISys As GuiSystem
        Public WithEvents Desktop As Window
        Public WithEvents WelcomeWindow As WelcomeWindow
        Public WithEvents OptionsWindow As OptionsWindow
        Public WithEvents GuildWindow As GuildWindow
        Public WithEvents SkillsWindow As SkillsWindow
        Public QuitQueryWindow As CloseQueryWindow
        Public CharactersWindow As CharacterWindow
        Public PAWindow As PAWindow
        Public WithEvents ChatTarget As StaticText
        Public WithEvents ChatInput As Editbox
        Public StartPosition As Single = 0.05
        Private GUIFocus As Boolean = True
{CODE}
As you can see, we have an "OgreCEGUIRenderer" AND a "GuiSystem" object. This confused me at first, because I didn't realize both were needed.

Next you see my declarations for my various windows. The way I designed my app, I created all of my windows at start up and then hid them all. Instead of destroying and recreating windows, I am simply using show/hide on them, since there are single instances of them all. This is with the exception of an "ErrorWindow" class, because more than one error may come up at a time. I'll go in to that later.

The "Desktop" object you see is of type "Window", which is the base window class of CEGUI (also known as DefaultWindow). I like to think of this desktop object as a transparent overlay over the entire render window. It acts as a container for all other windows.

You may notice I have a lot of custom types here. OptionsWindow as OptionsWindow for example. The reason for this is because I have defined my own custom classes for each window object, and done so with an inheritance scheme that I'll go in to later.

For now, let's focus on creating this GUI system, and setting up my "desktop".

{CODE(wrap="1", colors="vbnet")}        Private Sub CreateGUI()
            Try
                GUI = New OgreCEGUIRenderer(Window)
                GUI.Initialise()
                GUI.setTargetSceneManager(Scene)
{CODE}
The GUI object is set up by creating a new OgreCEGUIRenderer and giving it the render window object ("Window" in this case). You then initialise it, and then send it your scene object using the setTargetSceneManager call.

{CODE(wrap="1", colors="vbnet")}                GUISys = GuiSystem.CreateGuiSystemSpecial(GUI)
                Logger.Instance.setLoggingLevel(LoggingLevel.Informative)
                SchemeManager.Instance.LoadScheme("TaharezLook.scheme")
                GUISys.SetDefaultMouseCursor("TaharezLook", "MouseArrow")
                GUISys.DefaultFontName = "Tahoma-12"
{CODE}
The GUISystem Object (GUISys in this case), is created by the GuiSystem singleton.

Now we get in to creating our windows. The WindowManager singleton/instance is used quite a bit. (I'll show a trick later for how to make this a little easier to work with.)

{CODE(wrap="1", colors="vbnet")}                Desktop = WindowManager.Instance.CreateWindow("DefaultWindow", "Desktop")
                GUISys.GUISheet = Desktop
{CODE}
The Desktop object is being initialized as a "DefaultWindow" type, and is being named "Desktop" in the CEGUI collection of objects. This name can later be used to look up the object by name if you would like. (Just as a personal note, I never intend to do this, and it would be great if CEGUI didn't make this naming required.) The desktop is then set to the main "GUI Sheet" in the GUI System object. This is the part that makes the desktop object that transparent overlay container for all other windows.

This same sub is continued in the next section.

!!Creating your windows
Continuing from the previous section, we have the same "CreateGUI" sub that began with the creation of the GUI System. Now, we are moving on to creating the various windows that lay on top of the GUISheet (Desktop). You'll notice I have it set up to create the instances of these windows through a "new" call to custom classes. I'll go in to one of these custom classes later to show how I have it all set up.

{CODE(wrap="1", colors="vbnet")}                QuitQueryWindow = New CloseQueryWindow
                Desktop.AddChildWindow(QuitQueryWindow.MyWindow)
 
                WelcomeWindow = New WelcomeWindow
                Desktop.AddChildWindow(WelcomeWindow.MyWindow)
 
                CharactersWindow = New CharacterWindow
                Desktop.AddChildWindow(CharactersWindow.MyWindow)
 
                OptionsWindow = New OptionsWindow(StartPosition)
                Desktop.AddChildWindow(OptionsWindow.MyWindow)
{CODE}
Next, we have a static text object being created and added directly to the Desktop object. The above 4 examples are all "Frame windows" which can be moved around and such. This object looks very different, as it has no frame, and can not be moved around the desktop with the mouse.

{CODE(wrap="1", colors="vbnet")}                ChatTarget = WindowManager.Instance.CreateStaticText(StaticTxt, "ChatTarget")
{CODE}
Notice the "StaticTxt" there. It's a string variable that I defined as a constant for "TaharezLook/StaticText". I did this for all of the CEGUI widgets, so when I change my LookAndFeel definitions, I would only have to change the string in one place for it to take effect across my entire project.

{CODE(wrap="1", colors="vbnet")}                ChatTarget.SetSize(MetricsMode.Relative, New CeguiDotNet.Size(0.7, 0.2))
                ChatTarget.SetPosition(MetricsMode.Relative, New CeguiDotNet.Vector2(0, 0.8))
                ChatTarget.setAlpha(0.4)
                ChatTarget.setAlwaysOnTop(True)
                ChatTarget.setVerticalScrollbarEnabled(True)
                ChatTarget.setHorizontalScrollbarEnabled(False)
                ChatTarget.setFormatting(StaticText.HorzFormatting.WordWrapLeftAligned, StaticText.VertFormatting.BottomAligned)
                ChatTarget.SubscribeEvents()
                ChatTarget.hide()
                Desktop.AddChildWindow(ChatTarget)
{CODE}
As you can see, I'm defining all of my properties in code, instead of using XML. This is my own preferred method, and doesn't need to be used by everyone. If you're wanting to know how to set up your CEGUI objects with XML, see the CEGUI Wiki for help.

{CODE(wrap="1", colors="vbnet")}                ChatInput = WindowManager.Instance.CreateEditbox(Editbox, "ChatInput")
                ChatInput.SetSize(MetricsMode.Relative, New CeguiDotNet.Size(0.7, 0.05))
                ChatInput.SetPosition(MetricsMode.Relative, New CeguiDotNet.Vector2(0, 0.75))
                ChatInput.setAlpha(0.4)
                ChatInput.setAlwaysOnTop(True)
                ChatInput.SubscribeEvents()
                ChatInput.deactivate()
                ChatInput.hide()
                Desktop.AddChildWindow(ChatInput)
 
                GuildWindow = New GuildWindow(StartPosition)
                Desktop.AddChildWindow(GuildWindow.MyWindow)
                UpdateStartPosition()
 
                SkillsWindow = New SkillsWindow(StartPosition)
                Desktop.AddChildWindow(SkillsWindow.MyWindow)
                UpdateStartPosition()
            Catch ex As Exception
                Console.WriteLine(ex.Message)
            End Try
        End Sub
{CODE}
So there you have it... my entire GUI system is set up, and new instances of all of my windows are now created. So what does it look like?

{img src="img/wiki_up/Ogredotnetceguiwikiexample.png" alt="Ogredotnetceguiwikiexample.png"}

In this example, you see the QuitQueryWindow, WelcomeWindow, and ChatTarget StaticText object.

!!Setting up custom classes
So how do I have that WelcomeWindow all defined just by calling "new WelcomeWindow"? The answer is to set up custom classes for each window type you want to create, and within it have all of your definitions for layout and objects within them. Of course, there will be some standard behaviors and objects that will be used in ALL of your framewindows, and some things that will be used in all of your Tab Pages... so why not set up base classes and use inheritance?

I start with "WindowBase":

{CODE(wrap="1", colors="vbnet")}    Public Class WindowBase
        Private reader As StreamReader
        Public WM As WindowManager = WindowManager.Instance
        Public Function GetDescription(ByVal BasePath As String, ByVal WhatFile As String) As String
            Try
                BasePath = "/data/descriptions/" & BasePath & "/"
                BasePath = BasePath.Replace("//", "/")
                If File.Exists(App_Path() & BasePath & WhatFile & ".txt") Then
                    reader = New StreamReader(App_Path() & BasePath & WhatFile & ".txt")
                    Return reader.ReadToEnd
                Else
                    File.Create(App_Path() & BasePath & WhatFile & ".txt")
                    Return "Help file not found.  Blank one created.  Please update your client."
                End If
            Catch ex As Exception
                Return "Error reading help text file"
            End Try
        End Function
    End Class
{CODE}
All of my frame and tab windows will have a help or description statictext object that will show help files, so I figured I'd create a single sub for all of them to use, and since they all inherit from this same base class, this was a good place to put this function.

The more important part of this is the "WM" object being defined as the WindowManager.Instance. I got tired of having long bulky code with the "WindowManager.Instance.Create(whatever)" being everywhere. So now it's just WM.Create(whatever), and things are much cleaner.

So what inherits this base class?

FrameWindowBase!

{CODE(wrap="1", colors="vbnet")}    Public Class FrameWindowBase
        Inherits WindowBase
        Public WithEvents MyWindow As FrameWindow
        Public Overridable Function Shown(ByVal e As WindowEventArgs) As Boolean Handles MyWindow.Shown
            If MyWindow.getWidth + MyWindow.getPosition.d_x > 1 Then
                MyWindow.SetPosition(1 - MyWindow.getWidth, MyWindow.getPosition.d_y)
            End If
            If MyWindow.getHeight + MyWindow.getPosition.d_y > 1 Then
                MyWindow.SetPosition(MyWindow.getPosition.d_x, 1 - MyWindow.getHeight)
            End If
            If MyWindow.getPosition.d_x < 0 Then
                MyWindow.SetPosition(0, MyWindow.getPosition.d_y)
            End If
            If MyWindow.getPosition.d_y < 0 Then
                MyWindow.SetPosition(MyWindow.getPosition.d_x, 0)
            End If
            MyWindow.setAlwaysOnTop(True)
            MyWindow.setAlwaysOnTop(False)
        End Function
        Public Sub CenterWindow()
            MyWindow.SetPosition((Convert.ToSingle(Client.Engine.Window.Width) - MyWindow.getWidth) / 2, (Convert.ToSingle(Client.Engine.Window.Height) - MyWindow.getHeight) / 2)
        End Sub
        Public Sub SetupWindow()
            MyWindow.setMetricsMode(MetricsMode.Absolute)
            MyWindow.setRollupEnabled(False)
            MyWindow.setSizingBorderThickness(0)
            MyWindow.setFrameEnabled(False)
            MyWindow.SubscribeEvents()
            MyWindow.activate()
        End Sub
        Public Overridable Function CloseClickedHandler(ByVal e As WindowEventArgs) As Boolean Handles MyWindow.CloseClicked
            MyWindow.hide()
        End Function
    End Class
{CODE}
As you can see, I have a single sub to setup any frame window to act the way I want my framewindows to act. Also, remember how I said I don't destroy my windows when they're closed, I just hide them? I overrode the CloseClicked event to say "hide the window" instead of destroying it.

The other functions are pretty self-explanitory, but I included them here to give people ideas for how to do things in their own code.

There are other base classes that inherits WindowBase, but I'm not showing them here... all of them, however, have a single "MyWindow" object... this is a naming convention I decided on that has proven to be effective.

So let's look at WelcomeWindow. You see how it's laid out in the above screenshot, so let's see how I did that in code.

{CODE(wrap="1", colors="vbnet")}    Public Class WelcomeWindow
        Inherits FrameWindowBase
{CODE}
Ahh, you see? It inherits FrameWindowBase, which inherits WindowBase...

{CODE(wrap="1", colors="vbnet")}        'Buttons
        Public WithEvents btnLogin As ButtonBase
        Public WithEvents btnOptions As ButtonBase
 
        ' Static Text Items
        Public WelcomeText As StaticText
        Public StatusText As StaticText
        Private DefaultMessage As String = "To begin, enter user name and password, then click login."
        Public UNLabel As StaticText
        Public PWLabel As StaticText
 
        'Fields
        Public WithEvents UNField As Editbox
        Public WithEvents PWField As Editbox
 
        'Alignment variables
        Private MaxSize As New Size(600, 400)
        Private RowHeight As Single = 27
        Private ButtonSize As New Size(100, RowHeight)
        Private LabelSize As New Size(76, RowHeight)
        Private LeftAlign As Single = 10
        Private FieldSize As New Size(MaxSize.d_width - (LeftAlign * 4) - LabelSize.d_width - ButtonSize.d_width, RowHeight)
        Private MidAlign As Single = LabelSize.d_width + (LeftAlign * 2)
        Private RightAlign As Single = MaxSize.d_width - LeftAlign - ButtonSize.d_width
        Private BottomRow As Single = MaxSize.d_height - LeftAlign - RowHeight
        Private PWRow As Single = BottomRow - RowHeight - LeftAlign
        Private UNRow As Single = PWRow - RowHeight - LeftAlign
{CODE}
As you can see, I set up my formatting using formulas rather than messing around with static values. This is quite handy, as it makes things easier to format without having to endlessly tweak numbers around.

{CODE(wrap="1", colors="vbnet")}        Sub New()
            Try
                MyWindow = WM.CreateFrameWindow(FrameWindow, "WelcomeWindow")
{CODE}
Remember, I have my CEGUI widget constants: Public FrameWindow As String = "TaharezLook/FrameWindow"

{CODE(wrap="1", colors="vbnet")}                SetupWindow()
                MyWindow.Text = "Welcome to Vermund : A Matter of Life and Death!"
                MyWindow.SetSize(MaxSize)
                CenterWindow()
                SetupLoginArea()
                SetupButtons()
                SetupStaticText()
                MyWindow.Show()
            Catch ex As Exception
                'Replace with Error Logging
            End Try
        End Sub
{CODE}
The "SetupWindow" call references the base class you saw above... it's a handly little thing that saves me time in setting up my frame windows, and allows me to change the default behavior of ALL of my frame windows without doing a massive search/replace.

So now we set up the various objects:

{CODE(wrap="1", colors="vbnet")}        Private Sub SetupLoginArea()
            Try
                UNLabel = WM.CreateStaticText(StaticTxt, "lblUN")
                UNLabel.setMetricsMode(MetricsMode.Absolute)
                UNLabel.SetPosition(LeftAlign, UNRow)
                UNLabel.SetSize(LabelSize)
                UNLabel.setFrameEnabled(False)
                UNLabel.setFormatting(StaticText.HorzFormatting.LeftAligned, StaticText.VertFormatting.VertCentred)
                UNLabel.Text = "User Name"
                MyWindow.AddChildWindow(UNLabel)
 
                UNField = WM.CreateEditbox(Editbox, "txtUNField")
                UNField.SubscribeEvents()
                UNField.setMetricsMode(MetricsMode.Absolute)
                UNField.SetPosition(MidAlign, UNRow)
                UNField.SetSize(FieldSize)
                UNField.Text = ""
                MyWindow.AddChildWindow(UNField)
 
                PWLabel = WM.CreateStaticText(StaticTxt, "lblPW")
                PWLabel.setMetricsMode(MetricsMode.Absolute)
                PWLabel.SetPosition(LeftAlign, PWRow)
                PWLabel.SetSize(LabelSize)
                PWLabel.setFrameEnabled(False)
                PWLabel.setFormatting(StaticText.HorzFormatting.LeftAligned, StaticText.VertFormatting.VertCentred)
                PWLabel.Text = "Password"
                MyWindow.AddChildWindow(PWLabel)
 
                PWField = WM.CreateEditbox(Editbox, "txtPWField")
                PWField.SubscribeEvents()
                PWField.setMetricsMode(MetricsMode.Absolute)
                PWField.SetPosition(MidAlign, PWRow)
                PWField.SetSize(FieldSize)
                PWField.setTextMasked(True)
                MyWindow.AddChildWindow(PWField)
            Catch ex As Exception
                'Replace with Error Logging
            End Try
        End Sub
 
        Private Sub SetupButtons()
            Try
                btnLogin = WM.CreateButtonBase(Button, "btnLogin")
                btnLogin.setMetricsMode(MetricsMode.Absolute)
                btnLogin.SetPosition(RightAlign, UNRow)
                btnLogin.SetSize(ButtonSize)
                btnLogin.Text = "Login"
                btnLogin.SubscribeEvents()
                MyWindow.AddChildWindow(btnLogin)
 
                btnOptions = WM.CreateButtonBase(Button, "btnOptions")
                btnOptions.setMetricsMode(MetricsMode.Absolute)
                btnOptions.SetPosition(RightAlign, PWRow)
                btnOptions.SetSize(ButtonSize)
                btnOptions.Text = "Options"
                btnOptions.SubscribeEvents()
                MyWindow.AddChildWindow(btnOptions)
            Catch ex As Exception
                'Replace with Error Logging
            End Try
        End Sub
 
        Private Sub SetupStaticText()
            Try
                WelcomeText = WM.CreateStaticText(StaticTxt, "txtWelcome")
                WelcomeText.setMetricsMode(MetricsMode.Absolute)
                WelcomeText.SetPosition(LeftAlign, LeftAlign * 4)
                WelcomeText.SetSize(MaxSize.d_width - (LeftAlign * 2), UNRow - (LeftAlign * 5))
                WelcomeText.setVerticalScrollbarEnabled(True)
                WelcomeText.setFormatting(StaticText.HorzFormatting.WordWrapLeftAligned, StaticText.VertFormatting.TopAligned)
                If File.Exists(App_Path() & "\MOTD.txt") Then
                    Dim MyReader As New System.IO.StreamReader(App_Path() & "\MOTD.txt")
                    WelcomeText.Text = MyReader.ReadToEnd.ToString
                Else
                    WelcomeText.Text = "Error: Message Of The Day File Not Found"
                End If
                MyWindow.AddChildWindow(WelcomeText)
 
                StatusText = WM.CreateStaticText(StaticTxt, "txtStatus")
                StatusText.setMetricsMode(MetricsMode.Absolute)
                StatusText.SetPosition(LeftAlign, BottomRow)
                StatusText.SetSize(MaxSize.d_width - (LeftAlign * 2), FieldSize.d_height)
                StatusText.setFormatting(StaticText.HorzFormatting.LeftAligned, StaticText.VertFormatting.VertCentred)
                StatusText.Text = DefaultMessage
                MyWindow.AddChildWindow(StatusText)
            Catch ex As Exception
            End Try
        End Sub
{CODE}
Now, people will tell you that XML is soooo much easier and nicer... I disagree. I find it much easier to write this code above than to write a bunch of bulky XML. Now if you're using a layout editor that writes the XML for you, that's another story... but I still prefer code.

!!!Handling CEGUI events
Next we have the event handlers. VB.NET differs from C# in this one major way and it confuses a lot of people. You'll notice that above, I declared btnLogin and btnOptions "withevents". 
{CODE(wrap="1", colors="vbnet")} 
 Public WithEvents btnOptions As ButtonBase
{CODE}
This tells the compiler that we're setting up our own handler functions for events raised by that object. For example:

{CODE(wrap="1", colors="vbnet")}        Public Function OptionsClicked(ByVal e As MouseEventArgs) As Boolean Handles btnOptions.MouseClick
            Client.Engine.OptionsWindow.MyWindow.Show()
        End Function
{CODE}
This function must have the same signature as the event raised by the button object... so it MUST be a function (not a sub) that returns a Boolean value (even though it's likely never used), and it must accept the argument "MouseEventArgs". The "Handles" keyword at the end tells the compiler which event(s) this function is responsible for handling.

Notice how I reference my public object OptionsWindow, which has within it, of course, a "MyWindow" object... and I tell it to show itself.

I have other event handlers, but they're pretty specific to my needs and not of value here. As long as you understand how to set up events, that's all I'm going for.

!!Conclusion
So now you should know how to set up your GUI system, default GUISheet, elements on top of the GUISheet (like a statictext object), FrameWindows, etc... plus set up your layouts, work with inheritance to make things easier on you, and set up event handlers for CEGUI objects.

If you have any questions, please feel free to visit the [http://www.ogre3d.org/phpBB2addons/viewforum.php?f=1|OgreDotNet forums] and post a help request there.
History: Using CEGUI in OgreDotNet

Source of version: 2 (current)

Search by Tags

Latest Changes

Search

Online Users
