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.
Table of contents
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:
Imports CeguiDotNet Imports OgreDotNet Imports OgreDotNet.Cegui
You then have your declarations of your GUI objects.
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
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".
Private Sub CreateGUI() Try GUI = New OgreCEGUIRenderer(Window) GUI.Initialise() GUI.setTargetSceneManager(Scene)
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.
GUISys = GuiSystem.CreateGuiSystemSpecial(GUI) Logger.Instance.setLoggingLevel(LoggingLevel.Informative) SchemeManager.Instance.LoadScheme("TaharezLook.scheme") GUISys.SetDefaultMouseCursor("TaharezLook", "MouseArrow") GUISys.DefaultFontName = "Tahoma-12"
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.)
Desktop = WindowManager.Instance.CreateWindow("DefaultWindow", "Desktop") GUISys.GUISheet = Desktop
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.
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)
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.
ChatTarget = WindowManager.Instance.CreateStaticText(StaticTxt, "ChatTarget")
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.
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)
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.
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
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?
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":
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
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?
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
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.
Public Class WelcomeWindow Inherits FrameWindowBase
Ahh, you see? It inherits FrameWindowBase, which inherits WindowBase...
'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
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.
Sub New() Try MyWindow = WM.CreateFrameWindow(FrameWindow, "WelcomeWindow")
Remember, I have my CEGUI widget constants: Public FrameWindow As String = "TaharezLook/FrameWindow"
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
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:
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
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".
Public WithEvents btnOptions As ButtonBase
This tells the compiler that we're setting up our own handler functions for events raised by that object. For example:
Public Function OptionsClicked(ByVal e As MouseEventArgs) As Boolean Handles btnOptions.MouseClick Client.Engine.OptionsWindow.MyWindow.Show() End Function
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.
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 OgreDotNet forums and post a help request there.