2/7 - 2/21: UI Essentials & Skill Trees
I’ve had a lot of progress over the past two weeks. Here are my updates:
UI Essentials (3 Hours)
In order to prepare for the task of creating a functional game UI, I realized that the game will need a lot of systems that are not project-specific. The creation of these systems early on ensures that less work has to be done later, as these systems can be reused later in the project and in future projects. Here is a list of some of things I worked on:
Tab System: A system of buttons that enable/disable game objects on click. This Tab System is extensible and flexible. It would good use for a shop or a pause menu.
Flexible Grid Component: Unity’s UI Grid Component has a lot of issues (mainly that it doesn’t resize elements and doesn’t do the things developers usually expect). To solve this, I followed a tutorial on creating a Flexible Grid Component (https://www.youtube.com/watch?v=CGsEJToeXmA&ab_channel=GameDevGuide). This will likely be useful for displaying items in the shop.
Tooltip System: A system that displays a popup near the mouse so players can easily get a feel for what’s going on. A component called a Tooltip Trigger enables and disables the tooltip, and sets the content and color. I considered adding an image compnent to the tooltip, but I ended up deciding it wasn’t a necessary feature yet.
Drag and Drop System: A system that allows players to drag items onto certain locations. It is currently a bare-bones implementation, but I hope to expand on it in later sprints.
Below, you can see a screenshot of the tab system and the flexible grid component:
Skill Tree (9 Hours)
I created the basic implementation of the skill tree. One of the first challenges was creating the skill system (without it, the tree is meaningless). I spent a lot of time planning out the best way to approach it, but in the end I came with an extensible, designer friendly solution. The data about a skill is represented as a ScriptableObject, which includes the name, description, icon, cost, etc. This object doesn’t contain the functionality of the skill. A SkillManager component sits on the player prefab and handles the locking/unlocking of skills. Other components can query the SkillManager to determine if a skill is unlocked.
With that system created, I spent the rest of the time creating the skill tree system. My primary objective was to make this a designer friendly solution, and one that easily adapts to the content of the tree. Here are some of the features of the skill tree:
The skill tree automatically sets the tooltip when the icon is hovered on the tree (e.g. if you moused over the skill “Calculus”, the tooltip will be set to it’s name and description).
When an icon is clicked, an “info” screen about the skill appears. This displays some more information about the skill, including the cost and status of it. If the player can’t purchase the skill, a tooltip will be displayed about why (for instance, if the prerequisites haven’t been unlocked, the tooltip will tell the player the skills needed to unlock).
The color of the skill tree icon changes based on whether the player has unlocked it or not.
The designer only needs to specify what skill each node is and where it is placed on the tree, and the skill tree system will automatically figure out the rest (this feature of the skill tree took the most time).
This system has a few flaws (mainly that there are no checks in place for if the player can afford a skill because that system isn’t set up yet), but it is a good showcase of what this system is capable of. Soon, this system will be making it into the builds, but it is currently not integrated yet.
Below are some pictures of the skill tree:
