Stormsong Games

Here is an update of the work I’ve done against the GUI Editor.  I’ve found lots of issues with QuickGUI on the way, which is good. (further convinces me that QuickGUI needs a good dose of practical use, to find all the issues/bugs my PlayPen didn’t expose)

Overall, I’m really excited and happy to be working on the Editor, I think it will be pretty slick after another week or so of work on it.

Here is the progress from tonight’s work!

As you can see I followed the design outlined in the previous post.  And before anybody comments about the Menu’s skin, note that my Menu skins are made from re-using other widget skins.  It would be nice to upgrade them, but its really low on the priority list.

Its also important to note that I already found some issues with QuickGUI, from missing API’s to improper class interface!  I’ve fixed most of the issues, but I also have a TODO list to track all the big items that I will want to fix in the future.

The next step is creating the Property window, where I can start making use of the PropertyGrid widget.

I definately didn’t make my 1 post per week goal.

On 3/1 I released the next version of the QuickGUI library, version 9.03.  It includes all usability additions I’ve made, as well as fixes to Menu/List/ComboBox/TabControl widgets.

I’ve decided to start going back into the Game Development side of things.  I naturally tend to veer into GUI land and work on QuickGUI for large periods of time, but I’m getting anxious to start working on my other projects again.  Note that this doesn’t mean development of QuickGUI will stop; applying QuickGUI and using it will actually benefit the lib, as I uncover issues that weren’t visible during development, and experience the workflow and interaction between the GUI and the application/game.

I didn’t fully finish the ColorPicker, although it wouldn’t take much to finish it.  For now I will work on the GUIEditor, and use it to drive further development of QuickGUI.  Once the Editor gets to a usable state (saving/loading Sheets) I will start converting Gaia and RotM projects to loading Sheets for its UI.

Unfortunately its been a while since I last put in some thought towards the Editor.  Tonight I will create the project for the Editor, and start thinking how I want the interface.  As I said before I want to minimize the amount of screen real estate the Editor UI takes up, to allow users to focus on the layout they want to create.  I think I will start off by creating a ContextMenu, with the basic essentials:

[Widget Name]

Application -> Load, Save, Save As, Options, Exit

Properties

I recently had some user feedback on the library, and realized a lot could be done to make the library easier to use.  In addition to allowing creation of widgets without supplying a Desc, I’m allowing users to quickly create Text and Image Items in 1 line of code.  The previous methods are still available, but I’ve overloaded creation methods.  Meanwhile I’ve also made a lot of bug fixes in various areas such as Scrolling, drawing the Mouse Cursor, and deriving widget names correctly.

As shown in the picture, I created a “ListImageItem” widget, and added ComboBox/List support for it.  The images shown are of the QuickGUI logo in Tiled mode.  In unTiled mode, the picture look very skewed.

Code used to populate the list:

List* list = mGUIManager->getActiveSheet()->createList(listDesc);

list->createTextItem(”Item 3″);

…

list->createImageItem(”qgui.image.png”);

I haven’t forgotten about the ColorPicker widget.  (And PropertyGrid, and Editor, and..) The plan right now is to fix up the library some to make it more user friendly.  A lot of feedback I’ve received on the library is really good, I need to encourage users to keep giving feedback.

I’ve released 9.02 here.  While I originally wanted to finish the PropertyGrid widget before making the release, I’ve found the widget taking a bit more work than expected.  In its current state:

During the course of development, I’ve realized that the current properties don’t include situation like setting the Text of a Widget.  Currently there is a Text, Bool, and ComboBox Property, but the Text Property should actually be renamed to StringProperty.  A Text Property should allow users to set strings that are displayed on the screen, which include multiple fonts, colors, and lines of text.  To do this, I will need to create a TextEditor widget, (may not be the final name) which will also consist of a Color Picker widget, so that users can easily manipulate text.

Gotta run, Lost is on!

Previously widgets could be drawn with transparency based on the opacity of their skin textures.  I’ve always wanted to add in the ability to make widgets more or less transparent, regardless of their skin.  I woke up this morning and decided to implement it.

APIs added:

Widget::set/getRelativeOpacity

Widget::getAbsoluteOpacity

Widget::set/getInheritOpacity

Tonight I will be putting in some decent amount of work into the PropertyGrid.  Its slowly coming along, I’m finding there are many similarities as well as differences from the TreeView widget, and also forming rules for the Widget, since I don’t have any good role models to follow. (I actually prefer this, I don’t want to force certain rules just because its traditionally been done this way)

