PDA

View Full Version : My Immediate Mode GUI (IMGUI) class for Jarrod's HGE


paul_nicholls
29-09-2010, 06:30 AM
Hi all,
I have been working on a GUI system that I can use in The Probe (or other Hadron Game Engine programs)...

Here is a screenshot of the currently working GUI that I am using to control the audio options in The Probe :)

http://img405.imageshack.us/img405/8278/screenshotalx.th.png (http://img405.imageshack.us/i/screenshotalx.png/)

I have been chopping out GUI elements (elements inside the window) from a controls VGScene demo I downloaded here:

http://ksdev.com/vgscene/download.html

I got the elements for the window itself (after some editing) from this project:

http://www.sulaco.co.za/opengl_project_glWindows.htm

I used my image packer program to jam all the elements together and am reading them into my GUI class.

http://img20.imageshack.us/img20/4664/guipacked.png (http://img20.imageshack.us/i/guipacked.png/)

I have based my GUI class from a Immediate Mode GUI tutorial here (and converting it to Pascal obviously):

http://sol.gfxile.net/imgui/index.html

When it is finished, I will probably share the GUI code (hey, perhaps it will be included in Jarrod's HGE itself) :)

Here is how the code currently looks to create the GUI you see in the above screenshot:


procedure TTheProbe.RenderAudioOptions;
var
x,y: Integer;
GuiFont: Integer;
ValueF: Single;
begin
GuiFont := FGUIFont;

FGUI.Prepare;
FGUI.SetFontColor(255,255,255,255);
FGUI.SetBackgroundColor(64,64,64,255);
FGUI.StartWindow(100,100,270,218,'Audio Options',App_SysFont);
x := 8;
y := 16;

// music options
if FGUI.DoCheckBox(FMusicEnabled,x,y,'music enabled',GuiFont) then
begin
if not FMusicEnabled then
begin
FMusicVolume := 0;
Audio_SetMusicVol(FMusicVolume)
end;
end;

y := 44;
FGUI.DoLabel(x,y,'music volume',GuiFont,White);

y := 72;
ValueF := FMusicVolume;
if FGUI.DoHorizontalTrackBar(x,
y,
255,
0,1,
ValueF) then
begin
if (ValueF > 0) and not FMusicEnabled then
FMusicEnabled := True;

FMusicVolume := ValueF;
Audio_SetMusicVol(FMusicVolume);
end;

y := 124;
// sfx options
if FGUI.DoCheckBox(FSfxEnabled,x,y,'sfx enabled',GuiFont) then
begin
if not FSfxEnabled then
FSfxVolume := 0;
end;

y := 152;
FGUI.DoLabel(x,y,'sfx volume',GuiFont,White);

y := 180;
ValueF := FSfxVolume;
if FGUI.DoHorizontalTrackBar(x,
y,
255,
0,1,
ValueF) then
begin
if (ValueF > 0) and not FSfxEnabled then
FSfxEnabled := True;

FSfxVolume := ValueF;
end;

FGUI.EndWindow;
FGUI.Finish;
end;


cheers,
Paul
paul_nicholls
30-09-2010, 05:22 AM
Bump ;)

cheers,
Paul
chronozphere
30-09-2010, 08:33 AM
That looks pretty easy to use. Nice work. :)

I probably won't use it since I'm not using HGE. Also, I'd encourage you to use VBO's instead. They are the future. ;)
paul_nicholls
30-09-2010, 11:04 AM
That looks pretty easy to use. Nice work. :)

I probably won't use it since I'm not using HGE. Also, I'd encourage you to use VBO's instead. They are the future. ;)

Thanks :)

Well, as I'm using HGE (uses DirectX behind the scenes) for The Probe, I will be using the HGE sprites, etc. for my GUI until things change :)

cheers,
Paul
WILL
30-09-2010, 05:11 PM
GUI system is lookin' nice Paul. :)
paul_nicholls
30-09-2010, 08:30 PM
Thanks WILL :)

cheers,
Paul
virtual
01-10-2010, 05:13 PM
nice graphics , looks like FL Studio ,lol
phibermon
02-10-2010, 12:35 PM
Nice work Paul, looking nice! although I've seen the image used for the window before somewhere
Nitrogen
02-10-2010, 04:48 PM
nice graphics , looks like FL Studio ,lol

Hehe, thats because it is from an early version of FL Studio! I'm pretty sure either Jan Horn or I did that window skin a very very long time ago :P

You may want to change your window borders if you use it for anything commercial as many people will recognise it.

What are you using for your font rendering - it looks a bit blurry? You can always try Font Studio (http://labs.delphituts.com/FontStudio421.zip) if you need a good bitmap font generator.
farcodev
02-10-2010, 09:39 PM
Cool work, cool addition to HGE :)
paul_nicholls
02-10-2010, 10:41 PM
Hehe, thats because it is from an early version of FL Studio! I'm pretty sure either Jan Horn or I did that window skin a very very long time ago :P

You may want to change your window borders if you use it for anything commercial as many people will recognise it.

