Dabbling in UI

Posted on September 29, 2012 | 4 minute read

After js13kGames I went back to the main project I was working on and decided to change pretty much everything. The good thing is that I still had some usable code. The “bad” thing is this updated idea involved a lot of UI, which I haven’t really done much before. When I say “bad” I actually mean awesomely challenging, which it has been.

So over the past week or so I’ve been working on an upgrade system that (warning: dodgy chart ahead) looks kind of like this:

Vessel Upgrade Diagram

Makes no sense whatsoever? Yeah, it doesn’t make any to me either. Well, it does but only because I already kind of know what’s going on - and it’s a reminder to myself about what the heck is going on. And what’s going on kind of looks like this:

JavaScript title screen

(Note the GW2-borrowed placeholder images). Well, more specifically like this:

Level finish/upgrade screen

The basic idea is you click on a part of the ship, it spawns an upgrade window that lets you view and equip/unequip upgrades that you get by killing and investigating alien ships during each level. All of the actual graphics are going to change, but the upgrade functionality is about 70% done. I just need to limit the number of upgrades that can be applied to each component of the ship.

I won’t put all of the code here yet, but the general gist is that I have an Inventory class that has objects for every weapon and artifact (artifacts hold upgrades) that the player can find and equip. These then get sorted into weapon, upgrade, and artifact arrays. For example, an artifact might look like this:

this.art2 = {name: 'Tiny Wing Portion', entity: EntityArtifact54, kind: 'artifact', image: this.artifact54pxImage, logNote: 'Service due on 56.23', techNote: 'Wing steering upgrade discovered!', upgradeNote: '+ Rotation speed', upgradePart: 'Wings', attribute: this.modTurnSpeed, effect: 1};

this.art2 then gets added to the Artifacts array when the player picks it up, and the Upgrades array when the player equips it. At the end of the level, the “Mission Accomplished” UI appears where the player can view the artifacts he/she owns and the upgrades that are available. This is done by spawning GUI entities (with some help from a GUI-specific class).

This is my first time doing anything this UI heavy so everything is still pretty messy, but it works and from what I can see so far is pretty scalable for when more items are added.

For the next few days I’m going to take a break from the code to focus more on each character’s story and the overall narrative of the game (which is driven by log notes found in artifacts that are picked up, another interesting challenge because not every player will collect every artifact). Then I’ll focus on individual missions starting with the female character and going back to the code.

Characters

The idea is to have three playable characters in the game, but for now I’m focusing on going one step at a time and worrying only about the female character. However, the gist is that every character has its own job title, with missions leaning toward (but not limited to) that job. I think I’ll need to make a separate post about this later because this could turn into an essay if I keep going.

Sweden

Oh yeah, and then there’s Sweden. TheĀ only slightly annoying thing about this place so far is the weird way that people queue. It’s so frustrating, in fact, that I don’t even want to talk about it. Other than that it is great and while I miss my Australian friends I am so happy to be here. The main priority now is finding a job that I will enjoy. But now, freelance work and working on this game are the two predominant activities. I’m exploring Stockholm a bit as well, but to be honest most of the time I just feel like going to a coffee shop and working on the game. But I’ve discovered a few great coffee shops as a result!




Categories:game dev dev games
comments powered by Disqus