Mogre Basic Tutorial VB 6        

Basic Tutorial 6: Overlay's and Publishing

Original version by Aeauseth

Any problems you encounter while working with this tutorial should be posted to the Mogre Forums.


This tutorial assumes you have knowledge of VB.NET programming and are able to setup and compile an Mogre application (if you have trouble setting up your application, see Mogre Basic Tutorial VB 0 for a detailed setup walkthrough).


In this tutorial you will learn how to use the DebugOverlay to display FPS information. You will also learn how to use an overlay to show a mouse cursor. Finally I will show that you can publish this project using the Click Once technique.

As you go through the tutorial you should be slowly adding code to your own project and watching the results as we build it.

Getting Started

As with the previous tutorials, we will be using a pre-constructed code:

 <font color='blue'>Imports</font> Mogre
 <font color='blue'>Module</font> Module1
     <font color='blue'>Public</font> myKeyboard <font color='blue'>As</font> MOIS.Keyboard
     <font color='blue'>Public</font> myMouse <font color='blue'>As</font> MOIS.Mouse
     <font color='blue'>Public</font> myCamera <font color='blue'>As</font> Camera
     <font color='blue'>Public</font> MyWindow <font color='blue'>As</font> RenderWindow
     <font color='blue'>Public</font> myTranslation <font color='blue'>As</font> Vector3 = Vector3.ZERO
     <font color='blue'>Public</font> Quitting <font color='blue'>As</font> <font color='blue'>Boolean</font> = <font color='blue'>False
 </font>    <font color='blue'>Public</font> myRotating <font color='blue'>As</font> <font color='blue'>Boolean</font> = <font color='blue'>False
 </font>    <font color='blue'>Sub</font> Main()
         <font color='blue'>Try
 </font>            <font color='green'>'Creating the Root Object 
 </font>            <font color='blue'>Dim</font> myRoot <font color='blue'>As</font> Root = <font color='blue'>New</font> Root(<font color='darkred'>"Plugins.cfg"</font>, <font color='darkred'>"ogre.cfg"</font>, <font color='darkred'>"ogre.log"</font>)
             <font color='green'>'Defining the Resources 
 </font>            <font color='blue'>Dim</font> cf <font color='blue'>As</font> <font color='blue'>New</font> ConfigFile
             cf.Load(<font color='darkred'>"resources.cfg"</font>, vbTab + <font color='darkred'>":="</font>, <font color='blue'>True</font>)
             <font color='blue'>Dim</font> seci <font color='blue'>As</font> ConfigFile.SectionIterator = cf.GetSectionIterator
             <font color='blue'>Dim</font> secName <font color='blue'>As</font> <font color='blue'>String</font>, typeName <font color='blue'>As</font> <font color='blue'>String</font>, archName <font color='blue'>As</font> <font color='blue'>String
 </font>            <font color='blue'>While</font> (seci.MoveNext())
                 secName = seci.CurrentKey
                 <font color='blue'>Dim</font> settings <font color='blue'>As</font> ConfigFile.SettingsMultiMap = seci.Current
                 <font color='blue'>For</font> <font color='blue'>Each</font> pair <font color='blue'>As</font> KeyValuePair(<font color='blue'>Of</font> <font color='blue'>String</font>, <font color='blue'>String</font>) <font color='blue'>In</font> settings
                     typeName = pair.Key
                     archName = pair.Value
                     ResourceGroupManager.Singleton.AddResourceLocation(archName, typeName, secName)
                 <font color='blue'>Next
 </font>            <font color='blue'>End</font> <font color='blue'>While
 </font>            <font color='green'>'Setting up the RenderSystem
 </font>            <font color='blue'>If</font> <font color='blue'>Not</font> myRoot.RestoreConfig <font color='blue'>Then
 </font>                <font color='blue'>If</font> <font color='blue'>Not</font> myRoot.ShowConfigDialog <font color='blue'>Then
 </font>                    <font color='blue'>Exit</font> <font color='blue'>Sub
 </font>                <font color='blue'>End</font> <font color='blue'>If
 </font>            <font color='blue'>End</font> <font color='blue'>If
 </font>            <font color='green'>'Creating the Render Window
 </font>            MyWindow = myRoot.Initialise(<font color='blue'>True</font>, <font color='darkred'>"Ogre RenderWindow"</font>)
             <font color='blue'>AddHandler</font> myRoot.FrameStarted, <font color='blue'>AddressOf</font> FrameStarted
             <font color='green'>'Initializing Resource Groups
 </font>            TextureManager.Singleton.DefaultNumMipmaps = 5
             <font color='green'>'Creating the Scene
 </font>            <font color='blue'>Dim</font> myScene <font color='blue'>As</font> -SceneManager = myRoot.CreateSceneManager(SceneType.ST_GENERIC)
             myCamera = myScene.CreateCamera(<font color='darkred'>"Camera"</font>)
             <font color='blue'>Dim</font> myNinja <font color='blue'>As</font> Entity = myScene.CreateEntity(<font color='darkred'>"ninja"</font>, <font color='darkred'>"ninja.mesh"</font>)
             myCamera.Position = <font color='blue'>New</font> Vector3(0, 200, -400)
             <font color='green'>'Overlay
 </font>            <font color='green'>'Input handler
 </font>            InputClass.Init()
             <font color='green'>'The Render Loop
 </font>            myRoot.StartRendering()
         <font color='blue'>Catch</font> ex <font color='blue'>As</font> System.Runtime.InteropServices.SEHException
             <font color='blue'>If</font> OgreException.IsThrown <font color='blue'>Then
 </font>                MsgBox(OgreException.LastException.FullDescription, MsgBoxStyle.Critical, _
                      <font color='darkred'>"An Ogre  exception has occured!"</font>)
             <font color='blue'>Else
 </font>                MsgBox(ex.ToString, <font color='darkred'>"An error has occured"</font>)
             <font color='blue'>End</font> <font color='blue'>If
 </font>        <font color='blue'>End</font> <font color='blue'>Try
 </font>    <font color='blue'>End</font> <font color='blue'>Sub
 </font>    <font color='blue'>Public</font> <font color='blue'>Function</font> FrameStarted(<font color='blue'>ByVal</font> e <font color='blue'>As</font> FrameEvent) <font color='blue'>As</font> <font color='blue'>Boolean
 </font>        <font color='green'>'Capture buffered input
 </font>        myKeyboard.Capture()
         <font color='green'>'Handle player/camera movement
 </font>        InputClass.ProcessKeyboard()
         myCamera.Position += myCamera.Orientation * myTranslation * e.timeSinceLastFrame
         <font color='green'>'Debug Overlay
 </font>        <font color='blue'>Return</font> <font color='blue'>Not</font> Quitting
     <font color='blue'>End</font> <font color='blue'>Function
 </font>    <font color='blue'>Public</font> <font color='blue'>Class</font> InputClass
         <font color='blue'>Const</font> TRANSLATE <font color='blue'>As</font> <font color='blue'>Single</font> = 200
         <font color='blue'>Const</font> ROTATE <font color='blue'>As</font> <font color='blue'>Single</font> = 0.003
         <font color='blue'>Shared</font> <font color='blue'>Sub</font> Init()
             <font color='green'>'Keyboard
 </font>            <font color='blue'>Dim</font> windowHnd <font color='blue'>As</font> <font color='blue'>Integer
 </font>            MyWindow.GetCustomAttribute(<font color='darkred'>"WINDOW"</font>, windowHnd)
             <font color='blue'>Dim</font> myInputManager <font color='blue'>As</font> MOIS.InputManager = MOIS.InputManager.CreateInputSystem(windowHnd)
             myKeyboard = myInputManager.CreateInputObject(MOIS.Type.OISKeyboard, <font color='blue'>True</font>)
             <font color='blue'>AddHandler</font> myKeyboard.KeyPressed, <font color='blue'>AddressOf</font> InputClass.KeyPressed
             <font color='blue'>AddHandler</font> myKeyboard.KeyReleased, <font color='blue'>AddressOf</font> InputClass.KeyReleased
             <font color='green'>'Mouse
 </font>            myMouse = myInputManager.CreateInputObject(MOIS.Type.OISMouse, <font color='blue'>True</font>)
             <font color='blue'>AddHandler</font> myMouse.MouseMoved, <font color='blue'>AddressOf</font> InputClass.MouseMovedListener
             <font color='blue'>AddHandler</font> myMouse.MousePressed, <font color='blue'>AddressOf</font> InputClass.MousePressedListener
             <font color='blue'>AddHandler</font> myMouse.MouseReleased, <font color='blue'>AddressOf</font> InputClass.MouseReleasedListener
         <font color='blue'>End</font> <font color='blue'>Sub
 </font>        <font color='blue'>Shared</font> <font color='blue'>Function</font> KeyPressed(<font color='blue'>ByVal</font> e <font color='blue'>As</font> MOIS.KeyEvent) <font color='blue'>As</font> <font color='blue'>Boolean
 </font>            <font color='blue'>Select</font> <font color='blue'>Case</font> e.key
                 <font color='blue'>Case</font> MOIS.KeyCode.KC_ESCAPE
                     Quitting = <font color='blue'>True
 </font>            <font color='blue'>End</font> <font color='blue'>Select
 </font>            <font color='blue'>Return</font> <font color='blue'>Nothing
 </font>        <font color='blue'>End</font> <font color='blue'>Function
 </font>        <font color='blue'>Shared</font> <font color='blue'>Function</font> KeyReleased(<font color='blue'>ByVal</font> e <font color='blue'>As</font> MOIS.KeyEvent) <font color='blue'>As</font> <font color='blue'>Boolean
 </font>            <font color='green'>'This function is just a placeholder
 </font>            <font color='green'>'It is unlikely you will ever use this
 </font>            <font color='green'>'Typically you either process unbuffered keyboard input (as in ProcessKeyboard)
 </font>            <font color='green'>'or you process buffered Keypress
 </font>            <font color='blue'>Return</font> <font color='blue'>Nothing
 </font>        <font color='blue'>End</font> <font color='blue'>Function
 </font>        <font color='blue'>Shared</font> <font color='blue'>Sub</font> ProcessKeyboard()
             <font color='green'>'This Sub is typically called via the FrameStarted event.
 </font>            <font color='green'>'Clear previous translation
 </font>            myTranslation.z = 0
             myTranslation.x = 0
             myTranslation.y = 0
             <font color='blue'>If</font> myKeyboard.IsKeyDown(MOIS.KeyCode.KC_UP) <font color='blue'>Or</font> _
                 myKeyboard.IsKeyDown(MOIS.KeyCode.KC_W) <font color='blue'>Then
 </font>                myTranslation.z += -TRANSLATE
             <font color='blue'>End</font> <font color='blue'>If
 </font>            <font color='blue'>If</font> myKeyboard.IsKeyDown(MOIS.KeyCode.KC_S) <font color='blue'>Or</font> _
                 myKeyboard.IsKeyDown(MOIS.KeyCode.KC_DOWN) <font color='blue'>Then
 </font>                myTranslation.z += TRANSLATE
             <font color='blue'>End</font> <font color='blue'>If
 </font>            <font color='blue'>If</font> myKeyboard.IsKeyDown(MOIS.KeyCode.KC_A) <font color='blue'>Or</font> _
                 myKeyboard.IsKeyDown(MOIS.KeyCode.KC_LEFT) <font color='blue'>Then
 </font>                myTranslation.x += -TRANSLATE
             <font color='blue'>End</font> <font color='blue'>If
 </font>            <font color='blue'>If</font> myKeyboard.IsKeyDown(MOIS.KeyCode.KC_D) <font color='blue'>Or</font> _
                 myKeyboard.IsKeyDown(MOIS.KeyCode.KC_RIGHT) <font color='blue'>Then
 </font>                myTranslation.x += TRANSLATE
             <font color='blue'>End</font> <font color='blue'>If
 </font>            <font color='blue'>If</font> myKeyboard.IsKeyDown(MOIS.KeyCode.KC_Q) <font color='blue'>Or</font> _
             myKeyboard.IsKeyDown(MOIS.KeyCode.KC_PGUP) <font color='blue'>Or</font> _
             myKeyboard.IsKeyDown(MOIS.KeyCode.KC_SPACE) <font color='blue'>Then
 </font>                myTranslation.y += TRANSLATE
             <font color='blue'>End</font> <font color='blue'>If
 </font>            <font color='blue'>If</font> myKeyboard.IsKeyDown(MOIS.KeyCode.KC_Z) <font color='blue'>Or</font> _
                 myKeyboard.IsKeyDown(MOIS.KeyCode.KC_PGDOWN) <font color='blue'>Then
 </font>                myTranslation.y += -TRANSLATE
             <font color='blue'>End</font> <font color='blue'>If
 </font>        <font color='blue'>End</font> <font color='blue'>Sub
 </font>        <font color='blue'>Shared</font> <font color='blue'>Function</font> MouseMovedListener(<font color='blue'>ByVal</font> e <font color='blue'>As</font> MOIS.MouseEvent) <font color='blue'>As</font> <font color='blue'>Boolean
 </font>            <font color='blue'>Static</font> myLastX <font color='blue'>As</font> <font color='blue'>Integer</font> = e.state.X.abs
             <font color='blue'>Static</font> myLastY <font color='blue'>As</font> <font color='blue'>Integer</font> = e.state.Y.abs
             <font color='blue'>If</font> myRotating <font color='blue'>Then
 </font>                myCamera.Yaw(e.state.X.rel * -ROTATE)
                 myCamera.Pitch(e.state.Y.rel * -ROTATE)
             <font color='blue'>End</font> <font color='blue'>If
 </font>        <font color='blue'>End</font> <font color='blue'>Function
 </font>        <font color='blue'>Shared</font> <font color='blue'>Function</font> MousePressedListener(<font color='blue'>ByVal</font> e <font color='blue'>As</font> MOIS.MouseEvent, <font color='blue'>ByVal</font> id <font color='blue'>As</font> MOIS.MouseButtonID) <font color='blue'>As</font> <font color='blue'>Boolean
 </font>            <font color='blue'>If</font> e.state.ButtonDown(MOIS.MouseButtonID.MB_Right) <font color='blue'>Then
 </font>                myRotating = <font color='blue'>True
 </font>            <font color='blue'>End</font> <font color='blue'>If
 </font>        <font color='blue'>End</font> <font color='blue'>Function
 </font>        <font color='blue'>Shared</font> <font color='blue'>Function</font> MouseReleasedListener(<font color='blue'>ByVal</font> e <font color='blue'>As</font> MOIS.MouseEvent, <font color='blue'>ByVal</font> id <font color='blue'>As</font> MOIS.MouseButtonID) <font color='blue'>As</font> <font color='blue'>Boolean
 </font>            <font color='blue'>If</font> <font color='blue'>Not</font> e.state.ButtonDown(MOIS.MouseButtonID.MB_Right) <font color='blue'>Then
 </font>                myRotating = <font color='blue'>False
 </font>            <font color='blue'>End</font> <font color='blue'>If
 </font>        <font color='blue'>End</font> <font color='blue'>Function
 </font>    <font color='blue'>End</font> <font color='blue'>Class
 End</font> <font color='blue'>Module

