How I ended up handling GUI elements in ImpactJS

I had a brief chat on Twtter with @mrlasertron yesterday about GUI in ImpactJS and decided to make a post about how I’m handling all GUI elements in my project (nicknamed Vostok until I decide on a title) yesterday. This project is more UI heavy than any other I’ve done in Impact, so putting this together has involved much experimentation, makeshift diagrams of relationships between elements, and trial and error. First, some screenshots of the current state of my UI. Everything here is a placeholder, but this will give you a small idea of the kind of thing I’m talking about:

[gallery columns=“4”]

Requirements

I knew that I would need a windowed GUI. Players need to expand details about artifacts they’ve picked up in the previous level, switch between upgradeable components of their ship, apply relevant upgrades, etc. At first I had a custom GUI class…then that expanded to GUI entities for windows where relevant…and then it was consolidated, with the entire thing now being done in gui.js, which is a collection of GUI entities.

But the most important element of the GUI is not in this file. All clickable elements are spawned in a generic Trigger entity, stored in trigger.js. This entity doesn’t just handle clickable elements in the game but also checkpoints, event triggers that activate when the player touches them, etc. So when there’s something the player needs to be able to click on, I spawn this generic entity with the “kind” attribute set to what it’s supposed to be. Eg:

            ig.game.spawnEntity( EntityTrigger, this.pos.x, this.pos.y, {kind: 'closeButton', parentEntity: this, size: {x: 20, y: 20}});

In Trigger.js, if the trigger entity is clicked and its “kind”  is “closeButton”, it picks it out of a switch statement:

            case 'closeButton':
                this.parentEntity.kill();
                for( var i = 0; i < ig.game.entities.length; i++ ) {
                    var entity = ig.game.entities[i];
                    if (entity.parentEntity === this.parentEntity) {
                        entity.kill();
                    }
                }
                break;

The above first kills the parent entity that spawned this close button, then goes through all of the entities that currently exist and kills every other entity with the same parent as that trigger entity (just in case there were any other child entities spawned) including itself.

So really, my entire GUI system sits in gui.js and trigger.js. I then spawn and kill entities as required. I always try to keep the number of GUI entities I spawn to a minimum, and put as much as I can in the one main EntityGui entity (that’s sized at 1px by 1px and sits in the top left hand corner of every level, then draws stuff where required).

Other Stuff

I’ve recently had a few conversations about the tools and software I’m using when working on the project. At first it doesn’t really seem like all that much is involved - a code editor, MAMP, ImpactJS. But if I really think about it I’m using quite a few other bits and pieces when working on different things.

Browser - Chrome Canary Engine - ImpactJS Code Editor - Sublime Text 2 Local server - MAMP

Version Control - Git (Github) Git client - SourceTree

Documentation - Scrivener Graphs/charts - OmniGraffle

Art (I use the term loosely) - Photoshop CS5

comments powered by Disqus