Going forward in the Dungeon Escape Game, the shop has been added that will allow the Player to purchase some items with the diamonds collected.

Once the Player gets close, a shop panel will be provided to the Player.

These items have been added as Buttons (with Image removed). Despite Unity has a adequate default system for button interaction, you might want to personalize it. In the game, we want to inform the player with a selection underline, that simply tells the current choice of option, before finalizing the purchase by clicking “Buy Item” button. The underline is a simple image that we gather access to manipulate it from the UI Manager.

In Unity, the button actions are implemented with “On Click Events”. Button component includes an “On Click” Event field, where we simply tell the button to implement the given method once it is clicked.

To add an event, click on the + icon, drag and drop the game object that holds the script that we want to be implemented on the button click and select the method that you want to be run once the button is clicked.

Since there are 3 items to select from, we need to find a way to tell Unity to update the selection line according to our selection. Assigning a parameter to the method might become handy for this. (If you did not provide a paremeter initially on the on click event, you will need to select the method again to get the int parameter pop.)

Well, you got the point. Rather than a semi-automated movement, the underline will change its position according to predetermined positions that fits directly under the selection item id.

Certainly, the values will probably be different for you, so it is better to find the optimal values by trial and error.

Shop Script
UIManager Script

And it works :)

Unity Developer