Upgrade Selector Tool
Introduction
In my team’s game, Poly-Vinyl Pests! We have an upgrade system and like all upgrade systems it needs to be balanced over many weeks. Before this the only way to get an upgrade was to go to the upgrade select screen and reroll the current upgrades until you found the one you were looking for. This process is already tedious for acquiring one upgrade, but when trying to test more than one upgrade combination it wastes a ton of time over the development cycle. My goal with this tool was to allow designers to have an easier time picking upgrades upgrades so that they can test faster and more efficiently.
Tool Design
The first thing I thought when I wanted to implement this tool was: “If I was a designer, what would I want this tool to look like and do?” The answer to this question was simple, I would want a menu that would allow me to add any upgrades in our game to either player at any point in the game. So after a bit of initial brainstorming and asking my designers for a bit of input I started implementation. This is my first draft of the design for the tool in Figma:
Implementation
To start implementing my design for this tool I first needed to make buttons for each upgrade. The upgrade system has 3 tiers of upgrades with 12/15/9 upgrades respectively. This means I needed to make a total of 36 buttons and attach a function to add the corresponding upgrade to them. This was something I was not particularly interested in doing so instead I added the buttons to 3 separate lists, one for each tier. Next I got all 3 upgrade tier lists and loop through each of them to set the button’s text to the upgrade name. Next I added switching between pages to allow designers to see all tiers of upgrades.
Next I needed to add functionality to actually gain the upgrade. Since we already have the name of the upgrade of each button we can get the upgrade and add it to the current player based on the name alone. To get the name of the upgrade the player is hovering over I used the IPointerEnterHandle Unity interface which gives me access to the “OnPointerEnter” function. This function will allow me to get the data from game objects that the cursor hovers over. With this I was able to get the name and create a function to gain the upgrade. All that was left was to add the function to the buttons
Now that we got picking upgrades working we want to be able to switch between who gets the upgrades. To do this we just need a default player at the start, in our case it will be player 1, and add a button that switches the player. When gaining an upgrade we just need to check who is the current player and apply the upgrade to that player.
Finally I wanted to add the upgrade card UI we have in our upgrade select screen. The upgrade cards were made up of 3 parts, the name, description, and art. Since we already have references to all the upgrades I just grabbed the upgrade variables and applied them onto the card UI when the player hovered over an upgrade. I put all this functionality into one function and called it each time a new upgrade button was hovered over. This is what the final tool looks like in action: