EvoGUI - Features

Language: The system is coded in VB.Net (VS 2005). This means you can use it with any .Net language. Note: The DLL should also be usable with C++ in it’s present state (same technique as any managed DLL), however not enough testing has been done to talk about the details.

Documentation: Currently being worked on, but since it is open-source, you won’t have much trouble figuring things out, especially if you read the comments in code. If you really need some help, let me know and I will hurry up but also help you in the mean-time. If you purchase a licence, you will get full support for any issue you may have

Full gadget list with main features:

Windows: Creates a window closely resembling the structure of a WindowsXP window and it’s texture layout. Gadgets are added to windows, and are drawn directly onto window surfaces. Each window has it’s own render surface, so there is only one Draw command per window (regardless of the number of gadgets) in the application loop. The border textures are tiled, never stretched, for a consistent pixel-perfect appearance. Minimize and close buttons can be hidden or shown. A window can be borderless, allowing you to make it any shape you want in combination with a specific picture background (see examples). Each window can be focused just like in WindowsXP, window drawing order always adjusted accordingly, and only when focused can the gadgets on it be highlighted or used. Windows can be resized by any of the sides or corners, and mouse cursors are changed accordingly.
Buttons : A capsule-type button. It can vary in width, while the height (unless specified on creation) is determined by the texture width. The middle texture of the button is tiled while the left and right parts are fixed. Provided button text is always centered on the button (horizontal and vertical). Heights of all textures must be equal to achieve pixel-perfect look. Supports different textures for 3 states: normal, mouse-over highlight and pressed.
Image buttons: You can create a button from any image. Supports different textures for 3 states: normal, mouse-over highlight and pressed. Supports alpha mapped area designation, so your buttons can be any shape. This means mouse over and clicking effects will not occur unless the mouse is over a visible part of the button (visibility defined with alpha-threshold value 0 to 1).
Check box: Each of the 6 states needs it’s own texture (ticked and not ticked, each has normal, mouse-over highlight, and pressed state).
Combo box: Can have an unlimited number of items. Currently selected item is always displayed within it’s window area. Maximum height can be supplied for when opening a combobox, and if there are too many items then a scrollbar will appear with which you can scroll down. Each item is has highlighting effects upon mouse-over, and highlight can be texture or coloured box. Optional use of textures for borders and background (closed and open area each can have separate textures) or single RGBA colour specified in TPE. The expand button (arrow down) is a texture and has 3 states: normal, mouse-over highlight, and pressed.
Group: A group is a frame drawn onto a window surface to visually seaparate groups of gadgets. It’s non-visual use is when grouping radio buttons, so only one radio button can be active at one time within a group. Uses 8 textures, 4 tiled for each side and 4 corners.
Image: You can display any image within the window. You can also assign a RenderSurface to the image, so you can use it as a 3D display or even a viewport! Also useful for displaying things like radar screens on a HUD. See the examples.
Label: Display a line of text anywhere on the window. You can use any font installed on your system. All fonts have smoothing applied to them for a crisp look without hard edges.
Listbox: Width and height variable, can have multiple resizeable columns. If width or height are too large, two scroll bars appear (horizontal and vertical). There is text cropping, if a certain line of text is wider than the column , it gets cropped with "..." to fit the maximum size of the column. Image items are supported within the listbox (specify row/column). Mouse cursor changes when it is over a column separator so you can resize columns.
Menus: Each window can have a root menu on top (called WindowMenu) from which an unlimited number of submenus and items can be created. You can add items, submenus, as well as line separators. Menus support textured and coloured-box mouse-over highlighting (configured in the TPE for a specific skin). Each item can be given a unique name and triggers an event upon clicking, which you can then handle any way you want. Menu backgrounds can be textured or single-coloured. If textured, it supports 8 textures for the border (4 tiling ones for sides, and 4 corners), as well as a texture background.
Progress bar: Variable width, height depends on texture height. Tiled textured background, left and right ends are fixed, and the bar is also a tiled texture drawn on top of the background for a propper filling effect (especially if transparency is used).
Radio button: Each of the 6 states needs it’s own texture (ticked and not ticked, each has normal, mouse-over highlight, and pressed state). Needs to be grouped in order to function properly, so only one of the grouped radio buttons is selected at any one time.
Scroll bar: Always textured, handle length updates in real time, handle and buttons have 3 states with different textures; normal, mouse-over highlight and pressed. Handle background and handle middle are tiled. Can be vertical or horizontal. Width depends on the texture, length is variable. Primarily used in gadgets: listbox, text box, text box input, combo box.
Slider: A typical slider where you can set the min and max values from left to right (including negative) and read them back. Width is variable, height depends on either the button height or the slide height, so whichever is taller will be used as the gadget height while the other one will be vertically centered based on it’s height. This means you can have a thick button on a thin slide, or a small button on the inside of a big slide without having to position any textures yourself.
Spinner: Accepts integer values. Can use the numpad or the normal keys. Accepts only numbers, backspace and delete keys. Numbers highlighted while input active. Can set a variable step for each button press. Width and height variable, button are always on the right and their sizes depend on the texture size. The up and down buttons each have 3 states with different textures: normal, mouse-over highlight, and pressed.
Text box: Automatic word-wrapping. Can be maximised by width or height to occupy the whole of a window area. When maximised by width, the word wrapping will update and rearrange the text based on new width in real time with very little slowdown (while resizing a window, not only at the end). Supports any single font for the whole text box. Can load from text files (specify relative path only) or from a string. A vertical scroll bar appears if the text is longer than the height of the window, which also updates in real time during resizing if height maximized. Can be textured with 8 border textures (4 sides , 4 corners) and a background texture.
Text box input. Same like text box , only you can change the text. It supports all of the keyboard functions like a standard word-processing application such as; arrow keys move between single characters or move up/down rows, ctrl-left/right to move between whole words, home and end keys transport the cursor to the beginning or end of the line, holding shift and pressing left/right/up/down highlights the text (can also be combined with ctrl for word-by-word highlighting), text can also be highlighted by dragging the mouse, and single characters or selections can be deleted using delete or backspace keys. Text can also be scrolled up/down using the mouse scroll wheel while the mouse is over the text box, or using page up/ page down keys. The text cursor also blinks with a slow pulsating effect (instead of the old on/off look), but as always, all of this can be changed easily by changeing a variable or two of the TextBoxInput class. See the examples, and code comments for more information.
Text line input: A box which has it’s height match the size of the font, and variable width. You can input text, but no new lines can be created, the text will only move left or right within the visible area. You can also use all of the keys like for the text box input, or like in most word-processing applications including text highlighting, word jumping, and so on. Can have textured borders (8 textures total) as well as a textured background.
Animated images: Place any strip-animation onto your window. Animations can be easily defined using the TPE after laying out the frames onto a big texture. There are 4 modes of playing animations: they can repeat or play once and they can run in a forward-only fashion (normal) or a ping-pong fashion (forward-back). They can be started or stopped at any time. They can, like everything else in the GUI, have 8-bit alpha maps, allowing you to have them in any shape you want.
Animated image buttons: These buttons are like image buttons, only animated (wow...). But the cool thing is that you can have it repeat an animation in it’s normal state, and then play one animation when you place the mouse over it, for example giving you an effect of a box opening and then staying open while the mouse is over it. You can also specify an animation when the button is pressed, such as something coming out of the button, or whatever you imagine looks good for your needs.

Other great ways of using the system:

Heads Up Display (HUD) : It is much better to use EvoGUI than draw multiple textures on screen each frame. With EvoGUI , you can create a large window at the bottom with the width of the screen, make it borderless and give it a background picture. Then you can add buttons, labels, progress bars, and many other things to it which can be updated each frame. This is much better than drawing multiple textures each frame for three main reasons. First and most important is, multiple textures or elements (ie attack button or health bar) take multiple drawing commands to be drawn one on top of eachother each time you hit the game loop and this hits the frame rate quite significantly. On the other hand, EvoGUI uses only one Draw command to draw the entire HUD because it is in fact a window stored on a single render surface! Secondly, you would have to hold more textures in texture memory space without the use of the optimized way EvoGUI stores textures and draws tiled ones. This would cost you memory. Thirdly, you would have to have manual checks for buttons, button areas, mouse clicks and so on, while with EvoGUI it is all already there for you. Additionaly, and I think I don’t need to mention this but anyway, it is obviously much easier to use existing gadget classes , for example using EvoGUI ProgressBar instead of drawing single-colour boxes yourself all the time.
Radar screens: Another part of your HUD (for example in the top left) could be a radar screen. You could draw it all each loop, or again, use EvoGUI. You would just create a borderless window with picture background which matches the size of your radar screen (ie circle). Then, you could apply the radar screen which is in most cases drawn to a RenderSurface, to an EvoGUI Image which is placed onto that window, and it will be automatically updated each time you refresh the render surface and call QueRefresh for the given image. See the examples, it is very easy to achieve. Of course, it would be up to you on how you draw the radar screen, I did not want to impose things too specific onto users.
TV screens and monitors inside of an FPS: Another fancy use of EvoGUI which can be easily achieved is creating one of those FPS-style TV monitors where the player approaches it and can click things around on it, like on a computer or some sort of security system. Well, all you have to do is create another instance of EvoGUI and render it to a RenderSurface which is applied as a texture to the 3D object – with previously defined texture coordinates! You could even combine it with cube mapped reflections to make it look like it’s behind a glass. I am considering creating this as an example, but I simply do not have time at the present.
Aplying crazy shaders to windows: Since everything is drawn to a RenderSurface, each window can be treated as a texture. This means you can apply any kind of shader to the window, and one example that came with the system in v1.01 was the shader for the fading effect. Following from it, you can see that it wouldnt be hard to apply all sorts of 2d shaders to windows for fast transformations and effects, such as distorsion, ripple effects, blurring, converting to grayscale, squeezing of any kind, inverting colours, etc,etc. The provided shader is simple, and so is the code for the most part, so experienced users will find it rather easy to apply any kind of shader to a window. This can be useful for example if something explodes on the screen, the windows could have their colours inverted, or made to sway from the shockwave, or anything your imagination allows for. I would be very happy if you did something like this, and shared it.

