基础教程六(CEGUI和OGRE)

必备知识

本教程是在假设你已经拥有c++编程基础并能够成功建立和编译Ogre程序（如果你设置程序方面还存在问题，请参阅SettingUpAnApplication来获取详细信息）。 本教程建立在之前的初学者教程的基础上，并且假设你已经学习了它们。

[编辑]工程设置

下面的适用于下载源代码的用户:

    添加include文件夹: $(OGRE_HOME)/Dependencies/include,
                      $(OGRE_HOME)/Dependencies/include/CEGUI
    添加lib库路径:     $(OGRE_HOME)/OgreMain/Dependencies/Lib/Debug

确信已经链接 'CEGUIBase' 和 'OgreGUIRender' 库，也就是说将下面一行添加进你的Makefile文件或g++命令行：

    -L/usr/local/lib -lCEGUIBase -lCEGUIOgreRenderer

下面的适用于SDK的用户：

   添加include文件夹：$(OGRE_HOME)/include/CEGUI

确信已经在debug配置的中添加 'CEGUIBase_d.lib' 和 'OgreGUIRenderer_d.lib' 库（ 'CEGUIBase.lib' 和 'OgreGUIRenderer.lib' 在release配置中）。 在Visual C++中添加依赖，依次点击：项目 -> 属性 -> 配置属性 -> 链接。

CEGUIRender源程序现在是从Ogre CVS下载代码中的一部分，一个示例工程，因此你必须将包含OgreGUIRenderer头文件和lib文件的文件夹路径添加到属性配置中。

另外，下面两个目录是必需的。尽管你在你的安装路径中的文件夹找不到。将其作为约定它就会起作用：

    添加Include文件夹: $(OGRE_HOME)/Samples/Common/CEGUIRenderer/include

    添加 Lib 路径:      $(OGRE_HOME)/Samples/Common/CEGUIRenderer/lib

[编辑]介绍

Crazy Eddies GUI系统是一个为不具备或缺乏用户界面制作功能的图形API或引擎提供免费用户界面支持的开源的库。这个使用c++编写的库是针对那些想制作优秀的游戏却又没有GUI（图形用户界面）子系统的专业游戏开发者。

[编辑]开始

首先，你需要架构（skeleton）代码来创建具有CEGUI组件的Ogre程序。 注意：如果你使用，你必须在之前添加#define NOMINMAX。

   //mem probs without this next one
  #include 
  #include 
  #include 
  #include 
  #include 
  #include 
  #include 
  #include "OgreCEGUIRenderer.h"
  #include "OgreCEGUIResourceProvider.h"
  //regular mem handler
  #include  
  #include "ExampleApplication.h"

  class GuiFrameListener : public ExampleFrameListener
  { 
  private:
    CEGUI::Renderer* mGUIRenderer;
  public:
    GuiFrameListener(RenderWindow* win, Camera* cam, CEGUI::Renderer* renderer)  : ExampleFrameListener(win, cam, false, false),
        mGUIRenderer(renderer)
    {
    }
  };