Make sure you can compile and run the application before continuing. If you are having difficulty, refer to the project setup guide or post to the forums. You should see a Ninja.


For simplicity we will use an overlay include with the OgreSDK. Add the following code:

             <font color='green'>'Overlay
 </font>            <font color='blue'>Dim</font> myPanelOverlay <font color='blue'>As</font> Overlay = OverlayManager.Singleton.GetByName(<font color='darkred'>"Core/DebugOverlay"</font>)

The Overlay manager will search thru all the resources until it finds "Core/DebugOverlay", which in this case is in C:\OgreSDK\media\packs\ Feel free to open the ZIP file to see it's contents. I won't discuss how to create your own overlay yet, you will have to wait until the intermediate tutorials are finished. For now go ahead and compile & run the code.

You should see the Ogre logo and a green box with FPS information. Wouldn't it be nice to actually see the FPS and triangle counts? Well add the following code to the FrameStarted handler:

         <font color='green'>'Debug Overlay
 </font>        <font color='blue'>Dim</font> myAvg <font color='blue'>As</font> OverlayElement = OverlayManager.Singleton.GetOverlayElement(<font color='darkred'>"Core/AverageFps"</font>)
         <font color='blue'>Dim</font> myCurr <font color='blue'>As</font> OverlayElement = OverlayManager.Singleton.GetOverlayElement(<font color='darkred'>"Core/CurrFps"</font>)
         <font color='blue'>Dim</font> myBest <font color='blue'>As</font> OverlayElement = OverlayManager.Singleton.GetOverlayElement(<font color='darkred'>"Core/BestFps"</font>)
         <font color='blue'>Dim</font> myWorst <font color='blue'>As</font> OverlayElement = OverlayManager.Singleton.GetOverlayElement(<font color='darkred'>"Core/WorstFps"</font>)
         <font color='blue'>Dim</font> myNumTris <font color='blue'>As</font> OverlayElement = OverlayManager.Singleton.GetOverlayElement(<font color='darkred'>"Core/NumTris"</font>)
         <font color='blue'>Dim</font> myNumBatches <font color='blue'>As</font> OverlayElement = OverlayManager.Singleton.GetOverlayElement(<font color='darkred'>"Core/NumBatches"</font>)
         <font color='blue'>Dim</font> myDebug <font color='blue'>As</font> OverlayElement = OverlayManager.Singleton.GetOverlayElement(<font color='darkred'>"Core/DebugText"</font>)
         myAvg.Caption = <font color='darkred'>"Average FPS: "</font> & Mogre.StringConverter.ToString(MyWindow.AverageFPS)
         myCurr.Caption = <font color='darkred'>"Current FPS: "</font> & Mogre.StringConverter.ToString(MyWindow.LastFPS)
         myBest.Caption = <font color='darkred'>"Best FPS: "</font> & Mogre.StringConverter.ToString(MyWindow.BestFPS)
         myWorst.Caption = <font color='darkred'>"Worst FPS: "</font> & Mogre.StringConverter.ToString(MyWindow.WorstFPS)
         myNumTris.Caption = <font color='darkred'>"Triangle Count: "</font> & Mogre.StringConverter.ToString(MyWindow.TriangleCount)
         myNumBatches.Caption = <font color='darkred'>"Batch Count: "</font> & Mogre.StringConverter.ToString(MyWindow.BatchCount)

