Creating the Inventory scene

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:

  1. Save your scene and project and do a backup of the project to another location if you made any changes you want to preserve.
  2. From the menu, select Assets | Import Package | Custom Package... to open the Import package... dialog.
  3. From the dialog, navigate to the book's downloaded source code folder Chapter_6_Assets and select the Chapter6_import2.unitypackage file. Then, click on Open to start importing the assets.
  4. When the Import Unity Package dialog opens, just make sure that all the items are selected and then click on the Import button.

With the updated and new scripts loaded, let's build the new Inventory scene by following these directions:

  1. From the menu, select File | New Scene. This will create a new empty scene with a camera and directional light.
  2. From the menu, select File | Save Scene As.... When prompted, name the scene Inventory and save it.
  3. From the menu, select GameObject | Create Empty. Rename the new object InventoryScene and reset the transform to zero in the Inspector window.
  4. Drag the 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.
  5. From the menu, select GameObject | UI | Panel. This will add a Panel with a Canvas parent and an EventSystem object.
  6. Select EventSystem in the Hierarchy window and press delete to remove it. Remember, Unity will add one for us later.
  7. Select the Canvas parent object and rename it InventoryBag in the Inspector window.
  8. In the Hierarchy window, drag the new InventoryBag object onto the InventoryScene to make it a child.
  9. In the Hierarchy window, select the 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:

  1. Select the 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.
  2. Rename the Button to MonsterInventoryItem, and set the Rect Transform | Anchor Presets to top-stretch while holding the pivot and position keys in the Inspector window.
  3. Remove the Image component by clicking on the gear icon beside it and selecting Remove Component from the drop-down menu.
  4. You will now see a warning message in the Button component. Change the Button component Transition property to none. This will remove the warning.
  5. From the 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.
  6. Right-click (press Ctrl and click on a Mac) the MonsterInventoryItem in the Hierarchy window. From the context menu, select UI | Raw Image.
  7. With the 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.
  8. From the Hierarchy window, select the child Text object of MonsterInventoryItem and press Ctrl + D (command + D, on a Mac) to duplicate the object.
  9. Select the first 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:

    Creating the Inventory scene

    Setting UI text alignment to center-top

  10. Repeat the process for the second Text(1) object, but rename the object BottomText and set its paragraph alignment to center-bottom.
  11. In the Hierarchy window, drag the Raw Image object to just below the MonsterInventoryItem so that it is the first child.
  12. From the Hierarchy window, drag the 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:

  1. Select the 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:

    Creating the Inventory scene

    InventoryScene hierarchy thus far

  2. Select the 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:

    Creating the Inventory scene

    Selecting anchor preset stretch-stretch while holding the pivot and position keys

  3. With the Scroll View still selected, uncheck the Horizontal scroll option from the Scroll Rect component. We only want the inventory to be vertically scrollable.
  4. In the Hierarchy window, expand the 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.
  5. In the Inspector window, set the Rect Transform | Anchor Presets to top - stretch again by holding down the pivot and position keys.
  6. With the 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.
  7. From the Assets/FoodyGo/Scripts/UI folder in the Project window, drag the InventoryContent script onto the Content object in the Hierarchy or Inspector windows.
  8. With the Content object selected in the Inspector window, drag the Scroll View object onto the empty Inventory Content | Scroll Rect property.
  9. Then, from the Assets/FoodyGo/Prefabs folder in the Project window, drag the MonsterInventoryItem prefab onto the empty Inventory Content | Inventory Prefab slot.
  10. Confirm or set the values for Rect Transform, Grid Layout Group, Content Size Fitter and Inventory Content to the values shown in the following screenshot:

    Creating the Inventory scene

    Content object configuration

  11. Finally, in the Hierarchy window, drag the 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:

    Creating the Inventory scene

    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:

  1. Drag InventorySceneController script from the Assets/FoodyGo/Scripts/Controllers folder in the Project window and drop it onto the InventoryScene object in the Hierarchy window.
  2. Select the InventoryScene object. Drag the Content object from the Hierarchy window onto the empty Inventory Scene Controller | Inventory Content slot in the Inspector window.
  3. From the Assets folder in the Project window, drag the Catch scene onto the Hierarchy window. This allows us to see both scenes overlapping each other.
  4. Select and drag the 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.
  5. Right-click (press Ctrl and click, on a Mac) on the Catch scene to open the context menu. Select Remove Scene and when prompted to save, click on the Save button.
  6. Press Play to run the scene and see the results. The following is a sample screenshot of several captured practice monsters caught during play testing the Catch scene:

    Creating the Inventory scene

    Inventory scene showing the caught monsters

    Note

    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.

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

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