仅仅是一个不做任何动作的空帧监听器，但在你按下“Esc”之前会一直循环。

  class TutorialApplication : public ExampleApplication
  {
  private:
     CEGUI::OgreCEGUIRenderer* mGUIRenderer;
     CEGUI::System* mGUISystem;
     CEGUI::Window* mEditorGuiSheet;

这些是包含所有CEGUI数据的数据成员。我喜欢显式的调用CEGUI成员，一但你开始对Ogre成员添加调用，这将会明确的说明它们是来自CEGUI。

  public:
      TutorialApplication()  : mGUIRenderer(0),
          mGUISystem(0),
          mEditorGuiSheet(0)
      {
      }
      ~TutorialApplication() 
      {
         if(mEditorGuiSheet)
         {
             CEGUI::WindowManager::getSingleton().destroyWindow(mEditorGuiSheet);
         }
         if(mGUISystem)
         {
             delete mGUISystem;
             mGUISystem = 0;
         }
         if(mGUIRenderer)
         {
             delete mGUIRenderer;
             mGUIRenderer = 0;
         }
      }

下面是你可以设置任意Ogre场景的地方，使用你在前五章教程学到的方法。在这个Ogre场景中，你仍要为其添加一个独立的相机（camera）和视窗（viewport）。

  protected:
      void createScene(void)
      {
         // Set ambient light
         mSceneMgr->setAmbientLight(ColourValue(0.5, 0.5, 0.5));

下面是创建CEGUI日志的地方，一般都设置为Informative模式的。其具有四种模式：Standard, Errors, Informative 和 Insane。

          // Set up GUI system
         mGUIRenderer = new CEGUI::OgreCEGUIRenderer(mWindow,  
                 Ogre::RENDER_QUEUE_OVERLAY, false, 3000, mSceneMgr);
         mGUISystem = new CEGUI::System(mGUIRenderer);   
         CEGUI::Logger::getSingleton().setLoggingLevel(CEGUI::Informative);

创建一个新的CEGUI系统，使用“TaharezLook”来设置图（sheme）与鼠标指针，使用“BlueHighway-12”来设置字体。

           CEGUI::SchemeManager::getSingleton().loadScheme((CEGUI::utf8*)"TaharezLookSkin.scheme");
          mGUISystem->setDefaultMouseCursor((CEGUI::utf8*)"TaharezLook",(CEGUI::utf8*)"MouseArrow");
          CEGUI::MouseCursor::getSingleton().setImage("TaharezLook","MouseMoveCursor");
          mGUISystem->setDefaultFont((CEGUI::utf8*)"BlueHighway-12");
          mEditorGuiSheet=CEGUI::WindowManager::getSingleton().createWindow((CEGUI::utf8*)"DefaultWindow",
                                                                      (CEGUI::utf8*)"Sheet");  
          mGUISystem->setGUISheet(mEditorGuiSheet);
      }

调用自定义的帧监听器，这样我们可以在需要时访问“mGUIRender”。

  void createFrameListener(void)
     {
         mFrameListener = new GuiFrameListener(mWindow, mCamera, mGUIRenderer);
         mRoot->addFrameListener(mFrameListener);
     }
  };

下面是主函数也是程序的主循环，在本教程并不需要你修改这段代码。

   #if OGRE_PLATFORM == OGRE_PLATFORM_WIN32
  #define WIN32_LEAN_AND_MEAN
  #include "windows.h"
  INT WINAPI WinMain( HINSTANCE hInst, HINSTANCE, LPSTR strCmdLine, INT )
  #else
  int main(int argc, char **argv)
  #endif
  {
      // Create application object
      TutorialApplication app;
      try {
          app.go();
      } catch( Exception& e ) {
  #if OGRE_PLATFORM == OGRE_PLATFORM_WIN32 
          MessageBox( NULL, e.getFullDescription().c_str(), "An exception has occured!", MB_OK | MB_ICONERROR | MB_TASKMODAL);
  #else
          fprintf(stderr, "An exception has occured: %s/n",e.getFullDescription().c_str());
  #endif
      }
      return 0;
  }

完成后，编译程序能得到一个空的窗口。请关掉程序，继续我们的学习。 注意：如果实际操作中出现问题，你可以在应用程序所在文件夹中找到“CEGUI.log”文件分析查找错误

[编辑]CEGUI是如何工作的

本质上CEGUI是通过向窗口添加第二个场景，这个场景是在Ogre的基本渲染队列完成后才渲染的。这个场景仅仅是由一系列3D矩形对象组成的。（也就是两个多边形沿着其边压制到一起）。渲染矩阵是为消除矩形的突兀与歪斜而根据他们的位置建立的。使用这些矩形，添加材质和响应就构成了用户界面（GUI）。一般情况下这是很不错的，因为一个3D的用户界面将会自动的缩放其元素来适应屏幕，并且使用硬件材质过滤。其将会比C++标准的2D用户界面更加快速和漂亮。

  “So in one sentence: CEGUI renders a 2D gui using 3D methods and hardware so you don't have to.”——zeroskill

[编辑]添加退出按钮

首先，我们需要为应用程序添加下面的头文件。本例中是“Push Button”

   #include 

我们要在场景底部添加退出按钮。

   CEGUI::PushButton* quitButton = (CEGUI::PushButton*)CEGUI::WindowManager::getSingleton().createWindow
                                             ("TaharezLook/Button", (CEGUI::utf8*)"Quit");
   mEditorGuiSheet->addChildWindow(quitButton);
   quitButton->setPosition(CEGUI::Point(0.35f, 0.45f));
   quitButton->setSize(CEGUI::Size(0.3f, 0.1f));
   quitButton->setText("Quit");

