I used photoshop and procreate to design each UI screen below. I also did the blueprint programming and implementation for the Spellbook and spell selection screens.
Spell Selection Screen
Player HUD
The Spellbook
Shop Screen
The first version of the Spellbook utilized UE5 UMG’s native Tile View system. This was done with the assumption that it would simplify the process of populating the spellbook with data and displaying that data in a grid. This method did not work as elegantly as planned.
There were a few problems with this system, and after completing it, I ended up rewriting it completely a few days later. Here is an excerpt from our revision control, in which I explain this decision:
There were a ton of issues with the previous version of the spellbook, due to its reliance on Tile Views.
First, they aren't really meant to support dynamic changes, so selecting a tile simply deleted data from its parent container, and migrated it to a new container. This may cause big issues later when we are doing a beauty pass of the UI.
Second, there's some engine bugs with how data is visualized, causing containers to not refresh reliably. This will make hotswapping difficult to pull off.
Third, tile views will always resize to be as small as possible. This means moving something out of your inventory will instantly shift every element over. This makes keeping track of all of your letters kind of difficult and disorienting.
For all these reasons, I completely rewrote how the spellbook works. It now uses a drag and drop functionality and provides a much smoother and more stable experience. Currently, there is only one word, so I will add the next two later this week. I will also update the drag and drop system to support switching two tiles if you drop one on top of another.
Spellbook 1
The updated version of the spellbook looks a lot cleaner visually. The player’s found it much more intuitive as well.
This system was designed using UMG’s Uniform Grid Layout, with custom population functions that I designed. This allows me to have much more control of the layout and control of the Letter Tiles and Spellbook.
This also featured the ability for players to drop a tile on another tile, swapping their positions. This was not something I could accomplish in Version 1 after several hours of trying.
Players expressed frustration with the speed of creating words, as there was no feature to allow the player’s to snap a letter to a position. This was not something we chose to include initially, as we were unsure how to approach the problem caused by the fact that the players have 4 possible locations for letter tiles to snap to (the inventory and 3 spells). This meant that if the player wanted to snap a letter from their inventory, there would have to be some sort of secondary input to determine where the tile would travel to.
Eventually, we narrowed in a compromise that would simplify this process, and allow for tile snapping.
This—at the time of this writing—is the current spellbook. Two major features were included here, that allowed the system to become much more intuitive:
Spellbook2.5
The final version of the spellbook contained more visual feedback, tooltips, and finished artwork.
When the player has an invalid word, the player is notified by a desaturated spell icon with chains in the foreground
When the player has a valid word, they are notified by a lightning effect on each tile
Hovering over each spell icon provides a tooltip featuring a description of that spell, as well as updated stats, affected by that spells word.