The great thing about dividing the game content into scenes is our ability to develop and test each functional piece in isolation. We don't have to worry about other game start-up, events, or functionality slowing down our development. Yet, at some point, we need to bring all those pieces together, and it is important to frequently test the whole game, as well.
Before we start working on the Inventory scene, we will do another full reset import of all scripts, as we have done in the previous chapters. This means we will be importing several new and updated scripts and won't be able to cover the extensive changes in detail. We won't have time in the remaining chapter to highlight any interesting code but it is recommended that you wander through the code at your leisure. For those who have made your own changes to the scripts, it is recommended that you back those items up on your own. Follow the directions here to do the asset import:
Chapter_6_Assets
and select the Chapter6_import2.unitypackage
file. Then, click on Open to start importing the assets.With the updated and new scripts loaded, let's build the new Inventory scene by following these directions:
Inventory
and save it.InventoryScene
and reset the transform to zero in the Inspector window.Main Camera
and Directional Light
objects onto the new InventoryScene
object in the Hierarchy window. This will reparent the objects,as we did for other scenes.Panel
with a Canvas
parent and an EventSystem
object.EventSystem
in the Hierarchy window and press delete to remove it. Remember, Unity will add one for us later.Canvas
parent object and rename it InventoryBag
in the Inspector window.InventoryBag
object onto the InventoryScene
to make it a child.Panel
object. Then, in the Inspector window, change the Image component color by clicking on the slot. This will open the Color dialog selector. Change the Hex value to #FFFFFF
at the bottom of the dialog and then close it. This will set the entire Game window to a white background.This establishes the base of our InventoryScene
. Before we immerse ourselves more deeply in some of the components, we will first create the inventory item prefab:
InventoryBag
object in the Hierarchy window. Then, from the menu, select GameObject | UI | Button. This will add a new Button
object as a child of InventoryBag
.Button
to MonsterInventoryItem
, and set the Rect Transform | Anchor Presets to top-stretch while holding the pivot and position keys in the Inspector window.
Assets/FoodyGo/Scripts/UI
folder in the Project window, drag the MonsterInventoryItem
script onto the MonsterInventoryItem
button object in the Hierarchy window. This will add the inventory script to the object.MonsterInventoryItem
in the Hierarchy window. From the context menu, select UI | Raw Image.Raw Image
object selected in the Inspector window, change the Raw Image | Texture property by clicking on the bullseye icon beside the field. From the Select Texture dialog, choose the monster texture. Also, change the Rect Transform | width and height properties to a value of 80
.Text
object of MonsterInventoryItem
and press Ctrl + D (command + D, on a Mac) to duplicate the object.Text
object and rename it TopText
in the Inspector window. Also, change the component Text | Paragraph | Alignment to center-top, as shown in the following screenshot:
Setting UI text alignment to center-top
Text(1)
object, but rename the object BottomText
and set its paragraph alignment to center-bottom.Raw Image
object to just below the MonsterInventoryItem
so that it is the first child.MonsterInventoryItem
into the Assets/FoodyGo/Prefabs
folder in the Project window. This will make the MonsterInventoryItem
into a prefab. Keep the original object in the scene.With our inventory item created, we will go back and finish the inventory bag:
InventoryBag
object in the Hierarchy window, and then from the menu, select GameObject | UI | Scroll View. This will add a Scroll View
beside the Panel
. Drag the Scroll View
onto the Panel
to make it a child, as shown in the following screenshot:
InventoryScene hierarchy thus far
Scroll View
object in the Hierarchy window. Then, in the Inspector window, change the Rect Transform | Anchor Presets to stretch - stretch while holding down the pivot and position keys, as follows:
Selecting anchor preset stretch-stretch while holding the pivot and position keys
Scroll View
still selected, uncheck the Horizontal scroll option from the Scroll Rect component. We only want the inventory to be vertically scrollable.Scroll View
object and then expand the child Viewport
object as well. This will expose a bottom-level object called Content
. Select the Content
object.Content
object selected in the Hierarchy window from the menu select Component | Layout | Grid Layout Group to add the component to the Content
object. Repeat the process by selecting Component | Layout | Content Size Fitter.Assets/FoodyGo/Scripts/UI
folder in the Project window, drag the InventoryContent
script onto the Content
object in the Hierarchy or Inspector windows.Content
object selected in the Inspector window, drag the Scroll View
object onto the empty Inventory Content | Scroll Rect property.Assets/FoodyGo/Prefabs
folder in the Project window, drag the MonsterInventoryItem
prefab onto the empty Inventory Content | Inventory Prefab slot.
Content object configuration
MonsterInventoryItem
onto the Content
object, to make it a child. Then, deactivate the object by unchecking the checkbox beside the object name in the Inspector window. We will just use that object as a reference. Your updated Hierarchy window should match the following screenshot:
Inventory hierarchy
Thus far, we have most of the Inventory scene constructed and now all we have to do is connect things together. Perform the following instructions to finish the scene:
InventorySceneController
script from the Assets/FoodyGo/Scripts/Controllers
folder in the Project window and drop it onto the InventoryScene
object in the Hierarchy window.InventoryScene
object. Drag the Content
object from the Hierarchy window onto the empty Inventory Scene Controller | Inventory Content slot in the Inspector window.Assets
folder in the Project window, drag the Catch scene onto the Hierarchy window. This allows us to see both scenes overlapping each other.Services
object from the Catch
scene and drop it onto the Inventory scene. This will add the Services
to the Inventory scene. If you recall, we only used those services for testing and planned to remove them from the Catch scene later, anyway.
Inventory scene showing the caught monsters
The 3D character is designed by Reallusion iClone Character Creator. To create more customized characters, please visit http://www.reallusion.com/iclone/character-creator/default.html for more details.
Hopefully, you spent some time catching monsters in the test Catch scene after we connected the Inventory service and can now see those caught monsters. If you have no monsters showing, not to worry we will wire the game together before the end of the chapter. Also, you may have noticed that our monster inventory items are actually buttons, but they don't do anything. That is also fine, we will add the detail section of the inventory later. For now though, we want to finish up the chapter by connecting all the scenes together in a proper game.
18.191.234.62