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:
Scale with Screen Size
500
, Y = 900
UI_Places
object, and from the context menu, select UI | Button. Rename the new button SellButton
.SellButton
in the Hierarchy window, and select the Text
object. Type delete to remove the Text
object from the button.SellButton
in the Hierarchy window and type Ctrl + D (command + D on a Mac) to duplicate the button. Rename the new button ExitButton.
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
:
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.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.
OfferDialog component properties
OfferDialog
in the Hierarchy window, and from the context menu, select UI | Panel. Rename the panel PromptPanel
.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
.
Completed OfferDialog and object hierarchy
With the OfferDialog
completed, we can quickly add the RefuseDialog
by following the next directions:
OfferDialog
panel in the Hierarchy window and press Ctrl + D (command + D on Mac) to duplicate the dialog. Rename the panel RefuseDialog
.150
.RefuseDialog
, and delete the MonsterDetailPanel
and OfferPanel
.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!
.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
.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:
PlacesSceneUIController
script from the Assets/FoodyGo/Scripts/Controllers
folder in the Project window onto the UI_Places
object in the Hierarchy window.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.MonsterOfferPresenter
script from the Assets/FoodyGo/Scripts/UI
folder in the Project window onto the OfferDialog
object in the Hierarchy window.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.PlacesSceneController
script from the Assets/FoodyGo/Scripts/Controllers
folder in the Project window onto the PlacesScene
root object.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:
The Places Scene Controller component object settings
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:
The ExitButton event handler configuration
SellButton
, but this time select the PlacesSceneController.OnClickSell function from the function dropdown.YesButton
and add a new event handler. Drag the UI_Places
object into the object slot, and select the PlacesSceneUIController.AcceptOffer()
for the function.NoButton
and add a new event handler. Drag the UI_Places
object into the object slot, and select the PlacesSceneUIController.RefuseOffer()
for the function.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:
Services
in the scene. Drag it onto the PlacesScene
object in order to make it a child of the root scene object.Services
objects called Inventory
and MonsterExchange
.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.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
.
3.16.212.99