loading...
Cover image for MVC in Unity with Scriptable Objects Part 2

MVC in Unity with Scriptable Objects Part 2

cemuka profile image Cem Ugur Karacam ・5 min read

This part we will start to make some view elements to visualize item objects and an info panel to display item stats. A very basic inventory system as you guess. I'll focus on inventory panel for this part and we will complete this series with finishing info panel in the next part.

But first let's overview for this part:

  • Visual components for Item Info and Inventory
  • Item View Prefab in Inventory
  • Populate inventory with Item View
  • Debug.Log item info on click to Item View

We have a lot to do!

First of all, set display resolution:

Alt Text

Start with view. We will use Unity UI objects. Let's first create an empty canvas(Right-click in hierarchy-> UI-> Canvas)

Alt Text

I will make two panels, item info, and inventory panels.

I'll make an object for background, name it BG and assign it a Vertical layout component.

Alt Text

Alt Text

Alt Text

Now BG object's childs will line up vertically. Let's create a panel inside BG.

Alt Text

I'll only set panel height on RectTransform to 300 and the width will size automatically based on Vertical Layout component. Here are my settings on BG:

Alt Text

Alt Text

Now duplicate the Panel object and give it a height of 440.

Alt Text

I've set the height of second panel to 440.
Rename them properly.

Alt Text

This is how it looks.

Alt Text

I will continue to Info Panel next part.

Next, prepare an Item View and make it a prefab from it. To do, I'll create a button inside the inventory panel. To achieve a proper inventory visual there is a cool component for this: Grid Layout Group. Select InventoryPanel object and add that component.

Alt Text

Now each child of Inventory panel should place in the screen in order to constraints of grid layout group component. Let's create a button.

Alt Text

Button went crazy, that's because we haven't work on grid layout component. I'll add an Image object to button as a child object for item icon and don't forget to uncheck Raycast Target property on Image component, this way it won't block mouse events for button click.

Alt Text

I've duplicated the button a few times. Four items fit and look pretty enough for this tutorial. How it looks:

Alt Text

Before moving further, we have to make a script for view for the item. This view will responsible for holding item data and will fire up an event on click(Debug.Log item stats for this blog).

Create a new script, name it ItemView.

Alt Text

ItemView is responsible for carrying data, visual references, on click action and initial state for injecting item data.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ItemView : MonoBehaviour
{
    public Button button;
    public Image ItemIcon;

    private ItemData itemData;
}

And define a method for inital state:

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ItemView : MonoBehaviour
{
    public Button button;
    public Image itemIcon;

    private ItemData itemData;

    public void InitItem(ItemData item)
    {
        this.itemData = item;

        button.onClick.AddListener(ButtonClicked);
    }

    private void ButtonClicked()
    {
        Debug.Log(itemData.name);
    }
}

I think we need some sample icons to use in our project. I've quickly searched for it and found this free package from asset store. Let's import it.

Alt Text

Now I can add a variable to hold icon data in ItemData.

using UnityEngine;

[CreateAssetMenu]
public class ItemData : ScriptableObject
{
    public string itemName;
    public ItemType type;
    public float attack;
    public Sprite icon; 

    public float GetPrice()
    {
        return attack * 40;
    }
}

public enum ItemType
{
    Dagger,
    Axe,
    Hammer,
    Potion
}

Next, in ItemView we can add an icon to view.

public void InitItem(ItemData item)
{
  this.itemData = item;
  itemIcon.sprite = itemData.icon;

  button.onClick.AddListener(ButtonClicked);
}

I'll assign this script to my button in the scene and I'll name it my button to Item. Afterward, drag and assign button and image for icon.

Alt Text

I'll delete other buttons that we have duplicated for the test, and save the Item gameobject as a prefab in project folder dragging into it.

Alt Text

The view is almost ready. I need four item to populate my inventory. I'll create and assign icons to my models that I've created the last part.

Alt Text

Models are ready.

Next, create a script ItemViewController.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ItemViewController : MonoBehaviour
{
    public Inventory inventoryHolder;
    public Transform inventoryViewParent;
    public GameObject itemViewPrefab;

    private void Start() 
    {
        foreach (var item in inventoryHolder.inventory)
        {
            var itemGO = GameObject.Instantiate(itemViewPrefab, inventoryViewParent);
            itemGO.GetComponent<ItemView>().InitItem(item);
        }
    }
}

So we have references to inventory that holds ItemData that we have created in the project folder, a transform reference for creating ItemView objects as a child of inventory view in the scene and the item view that we have saved in the project folder as prefab. Then, in Start method, I create an instance of item view and calling InitItem method to initiate that view with Item data for each item in the inventory holder.

Lastly, I'll make an empty gameObject to attach this controller and drag and assign its references in the scene.

Alt Text

Make sure that your models all assigned into inventory.

Alt Text

Wow, we've done a lot without test but now is the time.

Hit to play!

Alt Text

Items have created but I forgot to delete Text object from button. When you create a button in unity it comes with Text object. To do that, open the prefab that we have saved in the project folder. It'll open project edit in Scene tab. Delete Text object and return to the scene.

Alt Text

Now, give it another go.

Alt Text

It works!!! Congrats😎👏!

Next part we will complete the info panel.

Here is the github page

Until next time, cheers!

Discussion

pic
Editor guide