Themes
Report article RSS Feed Inspector UI Redux

I recently made some changes to the inspector UI system in Overgrowth to make it more powerful and look cooler. To recap, the inspector is essentially a flexible dialog that pops up when the user is required to make some kind of choice.

Posted by jeffr on Aug 27th, 2009

I recently made some changes to the inspector UI system in Overgrowth to make it more powerful and look cooler. To recap, the inspector is essentially a flexible dialog that pops up when the user is required to make some kind of choice.

The inspector was somewhat tricky to make, but what's cool about it is that now any dialog that we (or eventually modders) need is trivial to create. For example, David recently asked me to make some UI for his upcoming wind system. Instead of having to construct some UI from scratch, in literally a matter of minutes, I was able to commit this little guy:

A breezy dialog. Note the new theme from Iiro and sliders now can have an editable numeric field next to them, per GirlFlash's suggestion.

It's very easy to create a dialog. Using JavaScript, you simply pass an inspector window an array of objects, like so:


javascript code:
var items = [{
  name: 'Windiness',
  textfield: true,
  content: {min: 1, value: 50, max: 100},
  type: 'slider'
}, {
  name: 'Foginess',
  textfield: true,
  content: {min: 1, value: 50, max: 100},
  type: 'slider'
}, {
  name: 'Rain',
  content: true,
  type: 'checkbox'
}, {
  name: 'Lightning',
  content: true,
  type: 'checkbox'
}, {
  name: 'Wind Sounds',
  content: [{name: 'Light gust'}, {name: 'Heavy gust', value: true}, {name: 'Summer breeze'}, {name: 'Stormy'}],
  type: 'multicheckbox'
}];

Then the inspector window creates the controls and such and presents it to the user. When the user chooses their values and presses "OK", the inspector serializes the result into a simple JavaScript object and passes it back, for instance {"Windiness":"50", "Foginess":"50", "Rain":true, "Lightning":true, "Wind Sounds":["Heavy gust"]}. This can be overridden to return it in other ways, or even update live instead of when the user presses OK.

Here's another example. Previously, to create a new server, you had to use the Overgrowth console because we just didn't have any UI for it. Well, thanks to the inspector, with a tiny bit of code we have a pretty simple UI.


Note, those warning messages appear if you try to press OK without having filled in a required field. Here's a close up of the animated glowing effect, to draw attention to the field in question:


Finally, here is a screenshot of a full inspector window with all of the widgets I've created so far: full inspector window.

Any other widgets I should add?(permalink)


Track us on ModDB (visit our page)

Please join us here too:
Facebook icon ModDB icon Steam icon Twitter icon YouTube icon

Post comment Comments
Dremth
Dremth Aug 27 2009, 9:02pm says:

best looking ui in a game, EVER
maybe add a tab control if there's not one already

+4 votes     reply to comment
jeffr
jeffr Aug 27 2009, 9:03pm replied:

Thanks! :D Iiro deserves all the credit for the graphics, I just coded it ;)

+1 vote     reply to comment
Spycon_Fighter
Spycon_Fighter Aug 27 2009, 10:47pm says:

Simple... I like it :)

+2 votes     reply to comment
Elratauru
Elratauru Aug 28 2009, 12:33am says:

Simple, with a nice design, nice job on that lovely UI.

+1 vote     reply to comment
P4TRICK
P4TRICK Aug 28 2009, 2:46am says:

Why you never answer my mail :P

..btw.. awesome!

+1 vote     reply to comment
jeffr
jeffr Aug 28 2009, 3:23am replied:

Email is easy to get lost :P You should add us to your buddy list instead! Wolfire.com

+1 vote     reply to comment
Stanz
Stanz Aug 28 2009, 10:58am says:

Can't argue with the graphics + simplicity. That's about as good as it gets.

What I'm wondering is how is it (going to be) on the customizable side?

"Any other widgets I should add?"

Table (example uses: server list).

Image (example uses: images?).

+1 vote     reply to comment
Assaultman67
Assaultman67 Aug 28 2009, 12:25pm says:

i see you have scalar sliders available but im curious as to how vectors (like 2D or above) would be implemented ... just a text box or something even more special?

+1 vote     reply to comment
jeffr
jeffr Aug 28 2009, 12:34pm says:

Oops, my mom just told me i misspelled "Fogginess"!

+2 votes     reply to comment
Post a Comment
click to sign in

You are not logged in, your comment will be anonymous unless you join the community today (totally free - or sign in with your social account on the right) which we encourage all contributors to do.

2000 characters limit; HTML formatting and smileys are not supported - text only

News
Browse
News
Report Abuse
Report article
Related Games
Overgrowth
Overgrowth Indie Single & Multiplayer Adventure
Related Engines
Custom Built
Custom Built Commercial Released Sep 1, 2007
Related Groups
Wolfire Games
Wolfire Games Developer & Publisher with 3 members