PDA

View Full Version : Sleek GUI screenshot!



HopeDagger
07-05-2005, 03:58 AM
Hey, it's me again, still progressing smoothly on my to-be-named online game. :)

Again, no actual playable content. I spent today hammering away at the GUI system for the game, and needless to say, I think it looks awesome. However, getting input from others is great too!

Here's a screenshot displaying the general features of the GUI. Windows, buttons, labels and fully customizable colour schemes which are consistant throughout the components.

I'd like to hear any suggestions or feedback about making it look better, or ideas for additional functionality. Thanks!

(Yes, same old map :P)

http://www.cyclologic.com/ftp/hopedagger/gui3.jpg

For those of you curious, I'm using OpenGL with Delphi via the awesome dglOpenGL header translation.

cragwolf
07-05-2005, 04:08 AM
That's awesome. Are you using textures for the GUI or just smart use of colours. I'm thinking of using just colours and lines. I will probably start work on my GUI next week when I get a few days off.

Traveler
07-05-2005, 10:05 AM
Indeed, very nice!

Perhaps a dropshadow to make it stand out a bit more. That would be nice to see. Also does the button actually behaves like a button? ie does it have hover/pressed/unpressed states?

Keep it up!

WILL
07-05-2005, 10:38 AM
Hmm... how about trying some 'background' tinting for special menus like Pause screens or the Main Menu... basically when the game action takes a break.

HopeDagger
07-05-2005, 02:20 PM
That's awesome. Are you using textures for the GUI or just smart use of colours. I'm thinking of using just colours and lines.

Yep! I'm thinking of adding in a blended 'grid' texture for some added feel to it.


Perhaps a dropshadow to make it stand out a bit more. That would be nice to see. Also does the button actually behaves like a button? ie does it have hover/pressed/unpressed states?

What do you mean by a dropshadow, exactly? Like a dark blended shape of the box behind it? (My terminology is weak, hehe) As for the button, yes it does have states. Currently only mouse-over and on-click states, though, since the windowing usage will be fairly simplistic and not require that level of complexity.


Hmm... how about trying some 'background' tinting for special menus like Pause screens or the Main Menu... basically when the game action takes a break.

Not quite sure what you mean by background tinting? Could you provide a little screenshot or pseudo-code or something?

Thanks a lot for the comments/ideas! :)

savage
07-05-2005, 02:45 PM
I will probably start work on my GUI next week when I get a few days off.

You probably want to write you own, but keep in mind that JEDI-SDL has an excellent GUI already written for it by Igor - http://sdlcontrols.sourceforge.net/ and screen shots available @ http://sdlcontrols.sourceforge.net/scrshot.htm and he even has a form designer.


Not quite sure what you mean by background tinting?

I think what WILL means is like a fade out effect when a dialog needs the user's full attention. So the game would pause and fade out, while the dialog has focus, then once the user deals with the dialog, it would return the game back to it's normal colour.
When I worked on Hero X, as we didn't want to do anything overly fancy/CPU intensive, what I decided to do was to use a colour keyed pattern to get the faded out effect. I would pause the game, blit the pattern across the width and height of the screen and then display the dialog or options screen. When the user presses escape, the game is un -paused and the natural game loop takes care of drawing the screen the way it should look.

Anyway, just my 2 QBert's worth.

WILL
07-05-2005, 06:14 PM
Hmm... how about trying some 'background' tinting for special menus like Pause screens or the Main Menu... basically when the game action takes a break.

Not quite sure what you mean by background tinting? Could you provide a little screenshot or pseudo-code or something?

Oh an example is easy. Change the Hue and Saturation of the screen 'behind' the menu windows. What will it look like? Well go to shutdown Windows XP and watch your desktop change tint. There is probably the easiest example I can give you. :)

Oh and yeah... the reasoning is basically what Dom said. ;)

tux
07-05-2005, 06:58 PM
why must everything have gradients or bitmap backgrounds? i like the gui how it is, looks great. nice and simple :)

are you planning on adding list boxes (with multiple columns) edit boxes and things?

HopeDagger
08-05-2005, 12:24 AM
are you planning on adding list boxes (with multiple columns) edit boxes and things?

