Entry posted by Afke ·
4,487 views
A couple of days I've worked on a GUI solution, and I made good progress. I tried to make as simple solution that completely fits the style of the engine.
Of course I have not finished everything I planned but I already have a version that works.
The basic idea is to be modular and variable depending on size of screen, it must look the same on all screen resolutions, and everything happens automatically in the background.
This is how everything works:
CreateGui();
addFont("fonts/ArialBlack10",0.8);
addFont("fonts/ArialBlack12",1);
addFont("fonts/ArialBlack14",1.1);
addFont("fonts/ArialBlack16",1.2);
First we create a GUI screen that is 800x600 by default, of course it can be changed and add Fonts which we will use in the gui .
addFont(str name ,ftl scaling factor)
we adding fonts sizes as much as we need and scaling factor that is, in fact, Screensize (1024/768) / GuiSize (800/600) = 1.28 so engine will calculate size of fonts for this situation which will be "fonts/ArialBlack16". because 1.28 > 1.2 if we set 640x 480 factor will be 0.8 engine will chose "fonts/ArialBlack10".
int id=CreateButton("btn1",Vec2(200,50),Vec4(1,0,0,0.5),Vec4(1,1,0,0.5),Vec4(1,1,1,0.9));
AddText(id,"Create Box",Vec4(1,1,1,1));
SetGuiPosition(id,Vec2(200,50));
int id1=CreateButton("btn2","data/ui/btn.dds","data/ui/btn1.dds","data/ui/btn2.dds",Vec4(1,1,1,0.9));
AddText(id1,"Rotate Box",Vec4(1,1,1,1));
SetGuiSize(id1,Vec2(200,50));
SetGuiPosition(id1,Vec2(200,150));
CreateButton(str name,TVec2 size,TVec4 color1,TVec4 color2,TVec4 color3)
this will add button with "name" ,size, defoult color , Mouse Over color ,click color.
names we will use later on for events
CreateButton(str name,img1,img2,img3,color)
this is image button with name default img ,Mouse over img and Click img
CreateButton function returns id of element which we use for adding text on or for setting new size or position
AddText(id,"Create Box",Vec4(1,1,1,1));
simple add text to element with "id" ,text and color
SetGuiPosition(id,Vec2(200,50));
seting position
CreateImage("img","data/ui/splash1.dds",Vec4(1,1,1,1));
CreateBorderRect("rect1",Vec2(10,10),Vec2(780,580),Vec4(1,0,0,0.5));
creating static img gui element etc.
Every GUI element has a name that is used as the event name.
void onUpdateGuiEvent(str eventName)
{
if(eventName=="btn1")
{
if(!mesh)mesh=CreateCube();
PositionEntity(mesh,Vec3(0,0,0));
}else if(guiElement=="btn2"){
if(mesh)RotateEntity(mesh,Vec3(0,45,0));
}
else if(guiElement=="btn3"){
if(mesh)RotateEntity(mesh,Vec3(0,0,0));
}
}
onUpdateGuiEvent() function will be called every time we click something.
Function receive eventName which is the name of the Gui element and then do something 
Later on I will upload video
I forgot in main loop we have to add updateGui () and renderGui () functions
I have plans for adding save load functionality and editor for visual editing and tons of GUI elements
18 Comments
Recommended Comments