Adding UI interaction for selling

As described at the beginning of the chapter, players will sell their monsters by going to a place and then initiating a sale by clicking on a button. The place or restaurant will then examine the player's monsters and offer a price for what it considers the best. A player can then accept the offer by clicking on a Yes button or refuse by clicking on a No button. Even with this very simple workflow, there are still a lot of elements we will need to put together, most of which will be UIs.

We will break down building the UI into sections so that it is easier to follow. The first part we will work on is adding the UI canvas and the primary buttons by performing the following directions:

  1. From the menu, select GameObject | UI | Canvas. Rename the new canvas UI_Places. If you have been counting, that is our third canvas in the scene, with each rendering to a different space (Screen Space-Overlay, Screen Space-Camera and World Space).
  2. Select the new canvas, and in the Inspector window, change the Canvas Scaler component properties, as follows:
    • Canvas Scaler: UI Scale Mode = Scale with Screen Size
    • Canvas Scaler: Reference Resolution: X = 500, Y = 900
  3. Right-click (press Ctrl and click on a Mac) on the UI_Places object, and from the context menu, select UI | Button. Rename the new button SellButton.
  4. Expand the SellButton in the Hierarchy window, and select the Text object. Type delete to remove the Text object from the button.
  5. Select the SellButton in the Hierarchy window and type Ctrl + D (command + D on a Mac) to duplicate the button. Rename the new button ExitButton.
  6. For each of the new buttons, change the component properties according to the following table:

    Adding UI interaction for selling

That completes adding the buttons to interface. Don't worry about wiring up the buttons, yet. We will instead work to complete the rest of the UI elements needed in the scene. Next, we will construct the OfferDialog:

  1. Right-click (press Ctrl and click, on a Mac) on the UI_Places canvas in the Hierarchy window, and from the context menu, select UI | Panel. Rename the panel OfferDialog. This will be the parent object for all our dialog components.
  2. Select the OfferDialog panel in the Hierarchy window, and then from the menu, select Component | Layout | Vertical Layout Group. Then, from the menu, select Component | UI | Effects | Shadow.
  3. In the Inspector window, set the Rect Transform, Image, and Vertical Layout Group component properties, as shown in the next screenshot:

    Adding UI interaction for selling

    OfferDialog component properties

  4. Right-click (press Ctrl and click on a Mac) on the OfferDialog in the Hierarchy window, and from the context menu, select UI | Panel. Rename the panel PromptPanel.
  5. Select the PromptPanel in the Hierarchy window and press Ctrl + D (command + D on a Mac) to duplicate the object. Do this two more times so that there are three new panels in total. Rename the new panels as follows: MonsterDetailPanel, OfferPanel, and ButtonPanel.
  6. Notice how the panels inside the layout group adjust to evenly fit the space. Now that you have an idea of how to add layouts and build a UI hierarchy, continue building the dialog, by following the table:

    Adding UI interaction for selling

  7. Check whether your final construction matches the dialog and hierarchy:

    Adding UI interaction for selling

    Completed OfferDialog and object hierarchy

With the OfferDialog completed, we can quickly add the RefuseDialog by following the next directions:

  1. Select the OfferDialog panel in the Hierarchy window and press Ctrl + D (command + D on Mac) to duplicate the dialog. Rename the panel RefuseDialog.
  2. In the Inspector window, change the Rect Transform - Height = 150.
  3. Expand the RefuseDialog, and delete the MonsterDetailPanel and OfferPanel.
  4. Expand the PromptPanel and then select the PromptText in the Hierarchy window. In the Inspector window, change the Text - Text to This place will not be making an offer for any of your current stock!.
  5. Expand the ButtonPanel in the Hierarchy window, and delete one of the buttons, it doesn't matter which. Rename the remaining button as OKButton. Expand the button, and select the child Text object. In the Inspector window, change the Text - Text to OK.
  6. Finally, drag the UI_Places object onto the PlacesScene object in the Hierarchy window to make it a child of the scene root.

With the UI elements all constructed, we can now wire up all the scripts we need to complete the scenes selling interaction. Perform the following instructions to add the various component scripts:

  1. Drag the PlacesSceneUIController script from the Assets/FoodyGo/Scripts/Controllers folder in the Project window onto the UI_Places object in the Hierarchy window.
  2. Select the UI_Places object and drag the SellButton, OfferDialog and RefuseDialog to each of the appropriatee slots on the Places Scene UI Controller component in the Inspector window.
  3. Drag the MonsterOfferPresenter script from the Assets/FoodyGo/Scripts/UI folder in the Project window onto the OfferDialog object in the Hierarchy window.
  4. Select the OfferDialog object and drag the NameText, CPText, LevelText, SkillsText and OfferText to each of the appropriate slots on the Monster Offer Presenter component in the Inspector window.
  5. Drag the PlacesSceneController script from the Assets/FoodyGo/Scripts/Controllers folder in the Project window onto the PlacesScene root object.
  6. Select the PlacesScene object and drag the StreeViewTexturePanel, PlacesMarker, and UI_Places objects to the appropriate places on the Places Scene Controller component in the Inspector window, as shown in the following screenshot:

    Adding UI interaction for selling

    The Places Scene Controller component object settings

  7. Select the ExitButton in the Hierarchy window, and then in the Inspector window, add a new event handler by pressing the plus. Then, drag the PlacesScene object onto the object slot and then open the function dropdown. Select the PlacesSceneController.OnCloseScene function, as follows:

    Adding UI interaction for selling

    The ExitButton event handler configuration

  8. Repeat the process for the SellButton, but this time select the PlacesSceneController.OnClickSell function from the function dropdown.
  9. Select the YesButton and add a new event handler. Drag the UI_Places object into the object slot, and select the PlacesSceneUIController.AcceptOffer() for the function.
  10. Select the NoButton and add a new event handler. Drag the UI_Places object into the object slot, and select the PlacesSceneUIController.RefuseOffer() for the function.
  11. Select the OKButton and add a new event handler. Drag the UI_Places object into the object slot, and select the PlacesSceneUIController.OK() for the function.

That finishes wiring up the scene. Now, we just need to add a couple of services in order to run the Places scene by itself. Perform the following directions to add the services:

  1. Create a new empty game object called Services in the scene. Drag it onto the PlacesScene object in order to make it a child of the root scene object.
  2. Add two new child objects to the Services objects called Inventory and MonsterExchange.
  3. Drag the InventoryService script onto the Inventory object and the MonsterExchangeService script onto the MonsterExchange object from the Assets/FoodyGo/Scripts/Services folder in the Project window.
  4. Press Play to run the scene, and try clicking on the Sell button and various other buttons. As you will notice, you can't actually sell a monster yet, but the UI should all be working as expected, except for the ExitButton, of course.

That completes all the required UI elements for the scene, which as you have seen is quite a lot for a simple scene. The UI is still very basic, and it will be left up to you, the developer, to extend and make your own later. Feel free to explore and change the UI dialogs the way you like. You may also notice that we do not provide feedback to the player if they do sell items. That is left up to the developer to incorporate a new dialog or sound as they see fit.

In the next section, we will get into how the monsters are evaluated by taking a closer look at the MonsterExchangeService.

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

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