Hey everyone! Welcome to the 10th week. A double-digit… phew.
Last week, I planned to finish a significant chunk of the prototype but got stuck with something else that was equally important — UI.
Players will have to interact with different UI elements which pop in and out during the game. And the UI system I had last week was barely working and was creating a lot of hindrances. There was no way I could proceed with the development without fixing the UI. So that’s what I was doing…
TLDR:
- I worked on a bunch of UI-related stuff and refactored the code.
- I made sure controlling the UI could be done with the keyboard alone at all times.
- Detached the mapping of the movement keys (WASD) from the UI navigation for the gameplay.
- Started adopting better workflow and documentation using FigJam.
So, let’s begin.
UI problem 1: Controlling it only with keyboard
When playing on a computer, you can, of course, use the mouse to click on the buttons. But I had to keep gaming consoles in mind as well. The rest of the game doesn’t require a mouse. So having to use it only to interact with the UI was not correct.
The good thing is, Unity’s UI has a good visualization of how the focus will shift from one button to another. Even when re-arranged, the arrows will update logically for the most part. It lets players go through different buttons and select the right one easily. The problem was, to do that, a button had to be at focus state first.
You could add a button to the “First Selected” field in the Event System component. But that wouldn’t help as I had multiple groups of button controls which would appear one at a time, and for each set, I had to have a button in focus.
Fortunately, the solution was easy. I did not know this before but did you know that the UI button has a Select function?
UIButton.Select();It doesn’t trigger the button itself; just have it focused. So when you press the “Enter” key, the button will get activated.
This way, I could easily have a default button set for each group of buttons in the UI and use the keyboard to navigate them.
UI Problem 2: Not let WASD keys control the UI
I had a strange requirement in the game. The way I had set it up, the player will be able to move the character using the W, A, S, D key (for up, left, down, and right). Players can also bring the Buttons UI popup anytime they want to switch between different commands (the four buttons in the above image, for example). The way to navigate it was, of course, by using the Arrow keys. But the way unity is configured, you can also navigate them using the WASD keys.
Now usually, this won’t be a problem. Having both the arrow keys and WASD keys mirroring the same function is good and gives the players enough flexibility in the way they want to interact. But in my case, the player is meant to access the UI popup while also moving around. That meant the players would be interacting with the UI when they just wanted to move forward. It wasn’t working well.
I tried to change the mapping of the UI navigation but didn’t know how to do it. That’s when I learned that the new Input System of Unity comes with its own “Input Action Asset,” which has the UI controls mapped for keyboard, joysticks, and gamepads.
Unfortunately, that’s non-editable.
But fortunately, I could simply copy the UI mappings for different devices from the Default Input Action asset to the one I created, and it just works.
Once done, I went to the EventSystem → Input System UI Input Module and replaced all the Input actions from default to the one I made. I removed all the UI navigation mapping done to the WASD keys, and voila… I got it working as I intended.
UI Problem 3: Make the UI button float above the right game asset
Currently, the UI buttons appear at the center of the screen. Its position is relatively fixed. But I want some of the contextual options to appear above the right game asset and stay put. I am yet to figure out this issue.
Other stuff
I was using Codecks all this while to manage my project. But I found it to be limiting and needlessly coming in my way. So I thought I’d try using an online whiteboard tool. This time I have gone with FigJam… It’s just nicer when you have a big whiteboard to work. I have just set it up and, I’ll let you know how it works for me in a couple of weeks.
Next Step
I have my work cut out for me. It’s been going great so far. I have some new ideas for the game’s visual style, and I can’t wait to work on it. But this week is dedicated to the basics. I’ll finish up the UI and some leftover pending work. Then I’ll be ready for the good stuff.
That is all for this week. See you next time.
I wish you very well!
Originally published at https://www.theearlyowl.com on October 25, 2021.
