UIMiracle - a small UIEngine

[BlackHornet80]

Don't know if anybody is interested in such kind of additional sources, but I'm actually working on an own UI Engine...it is aimed to provide you with a bunch of functions and give you full control...

An older class overview is here (does not show all classes of UIM in the final product):
[SHOT]http://www.mirage-development.de/svn/heroquest/Design/UIClasses.jpg[/SHOT]

A current WIP video of some UIMWidgets (red boxes) with debug informations is here: http://www.youtube.com/watch?v=K1hU9LNYuoA

Actually the goal of the video was to get all widgets under mouse cursor and getting the hovering widget (top most under mouse widget) (see debug info).

Download link: http://forums.epicgames.com/threads/...4#post29182514

[srv]

nice work

[Zerav]

Very nice work, looked at your other work, really impressive. : )

[micahpharoh]

Wow, I hope this goes the distance. The normal UIScene editor is a pain to use in my opinion.

[ambershee]

Sounds healthy. I was actually looking into writing an entirely new UI system from scratch for myself, since the default Unreal one just doesn't cut it.

[danimal']

There's always interest in alternative ways to do something that everyone agrees could use a little help out of the box (UI's and Masterservers come to mind). Very cool, keep us updated on progress.

[BlackHornet80]

more or less small update of current work...

after a nice weekend and a long week, i didn't had that much time for UIM than i would like to spend. Anyway i got some nice progress.

Important changes:
- For my HeroQuest i created a small test suite for UIM, which currently only contains of 3 classes (my interaction class, a style class and a test widget)

HQUIController.uc

/**
 * Example class of the interaction class used to register a top level widget
 */
//=============================================================================
// Author: Sebastian Schlicht, February 2010
//=============================================================================

class HQUIController extends UIMBaseInteraction;


//=============================================================================
// Functions
//=============================================================================
/**
 * Called from OnInitialized.
 */
function Initialized()
{
  super.Initialized();

  // create a UIMWidget based on HQTestWidget and add it as a top level widget
  addGlobalObject(class'UIMObjectFactory'.static.CreateUIMWidget(,class'HQTestWidget'));
}


DefaultProperties
{
  mStyleClass=class'HeroQuest.HQUIStyle'
}

HQUIStyle.uc

/**
 * Base Style used by our interaction
 */
//=============================================================================
// Author: Sebastian Schlicht, February 2010
//=============================================================================

class HQUIStyle extends UIMStyle;


//=============================================================================
// Functions
//=============================================================================
/**
 * reimp from UIMStyle - set base style for hero quest widgets.
 */
function initBasePalette()
{
  local UIMPalette lBasePalette;
  local SMaterialBrush lNewBrush;

  lBasePalette = new getBasePaletteClass();

  // assign MaterialBrush to ColorRole SCR_Base for all ColorGroups
  // used by UIMWidget
  lNewBrush.Material = Material'UI_HUD.Materials.CharPortrait';
  lBasePalette.setMaterialBrush(lNewBrush, SCR_Base);
	
  // assign ColorBrush to ColorRole SCR_Button for all ColorGroups
  // used by UIMPushButton
  lBasePalette.setColorBrush(MakeColor(255,255,100,200), SCR_Button);

  setPalette(lBasePalette);
}


DefaultProperties
{
}

HQUITestWidget.uc

/**
 * Simple TestWidget
 */
//=============================================================================
// Author: Sebastian Schlicht, February 2010
//=============================================================================

class HQTestWidget extends UIMWidget;


//=============================================================================
// Variables
//=============================================================================
/**
 * Reference to our color brush widget
 */
var UIMWidget mColorWidget;

/**
 * Reference to our push button
 */
var UIMPushButton mPushButton;


//=============================================================================
// Functions
//=============================================================================
/**
 * Function called by UIM kernel after a widget is created. 
 * Used to create children widgets and assign delegates to widget elements.
 */
