Hello wonderful people!
I'm here to bring you a new entry into our devblog. This weekend it's all about UI! Tay, our creative director has written some lovely words detailing his process.
-----------------------------------------------------------------------------------
INTERFACING CONNECTIONHey guys, it’s Tay again,
In case you’ve forgotten who I am, I’m the guy responsible for the overall aesthetic of Beacon, or more formally the creative director. This means everything from concept art, website design, PR materials, 3D assets, and interface design, the last of which we’ll be looking at today.
I originally started out not doing any interface design whatsoever - as a matter of fact, I was focused on becoming an environment artist - but as I found myself on smaller teams, my role began to expand and I discovered how much fun it can be. I wouldn’t go so far as to say I excel in it, but I’ve definitely become more comfortable working in this space.
What is interface design, you ask? It’s not all just about your health bar or a compass telling you where your next objective is, although we’ll be focusing on that application today. Interface design encompasses almost every aspect of interactivity that the player can engage in. This can be anything from how a button behaves when pressed, to how certain information is relayed to the player using the game’s visuals; for example, increasing the size of the player’s arms to indicate higher strength, etc. A video game is essentially an elaborate interactive interface - with the user on one end and his/her input being transferred to the game world. In essentia, a video game without an interface in this sense would be no different than a movie.
Today, we’re going to talk about how the interface design, particularly in terms of UI (user interface), came to be for Beacon. I don’t really have a super solid workflow (still), and creating a certain asset could take me weeks or hours, depending on how inspired I am at the time.
*Important disclaimer - some of the images included below are mockups, and will not reflect the finished state of the game’s UI*When working with UI, I always start out looking at the function of the item. Function should dictate design, giving us certain parameters to work inside and a concrete goal to work towards. It’s my belief that designing within constraints usually produces the most efficient and innovative results.
I begin by having some meetings with the programmers and designers so that I have a base to work from. After the basics are nailed down, and we know what we need the UI to achieve, I set about drawing a couple of sketches, and occasionally creating a UX (user experience) flowchart, usually on Google Drive so that the team can comment on it and inform iterations as we go. Collaboration and dialog is key in this stage, as other people may provide input that can solve issues you never knew were present.
Base UX flowchart as seen in Google DriveNow I go about gathering some references. For Beacon I wanted to aim for a retro 70s-80s lo-fi aesthetic with a really analogue feel for the UI, though not necessarily for the game as a whole. This was more or less an excuse for me to indulge in re-watching my favorite films. I watched Blade Runner, Alien, Aliens, and Independence Day, and ended up getting some pretty cool shots of their UI for reference. Ultimately, I decided on something a bit of a cross between Aliens and ID4 - the cells in Aliens turret interface really looked cool and I took the more modern font from ID4 instead of going pure DOS. The initial results are shown below.
The ‘cells’ from Aliens’ turret interface
Sleeker retro typeface from Independence Day
Original hud iterationWhile the initial feedback from the team was positive, I felt the cells made it a bit cluttered. As it happens, this would prove to be the case later on. The fact that I stuck in a dark semi-opaque background to make the text pop more did not help the matter.
We held off the immediate implementation of the UI in-game as Unity’s new UI update was imminent, and we were hoping it would make the whole process a lot more tolerable. On its arrival I immediately went to work, gleefully inserting components and assets into the game to mimic the mockups I made, almost to the letter, and a few days later Mike hooked up the basics in-game. Well, guess what, after a few weeks we all started to feel that the UI in its current state was unnecessarily obstructive and so back to the drawing board I went.
A mockup of cell-based ‘enemy database’I’m never one to shy away from redoing things if something didn’t work the first time, so I went back to the UI with gusto. This involved rampaging through the entire design, cutting everything back down to the basics. I removed the black background and the containing cells - although the latter remained in structural but invisible form, as you can see below. Organizing UI into grids is nothing new, but it is a practice that works. Using this method gives the UI a uniform look as well as keeping things organized.
New base UI - much cleaner!
Old UI for the character’s statistics in comparison with the newer version below:
his is right about the time when we started programming our mutation system, which is super exciting. In case you have no idea what I am talking about, in Beacon, when you kill an enemy there is a small chance for them to drop some DNA. There are several types of DNA of increasing rarity, the type of which reflects the enemy that dropped it. When you die (and oh, you will definitely die, my sweet prince) you can ‘reconstitute’ yourself, essentially creating your clone in the clone bay to start over again. However, during this reconstitution process you’ll have the option to splice in some of the enemy DNA that you’ve recovered, to improve/modify your stats. Depending on certain parameters, this process can even go on to cause mutations, which give you unique abilities. This is all very crazy stuff which I’m sure we’ll go into with a full-fledged blog post soon enough. Armed with this knowledge, I hope the pictures below are less cryptic.
DNA distribution page, before you sequence your genome for your next buildWe had a really nice design flow going for this one. I actually physically sat down next to our game designer, Kiefen ,and our programmer, Mike and hashed it out together.
Well, that’s that for our current state of UI - I’m really sorry that I couldn’t have provided some mockup gifs in regards as to how those will animate. I’m on a rather crappy laptop at the moment, having just moved to Thailand, and my PC is still weeks away in a shipping container somewhere. I’ll tweet them as soon as I have them, I promise.
Which reminds me, you should totally follow our official twitter account for round-the-clock updates of our shenanigans, big or small. If you like my short ramblings here, be sure to follow my blog where I post weird pondering pictures with no text, and my twitter, where I do most of the same.
Deaaaaath
Community