Now compile and run again. Move the camera around and watch the FPS change. You will probably have a FPS of 100+, on my system it is 800+. At most you only need 60 FPS. The FPS will drop as you add more entities to the scene.

Overlay Scripts

The overlay size and properties are stored in the OgreDebugPanel.overlay file. Here is the psudo code:

 // Ogre overlay scripts
        zorder 500
        // Stats block
        container BorderPanel(Core/StatPanel)
                metrics_mode pixels
                vert_align bottom
                left 5 
                top -107
                width 220
                height 102
                material Core/StatsBlockCenter
                border_size 1 1 1 1
                border_material Core/StatsBlockBorder
                border_topleft_uv     0.0000 1.0000 0.0039 0.9961
                border_top_uv         0.0039 1.0000 0.9961 0.9961
                border_topright_uv    0.9961 1.0000 1.0000 0.9961
                border_left_uv        0.0000 0.9961 0.0039 0.0039
                border_right_uv       0.9961 0.9961 1.0000 0.0039
                border_bottomleft_uv  0.0000 0.0039 0.0039 0.0000
                border_bottom_uv      0.0039 0.0039 0.9961 0.0000
                border_bottomright_uv 0.9961 0.0039 1.0000 0.0000
                container Panel(Core/BreakPanel)
                        metrics_mode pixels
                        left 5 
                        top 22
                        width 210
                        height 1
                        material Core/StatsBreak
                element TextArea(Core/CurrFps)
                        metrics_mode pixels
                        left 5
                        top 5
                        width 90
                        height 30
                        font_name BlueHighway
                        char_height 19
                        caption Current FPS:
                        colour_top 1 1 0.7
                        colour_bottom 1 1 0.7
                element TextArea(Core/AverageFps)
                        metrics_mode pixels
                        left 5
                        top 25
                        width 90
                        height 30
                        font_name BlueHighway
                        char_height 16
                        caption AVERAGE FPS:
                        colour_top 0.5 0.7 0.5
                        colour_bottom 0.3 0.5 0.3
                element TextArea(Core/WorstFps)
                        metrics_mode pixels
                        left 5
                        top 40
                        width 90
                        height 30
                        font_name BlueHighway
                        char_height 16
                        caption WORST FPS:
                        colour_top 0.5 0.7 0.5
                        colour_bottom 0.3 0.5 0.3
                element TextArea(Core/BestFps)
                        metrics_mode pixels
                        left 5
                        top 55
                        width 90
                        height 30
                        font_name BlueHighway
                        char_height 16
                        caption BEST FPS:
                        colour_top 0.5 0.7 0.5
                        colour_bottom 0.3 0.5 0.3
                element TextArea(Core/NumTris)
                        metrics_mode pixels
                        left 5
                        top 70
                        width 90
                        height 30
                        font_name BlueHighway
                        char_height 16
                        caption Triangle Count:
                        colour_top 0.5 0.7 0.5
                        colour_bottom 0.3 0.5 0.3
                element TextArea(Core/NumBatches)
                        metrics_mode pixels
                        left 5
                        top 85
                        width 90
                        height 30
                        font_name BlueHighway
                        char_height 16
                        caption Batch Count:
                        colour_top 0.5 0.7 0.5
                        colour_bottom 0.3 0.5 0.3
                element TextArea(Core/DebugText)
                        metrics_mode pixels
                        left 230
                        top 70
                        width 200
                        height 30
                        font_name BlueHighway
                        char_height 16
                        colour_top 0.5 0.7 0.5
                        colour_bottom 0.3 0.5 0.3
        container Panel(Core/LogoPanel)
                metrics_mode pixels
                horz_align right
                vert_align bottom
                top -75
                left -165
                width 150
                height 75
                material Core/OgreText
 // A silly example of how you would do a 3D cockpit
 //    zorder 100
 //    entity knot.mesh(hudKnot)
 //    {
 //        position 0 0 -50
 //        rotation 0 0 0 0
 //    }

You can get a general idea how the panel is setup and how each overlay element is defined. Again you will have to wait for the intermediate tutorials if you want to create your own.


Before we can publish our project we need to make sure all the files we need are listed in our Solution Explorer.

As you recall we took a few shortcuts and used several items from C:\OgreSDK. So we will need to prepare our project so it can stand on it's own.


So lets add these items to our project now. Open the resources.cfg file and modify the paths as follows:

 # Resource locations to be added to the 'boostrap' path
 # This also contains the minimum you need to use the Ogre example framework
 # Resource locations to be added to the default path
 FileSystem=.\Media FileSystem=.\Media/fonts

Now drag and drop the C:\OgreSDK\Media folder to your Solution Explorer. Ideally you would now set the properties of each of these files to "Copy if newer", but there is alot of them (ugly). I decided to modify my Tutuorial6.vbproj file and replace None Include="media with Content Include="media, which was much faster.

You may have noticed that we modified our "Defining the Resources" section of code to look in two places.

We also need to modify the paths of our Plugins.cfg file as follows:

 # Defines plugins to load
 # Define plugin folder
 # Define plugins

Now right click on "Solution Explorer" and create a new folder called "plugins". Now right click on this "plugins" folder and add the existing items listed in the Plugins.cfg file. You should find these files in C:\OgreSDK\bin\release.

