Setup from scratch

Relevant Components

Vault Inventory

• InventoryUi.cs

• UiWindowDrag.cs

• UiTooltip.cs

• ItemUiPlug.cs

• VaultRuntime.cs

Mirror

• NetworkManager.cs

• NetworkManagerHUD.cs

Unity

• GridLayoutGroup

Recommendations

We highly recommend using the existing prefabs from the Inventory Example and just modifying them to suit your needs, as they're already setup and ready to go. Once you poke at them a bit, you'll see how they work and it's not much trouble to tweak them.

What basically happens

Basically, you load up a scene and Mirror/FishNet spawns a prefab of a player and that player says "im here!", to which Vault goes "oh, okay let me populate the UI with your inventory data" and you get a bunch of ItemUiPlug prefabs spawned into various UI GridLayoutGroups.

If you drag an item slot, it spawns a "Floater" prefab until you drop it. When dropped, Vault attempts to perform some kind of operation on the target slot. If it's nothingness, it doesn't do anything. If it's a plug slot, it just asks "Hey the player dragged Inventory X, index 21, over to Inventory G, index 19. Can you figure out what is supposed to happen here?" and then the server tries to reconcile the action. It will update the player client with the results - if the action was valid.

Any time something is added to an Inventory the backend tries to do it first, and then the front end UI gets a message to update whatever is in index X or Y. The UI does pretty much nothing but listen for changes to indexes and broadcast actions like moving items from A to B. The bulk of it's responsibility is just being pretty.

Summarily, the VaultRuntime is a library of prefabs, InventoryUi listens for changes to Inventory, and RuntimeItemProxy handles items outside of the inventory, in world space.

Basic preparation

Vault Prep

You can't have an Inventory unless you have a 'thing' to host it. The quickest way to do that is to just use the Vault Example Character, since it's already setup with an Inventory and will announce it's spawned readiness. You also need UI prefabs, and we cover that later.

Mirror prep

We won't go into details about how to set up Mirror. Vault doesn't actually care how you set up Mirror. Your game will be different from everyone else's and you should familiarize yourself with how Mirror works in order to actually build a multiplayer game - so we don't hold your hand here.

In a nutshell, Mirror needs a working NetworkManager and probably a NetworkManagerHUD if you aren't rolling your own connection UI yet. You need to create a Prefab that can be used as a Player - and in an abstract sense that can be anything you want. If you need something out of the box you can just use the Vault Example Character prefab and put it in the Player Prefab slot of the NetworkManager, then turn on "Auto Create Player".

Setup Vault Runtime

Add your Mirror scene prep, and then add a VaultRuntime component to a blank GameObject. This is a library where Vault stuff goes to look for prefabs. You can use the example prefabs for now if you want.

Item Slot Template

This is a prefab for an Item Slot. It has provisions for background image, item image, item stack size, etc. It requires an ItemUiPlug component somewhere on it with all fields filled, and you can refer to the example prefab to see how it works. It basically gets updates that say "you represent item X, with this much stack" and then reads the database for that data and puts it into the reference fields.

Item Floater Template

This is spawned when you are dragging items around, and they are 'floating' from one place to another. It shouldn't really have any brains, it basically is just an image of the origin item icon and ignores raycasts.

Runtime Item Template

This is a prefab for when you spawn items into the world with 3d representations. It has a component called RuntimeItemProxy which, when spawned, will get told by Vault what item it is spawning, then it will create the proper 3d model to represent it, based on the given item's database information.

Generic Inventory Ui

Used for generic inventories. For example if you open a chest, this will spawn to represent it. You could use it for corpses, extend it for shopkeepers, or whatever. It's just a prefab used to represent the content of an inventory.

Building Inventory UI

You can lay out your UI with whatever process you prefer but we rely on the GridLayoutGroup component to automatically lay out the ItemUiPlug slots into a space for us. This generally scales well and doesn't require much setup.

First thing we need is a UI Panel that accepts Raycasts so we can put an InventoryUi component on it. Basically, create a box on your canvas and add that component to it.

In order to function, InventoryUi requires a GridLayoutGroup where it can spawn item slots. We're not covering ui scrolling and ui masks here because you need to already be familiar with how basic UI works in Unity. So just create another box, make it a child of the first one, and add a GridLayoutGroup component onto it. Now you can define all sorts of spacing and alignment parameters for your item slots.

Go back to your InventoryUi component and drag your new box with the GridLayoutComponent into the "Grid Ui" field so the component knows that this is the grid where we want item slots to appear. Now define your restrictions - you can just add one restriction and choose "none" and it will be a free/open inventory for any items to go into. Toggle "Bind On Player Spawn" to ON.

Now if the player fires the spawn event (the example one does) then your UI will attach itself to your new player and populate the grid with empty slots from a prefab.

This is easy! :)

Yeah, it's a whole lot easier than some of the other stuff we've seen.

We've covered how to put together most of the critical components, the rest is just designing Unity UI. The prefabs that aren't deeply covered here are quite simple to implement. As long as you add the Vault components and populate the fields there is very low chance that it will fail to work and the bulk of the effort will be in wielding Unity UI to suit your needs.

This is hard! :(

If you're still having a hard time figuring things out - get on our Discord server and ask us for help. We'd be happy to give you a hand in understanding how to build your own systems.