At the time of the last update, we were agonizing over the battle user interface. This might not come as a surprise to anyone, but we are still agonizing over it--however, the level of agony, profanity and sacrificial shit, I'm glad to say, has been reduced by approximately 73%. Which is pretty close to baseline levels.
What this means basically is that the UI is in a pretty good spot at this point, but getting there was not easy. In fact, I would say that the UI has been the most difficult part of this entire project, next to the part of the day where we both realize we have drank too much coffee and cannot have any more until the next day.
So, why has this thing been so difficult? Lots of reasons. First off, everything was rewritten from scratch, and I mean everything. That is, everything relating to the UI. The battle mechanics themselves were not rewritten, however, which means that all of this new UI has to work with some already wonky shit. Ideally, a lot of the battle logic would be rewritten too, but ain't nobody got time for dat.
Right off the bat, rewriting something that previously worked is kind of a depressing, but necessary prospect. This was done solely because our old UI looked like ass and could only be interacted with via the mouse. The new UI, in comparison, still looks like ass (but a good ass) and can be interacted with using multiple input methods simultaneously, including mouse, keyboard, XBox controller and Ouija boards. (Fun fact: the name of this post was originally going to be "Putting the UI in Ouija")
We also wanted to remove any of the 'fluff' of the previous battle UI--for instance, why have a confirm/cancel button after every option? Canceling and confirmation are now based on controller or keyboard button presses (for the mouse, simply moving the mouse back to the previous 'panel' will cancel the current option.)
The idea was to group all battle options into four-panels or layers. The initial UI layer contains all of the main options: "Move", "Attack", "Skills", "Items", and "End Turn". This layer is always shown when a character is acting. The second layer is simply a "Confirm" button and is only used while a character is moving. (Not entirely sure how I feel about this.)
The third layer represents actions that the character could take. When the character selects "Skills" or "Items", this layer is shown and populated with the respective choice's actions. The fourth layer is something that was not present before and represents the targets that the action can affect. This layer is shown whenever the character selects "Attack" or any option from the third layer. We felt that the inclusion of this layer was necessary to further clarify just who the character can affect with a specific action.
Much of the difficulty came from figuring out how to get Unity to manually select or deselect options for you. For instance, anything that you mouse over is 'selected' automatically by Unity. This means that, at first glance, it is not feasible to use the mouse and/or keyboard simultaneously, since Unity will effectively select two things: the thing you actually have selected, and the thing you have the mouse over, which is pretty shitty. We got around this by temporarily disabling mouse input if the character had previously used another input method. This isn't the best solution, but it seems to be the only available one at this point.
The entire look and feel of the menu system is DRASTICALLY different. It's honestly pretty ridiculous how much can be achieved with a few simple textures and different effects. A lot of time was spent on figuring out exactly how to display this (how do we handle menu options that can't be used?). I'm not going to bore you with this, but know that it was deceptively difficult to get certain 'simple' things to happen properly. For example (I lied, I'm going to bore you), any action that gets mouse over'ed (highlighted, for future reference) will display a target radius--even if this action cannot be used (lack of SP, lack of targets, et cetera).
This means that options that cannot be used can still be highlighted, but cannot be clicked on. Essentially, any button is in one of three states: Idle (the button is doing nothing), Active (the button is currently highlighted) and Disabled (the button is shown, but has a gray tint to it). For the purposes of highlighting something that is disabled, you would essentially need to make it active as well. For whatever reason, I could never get the animator to behave properly (Transition from 'disabled' to 'active', but keep the gray tint.). The solution was to have a 'Selected-Disabled' state, which I thoroughly hate. And that's the price you pay for trying to do things the way they should actually be done--spent about a day and a half trying to get something 'elegant' to work, when the real solution was there the entire time (and took about thirty minutes to implement.)
And this is just focusing on the actual 'menu' part, which is just a half (or a third, really) of the overall UI. The second part refers to the actual character info, rather, the panels that are displayed in the top portion of the screen. Previously, these were the assiest (this is an adjective now) looking parts of the entire battle screen. (Even in the previous update's picture) They have been drastically updated and are moreover, completely animated.
For instance, previously, a character would choose an ability and that would be about it. You would get a shitty little text area in that respective character's panel showing something like "Lunge 1/3 hurr durrrrr". Not anymore, though. Instead of describing what it looks like now (which I really should have done with everything), refer to the picture at the bottom. Granted, an image won't show the animations, but we'll save that for another video and/or playable demo. :)
I'd feel bad if I didn't at least mention the third part of the UI, which refers to the elements shown on the actual battlefield. The most important part of this area is the displayed effect radius, which I feel deserves an explanation for as much shit has been involved with it.
This is created by taking a mesh (usually a disc, sphere or box), placing it at a certain height above the character's location, then having a projector object project a shadow onto the ground based on that mesh. This mesh is then scaled depending on the character's selected action's effect radius. A neat effect, but also very expensive. Much time was spent trying to figure out the best combination of visual quality, while still preserving the frame rate (which deserves its own post entirely).
The biggest improvement is that this mesh is now animated, meaning that it can rotate, fade/blur its edges and smoothly expand or contract. The overall effect is pretty impressive and adds more visual clarity, which is always a good thing. We also revamped both the target selection icon as well as the target highlight glow:
![]() |
| Shameless FPS plug in corner |
Anyhow, as you all know, we are preparing for our first (and possibly last) conference in November. There is still a metric shit bushel of work to be done, so here are some of the tasks ahead of us as we prepare for our public shaming (and/or public intoxication charge):
-Tie up any loose ends regarding UI stuff (should take about 2-3 days)
-Add 'Battle Finished' screen displaying EXP, benefits, et cetera (1-2 days)
-Fine tune Molsha cutscenes (1-2 weeks)
-Add final Molsha area (1 week)
-Populate Molsha scenes with enemy spawns/loot drops (1 week)
-Add some kind of rudimentary enemy AI (who the fuck knows)
-Sound effects/music (???)
-Fix lingering issues with character animations/riggings/timings/et cetera (1 week)
-???
That being said, blog posts and FB updates will probably be even sparser (which I'm sure no one is upset about),
Good night, and good luck.


No comments:
Post a Comment