Early Grindy Gacha UI

These are the first three versions of the Grindy Gacha UI.  You can see the progression in both layout and node choice as I learned the capabilities of Godot. 

In the prototype versions of the UI, I focus mainly on setting up buttons, as these were the interact elements that I was familiar with, and you can see this full prototype dashboard view is full of all the buttons that I would need in the game. That was essentially how I built the prototype by linking all these buttons to the game script. My idea for the dashboard view was that everything would be visible at a glance this wasn't designed for a player, but for designers to understand what the game mechanics were so everything was on the screen, and there were some hints of extended list for the menus and arrows to suggest tabs or sections to keep things organized. It was all menus and horizontal boxes and vertical boxes.

When I was getting ready to ship the prototype, I had to make a lot of adjustments to the V1 UI mainly hiding all of the unnecessary UI elements that would distract the playtesters from the core gameplay.

So there was a lot of work to hook up heroes in the code. Only the ones the players acquired were made to show up. I hid features that weren't available in the prototype such as items and cards. And the prototype would start with a fairly empty screen only showing the player the early grinding forging in gacha actions and a little bit of the story elements.

Features became unlockable.  I hid the research and prize sections, they were no longer available or visible to the player at the start and players would have to pay a little gold or make progress towards their missions to unlock them.

After cleaning up the UI, the prototype became a lot more readable to playtesters, and I could focus their attention towards the core gameplay experience.

And finally, this is image below the UI mock up for the pre-Alpha version that I'm currently building.  The biggest difference is that I'm using mostly color rectangles to block out all the buttons and shapes, and that I learned how to anchor containers to the corners of the screen.

My favorite part about using color is that I can actually paint in the visual hierarchy to the scene instead of all the buttons looking the same. By me setting a color and a shape, the interactive elements can have a different texture and quality to them just . 

I also started using tab containers. This is something I learned from developing the main menus and settings menus. The tap containers let me compartmentalize different expandable and minimize minimize UI sections.  I did this to the upgrades and heroes sections in the corners.  This lets me easily hide collapsible UI groups so that there's more room for the core gameplay and that the player can choose when they actually want to interact with these supporting features.

This layer is what I'm going to build off of for the alpha built as I move into pre-alpha production work. in this version the game isn't interactable yet, but I can already get a good sense of how each feature is presented to the player, how much screen space they might take up or have room for, and also be able to think about making sure all the context is presented to the player when needed.

These are the procreate exploration sketches for the screen. I talk more about them in my last video but I can explain really quickly here the basic thought process. 

The core gameplay experience is going to be front and center perhaps bounded in a box and that leaves a room for the UI elements to take the space of the left right and bottom of the screen.

I try a few variations each one touching on different feature types so the first hear with gotcha front and center and the main feature on the left with the map on the right

The second one is more about requesting layout where I'm showing the progress for quest on the left side of the screen. Each quest has four little pips to show the party members that are assigned and then in the center of the screen is a quest party staging area where the player can make adjustments to their team before dispatching.

The third one is a variation on the last where the staging area can be expanded which covers the core window in the center and on the left and right I was playing a little more with different shapes so you see more triangles and and inspector profile for heroes on the right

This is just a simple map with large icons representing each region

The thinner rectangles on the margin allow more screen space in the center for featured gameplay

I threw in a little character, hero sketch here I rather like this one I might go ahead and do a full render

This example of all the navigation being on the left, and then the player having a pop-up tool tip when clicking on impracticable or upgradable things so this pop up in the center of the screen shows upgrades and detail details about the upgrade

And get in these last two images, I marked up a relationship conversation between two characters and also a larger version of the prototype style opening of gotcha boxes.