function initObject()
{
  local UIMRect lGeometry;

  super.initObject();

  lGeometry = getGeometry();
  lGeometry.setRect(500, 200, 150, 99);
  setGeometry(lGeometry);

  // create a new widget child of this one
  mColorWidget = class'UIMObjectFactory'.static.CreateUIMWidget();
  mColorWidget.OnPaletteChanged=HandlePaletteChanged;
  lGeometry = mColorWidget.getGeometry();
  lGeometry.setRect(550, 250, 150, 99); // at the moment absolute coords, later relative coords to parent
  mColorWidget.setGeometry(lGeometry);
  addObject(mColorWidget);
	
  // create a new widget child of this one
  mPushButton = UIMPushButton(class'UIMObjectFactory'.static.CreateUIMButton());
  mPushButton.OnClicked = HandleButtonClicked;
  lGeometry = mPushButton.getGeometry();
  lGeometry.setRect(250, 250, 150, 99); // at the moment absolute coords, later relative coords to parent
  mPushButton.setGeometry(lGeometry);
  addObject(mPushButton);
}

/**
 * Delegate catched to process button click
 */
function HandleButtonClicked(UIMBaseButton aButton, bool aChecked)
{
  if(mPushButton == aButton){
    `log("BUTTON:"$aButton$" CLICKED!!!");
  }
}

/**
 * Delegate processed to process a palette change on the widget
 */
function HandlePaletteChanged(UIMWidget aWidget, UIMPalette aPalette)
{
  // set custom palette for widget
  if(mColorWidget == aWidget){
    aPalette.setColorBrush(MakeColor(100,200,200,150),SCR_Base);
  }
}

DefaultProperties
{
}

The result of upper classes is:
[SHOT]http://www.mirage-development.de/svn/heroquest/Design/UIMiracle.jpg[/SHOT]

For me its very easy to set up widgets and define their colors. Every widget of the same class is draw with the same style. With the delegate HandlePaletteChanged i was able to change the palette of a widget to a new one. This change is local atm, later it will be propagated to the modified widgets children too.

_h2o_ as tester will start to use UIM for further test, so the implementation of all the widgets and the layout manager later will be pushed forward.

[ShadeMistress]

Really nice approach to UI editing. The default one is difficult and sort of daunting to take on at first. The work flow is weird and there's some things you really can't do without finagling with it for days.

[Blade[UG]]

I've been banging my head against the UIScene system for over 3 months now, unable to get it to do anything. I've talked with many, many devs, and almost anyone who has considered using anything other than pushbuttons, has decided to implement a system that is not dependent on the datastore system.

[BlackHornet80]

Small progress:
Finished my grid layout (very basic, but it works) and....

i uploaded a documentation of UIMiracle on a temporary webspace (with Ads, im sorry for this, but this will be changed in the future when the pages are located on our team server)

http://mitglied.multimania.de/blackhornet/ (sorr for the ads...)

[kshaja]

Nice work.
Good UI is very important for the game, and your work helps a lot.
But please make your site as quick as possible

[UT2007]

Specialy make heroquest and UIMiracle available quickly !!!!

[Solid Snake]

The only potential problem with this sort of project is the lack of a WYSIWYG editor.

[UT2007]

The only potential problem with this sort of project is the lack of a WYSIWYG editor.

I DISAGREE !!!

Wotgreal is there and Visual Studio 2008 nFringe UDK license
=====================================
http://forums.epicgames.com/showthre...fringe+license

Studio Name: UDK
Product Key: DB8K-6JF6-7TCW-DVMG-BBBB

Some things to note:

* Make sure to build your scripts with at least the following flags or debugging won't work: UDK make -debug -full
* Set your launch executable to Binaries\Win32\UDK.exe.

[Solid Snake]

I DISAGREE !!!

Uhm, you misunderstand. Since I've been doing a lot of GUI programming in the past, I can verify how **** annoying it is to design an entire GUI within code itself.