完成后执行程序，一个漂亮的按钮将会出现在屏幕中。但请注意，程序此时仍然不做任何事情，因为我们并没有为其添加响应时间。

如果你编译时遇到了setPosition()和setSize()的调用错误： 'CEGUI::Window::setPosition' : cannot convert parameter 1 from 'CEGUI::Vector2' to 'const CEGUI::UVector2 &'

将setPosition()和setSize()所在行分别用下面的代码替换:

 quitButton->setPosition(CEGUI::UVector2(cegui_reldim(0.35f), cegui_reldim( 0.45f)) );
 quitButton->setSize(CEGUI::UVector2(cegui_reldim(0.35f), cegui_reldim( 0.1f)) );

[编辑]响应事件

将下面函数添加到TutorialApplication的public：中

  void setupEventHandlers(void)
  {
     CEGUI::WindowManager& wmgr = CEGUI::WindowManager::getSingleton();
     wmgr.getWindow((CEGUI::utf8*)"Quit")->subscribeEvent(CEGUI::PushButton::EventClicked, CEGUI::Event::Subscriber
                                       (&TutorialApplication::handleQuit, this));
  }
  bool handleQuit(const CEGUI::EventArgs& e)
  {
     static_cast(mFrameListener)->requestShutdown();
     return true;
  }

重写 GuiFrameListener 类来响应键盘和鼠标输入

  class GuiFrameListener : public ExampleFrameListener, public MouseMotionListener, public MouseListener
  {
  private:
     CEGUI::Renderer* mGUIRenderer;
     bool mShutdownRequested;
  public:
     // NB using buffered input
     GuiFrameListener(RenderWindow* win, Camera* cam, CEGUI::Renderer* renderer)  : ExampleFrameListener(win, cam, true, true), 
           mGUIRenderer(renderer),
           mShutdownRequested(false)
     {
         mEventProcessor->addMouseMotionListener(this);
         mEventProcessor->addMouseListener(this);
         mEventProcessor->addKeyListener(this);
     }
     // Tell the frame listener to exit at the end of the next frame
     void requestShutdown(void)
     {
         mShutdownRequested = true;
     }
     bool frameEnded(const FrameEvent& evt)
     {
         if (mShutdownRequested)
             return false;
         else
             return ExampleFrameListener::frameEnded(evt);
     }

     void mouseMoved (MouseEvent *e)
     {
         CEGUI::System::getSingleton().injectMouseMove(
                 e->getRelX() * mGUIRenderer->getWidth(), 
                 e->getRelY() * mGUIRenderer->getHeight());
         e->consume();
     }
     void mouseDragged (MouseEvent *e) 
     { 
         mouseMoved(e);
     }
     void mousePressed (MouseEvent *e)
     {
         CEGUI::System::getSingleton().injectMouseButtonDown(
                convertOgreButtonToCegui(e->getButtonID()));
         e->consume();
     }
     void mouseReleased (MouseEvent *e)
     {
         CEGUI::System::getSingleton().injectMouseButtonUp(
           convertOgreButtonToCegui(e->getButtonID()));
         e->consume();
     }

     void mouseClicked(MouseEvent* e) {}
     void mouseEntered(MouseEvent* e) {}
     void mouseExited(MouseEvent* e) {}
     void keyPressed(KeyEvent* e)
     {
         if(e->getKey() == KC_ESCAPE)
         {
             mShutdownRequested = true;
             e->consume();
             return;
         }
         CEGUI::System::getSingleton().injectKeyDown(e->getKey());
         CEGUI::System::getSingleton().injectChar(e->getKeyChar());
         e->consume();
     }
     void keyReleased(KeyEvent* e)
     {
         CEGUI::System::getSingleton().injectKeyUp(e->getKey());
         e->consume();
     }
     void keyClicked(KeyEvent* e) 
     {
         // Do nothing
         e->consume();
     }
  };

Ogre 1.4.0

