Simple Image-less UI

[Krankzinnig]

Almost image-less now ;P

 

This is a really really really simple example of drawing your own UI in Leadwerks. I saw a few topics about people struggling with bloated GUI libraries. I guess DrawRect/DrawLine is your best friend when tackling UI. I was able to add some more appealing effects such as the stroke, glassy button and text shadow very easily. All can be moved around the screen ;P

 

 

Edit: Uploaded an updated screenshot, I will probably end up using a small image for all my buttons to add to appeal, but its pretty much done in this state as far as my dialog box goes.

[Canardia]

A slightly better effect can be achieved by using OpenGL vertex colors for gradients, where you can use both color and alpha as gradient, but else it's the same idea.

 

I was developing this at the same time over MSN with Krankzinnig, each of us making independantly their own version:

I'm still missing glassy buttons, but I got a micro round corner already, and gradients with alpha

[Krankzinnig]

Heh the glassy button was done with two rectangles with slightly different alpha values then all enclosed in a border using lines ofc.

[Richard Simpson]

I prefer the one made by Krankzinnig.

[Canardia]

They're not meant to compare at this stage yet, it's only about individual details and technics. Mine is missing all gradient outlines, and Krankzinnig's is missing gradients (I think he will use them too, at least in the glassy button to get a more realistic glassy look). Also his color hue's and scene is of course better. I just picked some random color hues for testing.

[AggrorJorn]

looks really good

[Dozz]

I was messing with a status bar and buttons (just the visuals) over the weekend. It's at a principle stage like Lumooja's, tis fairly simple to implement. A question tho, are you planning to unhide the mouse and stop centering it until the dialog is closed? Stops the gameplay if done this way, which is what you want sometimes, but I don't as much as I can help it.

 

I started on a status bar idea that will highlight a current 'in-focus' button that will invoke if the enter key is pressed, and use the cursor keys to scroll left and right into adjacent buttons, highlighting one of those. Then I expanded the idea to scroll different text options into those buttons if the up/down cursor keys are pressed, dependant on what the button was, like a drop-down list but not dropping down. Does that make sense? Because if I then press TAB I can also swap to an alternative mode of buttons relevant to what is on the screen at that time. The beauty is that it doesn't interfere with gameplay, mouse not required, just cursor keys, TAB n Enter keys (or whatever)

When I get it to a decent level, I will show what I mean. It's no small task, but I did write, many moons ago, a menu, dialog boxes and command line system in assembly from scratch when I wrote a vector drawing program, bit laborious, but I got exactly what I wanted and learned a lot.

 

I was reading about AppTime() etc.. tonight because I want to fade some effects over time in the status bar. And I may animate some too, maybe later. Does the .DDS format support animation or should I render individual frames and program it manually? OR could I (should I, is it preferrable to) set up a buffer to match the size of the status bar and render some 3D menu buttons into it, then overlay it onto the graphics buffer after lighting, effects etc...this could open the posibility to add refraction and make better glass effects...dunno, just thinking outloud now. I do want to try this out with a HUD overlay with a zoom lens effect (sniper scope like). How many render stages am I up to now

 

Also I was playing with the motion blur effect, very happy with it, the changes in the alpha value of the motion blurring alters my status bar transparency, so I need to look into that if I change the blur effect on the fly. It wouldn't affect a dialog because the world would be motionless (camera wise) or not if its flying down a pre-determined path. Anyway, motion blur effect may affect what your dialog transparency value is?

[Krankzinnig]

Bump: Updated my screenshot

 

Dozz, the point of this UI is to make something very light and appealing to the eye. Of course there are more advanced rendering techniques for pretty UI, but nothing beats an intuitive, easy to use, and clean interface. Also about stopping gameplay, since I am not making a first person game I don't have to hide the mouse or set a fixed position to it. I wouldn't suggest using this UI style for and in game first person UI. A sleek HUD would be better for that.

[Josh]

I like the idea of just using vector graphics because you can change the color scheme very easily. However, if you use nine images for each element, you can achieve this look, and a whole lot more. I got off track when I tried designing a GUI that had both vector and image methods you could choose from...it just turned into a mess. If I were to start a new one today, I would just stick to images instead of trying to mix vector and image graphics. That's just been my experience with GUI design. If you know for sure this is the look you want, then vector graphics are great too.

[Dozz]

Krankzinnig, its easy to see you have an eye for great visuals, no more polishing, it's there. whereas I need to get the cherry blossom out.

[Rick]

Vector GUI's are just less extendable than image based. Normally they'll allow you to just a virtual draw method and make you do all the drawing for the look you want/need. Image based just has you setting some settings like the 9 images, offsets, etc which is much easier and in the hands of your artists which is where you want it. That being said if you know what you want for your game then use whatever you want. Just a shame it won't be all that reusable. I mean you can't have all your games looking the same GUI wise