More GUI-specific features:
Mouse cursors: Can be animated. Animations are edited using the TPE (Texture Parameteres Editor). They also use 8-bit alpha DDS textures by default meaning you can draw them just like in Photoshop, eg with cursor shadows or anything you want. There are different mouse cursors by default: normal, window resizing (left-right, up-down, and for corners), listbox column resizing, and you can easily add your own.
Fonts: You can use any font installed on your system. Most gadgets use the Direct3D font format , allowing you to specify font effects (bold, italic, etc) as well as choose a character system which is useful for when using a language other than english.
Events: Each button releases an event uppon release after it has been clicked. Most gadgets also release events upon change of state (eg check-box tick/untick). Menu items release events upon click. All of this gives a very efficient way of controling windows or any connected variable, and does not force you to use any specific way of doing things. See provided examples and check out ButtonHandler, StateChangeHandler and MenuHandler, as well as the in-code comments.
Textures: To get 8-bit alpha support, right now the default format is .DDS (but you can also specify your own extensions, as long as Truevision supports it). All gadgets that have areas larger than one textures have pixel-perfect texture tiling and no stretching. Textures that tile (such as window border, scroll bar background, scroll bar handle, textbox border, etc) should be as large as possible on the big texture file (the skin). This is because if a texture which will be tiled is small, it will have to be drawn many times when refreshing a gadget, and using too many Draw commands slows things down a lot more than having the texture occupy a lot of memory in most of today’s hardware. So, keep in mind, tileable textures should be large, even if that means that a lot of the skin texture remains empty. See the fotonic skin for an example of efficient texture use. If you make all gadgets have textures, there will be a lot of them; but you can also create good looking interfaces by disabling texture use for a gadget from within the TPE and specifying RGBA values for things such as gadget background, gadget border, gadget highlight, etc.
Shader effects: The provided fade-in, fade-out window effect can be applied to any window, and will cause a window to slowly fade in or out upon opening or closing respectively.
Support for older GPUs: Some of the older (and even newer) GPUs seem to have difficulty with non power of 2 texture and render surface sizes. Because of this, the GUI can appear corrupt on them, as if gadgets are squeezed from the bottom right and leave blank spaces in the windows. A special fix has been introduced because of this, and to activate usage of power-of-2-only surface sizes you need to initiate the GUI with the second parameter ForcePowerOf2TextureSizes set to True. Eg; MyGUI = New EvoGUI(Input, True). It is False by default. However, setting this to True increases overall memory consumption, so leave it as False unless absolutely necessary.

Texture parameters editor (TPE):
The TPE allows you to edit “BigTextures” as they’re called, and defined the parameters which define what is on those textures. There are four types of the parameters file (PRM extension) you can make: Skin, Cursors, Animation and Textures.
If it is Skin, it allows you to place all the gadget’s textures and define their coordinates on the big texture. You can define their extents by clicking (makes it the top left corner , ie x1,y1) or holding Ctrl and clicking (bottom right corner, ie x2,y2, has to be below and to the right of the top left one). In Skins mode, another window opens which lets you define the default fonts, and colours of various skin elements. If you tick the box to use only colour for a given gadget, you won’t need to specify the texture area for it on the big texture. However, not all gadgets can have colour-only elements. This will be explained in a separate tutorial.
Cursors and animations modes are very similar. It lets you easily add a cursor (or animation) and choose how many frames it will have. It can have only 1, when it will act as an image.
Textures mode is the basic mode which doesnt open additional properties windows. It lets you define texture segments inside of a big texture. This is where you define the images for image buttons, window image backgrounds, static images, or anything else you may want to apply a special TextureSegment to. It’s also a matter of selecting a texture segment, giving it a name, and clicking on its top left and Ctrl-clicking on its bottom right corner within the image display window, and then saving the PRM with the same name as the image file name. This will also be covered in a future tutorial.
You can load some of the provided skins (in the Skins folder) to see how the textures are layed out for most of the gadgets. If you play around, you will probably get a better understanding of how it works.
You can preview the skin you are currently editing by clicking the Preview Skin button. This lets you easily configure things such as font sizes, actual background colours, or window title x/y offset, and so on.