如果你使用的是Ogre 1.4.0 你将会要使用OIS。在Ogre3d中使用OIS的更多细节,请参阅使用OIS并且再看一看基础教程5:

  class GuiFrameListener : public ExampleFrameListener, public OIS::MouseListener, public OIS::KeyListener
  {
  private:
    CEGUI::Renderer* mGUIRenderer;
    bool mShutdownRequested;
  public:
    // NB using buffered input
    GuiFrameListener(RenderWindow* win, Camera* cam, CEGUI::Renderer* renderer)  : ExampleFrameListener(win, cam, true, true), 
          mGUIRenderer(renderer),
          mShutdownRequested(false)
    {
         mMouse->setEventCallback( this );
         mKeyboard->setEventCallback( this );
    }
    // Tell the frame listener to exit at the end of the next frame
    void requestShutdown(void)
    {
        mShutdownRequested = true;
    }
    bool frameEnded(const FrameEvent& evt)
    {
        if (mShutdownRequested)
            return false;
       else
            return ExampleFrameListener::frameEnded(evt);
    }
     bool mouseMoved( const OIS::MouseEvent &e ) 
    {
        using namespace OIS;
        CEGUI::System::getSingleton().injectMouseMove(e.state.X.rel,e.state.Y.rel);
        return true;
  　}
    bool mousePressed (const OIS::MouseEvent &e, OIS::MouseButtonID id)
    {
        CEGUI::System::getSingleton().injectMouseButtonDown(convertOgreButtonToCegui(id));
        return true;
    }
 　　bool mouseReleased( const OIS::MouseEvent &e, OIS::MouseButtonID id )
    {
        CEGUI::System::getSingleton().injectMouseButtonUp(convertOgreButtonToCegui(id));
        return true;
    }
    bool keyPressed( const OIS::KeyEvent &e )
    {
        if(e.key == OIS::KC_ESCAPE)
        {
            mShutdownRequested = true;
            return true;
        }
        CEGUI::System::getSingleton().injectKeyDown(e.key);
        CEGUI::System::getSingleton().injectChar(e.text);
        return true;
    }
    bool keyReleased( const OIS::KeyEvent &e )
    {
        CEGUI::System::getSingleton().injectKeyUp(e.key);
        return true;
    }
  };

在include语句后GuiFrameListener声明前添加下面代码

  CEGUI::MouseButton convertOgreButtonToCegui(int buttonID)
  {
     switch (buttonID)
     {
     case MouseEvent::BUTTON0_MASK:
         return CEGUI::LeftButton;
     case MouseEvent::BUTTON1_MASK:
         return CEGUI::RightButton;
     case MouseEvent::BUTTON2_MASK:
         return CEGUI::MiddleButton;
     case MouseEvent::BUTTON3_MASK:
         return CEGUI::X1Button;
     default:
         return CEGUI::LeftButton;
     }
  }

Ogre 1.4.0

  CEGUI::MouseButton convertOgreButtonToCegui(int buttonID)
  {
      using namespace OIS; 
      switch (buttonID)
      {
      case OIS::MB_Left:
          return CEGUI::LeftButton;
      case OIS::MB_Right:
          return CEGUI::RightButton;
      case OIS::MB_Middle:
          return CEGUI::MiddleButton;
      default:
          return CEGUI::LeftButton;
      }
  }

将下面语句添加到创建场景方法（createscene）的末尾。

  setupEventHandlers();

现在你可以编译并执行程序了。实现效果是点击按钮后退出。

[编辑]加载设置（Layout）

CEGUI使用XML格式来加载图形用户界面样式设置。复制下面xml代码到记事本，并将其以“Tutoral Gui.xml”命名另存在“/media/gui”文件夹下。

Ogre 1.4.0

( 补充说明:在复制上面的.xml代码保存时,请手动删除行前的空格.否则会编译出错. editBy自由骑士笃志2008-04-25 )

现在将程序中下列代码段注释掉

  mEditorGuiSheet= CEGUI::WindowManager::getSingleton().createWindow((CEGUI::utf8*)"DefaultWindow", (CEGUI::utf8*)"Sheet"); 
  mGUISystem->setGUISheet(mEditorGuiSheet);
  CEGUI::PushButton* quitButton = (CEGUI::PushButton*)CEGUI::WindowManager::getSingleton().createWindow
                                          ("TaharezLook/Button",  (CEGUI::utf8*)"Quit");
  mEditorGuiSheet->addChildWindow(quitButton);
  quitButton->setPosition(CEGUI::Point(0.35f, 0.45f));
  quitButton->setSize(CEGUI::Size(0.3f, 0.1f));
  quitButton->setText("Quit");

在同样位置添加下列代码

  mEditorGuiSheet = CEGUI::WindowManager::getSingleton().loadWindowLayout((CEGUI::utf8*)"Tutorial Gui.xml");
  mGUISystem->setGUISheet(mEditorGuiSheet);
  CEGUI::PushButton* quitButton=(CEGUI::PushButton*)CEGUI:: 
          WindowManager::getSingleton().getWindow((CEGUI::utf8*)"Quit");

最后一行多余的，因为我们没有在之后使用指针，但是其说明了如何通过加载文件来进行访问。 注意:我们在创建xml文件时要根据实际窗口进行设计。

完成后编译并执行，程序在外观上并没有变化。

[编辑]尝试

•视线相交和选取Ogre mesh—当鼠标没有从GUI元素上移过。 •定义一个在GUI根菜单上的鼠标点击动作。当你鼠标点击一个不在根窗口中的GUI元素时，它将会响应你的鼠标点击。如果你的鼠标并没有从一个 GUI元素上滑过（也就是说当你的鼠标指针还在我们的3D场景中）则根窗口响应鼠标点击。 •将鼠标点击转换到世界坐标系和视线相交（（Camera::getCamera）到ViewportRay(mouseX, mouseY)）

  // Start a new ray query
   Ogre::Ray cameraRay = root::getSingleton( ).
     getCamera( )->getCameraToViewportRay( mouseX, mouseY );
   Ogre::RaySceneQuery *raySceneQuery = root::getSingleton( ).
     getSceneManager( )->createRayQuery( cameraRay );

   raySceneQuery->execute( );
   Ogre::RaySceneQueryResult result = raySceneQuery->getLastResults( );
   Ogre::MovableObject *closestObject = NULL;
   real closestDistance = LONG_MAX;
   std::list< Ogre::RaySceneQueryResultEntry >::iterator rayIterator;

   for ( rayIterator = result.begin( );
   rayIterator != result.end( );
   rayIterator++ ) {
   if ( ( *rayIterator ).movable->getUserObject( ) != NULL ) 
      {
        if ( ( *rayIterator ).distance < closestDistance ) 
           {
              closestObject = ( *rayIterator ).movable;
              closestDistance = ( *rayIterator ).distance;
           }
      }
   }

   // No object clicked
   if ( closestObject == NULL ) {   
     clickedObject = NULL;                                  ---- clickedObject is a class scoped variable
   } else {
     clickedObject = static_cast< object* >( closestObject->getUserObject( ) );
   }
   raySceneQuery->clearResults( );
   root::getSingleton( ).getSceneManager( )->destroyQuery( raySceneQuery )

[编辑]如何在两个GUI（用户界面）之间转换（使用透明度）

例如：如果你有一个登陆界面，在成功登陆后，进入了你的用户主界面。你将会想在这两个界面间切换。 •第一步，加载登陆用户界面。

    //First loading with this
   mGUIRenderer = new CEGUI::OgreCEGUIRenderer(mWindow, Ogre::RENDER_QUEUE_OVERLAY, false, 3000,mSceneMgr);
   mGUISystem = new CEGUI::System(mGUIRenderer);
   CEGUI::Logger::getSingleton().setLoggingLevel(CEGUI::Informative);
   CEGUI::SchemeManager::getSingleton().loadScheme((CEGUI::utf8*)"WindowsLook.scheme");
   mGUISystem->setDefaultMouseCursor((CEGUI::utf8*)"WindowsLook", (CEGUI::utf8*)"MouseArrow");
   CEGUI::Font *f = CEGUI::FontManager::getSingleton().createFont("Commonwealth-10.font");
   mGUISystem->setDefaultFont(f);
   //End "first loading with this"

   //Load a XML file
   mEditorGuiSheet = CEGUI::WindowManager::getSingleton().loadWindowLayout((CEGUI::utf8*)"Presentation.xml");
   mGUISystem->setGUISheet(mEditorGuiSheet);

•第二步，如果你想删除并重建一个GUI，你需要做到以下：

   if(mEditorGuiSheet)
      CEGUI::WindowManager::getSingleton().destroyWindow(mEditorGuiSheet);

•最后一步，加载其他的GUI

   mEditorGuiSheet = CEGUI::WindowManager::getSingleton().loadWindowLayout((CEGUI::utf8*)"Futura.xml");
   mGUISystem->setGUISheet(mEditorGuiSheet);

重做第二步和最后一步来加载其他GUI。

[编辑]结论

这个教程为你展示了在Ogre3D下使用CEGUI的一些基本方法，你可以感受下使用CUEGUI编程的乐趣:)