User Interface


Drawing Upgrade & Remove Button

In these two methods, we will draw the buttons for upgrading and removing towers. You’ll notice that these two methods are very similar, since they do similar things.

See code for drawing remove button

See code for drawing upgrades button
Both of these methods draw a rectangle with text. We use strokeWeight() and stroke() to change borders around the rectangles, and fill() to fill the rectangle with colour. The PVector upgradeLocation and removeLocation represent the centre of the upgrade and remove buttons respectively. We use a PVector to have a ‘centre’ coordinate to make it easier to check if the user is pressing the button (in upgradeCheck() and removeCheck() above. For the remove button, we just have to write some text to indicate that this button is for removing towers, in this case we just write “Remove” on the button. For upgrades, we also display the price of the current upgrade. This means that we have to get the cost of the upgrade, which is calculated by towerPrice[temp[projectileType]] / 2. Finally, we can use text()to write this to the user on the button.

Creating a tower UI

Now that we have all the methods in place to upgrade and remove towers, we can draw the user interface. This UI will contain the upgrade and remove button, but also tell the user what level the tower is, as well as the damage and range of the tower when it is clicked.

See code for drawing tower UI
We start this method by reusing the towerClicked variable, which stores the towerID of the tower the user just clicked. If it is not equal to -1, that means that some tower is being clicked right now, so we can display the tower UI. We will get the tower data of this specific tower from the ArrayList of towers, and then store it in a local temp[] array. This will allow for easier use, since we will need to access the level, range, and damage of the tower. We draw the rectangle which will be the background for the tower UI, then the text indicating the tower’s stats. For the level and range stats, we can take it directly from the temp array since both of those values are stored. To display the damage of the projectile, we call the dmgFromProjectileType() method (explained above), then display that value. To end off this method, we draw a line to separate the stats and the buttons, then we can call the drawUpgrade() and drawRemove() methods to draw the upgrade and remove buttons respectively. Finally, the upgradeCheck() and removeCheck() methods are called to make the buttons actually work.