• Register
Post news RSS Phoenix USC: GUI framework near final. Images.

I have finalized the overall architecture for the GUI framework allowing it's completion here very soon. Included are images of the current look featuring newly added list box GUI components.

Posted by on


I have had a bout with illness (last month or so, all well now) which cut into development, but back on track now. :) I have been finalizing my GUI architecture which is a huge factor in designing my gaming framework as it handles quite a lot from managing windows and GUI components to supporting a window draw list that manages text, images and light/shadow scene rendering and more (lights, shadows and graphics using Monkey-X's mojo2). I am happy to say that it is all working awesomely and is 'Very' efficient . This and other considerations in design make this GUI framework perfect for gaming. As it stands now the core architecture is well defined and functioning well so it is now time to flesh out the GUI components.

Just to remind everyone I am developing a gaming framework to support Phoenix USC called Alien Phoenix. It is designed to enable a smooth playing/user experience across many devices including PC's. The GUI for example works in windowed mode on your PC or your Android tablet as seen here. At the same time it is flexible enough to adapt to a classic mobile set up. The GUI is also responsible for drawing images, lights, shadows and so on and has been designed to be very efficient leaving plenty of headroom for gaming. Although the Alien Phoenix gaming framework is being developed for Phoenix USC it will at some point be available to other Monkey-X coders and for those interested I cover some of the technical aspects below.

List Boxes and Menus
For the non-technical... I have implemented list boxes (see below) which are fully customizable. The GUI uses a default 'skin' file so for Phoenix USC you will be able to customize the GUI's theme. I will be using the list box (with a menu slider option) code for menus and adding them in next, with each window able to have it's own menu.

In addition to adding in list boxes I have made many changes to the GUI framework which allows it to run efficiently and finalized the overall design. As soon as I add the text area GUI component (text editing/viewing) and a few other GUI components I will begin working on an in-game map editor for Phoenix USC.

For the technical... Below are a few screen shots of list boxes used in the GUI. I have reworked my code to support '4' images per button, one for up, down, highlight and selected. This makes for really detailed and flexible buttons especially when supported by framework commands like SetHighlightColor(), SetHighlightAlpha(), SetHighlightBlend() and alike. Each button (or list box element) can have a separate button image for all four states of action as well as '4' states of color, blend and alpha. In the first list box image below you can see the highlight element in the list box using BlendMode.Additive as well as a custom color and alpha. When it comes to list boxes you can customize list box button elements as a group or individually and this even extends to changing individual list box button element images. So the up shot here is list boxes are very customizable as well as buttons and sliders.

I will be using the list box class to support menus. As it stands now list boxes can have a slider on the left or right or no slider at all. So with some small modifications the list box class can support a menu class. The plan is to support at least a first level slider option for menus which may extent to sub-menus. Since the list boxes provide support for element images menus should really function and look sweet. I should add that the GUI loads a resource file to 'skin' and initialize. So all of the GUI components (buttons, list boxes, sliders, more) are ready to go with all of the default color, blend, alpha and images. This allows for a overall theme and lots of customization.

This list box (over rendered mojo2 scene) uses customized color, alpha, blend for its button elements. The slider is also customized using list box framework commands (alpha, color, blend). Shown in cursor highlight state.

This is a list box using the default skin and framework values. Shown in cursor highlight state.

Also using the default skin but shown with the cursor element state in the mouse/button down state. Each button (or list box element) has '4' images for each button (or list box element) state as well as the color, alpha and blend states.

So I still have a lot to do but I am in the home stretch as it were. With the core architecture firmly in place for the GUI fleshing out the rest of the GUI components will happen quickly. After I have menus and a list box view in place I will move on to a text area component which will allow in game editing and so much more.

Off to code.
- Rich -

Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.