I had a lot of time to think about the UI since last session, so let’s get to it.
Here we see the four basic commands: Talk, Look, Move, Notes, and Settings. Sorted left to right and top to bottom in order of which might be the most used in general.
Interactions would obviously be the most relevant (think showing NPCs things and such), next to that would be Look (used to get the things you show people but also as an “idle chatter” option), which would be used more than changing places, and the two non-gameplay options would be together in their own corner. I might change the button to a half and half configuration but I like the nestled idea for now.
If you remember, last time I mentioned we need a basic screen with a tabbed alt (so to speak). Just for fun I kinda visualized how the transition would go. Let’s start with the easiest one in Look:
This illustrates the main idea I have with the UI where instead of the whole screen switching suddenly, the elements morph into another format. In this case the Look button expands, “pushing” the other buttons aside except the Settings one which becomes the Return button.
From here, let’s move onto the other non-tabbed menu, the Move screen.
Same principle as the last one. Press button, things move, menu is deployed… and now that I think about it, I really like the idea of leaving the tab, so let’s say the Look menu stops at 3 to make it consistent with this idea.
The buttons being squares is something I’ll explain in a moment.
Next we move onto the Talk command.
The format gave me a solution to an earlier problem I had. If you remember, the Talk graph had a clumsy problem of having a “select speaker” and “select item” thing going on. But with the idea we’ve been toying around today a solution to make it single-instance and avoid that just came up.
Those circles at the bottom would be portraits of the people available in the current scene, and the squares to the right would be the category tabs.
You select who to talk to and what to show them and the right would have “People” “Things” and “Places” as separate things.
Every button would also be a square with a recognizable icon. This isn’t just to economize in space and strings to translate down the line, but it would be neat to create a flow chart that’s all icons both for testing and maybe as an official guide.
And THIS gives us a good baseline for the two missing screens.
Notes would be mostly for flavor. As mentioned in the last log, it needs to show something else after you press one of the buttons to see its details, image and text and all that. When you’re in the mode where it displays details, the buttons in the middle then shift to the top so you can cycle through all the entries.
We’ll copy a similar format for the settings.
It’s a little bit anti-climactic, but maybe it can be refined with the fact that it’s nestled
This UI-making process is actually not too unlike what we did with VA-11 Hall-A. The difference is that I’m iterating on paper instead of through coding. But the important part to remember in general is to think function first and then the rest will come shockingly naturally.
If you’ve followed the other devlogs (the ones from this year at least) you might notice that hey, all these effort are actually focused for once. Instead of worrying about a late-case scenario I’m starting with the actual function for a change.
This is actually not unlike how VA-11 Hall-A started. The current available build of the prototype has a different UI but it first looked like this:
You might notice it’s the function at its purest. Then we added the drag and drop and everything else went from there.
Throwback aside, let’s throw away the current to-do list and focus on the next steps directly ahead.
To-do list:
- Create buttons that morph as intended
- Probably simple shapes that let me change their dimensions and also color.
- Make each menu spawn buttons
- Attach rudimentary actions to each button to adjust later
Public log ends here.