Yet another IwGame Engine UI Progress Update

Not had a great deal of spare time to spend on the UI this week but did manage to get a few cool things in there including:

  • Scrolling grids
  • Scrolling list boxes
  • Horizontal list boxes
  • 9-patch brushes
  • Child element sizing based on percentage of parent
  • Child clipping
  • Grid per column bindings
  • Dynamic resizing of elements, grids and list boxes will automatically re-layout child elements to make use of extra space
  • UI elements can allow touch events to bubble up to parent elements allowing them to also receive the same events
  • Tidied up the UI input system
  • 4 parameter skewing – See the wonky text on the large and small buttons for an example

Heres a quick screen shot showing the current UI demo:

More Advanced IwGame Engine UI Screen Shot
More Advanced IwGame Engine UI Screen Shot

Those frogs look happy to be sat in that list box like that 🙂

And here’s a new and better video showing the new UI http://www.youtube.com/watch?v=IhtT_e5u8gU

I hope to spend a few additional weeks on implementing more UI controls such as sliders and tab vies etc.. before we released 0.35.

IwGame UI Progress Update

Got a quick update showing how the IwGame engines UI system is shaping up. Note that the UI system is “bitmap” based and IwGame does not draw things like buttons, grids etc.. manually. Here’s a quick screen shot at iPad resolution showing some basic UI:

Basic IwGame Engine UI Screenshot
Basic IwGame Engine UI Screenshot

This is just a static image however, so you cannot really see the animation that’s built into the UI, for that you need to take a look at a quick video I stuck together showing the UI in action at http://www.youtube.com/watch?v=oV3kYLbzcKo

 

The UI itself consists of the following elements:

  •  StackPanels – The top left hand control is a vertical stack panel containing 3 horizontal stack panels. Each horizontal stack panel contains multiple basic UI components including buttons, labels and text input boxes. The check boxes and the long named button are toggle buttons. The top stack panel and the components within the panel have been draggable so they can be dragged away from the stack panel and moved around. Tapping the Expert check box will spin the control 360 degrees using an animation time line. One of the buttons and two of the check boxes also have animation time lines applied to them.
  • Grid – The control to the bottom left is a 3×4 grid that contains 12 items. These items are simple label buttons that when tapped will animate. A XOML array variable is bound to the grid and data from the array is moved into the grid. Updating the XOML array will automatically update the grid elements. The types of elements within the grid are defined using an item template. You can create a grid manually by adding components directly to the grid in XOML or in code bypassing the binding system. This allows you to create more complex controls within each grid cell. Tapping an item in the grid will set it animating
  • List box – The list box to the top right work on the same principles as the grid where data is bound to the list box and a template can be specified that defnies the type of items. This list box is a multi-select list box which allows you to select multiple  items
  • List Box 2 – The list box to the bottom right is more complex list box that shows list items using a more complex control. The list box items in this instance are created using a horizontal stack panel, which contains a label and a button. The list box is a single item selection list box

The UI controls themselves can be moved around and placed anywhere in the scene. the whole scene can also be moved around.

To give you an idea as to how the XOML looks, here’s a short code clip showing the XOL that creates the list box to the upper right of the screen:

    <!-- Create a listbox --> 
    <!-- ListBoxItems - Defines a list of items that will be bound to the list box -->
    <Variable Name="ListBoxItems" Type="arraystring" Size="4" Value="Item 1, Item 2, Item 3, Item 4" />
    <!-- Create a template that will be used to generate the list box actors -->
    <Template Name="ListBoxItemTemp">
        <Label Name="ListItem$index$" Background="ListBoxItemBrush" BackgroundColour="200, 200, 200, 255" SelectedColour="80, 80, 255, 255" Font="trebuchet_12" TextColour="255, 255, 255, 255" SelectedTextColour="255, 255, 255, 255" Margin="0, 0, 20, 0" SelectType="toggle" Selected="false" />
    </Template>
    <ListBox Name="ListBox" Position="351, -190" Background="ListBoxBrush" MultiSelect="true" ItemsData="ListBoxItems" ItemsTargetType="text" ItemsTemplate="ListBoxItemTemp" HitTest="true" Draggable="true" />

 

As you can see its pretty straight forward:

  • We create an array string variable and assign it the data that will be bound to the list box
  • We create a template that represents our items
  • We create a list box that uses the template and data and make it draggable

Well that’s it for now. We will be adding more and more features to the UI over the coming weeks and will keep you updated.