2D Mobile Game: Shop UI Buying Items

Intro

In this article, we will cover how to distinguish which button in the Shop UI was being pressed using a selection image for the user, identifying which item was selected through code and “purchasing” these items if the player has enough gems. The items will not actually be given to the player, but will be setup so that functionality can be implemented.

Setting Up Item Buttons

Each item in the Shop UI is a Button, which comes with the ability to call a function from a script when click.

We will need to assign the game object of the script we want to access and this would be the Shop Keeper game object. We will need to a function to this script that will be called when the Button is pressed.

In the Shop script (attached to the Shop Keeper script), we will create a public method that will let us know which item Button was clicked.

In the inspector on each of the Buttons, we will select the method we just create to be called when the button is clicked.

Previously, the item buttons were parented to the background which prevents the buttons be clicked.

We will unparent the item buttons and readjust the size of the buttons. I made another mistake by making the button height was 1000 pixels. This made it so one button took up the entire screen and prevented the other buttons from being pressed. Make sure to resize the buttons to fit the Shop UI.

Once resized, we will want to reposition each of the buttons. The X position will remain the same, but the Y positions were -500, -700, -900.

Lets make sure each button is working and we can do this because the method being called on each button clicked returns the message “ItemSelected” in the console. Checking the console, we can see the message appear three after we have clicked on each of the buttons.

Identifying Button Pressed

We need to give the user a visual of which buttons they just click. In previous images you can see a selection image has be imported to the Shop UI (blue gradient line). This image will move and underline which button was click to let the user know what was just selected.

In the SelectItem method, we will use a int parameter where the number passed in will distinguished which item button was clicked on. In each of the On Click functions (in the inspector) for the item buttons, we can now pass in a number for the method.

0 will be the Flame Sword.

1 will be the Boots Of Flight.

2 will be the Key To Castle.

To make sure this is working properly we can Debug.log(item) int and click on each of the buttons to see if the the correct numbers are be assigned to the right item. In the lower right corner in the image above we can see this is the case.

Moving Selection Image

When each of the item buttons are pressed, we will want to move the selection image to underline that item.

We will need access to Selection Image from the UI Manager, so we will create an Image variable with a serialized field.

Assign the image in the inspector.

Back in the UI Manager, we will create a public method that will update the position of the Selection Image each time it is called. This will require a int parameter, yPos, to be added to the method.

In Updating the position we will need to set the anchored position of the Selection Image to a new anchored position, where the X will remain the same and the Y position will be the parameter that is passed in when it is called.

In the Shop script, we have the SelectItem method that lets us know which button is being pressed based on the in value. Using a switch statement and checking the item int, we can call the UpdateShopSelection method from the UI Manager and pass in the Y position for that button.

Flame Sword Y = 0

Boot Of Flight Y = -100

Key To Castle Y = -200

Buy Button

Once the item that the player wants to purchase is selected, the Buy Item button needs to finalize the purchase.

In the Shop script, we will create a public method (BuyItem) that will check to see if the player has enough gems to buy the item selected and if not, the shop will close.

In the inspector, we can now add this method to be called when the Buy button is clicked.

For this to work, we need to know which item was selected and we can use the int value that was assigned to each of the buttons, the price of the item and the amount gems the Player current has.

When the SelectItem method is called (every time the item button is clicked), we will set the currentSelectItem int variable to the value assigned to that item and set the cost of the item to the currentItemCost.

Back in the BuyItem method, we check to the gem amount of the Player to see if it is equal or greater than the cost of the item select. If the Player does, we will log which item was “purchased”, subtract the cost of the item from the player’s gem count and show the current gem count. If the Player doesn’t have enough gems, the Shop will close.

Tackling the subtraction of the purchased item amount from the current Player’s gem count will require a public method with an int parameter to be created in the Player script. The parameter value will be subtracted from the gems the Player currently has, which will be the current item cost of the selected item.

In the BuyItem method, we log the current selected item so we know which one was purchase and we check the Player’s gems after the purchase. If the Player doesn’t have the gems, we close the Shop by setting the Shop game object to false.

Game Manager

Once the item has been purchased, we need to give the Player the item. This is going to require a Game Manager.

In creating a Game Manager, we need to create an empty Game_Manager game object and attach the Game Manager script to it.

The Game Manager will be a Singleton so it can be accessed from any script without a handle.

A boolean variable will track if an item has been purchased and we initialize them for each of the items in the Game Manager using get and set.

In the Shop script, we will use a Switch statement that will check the currentSelectedItem and if the Player has the gems that bool will be set true through the Game Manager Instance.

You can see each of these bools being set true when purchase, which will allow us to activate these features in the future.

…until next time.