Day 5: Polish and Package

Today, we used Leonaro.AI to generate equipment graphics, added a UI component for items, and connected the inventory grid logic with the UI through a controller script.

• Watch On YouTube
• Source Code at the End of Day 5

Today’s Tasks

1. Clean up UI, image order, inventory positioning
2. Implement move between "containers"
3. Learn how to package as a Unity Asset
4. Add asset to new project to test

Clean up UI, Image Order, and Inventory Positioning

On Day 4, we finished the basic functionality of a single inventory container. With that behind us, it was time to clean up the UI. First, we made it such that while an item is selected, it appears slightly offset from the inventory grid and appear on top of other items. This was done by introducing an offset variable and calling the BringToFront() method which forces an element to move to the front of other elements within its container.

With this complete, we wanted to have a system in which the items could be transferred between two containers. To accomplish this, we introduced an ItemCursorController MonoBehaviour which would be capable of tracking an item on the cursor. When an item is clicked, it is removed and a reference is stored on the cursor. Then, when the container is clicked, the item is removed from the cursor and added within that container.

public class ItemCursorController<T> : MonoBehaviour where T : class, IGridableItem
{
    public event System.Action<GridSlotElement, GridElement> OnPointerEntered;
    private VisualElement _container;
    [field: SerializeField]
    public UIDocument TopLayer { get; private set; }
    private GridItemElement<T> _selected = null;
    public GridItemElement<T> Selected { get => _selected; set => _selected = value; }

    public void OnPointerEnter(GridSlotElement slot, GridElement grid) => OnPointerEntered?.Invoke(slot, grid);

    private void Awake()
    {
        VisualElement root = GetComponent<UIDocument>().rootVisualElement;
        root.RegisterCallback<PointerMoveEvent>(OnPointerMove);
        _container = TopLayer.GetComponent<UIDocument>().rootVisualElement.Q<VisualElement>("Container");
    }

    private void OnPointerMove(PointerMoveEvent evt)
    {
        if (_selected == null) { return; }
        _selected.Parent = null;
        _container.Add(_selected);
        _selected.style.left = evt.position.x;
        _selected.style.top = evt.position.y;
    }
}

The final result can be seen below:

Packaging as a Unity Asset

With a grid based inventory working decently, we were ready to package it up as a Unity Asset. To do this, we organized the code such that it was self contained in two folders: CaptainCoder and Demo. The CaptainCoder folder contains all necessary dlls, scripts, and images to implement your very own inventory system and Demo contains a demo scene and custom item implementation to demonstrate how to extend the provided library to create a custom inventory.

With this set up, it was easy to export as a Unity Asset by selecting the two folders and selecting Export Package. This produced a self contained .unityasset file which when dragged into a new project expands with the provided folders.

And with that, we were done with the basic inventory system. There are many additional features that I would love to implement in the future. But, I learned a ton and had fun doing it!

Join the Discussion

Before commenting, you will need to authorize giscus. Alternatively, you can add a comment directly on the GitHub Discussion Board.