What are you using for your font rendering - it looks a bit blurry? You can always try Font Studio (http://labs.delphituts.com/FontStudio421.zip) if you need a good bitmap font generator.

Hi Nitrogen,
I got the window borders from here:

http://www.sulaco.co.za/opengl_project_glWindows.htm

Isn't that public domain?

LOL! I HAVE used font studio as the font generator and I used this font:

http://www.dafont.com/blade-runner.font

The same font for the rest of my game, but at 8 point size...this seems to make it blurry as you noted though.

I have since gone to the System font built into HGE instead for the GUI font.

http://img718.imageshack.us/img718/7563/gamescreenshot.th.png (http://img718.imageshack.us/i/gamescreenshot.png/)

cheers,
Paul
cheers,
Paul
Nitrogen
03-10-2010, 05:39 PM
Hi Nitrogen,
I got the window borders from here:

http://www.sulaco.co.za/opengl_project_glWindows.htm

Isn't that public domain?



The *code* is public domain yes, but the graphics are ripped from FL Studio. I used to know the creator of sulaco.co.za before he passed away and I remember that project as one that I had inspired him to create, and I think he used the same graphics assets that I had - Which I had ripped from FLStudio :)

Anyway, as you can see it's quite recognisable by a lot of people, so probably a good idea to find something else to use in it's place...




LOL! I HAVE used font studio as the font generator and I used this font:

http://www.dafont.com/blade-runner.font

The same font for the rest of my game, but at 8 point size...this seems to make it blurry as you noted though.

I have since gone to the System font built into HGE instead for the GUI font.

http://img718.imageshack.us/img718/7563/gamescreenshot.th.png (http://img718.imageshack.us/i/gamescreenshot.png/)

cheers,
Paul
cheers,
Paul

Actually the Bladerunner font seems cleaner to me, but I wouldnt use it at 8pt size.
The system font seems like it's not aligned to the pixel boundaries: so for example, it's almost like you are drawing the font at X: 10.5 and Y:11.5, the crisp clean lines will blur with half the line being in one row of pixels and half into the row below. Maybe try another Font Studio font thats readable at 8pnt
Nitrogen
03-10-2010, 05:43 PM
Okay, so I like messing around in photoshop, so I decided to build you a GUI skin that looks similar and has the same dimensions - and is completely license free of course.

Here it is:

GUISkin.png (http://labs.delphituts.com/guiskin/GUISkin.png)

And here is the PSD photoshop file if you want to tweak it:

GUISkin.psd (http://labs.delphituts.com/guiskin/GUISkin.psd)
paul_nicholls
03-10-2010, 10:30 PM
Okay, so I like messing around in photoshop, so I decided to build you a GUI skin that looks similar and has the same dimensions - and is completely license free of course.

Here it is:

GUISkin.png (http://labs.delphituts.com/guiskin/GUISkin.png)

And here is the PSD photoshop file if you want to tweak it:

GUISkin.psd (http://labs.delphituts.com/guiskin/GUISkin.psd)

Thanks mate :)

One question, do you think it would be ok if I changed the window part to use your new graphics, but keep my widget graphics since I didn't get those from FL studio?

cheers,
Paul
WILL
03-10-2010, 10:54 PM
Hey your game is really starting to look polished. :)
paul_nicholls
03-10-2010, 11:08 PM
Hey your game is really starting to look polished. :)

Thanks for the kind words WILL :)

Yeah, I am pleased with how the interface is turning out - very retro 80's look (as one friend said looking at it), which is what I was going for LOL

The good thing is I can now control all the options (except for controls ATM) using my menus and GUI input - I just have to add keyboard support for the GUI too to make it faster to use :)

cheers,
Paul
Nitrogen
04-10-2010, 12:23 AM
Thanks mate :)

One question, do you think it would be ok if I changed the window part to use your new graphics, but keep my widget graphics since I didn't get those from FL studio?

cheers,
Paul

Certainly... The window part was the only thing from FLStudio, so the rest is fine... Just thought I'd make some widgets that match the theme of the window.
paul_nicholls
04-10-2010, 12:33 AM
Certainly... The window part was the only thing from FLStudio, so the rest is fine... Just thought I'd make some widgets that match the theme of the window.

Nice work on the new graphics, but I think I will keep the widget graphics for now - I have grown rather font of them ;)

PS. Long live Font Studio!

cheers,
Paul
paul_nicholls
06-10-2010, 02:00 AM
I have now made use of Nitrogen's new window graphics...thanks mate!!

Here is a screenshot of the new window look :)

http://img826.imageshack.us/img826/2074/guiscreenshot.th.png (http://img826.imageshack.us/i/guiscreenshot.png/)

I have also added keyboard control to the GUI so you can control both the menus and GUI elements using the keyboard...yay!

You can tab/shift+tab or cursor up/down to move between the widgets, space clicks radiobuttons/check boxes, and cursor left/right decreases/increases the current value for horizontal trackbars.

There is a focus 'rect' around the currently selected control so you know which one is active.

cheers,
Paul