Verify that all the files in the plugins have theri Build Action set to 'Content', and the "Copy to Output" set to "Copy if newer"

Verify that all the remaining 'dll' and 'cfg' files in the main Solution Explorer have their Build Action set to 'Content'.

Compile and run to make sure everything still works!


On the menu bar select Project then click on the Publish tab. Pick a new folder on your hard drive, USB drive, or wherever. I recommend clicking the updates button and checking the auto updates before application starts.

Click the Publish Wizard, follow the prompts and your done. You can burn the publish directory to a CD if you like.

There are a couple of prequesites to running Ogre applications. You must have vcredist_x86.exe and DirectX Redistributables from November 2007 installed. It would be nice to include these as prerequisites to the publishing package, but I don't know how to do this. For now just download and include them with the rest of the package.

You can now take these files to a generic computer and run setup.exe. This is a very simple way to distribute your application.


You have seen how overlays can be used to provide 2D information in a static location. You have also seen that VB.NET can package up all the necessary files, refereneces and dll dependancies, so that you can publish your application. You may find that a custom or commercial setup applcation may be more suitable for your project.

You may have noticed that there are only 6 VB.NET basic tutorials, yet there are 8 ogre basic tutorials. In my opinion the use of CEGUI and other addins are not 'basic'. Look for addin tutorials in the VB.NET intermediate tutorials.