Adding the menu buttons

In order to connect our scenes together, we need player input to trigger an event. We do have an event setup for when the player clicks on the monster in the Map scene. However, we also want the player to move from the Map/Catch scene to the Inventory scene and back. In order to do this, we will add some UI buttons to each of the scenes.

Since we already have the Inventory scene already open, let's begin by adding the new button to that scene:

  1. Right-click (press Ctrl and click, on a Mac) on the InventoryBag object in the Hierarchy window and select UI | Button from the context menu. This will add a button just below the Panel. Expand the Button object and then select the child Text object and press delete to remove it.
  2. Select the new Button object and rename it ExitButton in the Inspector window.
  3. From the Inspector window, set the Rect Transform | Anchor Presets to bottom-center while holding the pivot and position keys. Then, change the Rect Transform properties' Width and Height to 75 and the Pos Y to 10.
  4. Change the Image | Source Image by clicking on the bullseye icon beside the slot to open the Select Sprite dialog. Choose the sprite called button_set11_b from the dialog.
  5. Finally, we will wire up the button by clicking on the + under the Button | On Click event property. This will create a new event slot. Then, drag the InventoryScene object from the Hierarchy window onto the empty None(object) slot. From the No Function drop-down menu, select InventorySceneController | OnCloseInventory.
  6. The full configuration for the ExitButton is shown in the following screenshot:

    Adding the menu buttons

    ExitButton component configuration

The ExitButton we just added is for closing the Inventory scene and returning to the scene that opened it. Before we get the Map and Catch scenes, we first need to transfer our services to the Game scene and take care of some minor updates. Perform the instructions to update the Game scene:

  1. From the Assets folder in the Project window, drag the Game scene to the Hierarchy window.
  2. Drag the Services object from the Inventory scene to the Game scene. This will be the new permanent home for the Services object. Rename the Services to _Services in the Inspector window. Again, we use the _ to denote objects that are not to be destroyed.
  3. Remove the Inventory scene by right-clicking (press Ctrl and click, on a Mac) on it and selecting Remove Scene from the context menu. When prompted, save the scene by clicking on Save.
  4. Select the _GameManager object in the Hierarchy window, and update the Game Manager script scene names, as shown in the screenshot:

    Adding the menu buttons

    Game Manager Scene names updated

Next, we will add a new button to access the Inventory scene on the Map scene. Follow the instructions to add the new button:

  1. Double-click on the Map scene in the Assets folder in the Project window. This will close the Game scene, and when prompted, ensure that you save the changes.
  2. Expand the MapScene object in the Hierarchy window, and right-click (press Ctrl and click, on a Mac) to open the context menu. From the menu, select UI | Button, to add a new button.
  3. Select the button created in previous step, and in the Inspector window, rename it HomeButton. Set the Rect Transform | Anchor Presets to bottom-center while holding the position/pivot keys. Change the Rect Transform | Width/Height to 80 and the Pos Y to 10. Then, change Image | Source Image to button_set06_b by clicking on the bullseye icon and selecting the sprite for the Select Sprite dialog.
  4. Drag the HomeButton script from the Assets/FoodyGo/Scripts/UI folder in the Project window and drop it onto the HomeButton object in the Hierarchy window.
  5. Select and drag the HomeButton object from the Hierarchy window to the Assets/FoodyGo/Prefabs folder in the Project window to make it a new prefab.

Finally, the last scene we need to do is the Catch scene, which will make our round trip complete. Perform the following directions to add the HomeButton to the scene:

  1. Double-click on the Catch scene in the Assets folder of the Project window. This will close the Map scene, and when prompted, ensure that you save the changes.
  2. Expand the CatchScene object in the Hierarchy window. From the Assets/FoodyGo/Prefabs folder in the Project window, drag the HomeButton prefab and drop it onto the Catch_UI object. You will now see the HomeButton drawn over top of the CatchBall in the scene.
  3. Select the HomeButton, and in the Inspector window, change the Rect Transform | Anchor Presets to top-right while, of course, holding the pivot/position keys. Then, change the Pos X and Pos Y to -10.
  4. Save the scene and project.

Now, with the scene transition buttons added, all the scripts updated, and everything else set, it is time to bring everything together and run the game.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.224.33.107