Key Events
• Updated Battlefield UI

Many of my UI elements have been pretty ugly so far, but those days are soon coming to an end. I’ve now received pretty much all of the game’s artwork and in the last few weeks I started implementing the UI portion of that work. There’s still plenty of polish to add, but here’s a look at the battlefield UI in its current state.

The biggest change in the last few weeks is that I’ve finished my contract with Scott Pellico, the game’s illustrator. I’ve been working with Scott for the last 8 months, so it’s weird to no longer have another person on my team. You can see some of the work that Scott created for both my brother and I on his portfolio site, and I highly recommend hiring him if you’re looking for a talented and hard-working illustrator.

Things came down to the wire with Scott, but I think I have about 95% of the completed artwork I’ll need for my game. While I’m going to miss working with Scott, I’m really excited to implement some of the work he’s created. My UI has gotten quite the overhaul over that last few weeks and I’m really enjoying the process of turning a prototype into a reality. There’s still a lot of work to do, but here’s breakdown of the new and improved UI elements I’ve recently implemented.

Chat Bubble

I plan on using chat bubbles for the in-game dialogue between characters so it was pretty important that those don’t look ugly. As always, Scott delivered.

Health Bar

Each character starts with a health bar consisting of 5 bubbles. The good guys have green bubbles and that bad guys have purple bubbles. When a character is damaged the bubbles turn red and then shrink to represent the remaining health.

Character Turn

All of the living characters appear on the left hand side of the screen in order of character turn. Good guys are in green and bad guys are in purple. The active character is at the bottom and appears larger than the characters awaiting their turn. I may show character attributes like health, strength, mana, etc, down the road, but I’m going to work on gameplay before deciding which character information needs to be shown.

Character Actions

By default a character will have attack, defend, and move icons, which can be triggered by clicking the appropriate icon.

The move and defend actions are pretty self explanatory and while the attack icon is just a single attack option right now, it’ll get more complicated with multiple attack options in the future.

Movement Range

The tiles that are in a character’s movement range appear as green rhombus shapes.

I’m pretty proud of that artwork because it’s one of the only assets that I created myself. And by create I mean cut, paste, hack, and colorize other various pieces of artwork that Scott provided into something that looks acceptable.

Attack Range

The attack range is displayed by a series of purple rhombus shapes (also designed by yours truly). If an enemy falls in that range then the shape is twice as dark as a position with no enemy inside of it.

Confirmation Check Mark

I didn’t have any type of confirmation for events the character actions at first, but I felt that too many mis-clicks were happening. For example, if I accidentally clicked on the defend icon instead of the attack icon then the character would defend themselves and essentially lose a turn. A mis-click could be the difference between winning and losing a battle, so I added a check box icon that confirms a user’s action.

Victory Screen

When you win a battle the victory screen and then a continue button appear. The continue button is another artistic hack on my part, and the font might have to change, but it’s serviceable for now.

Pro Tip – When the victory screen pops up, you should read it in Johnny Drama’s voice.

Next Time

There are a bunch of minor fixes for the UI, but I also plan to start adding music and sounds to this first battlefield. I’m still a few months off from my immediate goal of completing the first 4 boards and having a playable alpha, but the remaining work is all on my end now that all of the art assets are in.