GUI Editor

So, DeRail Engine has an integrated GUI system that we normally write xml for. Well, I got tired of trying to teach designers to code, so...

An editor was required!
Not that our designers can't work with xml. they do it all the time for settings and such, and problems rarely occurs. The difficulty comes when the xml is more advanced than a list of properties, which, for some reason, designers brains aren't really equipped to comprehend, i guess. Naw, just joking a little. Just a little...

Because the xmls get huge
The thing is, when you are dealing with atleast 5 lines of xml just to make a button, imagine how much xml you have to write to make the main menu of for instance Panic Attack. I can tell you that the generated xml takes up roughly 140 lines of xml.

And designers can't spell if their lives depended on it
All of which is very sensitive to things like typos, which designers never spot, as their mind is somehow oblivious to tiny details like that. We programmers however, tend to develop an eye for spotting typos, as all programming languages worth to know dont really understand what you are talking about if you write 'Konsoule.WirtLaine("Utter bullshit");' in your code, whereas a designer would probably be reading this and thinking "why not? o.0"...

Since i developed the Sprite Editor (gonna show you that one when i start revamping it), I have allready made an in-house edition of the handy xna winforms control from the samples MS provided. I just hooked up some events for drawing and initializing and some other stuff (not really interesting). So i pulled up a blank project and dropped the control on the form and tried to run it. Which didnt work. Dunno why. Still don't know, actually, as I ended up just making a copy of the spritetester project and deleting all the unwanted stuff. I don't like wasting too much time figuring something out when i have a solution at hand.

After getting the XNA Component up and running (and drawing), I put in the required fonts in the content-project and wrote some code to import them into the FontProvider the GUI uses to find the correct font based on the fontname from the xml (also works in reverse when storing the fontname to xml).

Not an instance of an object
I have been seeing this error ALOT! Somehow developing a game engine to require an instance of Game is really, really stupid if you ever want to make winforms tools for it. So I have spent some hours coming up with ways to avoid this issue. Problem resolved for now, by making it possible to set the required instances in the GUI class before using it, making it skip fetching them from an instance of DeRailGame (GraphicsDevice and SpriteBatch).

Some logical errors have also become apparent. For instance some confounded developer made it so that a GUIControl that has child-controls adds them all to the parent GUI's Controls to simplify updating and drawing them (Yes, that would be my doing). When loading the handwritten XML this was no problem, as the controls were only located in the GUIControl being the parent. Uppon saving the GUI back to xml, however, the references to them from GUI.Controls were also in the xml, which caused them to become their own instances when reloading the GUI. And since GUI can't have two controls with the same name, the childcontrols were denied entering the update and draw loop alltogether.

After some tinkering I ended up solving this by Adding a private "AllControls"-list in GUI that wouldn't be output to xml, and running update and draw on those. I think I'll have to change this, however, as making the parent control invisible doesn't make the children the same.

Selecting controls
An important thing for a visual GUI editor is the ability to select a control to edit/move by clicking on it in the GUI-Preview window. To do this was actually easy; I just figured out where on the control the user clicked, did a translation to GUI-space coordinates (the preview is auto-scaled) and just did a search for the GUIControls whose bounds (Rectangle) contained the Point that was the cursor. the topmost control would be the last in the resulting collection, as it would be farthest down the hierarchy that is the control-tree.

Today I wanted to figure out how to make a versatile way to edit the controls kindof like the properties-window in visual studio. and guess what, there is actually a control for that called PropertyGrid! So now i have come so far as that you can open and save user interfaces, edit their xml and see the results in a preview, test menu-behaviour (input), select and drag control, see the bounds of the selected control, edit some of the properties of the control.

Image Hosted by

By stigrune at 2010-10-27

A little video showing some features (that don't all work/are still buggy)

Latest Jobs


Playa Vista, Los Angeles, CA, USA
Senior Level Designer (Zombies)

PlayStation Studios Creative Arts

Petaling Jaya, Selangor, Malaysia
Lead/ Senior Asset Artist


Playa Vista, Los Angeles, CA, USA
Senior Gameplay Systems Engineer - Treyarch

High Moon Studios

Carlsbad, CA, USA
VFX Artist
More Jobs   


Explore the
Advertise with
Follow us

Game Developer Job Board

Game Developer


Explore the

Game Developer Job Board

Browse open positions across the game industry or recruit new talent for your studio

Advertise with

Game Developer

Engage game professionals and drive sales using an array of Game Developer media solutions to meet your objectives.

Learn More
Follow us


Follow us @gamedevdotcom to stay up-to-date with the latest news & insider information about events & more