On Click Shop Menu

Objective: Create a user interface for in game shop allowing player to click on items to purchase.

Clickable interface for the Shop

The interface uses many game objects as shown below in the hierarchy window. The Canvas is the parent for the Shop_Panel, which is home to the Item_BG, which is the focus of this article.

Hierarchy of the Canvas, with focus on the Item_BG

Setup the canvas as shown below, using scale with screen size and reference resolution 1920 x 1080. Add a UIManager script, which will have two variables Selection Image and Player Gem Count Text that are assigned through the inspector.

UIManager script on Canvas.

The UIManager script is a singleton allowing public access through Instance, using the code below. It has the two variables mentioned above, PlayerGemCountText and _selectionImage, the latter being inactive on awake.

UIManager script on Canvas game object.

The actual menu is contained in the Item_BG game object which has the components shown below. The canvas group controls the behavior of the child objects, which are the buttons, interactable and blocks raycast must be checked. The vertical control group allows automated even spacing.

Item_BG required components

Next add the buttons, which are the clickables. Set up three buttons Flame Sword (0), Boots of Flight (1)and Key to Castle (2), as exemplified for the Flame_Sword_Button object. Each button has a Text child which is changed to match the actual item name. Adjust the text color to white and the font to 50. Drag the Shop_Keeper into the On Click() space below runtime, and select the SelectItem() method within the Shop script. Each item has an integer ID that is unique to each item/button. The button click calls the SelectItem() method.

The SelectItem() method within the Shop script is shown below. This method pass the y-position of the button Selection underscore to the UIManager based upon the item ID.

SelectItem() method on Shop_Keeper

The UpdateShopSelection method activates the Selection underscore and changes its yPos to the current selected object position received from the Shop script.

UpdateShopSelection() method within UIManager on Canvas.

This provides a clickable menu to select items and pass an item ID to the Shop, where code to actually purchase the items will be implemented.