The GUI isn't really going to be a significant focus of the game (action, yaay!), so I'm going to try to avoid many of the more intristic components. The only other two I'm planning are listboxes and inputboxes.

@Savage and WILL: Ah, I understand now. Such an effect wouldn't be difficult to do, but I'm somewhat in agreeance with tux; it's a fairly clean and simplistic interface, and I'm afraid of shattering that. ;) Hehe, that aside, chances are I still will experiment and try something similar out.

WILL
08-05-2005, 01:20 AM
Simpliest way to do any kind of effects or things for the menus would be to use a buffer for the actualy 'game screen' and manipulate that. And in the case of SDL, it's rather easy. In fact one function if I recall... However depending on the effect it may slow stuff down, but if the action is paused this isn't such a huge deal... just depends on what you have in mind to do.

Perhaps a much simplier effect along the same lines would be to just draw a checkerboard image(every other pixel is black or transparent to form a checkerboard) and draw that over the game screen behind the menus to bring the focus of the player's eyes up to the menus.

savage
08-05-2005, 07:13 AM
checkerboard image(every other pixel is black or transparent to form a checkerboard)

"checkerboard" is the word I was missing from my earlier description about the pattern we were using in Hero X.

cragwolf
08-05-2005, 10:00 AM
You probably want to write you own, but keep in mind that JEDI-SDL has an excellent GUI already written for it by Igor

Definitely an excellent GUI library. But you're right, I prefer to roll my own. :) I'm going to see how far I can get without using textures. Let's see:

Panel
Label
Button
Listbox
Editbox
Checkbutton
Radiobutton
Dialog
UpDown
PageControl
Combobox
Treeview (argh!)

Clearly, designing a fully-featured GUI is a big job. Sounds like fun! 8)

HopeDagger
09-05-2005, 09:55 PM
Through some more vigorous effort, sliderbars and inputboxes are functional. Hurrah. :)

Additionally, the colours of the windows are now consistant, allowing the (potential) players to customize the feel of their HUD/GUI.

http://www.cyclologic.com/ftp/hopedagger/gui5.jpg

WILL
12-05-2005, 01:36 AM
Well this game is gonna have a nice GUI. That much I know. ;)

HopeDagger
30-07-2005, 04:41 AM
Me again. The game had been on a hiatus of sorts for a few months, but my motivation is back on track and I'm motivated once again! The GUI is unfortunately still the main area of development, but once it's done the real fun can begin! (Particle engine, networking, weapons, etc)

Right now I'm writing the UI (user interface) for weapon selection, etc. For that I've written a TGUIComboBox component for my little GUI collection. ;) There's also a nifty expanding/retracting animation which a screenshot can't really do justice for.

http://www.cyclologic.com/ftp/hopedagger/gui6.jpg

The website for the game (now entitled "Skirmish Online" is also in the works as I teach myself CSS :P)

Sly
30-07-2005, 06:08 AM
That looks cool. I know what's like to leave something for a while and then come back to it with a bit more motivation.

I'm working primarily on the GUI for my game as well. Preliminary screenshots have been shown here before. I don't have any 3D yet, so you are way ahead of me in that department. :)

http://users.on.net/~sly/images/bfauto3.jpg

That was an in-progress for the contest earlier this year. I really should remove that text. :)

I recently added columns to the listbox and the editbox is now editable. The menu interface for the game is currently being planned, so I'm only going to develop the UI items that I will need. I will post another screenshot when I have more to show.

HopeDagger
31-07-2005, 12:55 AM
Looks good, Sly!

MikeS
31-07-2005, 01:44 AM
Very slick GUI indeed!

I hope you're making it modular so you can release it for the rest of us.

;)

HopeDagger
31-07-2005, 02:48 AM
Very slick GUI indeed!

I hope you're making it modular so you can release it for the rest of us.

;)

Nope! I realized that modular would be good about halfway through, and thus everything is hardwired into everything else in a fairly ugly fashion. Something tells me I might have to endure a rewrite one day soon. :/

Sly
31-07-2005, 07:59 AM
Mine is quite similar to the VCL in use, though without the graphical designer.