Nerd For Tech
Published in

Nerd For Tech

Let’s Build our Shop

So, now that we have diamonds in our game to collect, we need something to spend those on. What we will build next is a shop system to be able to spend those hard earned diamonds on to get our key to escape, along with some other items if we want to continue to farm for those items.
To start, we are going to create a canvas in our hierarchy and be sure to set our scale factor to be scaled with the screen size:

From here, we can create our merchant window for when we talk to it. When we have multiple layers to work with for our windows, the order at which they appear in the hierarchy will determine their order within the game:

Next, when we are working with our buttons for the shop, we will want to be sure to set our text within them to specific edges of the box. In order to create a small buffer zone so that it doesn’t spill over the edge of the buttons area, we can just adjust the location of it:

Now, when we decide to create multiple buttons within the area of our window, we can move them to become a child of said image and be able to adjust and scale them equally. First off, we will want to add a canvas group, along with a vertical layout group to our object:

From here, we can adjust the spacing of our different buttons at an equal ate so that we aren’t spending our time tinkering around to make sure it appears equal:

Next up, we can adjust how all of the buttons fit within our square and change their size in unison by controlling the child’s size along with forcing it to expand to fit:

Once we have done that, we can remove the image of our buttons and adjust the transition to none, and we have ourselves a nice simple shop window set up to interact with:

Finally, let’s get it so that when our player enters the trigger area of our shop, the shop menu opens up. To do that, we need to add a boxcollider, a rigidbody and a shop script to our shop keeper. From there, within our script, we are going create an OnTrigger event to turn on our shop window:

Finally, let’s take a look to see how it goes in our game:

Now that we have our shop window designed and set up, we will look at how we can start to my our OnClick events with the shop window in our next dive into the creation of this game.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store