Flash Game Dev Tip #5 – Configure your games in real-time

Tip #5 – Configure your games in real-time

How often have you been faced with the situation where-by you’ll test your game. Then need to tweak the value of one or more variables (perhaps sometimes only by a small amount) and then test the game again to see if it had the desired effect. If you are like me you’ll end up repeating this process perhaps several hundred times over the course of development.

There is an easier way – and although it won’t work for ALL genres, it could save you some precious time in the long run.

In-game variable editor

The tip is simply to build a panel into your game that allows you to edit key variables on the fly.

Here is a screen shot of such a panel in our game Chickaboom:

The grey panel at the bottom contains controls allowing us to modify variables in real-time, such as:

  • The quantity of birds in the level
  • The speed at which they move
  • The size of them
  • The maximum size gum bubble you can blow
  • The number of birds you need to pop to complete the level
  • The amount of air with which you have to blow the gum bubbles

There is also a Text Area window and a button to restart the level with the new settings. Each time you modify something it generates AS3 source code into the TextArea, which we then cut and paste into the level data for the game.

The panel is draggable, to stop it obscuring the game, and can be hidden and displayed with a single key press.

Minimal Comps to the rescue

Creating the panel was extremely easy. Rather than mess with the complexities of Flash UI components, we turned to the ever expanding set of Minimal Components released by Keith Peters over at Bit101.

Minimal Comps comes as a source package or an SWC, and has enough documentation to get you started quickly.

Here is another debug panel, this time from a game called Kingdums (work-in-progress title!) which is being built with Flixel:

This panel is slightly different in that it’s mostly used to display debug information about the game. In this case the tile you are currently over, and the actions of the AI players. While I could (and do!) trace this to the Output panel in FlashDevelop as well, it means that when Ilija tests the game (which he does by just running the swf) he gets to see the log too, which he’d otherwise not be able to do without compiling it via FlashDevelop for himself.

There are two values at the bottom which can be tweaked in real-time to alter how aggressively the AI plays.

Here is the full code from Kingdums that creates the panel seen above:

I have this in the file DebugPanel.as, which is access via my Registry so is available from anywhere in the game.

You can see a function called updateGame. When one of the numeric steppers is changed, it alters the two player variables in real-time.

Here are some more examples of how I use it:

I appreciate that these examples are mostly for the display of information, rather than variable tweaking. But I just wanted to show how quick and easy it was to get a panel like this thrown into your game. You can create all kinds of things with the Minimal Comps, from buttons, to select lists to sliders. Anything you need to display or modify almost certainly has a corresponding component.

Another thought is to make the panel quite generic. So if for example you are focused on tweaking bullets (speed, power, duration) then you could have 3 numeric steppers to alter those values. And when you are finished and happy your bullets feel exactly as you want them, you can re-use the steppers to alter another part of your game (rather than making the debug panel bigger and bigger)

You can also of course re-cycle your debug panel to future games.

Variable editor vs. game editor

I think it’s important to explain that this Tip is all about building a panel that allows you to edit key game values on the fly. It is something you use during build, then strip away when you’re finished. It’s a disposable tool. This is not the same thing as building a game editor, such as something that allows you to create new levels or maps, and is much more complex subject in its own right.

I’m not saying this concept is revolutionary. Not for a second. Games have had built-in editors for decades. But I did want to show that you can throw a variable editing panel into a game very easily, with minimal fuss. As long as you don’t get carried away it could save you hours of tweaking and fine-tuning as a result.

AS3 Game Object Editor

Updated: 22nd March 2011. After posting this article Damian Connolly went and created the AS3 Game Object Editor. Which uses the concepts outlined above but wraps it in a more generic package that can be applied to any class. In short you won’t need to create a custom panel per game. Give it a go over at: http://divillysausages.com/as3_game_object_editor

Visit the Flash Game Dev Tips Google Code Project page for downloads in this series.

Posted on March 11th 2011 at 7:35 pm by .
View more posts in Flash Game Dev Tips. Follow responses via the RSS 2.0 feed.

13 Responses

Leave a comment
  • March 17th 2011 at 4:07 am

    Real men use simple text consoles,

    not these gui extravaganzas.

  • March 17th 2011 at 9:42 am

    Nice! It certainly saves a lot of time re-compiling. Another interesting approach is hooking in a midi controller for live variable editing – as Martin Dyrby demoed at FOTB –

    Or of course, there’s the DeMonster debugger, which lets you live update variables too – http://demonsterdebugger.com/

  • March 17th 2011 at 10:15 am

    Sensible men know what’s quicker. Clicking a single button once vs. typing a whole variable changing command into a console window. Sensible men have a lot more time to spend on more fun things as a result.

  • March 18th 2011 at 3:25 am

    Well.. you can have an auto complete in your console πŸ˜›

    Can’t stress this point well enough! saves you a ton of time! and Minimal comps is just awesome!

    oh and try this too – http://code.google.com/p/doomsdayconsole/

  • Victor
    March 20th 2011 at 12:03 am

    The way Kingdums looks really makes me wanny play it…

  • March 20th 2011 at 2:57 am

    Soon Victor :) Progress is going very well

  • March 21st 2011 at 4:15 am

    @Richard The GUIs looks nice but your sensible men have to build the variable editors first which takes time and therefore nullifies the said time. πŸ˜‰ I also prefer a console/CLI as it’s usually more versatile and adaptable.

  • March 21st 2011 at 11:26 am

    I’ll swap you the 15 mins it took to add the panel to Kingdums for the time it’d take you to add console access πŸ˜‰

  • woot
    March 22nd 2011 at 10:23 pm

    cool, how about make a tip about complex GUI in game (title screen, level select screen, level editor, config screen, etc) for next article
    are you using library like minimal comps, aswing for GUI in game ?

  • April 2nd 2011 at 2:02 am

    I finally get around to building a reflection-based runtime editor and then come back here to find out I was beaten to the punch. Nice work. Looks great.

    I’ll throw my contribution in, anyway. Highly extensible. Very little code required to work with it. It can pretty much handle anything with a line or two of glue code. Not as polished as this, though.


  • Cleivson
    December 11th 2011 at 5:49 am

    Hi, I’m trying to use minimalcomps and flixel together, but flixel always stills the mouse, so the components of minimalcomps can be clicked, but the mouse doesn’t show up. How could you do to your mouse appear all the time?

  • March 13th 2013 at 11:59 pm

    Great tool and great tips!! You inspired me to use this from now on! Thanks :)

  • wethecom
    January 30th 2015 at 7:16 pm

    i do not know how to initiate this pannel..im using flash builder and flixel…some of the links are dead …anyway i could get some help?.ive copied the files (com.bit101) into my project . i have a debugpanel.as class but there is no static function to call in the class..what am i missing?.im very new to this

Make yourself heard