Setup from scratch
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.
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
ItemUiPlugprefabs spawned into various UI
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
Inventorythe 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.
VaultRuntimeis a library of prefabs,
InventoryUilistens for changes to
RuntimeItemProxyhandles items outside of the inventory, in world space.
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.
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
NetworkManagerand probably a
NetworkManagerHUDif 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".
Add your Mirror scene prep, and then add a
VaultRuntimecomponent 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.
This is a prefab for an Item Slot. It has provisions for background image, item image, item stack size, etc. It requires an
ItemUiPlugcomponent 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.
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.
This is a prefab for when you spawn items into the world with 3d representations. It has a component called
RuntimeItemProxywhich, 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.
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.
You can lay out your UI with whatever process you prefer but we rely on the
GridLayoutGroupcomponent to automatically lay out the
ItemUiPlugslots 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
InventoryUicomponent on it. Basically, create a box on your canvas and add that component to it.
In order to function,
GridLayoutGroupwhere 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
GridLayoutGroupcomponent onto it. Now you can define all sorts of spacing and alignment parameters for your item slots.
Go back to your
InventoryUicomponent and drag your new box with the
GridLayoutComponentinto 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.
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.