< Garbage collection | UserGuide | Components >


GUI

The graphical user interface in Luxinia is platform independent and 100% written in Lua.

The GUI functions are using the l2dnode system that the Luxinia core provides in order to render the components. All components are drawn on a per frame basis, unlike a native GUI, which is only updated if something changed. The GUI is currently a little bit slow due to some less well designed functions, however, this is only noticed in some cases and will be solved in future releases.

The behaviour of the GUI is just like in windows - components can be cycled through be pressing tab or arrow keys, the mousewheel can change some values and so on. It is planned to support different focuses for each connected game pad so that the players can control their parts of the GUI, i.e. setting gamepad keys and so on. This is currently limited since only one active focus is supported at the moment.


Result for the string "Red: v900red
vcvuBlue: v009blue"
Independ from the GUI, Luxinia provides a simple yet very useful addon if texts are displayed. Texts can be manipulated to be displayed in different colors or with different texteffects.

stringdescriptionexampleoutput
vrgbColors the text from this point on to the rgb values that are to be chosen from 0-9v900redv009blueredblue
vcsets textcolor to default colorv900redvcokredok
vuunderlines the rest of the textvuunderline vunormalunderline normal
vx...;position textcursor at a certain pixelposition from the left side onnamevx200;points

Skins

All visible components have very common properties: A rectangular visible or invisible area, maybe a textfield and an optional icon. Depending on its state, the way it looks like is changing, i.e. if the element is selected or the mouse has entered the region. Due to these similiarities, Luxinia is using a skinning system that unifies the way a component is drawn. Nearly all components are using these skins to draw themselfes. The skin interface provides functions to display texts, rectangular areas, attaching an icon and aligning the text or icon in different ways. A skin should also provide a system to toggle between different visual appearance that are required when the component is hovered for instance. Every component tells the skin their current state, i.e. BUTTON_HOVERED, which should cause the skin to change its state that way to make the button look hovered.

The way the GUI looks like can be changed by using a different skin - that only needs to provide the interfaces defined in the skin2d class. It does not matter if its an animated 3D skin or a simple 2D skin without textures. It can also be combined with other skins, which enables unlimited possibilities to change the look and feel, without rewriting the component code all over again.

The skin2d has currently only implemented by a so called skinnedimage calss. It basicly draws an image by dividing it in nine areas that are stretched differently. The corners are drawn 1:1, the edges are scaled each in one direction and the centerbox inside will be stretched in both directions. Though this is a very simple approach, it works well for most cases. It is planned to provide another skin that allows the texture to be tiled if it is stretched - which would be nice for certain edges or backgrounds (i.e. chains etc.).

Its the same thing for the icons. however, there are two types of icons that can be each used - a 3D icon to display 3d models within the GUI and imageicons that will be displayed as simple images. Again, this can be changed to the needs easily, i.e. if a 3D animation is required.

Using the skins makes it very simple to change the GUI and using it in games, even it looks very unique.