I think that theres lots of questions on how to make a GUI for a basic game, so i decided to post here some useful hints on how to make one with simple rectangles, textures and some cool stuff like modifying the color based on amount of health, decrease/increase bar values with some kind of interpolation and add icons to a spell or ability bar
class definition (put it in a .h)
Code: Select all
class CGUIGame {
private:
video::IVideoDriver* driver;
int x1Bar, y1Bar, x2Bar, y2Bar;
int maxHealthBarValue; //bar size
double deltaHealthBar; //interpolation
double healthBarValue; //current bar value
int maxManaBarValue;
double deltaManaBar;
double manaBarValue;
video::ITexture* GUITextures[10];
public:
CGUIGame(video::IVideoDriver* videoDriver, int x1, int y1, int x2, int y2, int maxHealthValue, int maxManaValue); //constructor
~CGUIGame(); //destructor :O
void renderGUIGame(); //render the GUI, must be called AFTER the 3D draw, or it wont show
void setHealthBarValue(int healthValue); //change bar values
void setManaBarValue(int manaValue);
};
Code: Select all
CGUIGame::CGUIGame(video::IVideoDriver* videoDriver, int x1, int y1, int x2, int y2, int maxHealthValue, int maxManaValue){
//class constructor
driver = videoDriver;
//health and mana bars size
x1Bar = x1;
y1Bar = y1;
x2Bar = x2;
y2Bar = y2;
//max bar values
maxHealthBarValue = maxHealthValue;
maxManaBarValue = maxManaValue;
//current bar values
healthBarValue = maxHealthValue;
manaBarValue = maxManaValue;
deltaHealthBar = healthBarValue;
deltaManaBar = manaBarValue;
//load textures
//load some texture for spellbar and make it transparent with ColorKey 0 (black) and put it into a texture array
GUITextures[0] = driver->getTexture("../Content/Textures/spellbar.bmp");
driver->makeColorKeyTexture(GUITextures[0], video::SColor(0,0,0,0));
//same for the status bar (health and mana)
GUITextures[1] = driver->getTexture("../Content/Textures/statusbar.bmp");
driver->makeColorKeyTexture(GUITextures[1], video::SColor(0,0,0,0));
//load some icons for the spellbar
GUITextures[5] = driver->getTexture("../Content/Textures/icon_firebolt.bmp");
GUITextures[6] = driver->getTexture("../Content/Textures/icon_fireblaze.bmp");
GUITextures[7] = driver->getTexture("../Content/Textures/icon_firenova.bmp");
}
Code: Select all
void CGUIGame::renderGUIGame(){
float delta; //status bar variation
core::dimension2d<s32> screenSize = driver->getScreenSize();
double x=17; //spell bar position
double y=screenSize.Height*0.85;;
double iconSpace = 30;
core::position2d<s32> iconPos = core::position2d<s32>(x+50, y+23);
//here is some cool stuff, it changes the bar value from X to Y smoothly
if ((int)deltaHealthBar != (int)healthBarValue){
delta = healthBarValue - deltaHealthBar;
if (delta > 0)
healthBarValue -= 0.2;
if (delta < 0)
healthBarValue += 0.2;
}
//same for mana
if ((int)deltaManaBar != (int)manaBarValue){
delta = manaBarValue - deltaManaBar;
if (delta > 0)
manaBarValue -= 0.2;
if (delta < 0)
manaBarValue += 0.2;
}
//another cool stuff, it draws the health bar according to its value (green for high, decreasing to yellow till red), and some others rectangles for a cool look
driver->draw2DImage(GUITextures[1], core::position2d<s32>(x1Bar-50, y1Bar-29), core::rect<s32>(0,0,605,94), 0, video::SColor(255,255,255,255), true);
driver->draw2DRectangle(video::SColor(255, 100, 100, 100), core::rect<s32>(x1Bar, y1Bar, (maxHealthBarValue*5)+x2Bar, y2Bar));
driver->draw2DRectangle(video::SColor(255, 125, 125, 125), core::rect<s32>(x1Bar+1, y1Bar+1, maxHealthBarValue*5+x2Bar-1, y2Bar-1));
driver->draw2DRectangle(video::SColor(255, 150, 150, 150), core::rect<s32>(x1Bar+3, y1Bar+3, maxHealthBarValue*5+x2Bar-3, y2Bar-3));
driver->draw2DRectangle(core::rect<s32>(x1Bar+3, y1Bar+3, healthBarValue*5+x2Bar-3, y2Bar-3),
video::SColor(255, 255-healthBarValue*2.55, healthBarValue*2.55, 0),
video::SColor(255, 255-healthBarValue*2.55, healthBarValue*2.55, 0),
video::SColor(255, 255-healthBarValue*2.55, healthBarValue*2.55-150, 0),
video::SColor(255, 255-healthBarValue*2.55, healthBarValue*2.55-150, 0));
//mana bar
driver->draw2DRectangle(video::SColor(255, 100, 100, 100), core::rect<s32>(x1Bar, y1Bar+20, maxManaBarValue*5+x2Bar, y2Bar+20));
driver->draw2DRectangle(video::SColor(255, 125, 125, 125), core::rect<s32>(x1Bar+1, y1Bar+21, maxManaBarValue*5+x2Bar-1, y2Bar+19));
driver->draw2DRectangle(video::SColor(255, 150, 150, 150), core::rect<s32>(x1Bar+3, y1Bar+23, maxManaBarValue*5+x2Bar-3, y2Bar+17));
driver->draw2DRectangle(core::rect<s32>(x1Bar+3, y1Bar+23, manaBarValue*5+x2Bar-3, y2Bar+17),
video::SColor(255, 100, 100, 200),
video::SColor(255, 100, 100, 200),
video::SColor(255, 0, 0, 100),
video::SColor(255, 0, 0, 100));
//draw the spells bar and the icons on it according to the iconSpace
driver->draw2DImage(GUITextures[0], core::position2d<s32>(x+3, y), core::rect<s32>(0,0,456,73), 0, video::SColor(255,255,255,255), true);
for (int i=5; i<=7; i++){
driver->draw2DImage(GUITextures[i], iconPos);
iconPos.X += iconSpace;
}
}
Code: Select all
void CGUIGame::setHealthBarValue(int healthValue){
deltaHealthBar = healthValue;
}
void CGUIGame::setManaBarValue(int manaValue){
deltaManaBar = manaValue;
}
Code: Select all
gameGUI = new CGUIGame(driver, 52, 37, 58, 53, 100, 100);
...
while(device->run()){
...
driver->beginScene(true, true, 0 );
smgr->drawAll(); //IMPORTANT: CALL AFTER SceneManager drawAll;
gameGUI->renderGUIGame();
...
driver->endScene();
}
or http://img136.imageshack.us/my.php?image=guiqu4.jpg
and you can find the textures at http://www.inf.ufrgs.br/~efmiglioranza/ ... xtures.zip
hope you enjoy