• Advertisement
Sign in to follow this  

GUI design, the graphics part

This topic is 3317 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hi all, I am working on implementing my own GUI (using OpenGL) and have most of the technical hurdles handled, but I'm trying to make it look nicer. I like how in some games like Civilization IV the menus have nice rounded-edged boxes, with borders, and color gradients from one end of the box to the other to give the appearance of light shading. Some boxes are transparent, the text all appears to have shadows, etc etc. It just looks soft and colorful and pretty. EDIT: example here http://i21.photobucket.com/albums/b251/j42lewis/selectscreen.jpg In trying to reverse-engineer some of these features, I wonder if the way they do it in Civ4 is just to make a completely static texture for each and every menu in the game, or if they somehow use one misc. "border" or "box" texture which can be resized. The problem with resizing would be that on large boxes the borders would be fat and blurry, and on small boxes they'd be thin and possibly disappear. Yet all borders in that game seem to be nice, crisp, clean and consistent. And if static textures are used, then I imagine it would be harder to add new menus or dialog boxes in the game as you'd need new graphics each time, which would not be elegant I think. I tried thinking of ways to do it using OpenGL primitives, as my previous GUI incarnation used, but I don't immediately see an easy way to get rounded-edged boxes or border lines fatter than one pixel. Does anyone have any suggestions for how to set up a moderately fancy, soft looking GUI with rounded-edged boxes? I don't even need anything all that fancy, I just want it to look nicer than simple flat quads. Thanks.

Share this post


Link to post
Share on other sites
Advertisement
A common trick is to use 9 images (4 corners, 4 edges and 1 center). The corners never scale, the edges and the center do. It's really quite simple and efficient. :)

Share this post


Link to post
Share on other sites
Ah, brilliant... why didn't I think of that. That sounds like exactly the sort of trick I was imagining must exist. Thanks!

Share this post


Link to post
Share on other sites
Quote:
Original post by JL4453
I tried thinking of ways to do it using OpenGL primitives, as my previous GUI incarnation used, but I don't immediately see an easy way to get rounded-edged boxes or border lines fatter than one pixel.

You could always set the painting width to, say, 10, with round edges, then trace the outside?

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement