转载请注明出处:http://blog.csdn.net/pizzazhang
源码和可执行程序链接http://code.google.com/p/pizzaprojects/downloads/list
这次主要做了一个角色创建的小Demo。 用了火炬之光里面的图片资源(谁让这个游戏是用Ogre开发的呢,大爱)。
- 使用了 CEGUI的ImageButton
- 使用了文本窗口的一些特殊属性
- 使用了输入框输入英文(暂时不支持输入法)。
效果图:选择角色, 第一个头像图片是鼠标移动上去的效果。
第二个头像图片是鼠标点击后的效果
点击头像后,会有人物出现。人物会原地播放动画。 当在输入框中输入名字的时候, 会出现开始按钮。 如果删除掉名字, 开始按钮消失。
开始游戏后,载入另一个UI
这是选择另一个人物后载入的UI
整体动态效果图:
下面是实现过程。
先把代码贴上:
Main.cpp
#include "MyGUISystem.h"
#include "BaseApplication.h"
using namespace Ogre;
class Demo : public BaseApplication
{
enum CharaType
{
CHARA_A,
ChARA_B,
CHARA_C
};
public:
Demo()
:mCharaAnimState1(0), mCharaAnimState2(0)
{ }
virtual ~Demo()
{ }
bool frameRenderingQueued(const Ogre::FrameEvent& evt)
{
if(mShutDown)
return false;
//这里需要update否则Tooltip不会显示
MyGUISystem::getSingletonPtr()->update(evt.timeSinceLastFrame);
//这里需要addTime才能使动画动起来
if(mCharaAnimState1)
mCharaAnimState1->addTime(evt.timeSinceLastFrame);
if(mCharaAnimState2)
mCharaAnimState2->addTime(evt.timeSinceLastFrame);
return BaseApplication::frameRenderingQueued(evt);
}
void createScene()
{
mCharaNode = mSceneMgr->getRootSceneNode()->createChildSceneNode();
mCharaEntA = mSceneMgr->createEntity("sinbad", "sinbad.mesh");
mCharaEntB = mSceneMgr->createEntity("jaiqua", "jaiqua.mesh");
mCharaEntC = mSceneMgr->createEntity("ninja", "ninja.mesh");
createParticle();
setupGUI();
}
void setupGUI()
{
MyGUISystem::getSingletonPtr()->init();
//角色图片按钮的Imageset创建
CEGUI::ImagesetManager::getSingleton().create("chara_image.imageset");
//载入角色创建窗口
MyGUISystem::getSingletonPtr()->loadLayout("CharaCreateWindow");
MyGUISystem::getSingletonPtr()->getWindow("StartBtn")->hide();
//创建图片资源
MyGUISystem::createImageset("CharaIntroA", "chara_introa.tga");
MyGUISystem::createImageset("CharaIntroB", "chara_introb.tga");
MyGUISystem::createImageset("CharaIntroC", "chara_introc.tga");
//从XML载入动画
CEGUI::AnimationManager::getSingleton().loadAnimationsFromXML("Intro_Anim.xml");
createGUIEvent();
}
void createGUIEvent()
{
MyGUISystem::subscribeEvent("CharaImgBtnA", CEGUI::PushButton::EventClicked,
CEGUI::Event::Subscriber(&Demo::charaSelctedHandler, this));
MyGUISystem::subscribeEvent("CharaImgBtnB", CEGUI::PushButton::EventClicked,
CEGUI::Event::Subscriber(&Demo::charaSelctedHandler, this));
MyGUISystem::subscribeEvent("CharaImgBtnC", CEGUI::PushButton::EventClicked,
CEGUI::Event::Subscriber(&Demo::charaSelctedHandler, this));
//当输入框中的文本变化时触发的事件
MyGUISystem::subscribeEvent("NameInputbox", CEGUI::Editbox::EventTextChanged,
CEGUI::Event::Subscriber(&Demo::inputAcceptedHandler, this));
MyGUISystem::subscribeEvent("StartBtn", CEGUI::PushButton::EventClicked,
CEGUI::Event::Subscriber(&Demo::startHandler, this));
}
void createLight()
{
mSceneMgr->setAmbientLight(ColourValue(0.3, 0.3, 0.3));
mSceneMgr->createLight()->setPosition(20, 80, 50);
}
void createParticle()
{
//创建一个粒子系统
Ogre::ParticleSystem* particle = mSceneMgr->createParticleSystem("chara_particle", "chara_particle");
Ogre::SceneNode* particleNode = mSceneMgr->getRootSceneNode()->createChildSceneNode();
particleNode->attachObject(particle);
particleNode->setPosition(0, -25, 0);
}
void createChara(CharaType charaType)
{
//因为只用一个场景节点绑定个对象,所以这里要重置所有位置、方位和缩放参数
mCharaNode->detachAllObjects();
mCharaNode->resetOrientation();
mCharaNode->setPosition(0, 0, 0);
mCharaNode->setScale(1, 1, 1);
//根据角色类型创建角色,并设定参数使得正好在屏幕中间出现。大小适中。
switch(charaType)
{
case CHARA_A:
mCharaType = CHARA_A;
mCharaNode->attachObject(mCharaEntA);
mCharaNode->setScale(3, 3, 3);
//sinbad有上下2部分的Idle动画,所以这里分开使用
mCharaAnimState1 = mCharaEntA->getAnimationState("IdleBase");
mCharaAnimState2 = mCharaEntA->getAnimationState("IdleTop");
mCharaAnimState2->setLoop(true);
mCharaAnimState2->setEnabled(true);
break;
case ChARA_B:
mCharaType = ChARA_B;
mCharaNode->attachObject(mCharaEntB);
mCharaNode->setScale(2, 2, 2);
mCharaNode->setPosition(0, -15, 0);
mCharaNode->yaw(Ogre::Degree(180));
mCharaAnimState1 = mCharaEntB->getAnimationState("Turn");
mCharaAnimState2 = 0;
break;
case CHARA_C:
mCharaType = CHARA_C;
mCharaNode->attachObject(mCharaEntC);
mCharaNode->setScale(0.2, 0.2, 0.2);
mCharaNode->setPosition(0, -15, 0);
mCharaNode->yaw(Ogre::Degree(180));
mCharaAnimState1 = mCharaEntC->getAnimationState("Idle3");
mCharaAnimState2 = 0;
break;
}
if(mCharaAnimState1)
{
mCharaAnimState1->setLoop(true);
mCharaAnimState1->setEnabled(true);
}
}
private:
bool charaSelctedHandler(const CEGUI::EventArgs& e)
{
//根据参数e得到获得事件的窗口
const CEGUI::WindowEventArgs& windowArgs = static_cast<const CEGUI::WindowEventArgs&>(e);
CEGUI::String charaType = windowArgs.window->getName();
CEGUI::String charaDetail;
if(charaType == "CharaImgBtnA")
{
charaDetail = (CEGUI::utf8*)Ogre::UTFString(L"哦,朋友,我是厉害的Sinbad战士。我帅不?").asUTF8_c_str();
createChara(CHARA_A);
}
if(charaType == "CharaImgBtnB")
{
charaDetail = (CEGUI::utf8*)Ogre::UTFString(L"别看我是女人,我是很厉害的神箭手哦:)").asUTF8_c_str();
createChara(ChARA_B);
}
if(charaType == "CharaImgBtnC")
{
charaDetail = (CEGUI::utf8*)Ogre::UTFString(L"别看我是忍者,其实我是大法师,只是/n伪装成忍者= =!").asUTF8_c_str();
createChara(CHARA_C);
}
MyGUISystem::getSingletonPtr()->getWindow("CharaDetailText")->setText(charaDetail);
return true;
}
bool startHandler(const CEGUI::EventArgs& e)
{
//清理工作
mSceneMgr->clearScene();
//这里需要清除指针,否则退出会有错误
mCharaAnimState1 = mCharaAnimState2 = 0;
//场景开始,载入介绍GUI
MyGUISystem::getSingletonPtr()->loadLayout("IntroWindow");
switch(mCharaType)
{
case CHARA_A:
MyGUISystem::setProperty("IntroTopImg", "Image", "set:CharaIntroA image:full_image");
break;
case ChARA_B:
MyGUISystem::setProperty("IntroTopImg", "Image", "set:CharaIntroB image:full_image");
break;
case CHARA_C:
MyGUISystem::setProperty("IntroTopImg", "Image", "set:CharaIntroC image:full_image");
break;
}
//介绍文本
CEGUI::String str = (CEGUI::utf8*)Ogre::UTFString(L"很久很久以前......").asUTF8_c_str();
MyGUISystem::getSingletonPtr()->getWindow("IntroText")->setText(str);
//得到动画
CEGUI::Animation* anim = CEGUI::AnimationManager::getSingleton().getAnimation("IntroAnim");
//实例化动画
CEGUI::AnimationInstance* inst = CEGUI::AnimationManager::getSingleton().instantiateAnimation(anim);
//动画的应用窗口
inst->setTargetWindow(MyGUISystem::getSingletonPtr()->getWindow("IntroText"));
//动画开始
inst->start();
return true;
}
bool inputAcceptedHandler(const CEGUI::EventArgs& e)
{
mCharaName = MyGUISystem::getSingletonPtr()->getWindow("NameInputbox")->getText().c_str();
if(mCharaName != "")
{
//如果输入框有文本的话,显示开始按钮
MyGUISystem::getSingletonPtr()->getWindow("StartBtn")->show();
}else
{
//否则隐藏按钮
MyGUISystem::getSingletonPtr()->getWindow("StartBtn")->hide();
}
return true;
}
bool mousePressed( const OIS::MouseEvent &arg, OIS::MouseButtonID id )
{
MyGUISystem::getSingletonPtr()->injectMouseButtonDown(MyGUISystem::convertButton(id));
return true;
}
bool mouseReleased( const OIS::MouseEvent &arg, OIS::MouseButtonID id )
{
MyGUISystem::getSingletonPtr()->injectMouseButtonUp(MyGUISystem::convertButton(id));
return true;
}
bool mouseMoved( const OIS::MouseEvent &arg )
{
MyGUISystem::getSingletonPtr()->injectMouseMove(arg.state.X.rel, arg.state.Y.rel);
return true;
}
//这里需要注入keychar和键盘事件才能在Editbox中输入字符(不接受输入法)
bool keyPressed( const OIS::KeyEvent &arg )
{
CEGUI::System::getSingleton().injectKeyDown(arg.key);
CEGUI::System::getSingleton().injectChar(arg.text);
if(arg.key == OIS::KC_ESCAPE)
mShutDown = true;
return true;
}
bool keyReleased( const OIS::KeyEvent &arg )
{
CEGUI::System::getSingleton().injectKeyUp(arg.key);
return true;
}
private:
Ogre::String mCharaName; //角色名字
Ogre::Entity* mCharaEntA; //角色A
Ogre::Entity* mCharaEntB; //角色B
Ogre::Entity* mCharaEntC; //角色C
Ogre::SceneNode* mCharaNode; //角色节点
Ogre::AnimationState* mCharaAnimState1; //角色动画状态
Ogre::AnimationState* mCharaAnimState2; //备用角色动画状态
CharaType mCharaType; //保存选择的角色类型
};
INT WINAPI WinMain(HINSTANCE, HINSTANCE, LPSTR, INT)
{
Demo demo;
try
{
demo.go();
}
catch(Ogre::Exception& e)
{
MessageBox(0, e.getFullDescription().c_str(), "Exception", MB_OK);
}
}
代码没有什么特别的解释。 这个Demo的实现主要是CEGUI的ImageButton的使用。
首先, 使用官方的Imageset编辑器对一张图片进行编辑,实际操作也就是把一张图片进行切片。 每个部分都在一个文件中定义一个UV坐标。这个Demo里使用的Imageset文件如下:
<?xml version="1.0" encoding="UTF-8"?>
<Imageset Name="CharaImageset" Imagefile="./logo.tga" >
<Image Name="Logo" XPos="208" YPos="0" Width="608" Height="146" />
<Image Name="HoverA" XPos="0" YPos="553" Width="128" Height="128" />
<Image Name="HoverB" XPos="129" YPos="553" Width="128" Height="128" />
<Image Name="HoverC" XPos="256" YPos="552" Width="128" Height="128" />
<Image Name="NormalA" XPos="0" YPos="424" Width="128" Height="128" />
<Image Name="NormalB" XPos="129" YPos="424" Width="128" Height="128" />
<Image Name="NormalC" XPos="257" YPos="425" Width="128" Height="128" />
<Image Name="PushedA" XPos="1" YPos="682" Width="128" Height="128" />
<Image Name="PushedB" XPos="129" YPos="682" Width="128" Height="128" />
<Image Name="PushedC" XPos="256" YPos="681" Width="128" Height="128" />
<Image Name="HoverStart" XPos="255" YPos="255" Width="125" Height="50" />
<Image Name="NormalStart" XPos="252" YPos="255" Width="125" Height="50" />
<Image Name="PushedStart" XPos="252" YPos="255" Width="125" Height="50" />
<Image Name="Intro_Bottom" XPos="2" YPos="334" Width="1006" Height="90" />
</Imageset>
接下来就是在Layout文件中使用这个Imageset的各个图片资源了。
火炬之光里的创建角色的角色按钮使用的是RadioButton, 由于ImageButton在游戏里用的最多,所以我打算用ImageButton实现角色选择的按钮。
下面展示Layout文件中某一个ImageButton的使用:
<Window Type="TaharezLook/ImageButton" Name="CharaImgBtnA" >
<Property Name="Font" Value="SimHei-14" />
<Property Name="Tooltip" Value="杩欐槸瑙掕壊A" />
<Property Name="HoverImage" Value="set:CharaImageset image:HoverA" />
<Property Name="NormalImage" Value="set:CharaImageset image:NormalA" />
<Property Name="PushedImage" Value="set:CharaImageset image:PushedA" />
<Property Name="UnifiedAreaRect" Value="{{0.14953,0},{0.0922273,0},{0.252194,0},{0.289911,0}}" />
<Window Type="TaharezLook/StaticText" Name="CharaTextA" >
<Property Name="Font" Value="SimHei-14" />
<Property Name="Text" Value="瑙掕壊A" />
<Property Name="HorzExtent" Value="58" />
<Property Name="VertExtent" Value="16.25" />
<Property Name="TextColours" Value="tl:FF0000FF tr:FF0000FF bl:FF0000FF br:FF0000FF" />
<Property Name="FrameEnabled" Value="False" />
<Property Name="HorzFormatting" Value="HorzCentred" />
<Property Name="UnifiedAreaRect" Value="{{0.00228956,0},{-0.0175811,0},{1.00038,0},{0.97344,0}}" />
<Property Name="BackgroundEnabled" Value="False" />
<Property Name="MousePassThroughEnabled" Value="True" />
</Window>
</Window>
先定义一个ImageButton, 然后设置它的属性:
HoverImage: 鼠标移到上面的时候显示的图片
NormalImage: 平常时候显示的图片
PushedImage: 鼠标点击后显示的图片
Tooltip是鼠标停留在这个控件上一段时间后出现的提示文本。
以这个ImageButton为父窗口,建立一个StaticText, 这个文本窗口我们是用来显示按钮的文字的。由于ImageButton不能直接定义文本,要么通过图片直接绘制文本,要么在它上面建立一个文本窗口。
文本窗口既然在ImageButton上面,那么就需要对它设置一些特殊属性,否则我们点击ImageButton就得不到响应。
首先去除文本窗口的 Background和Frame, 就是背景和边框。
然后要使底下的ImageButton响应操作,需要设置上面的窗口MousePassThroughEnabled属性为True。 这个属性会忽略设置窗口的鼠标操作而传递到下面的控件。
在Main.cpp代码中, 使用EventTextChanged来响应文本的输入变化。 如果文本框里的文本变化了(即玩家输入了名字)那么开始按钮就会出现。 对Window调用show()和hide()就可以控制窗口的显示与否。
当选择了一个角色后,场景中间会建立一个人物实体。 可以只用一个场景节点来实现角色的切换的效果。只有当一个实体依附(attach)在一个节点时,场景中才会绘制出这个实体。所以我们建立3个人物的实体, 需要显示某个的时候Attach就行。
最后把这个例子中所需要的资源(layout、 imageset、animationXML文件以及材质、纹理图片等)放入Ogre可以定位的路径下。 比如就放在exe的目录中, 然后在resource配置中在一个资源组中添加 FileSystem=./
希望本文对你有所帮助。