[Canardia]

Just a shame it won't be all that reusable. I mean you can't have all your games looking the same GUI wise

CryTek reuses always the same GUI for new Crysis games.

Novalogic reuses always the same GUI for new Delta Force games, and also for their Tank and Comanche games.

Blizzard reuses always the same GUI for new World of Warcraft games.

In serious and big money game business you don't change the concept, the risk is too big that customers don't like the new style, as they liked the old one.

Quite often people also say the first version of a game/movie is the best

[Rick]

I thought it obvious a better example would be WoW vs Starcraft. 2 different games by the same company using 2 different GUI designs. You've just listed sequels which makes sense that you'd keep the GUI the same as to not confuse customers. It's not about risk but consistency at that point.

[Dozz]

9 Images for each element, is there a link where I can read about that method?

[Krankzinnig]

I only half agree with you Rick. For a really tiny portable UI I suggest drawing all of your forms without images. If you want to add icons, buttons and etc this can all be done via images. I was going to do my dialog boxes and what not this way, then my in game UI all SVG images.

[Flexman]

As a matter of personal curiosity, how does Windows XP or 7 draw it's GUI? Is that all images or done mostly in software?

[Canardia]

I think Windows Vista and 7 Aero is done with raytracing. They use a slow CPU based algorithm which uses however text files on the harddisk (or preferreably a floppy disk, if one was found, which takes also time to check) to emulate 128 bit floating point numbers, to calculate the pixels and send the information pixel by pixel with seperate TCP/IP packets over the internet, which Microsoft servers then confirm to be accurate pixels. The whole routine is done on the main thread, thus all programs slow down dramatically when using Aero. If they would use OpenGL commands, there would be no slowdown at all, heck, there might be even a radical speed boost in the Windows GUI when using OpenGL.

[Rick]

I know you can skin Windows XP and earlier with images. Blinds I think is a name of some Windows skinning software where you specify images and offsets and such for the different aspects of windows.

[Krankzinnig]

I know GNOME is using a lot of OpenGL with GTK+ to do native 3D UI effects such as Apple's cover view. GNOME is almost totally procedurally generated using small SVG images for icons. This is my approach on a much smaller scale. I think GTK+ uses Cario for 2D drawing. You asked how Wndows does it, thought I would shine light on another OS.

[Rick]

Do you know if there is a technique to let artists create the the styles for procedurally generated GUI's? Not sure if they make some sort of very basic scripting or something instead of hardcoding it.

[Flexman]

LMAO at Lums idea of Microsoft servers verifying each pixel over the internet. I needed a good chuckle.

 

Procedural functions are more or less the way I decided to do GUI elements but I hadn't considered 'glass' buttons by using vert colours. That's OpenGL 101 and used to really good effect.

[Krankzinnig]

Yeah of course, GNOME can be skinned quite radically. Its all about being creative with your tool-set. Making advanced UI with rectangles and lines is hard, but if you have alpha support and can draw rounded edges and etc you can achieve a really nice looking procedural form. Then with your vector graphics, you can spice up forms with button icons, outer glow and etc.

 

 

Flexman, for the glassy button I am only using 1 DrawRect command for this. Since the background rects are all transparent and lay on top of each other, I was able to render one darker rect and leave space where the lighter one should be. That way it looks like one lighter box, and one darker box inside a stroke which suggests light reflection. It would be better to use OpenGL, but in interest of time I just tried to use as few LE 2D drawing calls as possible.

[Rick]

Yeah of course, GNOME can be skinned quite radically. Its all about being creative with your tool-set. Making advanced UI with rectangles and lines is hard, but if you have alpha support and can draw rounded edges and etc you can achieve a really nice looking procedural form. Then with your vector graphics, you can spice up forms with button icons, outer glow and etc.

 

But does that require programming? Seems like it would if it was drawing commands. You may be one of the rare few but most programmers aren't artists

[Krankzinnig]

Just like in GNOME, there is no reason I cannot export my UI to XML. So all the colors, shapes and positions of UI elements are human readable and editable. Hell, you could even create an editor like GNOME has for generating GTK+ code. So my artists can easily create multiple dialog boxes and the game reads them fine. This would just slow down the effect of procedural generated UI, but it makes it more accessible for anyone to modify. I really should release this API on my website.

[Rick]

So all the colors, shapes and positions of UI elements are human readable and editable

 

I'm having a hard time seeing what the xml file would look like without images as the building blocks of your GUI. I guess the thing I always picture in my mind is winamp skins like http://www.winamp.com/skin/remnant/222243 for example. Now I know nobody is going to draw something like that out , but it would seem the xml file would be specific to your procedural implementation that is done in code and be somewhat "limited"?