While thinking of how the GUI Editor will be created, I thought that a Context Menu would be useful.I like my editors to have a maximum amount of viewable work space, and having Windows (that can be closed of course) and Menus will achieve this.  The basic idea of the editor in my head has a main Window with a PropertyGrid, which is dependent on the Widget selected.  The user will select Widgets and can open the property window from the context menu.  The property window can also be closed, to allow viewing of the GUI Sheet as it will appear in other applications using QuickGUI.  The ContextMenu may also provide ways to create child widgets, and other options I’m not yet sure of. (ie changing RenderWindow size)

Here is the ContextMenu, although I’m borrowing skins from other Widgets. (This is not the final default skin :P)

Something to note: There is an optional TitleBar with an optional close button.  Although the popular Windows ™ Context Menu doesn’t have a TitleBar, I thought it might be nice to allow additional information along with the Context Menu Items. :D  Currently the TitleBar can also be used to drag the Menu.  I’m not sure if this would be useful in some way, I may disable it permanently.

Back to the PropertyGrid widget.  I didn’t get to this at all this weekend, but thats mostly because I wanted to think about it a little more.

I didn’t make my one post per week, work has kept me very busy lately.  Fortunately I did put in some hours into coding, and here are the main take aways:

- TreeView Control Complete

- OpenGL Support (!)

I haven’t tested the OpenGL Support on other machines, but I’ve basically adjusted the way QuickGUI Draws elements to the screen so that it matches RBGUI.  One consequence of this is that pixel/fragment shader 2.0 or higher is required.  Despite the QuickGUI PlayPen running using OpenGL, the one issue I’ve seen is that lines are not drawn.  Not sure why this is, but the impact is minimal, and I’ve decided to move past it.

Since the PropertyGrid widget derives from the TreeView widget, the majority of the functionality is already implemented.  The main differences lie in the Nodes consisting of a Label and TextBox/ComboBox, and figuring out how I can tie changing of values to setting/getting property values.  I will most likely require delegates, so users can supply a get/set method, and they will get called when values change.  This gets tricky when enums get involved, so I will have to figure this out as I develop the widget.

And here is the TreeView Widget!

Notice the radio buttons and check boxes in the nodes?  I’ve implemented keyboard navigation, selection of nodes, and scrolling support to focus on the currently selected node.  The plus/minus buttons are included as part of the TreeView skin, and each node’s icon is skinnable.  

All skins were made by Christian Herzog.  Many thanks!

After putting out the 8.12 release, I started thinking about the PropertyGrid widget more.  It dawned on me that the PropertyGrid Widget can be implemented as a specialized version of a TreeView control!  Each Node would be a Label and a TextBox pair.  Additionally, this would allow grouping of Properties into sections.

This morning I started working on the TreeView control, and its a little difficult to figure out the design.  Implementing expanding/minimizing nodes is not something I’ve implemented before.  I also had to figure out what I wanted the TreeView to support.  I did some searching and found some different examples, and a simple idea I didn’t even consider at first: CheckBox and RadioButton nodes!  I also wanted to be able to have Icons for nodes.  So in theory, each Node can have up to 3 display icons and text: State (expanded/minimized), Type (RadioButton/CheckBox/Standard), Icon (Personalized image for the node).

Here is a screenshot of the Widget after a few hours of development:

The TreeView control is on the top left portion of the screen.  So far my work has included stubbing out the TreeView and TreeViewNode classes, creating dummy skins for them, and being able to create TreeViewNodes in a TreeView widget.  The next step will be implementing child/parent relationships between the nodes.  Technically all Nodes are children of the TreeView widget, but there needs to be linking between the Nodes to achieve the TreeView functionality.  Drawing of Lines and Expand/Minimize icons will be one of the last developments on the widget, as they are drawn after all nodes have been drawn.

I just made another official release of QuickGUI:

http://www.ogre3d.org/addonforums/viewtopic.php?f=13&t=8938&p=51879#p51879

Unfortunately I didn’t put in enough time to find out why QuickGUI doesn’t work when Ogre uses OpenGL for rendering.  Sorry to everybody who can’t use QuickGUI because of this issue.  I hope to figure this out in the near future.

Next big task: PropertyGrid widget