I’m getting a lot of request to create Skyrim like inventory Tutorial. I have found you guys have a problems with ShooterTutorial inventory implementation as well. ShooterTutorial inventory is about choosing weapons before starting gameplay. That’s why I have decided to create complete Skyrim like inventory tutorial which will:

be object oriented,

starting from first person template,

have 3d preview in UMG,

support item dropping, using,

support categories,

support moving items,

This tutorial is long and not so easy. As always take your time!

<strong>This Tutorial has been created using Unreal Engine 4.10</strong> Make sure you are working on the same version of the engine. 1 2 < strong > This Tutorial has been created using Unreal Engine 4.10 < / strong > Make sure you are working on the same version of the engine .

Other helpful tutorials

There is couple of great tutorials over the internet which you can try before this.

Feature request for Epic

I have created couple of feature request for Epic so it will be simpler to create such inventory.

Viewport widget that’s creating new UWorld and we can place meshes there. It would be much more easier to draw 3d content in UMG, (as far I can know Epic is working on this)

On Mouse Enter / Leave events on Buttons,

Get Component Bounds issue fix,

Blueprintable XML parser,

Possibility to create new assets from blueprints, (the goal is to have XML which will create objects and then automatically create world actors from those actors that can be placed in level),

Update content browser thumbnail after construction script, (or add a possibility to capture thumbnail in current component mode seen in editor)

First Person Template

Open your 4.10 Editor and create new blank project from First Person Blueprint Template.

Architecture

Let me drive you trough basic architecture.

Object Oriented

Items will be object oriented and will use Objects instead of Actors. Let’s create first base Object for items.

Base Item Object Class

Create new blueprint named Item extending from Object. Open it and add those variables:

Var Name Var Type Default Value Description ID Text Especial ID for the item. It is text to be able to better search later. There shouldn’t be two the same items with the same ID! Name Text Name of the Item – it can be “Shield” or “Dagger” whatever you like. This will be showed in UI. Value int Value of the item. Weight float Weight of the item. WorldMesh StaticMesh Reference Reference to the static mesh that will be graphics representation of the item. Thanks to that we will know which static mesh should be assigned later.

And that’s all for now. It will be base class for all of the items. It doesn’t have any damage, armor rating variables.

Armor Item Object Class

In Skyrim some types of items have dedicated variables such as damage, armor rating or special effects. To have the system more generic each new item category (armor, weapon, misc, ingredient etc) will extend from Item class.

Create new Blueprint named Item_Armor extending from Item created earlier. Open it and add one new variable:

Var Name Var Type Default Value Description ArmorRating float This will be armor rating for armor type item.

USEFUL TIP: This is the place where you can add equip type, mount type to the object . I won’t do this because it’s not in the scope of this tutorial. I won’t be equipping items to hands or body.

Weapon Item Object Class

Create another Blueprint extending from item named Item_Weapon.

Var Name Var Type Default Value Description Damage float Damage for the weapon.

This is the place where you can add equip type, mount type to the object . I won’t do this because it’s not in the scope of this tutorial. I won’t be equipping items to hands or body.

Rest Items Object Classes

Now create rest of the item types classes. Create new Blueprint extending from Item:

Item_Book,

Item_Ingredient,

Item_Potion,

Item_Misc,

They do not have any custom variables.

If Item is Object how to add it to level?

Yes, Objects can’t be placed into world. They are just data blueprints which aren’t generating any draw calls.

That’s why I will create an Actor that will have reference to Item object.

Create new Blueprint extending from Actor named ItemWorldActor. Open it and those components:

Static Mesh Component named StaticMesh. This should be root of the Actor as well,

Sphere Collision Component named Sphere. Attached to Root.

And those variables:

Var Name Var Type Default Value Description Item Item Object Class Storing link to the Item object. Used to create object. Expose on Spawn: True! Editable: True! ItemReference Item Object Reference This will be referencing to created object from Item. Reference here means specific created Item. bEnablePhysics bool Expose On Spawn: True! Editable: True!

Now here’s the trick how to show Item’s static mesh in editor without spawning it. Open Construction Script and add this:

So basically each item will have an Object and Actor interpretation. Quick example:

Find some Apple mesh. Create new blueprint extending from Item_Ingredient named Item_Ingredient_Apple make sure you have assigned WorldMesh to your Apple mesh. Then create new blueprint extending from ItemWorldActor named Item_Ingredient_Apple_WA. (WA here means World Actor) Open it and assign Item_Ingredient_Apple object to Item variable. Place the Actor in level and you should see Apple.

At this point nothing will happen with the item but you should get the idea here. It would be much more simpler to generate those WA actors from Objects, but we don’t have possibility to create new data types in content browser from Blueprints. Another thing are thumbnails – UE4 is missing simple “Capture Thumbnail” in current component stage (after changing something in Construction Script) – without thumbnails it’s hard to find the items.

btw there is great way to change variables for more than one content browser item. Select more than one Item and choose “Bulk edit”

Inventory

We need a place to store inventory items somewhere. I will use Actor Components for this at it can be attached to any actor.

But first I would need some structure that will store Items with their count in the inventory (example. have 2 the same items in inventory). Create new structure named InventoryItem:

Var Name Var Type Default Value Description Count Int How many Items do we have. Item Item Object Reference Reference to the item.

Now create new blueprint extending from Actor Component named Inventory.

That’s all for now.

Communication

So you have the idea how the basics classes will work but what about communication? I will be using Interfaces to communicate from one blueprint to another. There will be two Interfaces one for UI (UMG) communication and one for in-game communication.

Before start create new ENUM named ItemCategory. It should contains:

All,

Weapon,

Armor,

Potion,

Ingredient,

Book,

Misc.

This ENUM will be used for UI only. You could try implementing UI without it but it will require more work.

Now create new Interface named IInventoryInHud and open it. It will contain 2 functions:

CategoryButtonClicked function:

Input Name: Type. Input Type: ItemCategory,

InventoryItemHovered function:

Input Name: Inventory. Input Type: Inventory Item structure,

Create another Interface named IInventory with those functions:

StartSelection (doesn’t have inputs)

EndSelection (doesn’t have inputs)

OnTaken:

Input Name: InventoryRef. Input Type: Inventory Component Reference,

OnItemSelected:

Input Name: ItemRef. Input Type: Item Object Reference,

DropItem:

Input Name: ItemRef. Input Type: Item Object Reference,

Input Name: OptionalDropCount. Input Type: int,

We will try to use only those interfaces to communicate within whole system.

Inventory Management

Base classes are done now let’s move into some Inventory management. Open your Inventory Blueprint and add those variables:

Var Name Var Type Default Value Description InventoryItems InventoryItem Strcture (Array) It will store all Items that are in Inventory.

Inventory should implement IInventory interface!

First lets add basics add and remove items from inventory functionalities. Create new function AddToInventory.

AddToInventory Function:

Inputs:

Input Name: ItemToAdd. Input Type: Item Object Reference.

Local Var Name Var Type Default Value Description Index Int It will store the index of the item in InventoryItems array if found the same item. FoundTheSameItem bool Used to determine if we found the same item in inventory. LocalItemToAdd Item Object Reference Just storing the input so it will easier to view the blueprint.

RemoveFromInventory Function:

Inputs:

Input Name: ItemToRemove. Input Type: Item Object Reference.

Local Var Name Var Type Default Value Description Index Int It will store the index of the item in InventoryItems for ItemToRemove reference.

Comments in screen should be enough. So this is basic Add / Remove functionality.

Drop Item IInventory (Interface) Event.

Now create new function named GetRotatedFrontPlayerLocation with:

Input: Int, Name: Optional Rotation Phase,

Output: Vector, Name: Location,

Function should be pure,

What this does is basically picking a location in front of the player (Owner, because Inventory will be attached to Player as component) and rotate it based on Rotation Phase. Rotation Phase will be increasing when dropping items from inventory.

Now go to your event graph and add event from IInventory: Event Drop Item.

It’s simple. When dropping item from inventory we need to create again World version of the item. That’s why I’m spawning ItemWorldActor with specific Item reference. Sequence is simple:

Pick location in front of the player, Check if we can spawn something there, If yes: Just spawn the item, If no: get collision location and spawn near, After spawning – remove the item from inventory,

That’s all in Inventory Blueprint for now!

Adding Items Picking and Moving

Next step is to add possibility to select an item in world and add it to inventory.

Create new Widget named UI_OnItemSelected and Open it. Here’s the hierarchy:

Open Event Graph and add those variables:

Var Name Var Type Default Value Description ItemRef Item Object Reference Editable: Yes, Expose On Spawn: Yes DisplayedInInventory? bool Editable: Yes. Expose On Spawn: Yes

And one function: SetItemRef with one Item Object Reference as Input:

Now in Event Grap create new Custom Event named UpdateItem (update your SetItemRef to call this event!) and add Construct Event:

It looks complicated but it isn’t. It’s just updating Text Values from the Item information, and checking if it’s Armor or Weapon to decide how custom text should look like. The first bool is used to determine if this widget is shown in Inventory UI (which we don’t have yet!) or game.

That’s all here!

WorldItemActor Update

Open WorldItemActor and implement IInventory interface. Add those variables as well:

Var Name Var Type Default Value Description HoverMaterial Material Reference Your custom Material. Reference to the Hover material. Just create some material and add reference here! NonHoverMaterial Material Reference This will store original item material. bEnablePhysics bool PhysicsInfluenceRadius float 15 Remember the Sphere component we have added earlier? This will determine the size of the Sphere.

Go to Construction Script and update it:

I’m saving original material and changing size of the Sphere. Simple as that.

Add Begin Play Event:

Now IInventory Interface events:

It is changing the material and letting HUD know about the selection. (I haven’t touched HUD yet!) Last part here is to implement OnTaken event from IInventory interface:

Simple as that – add selected item to inventory ping all item actors about physics and destroy item actor.

FirstPersonHUD

First person example comes with HUD blueprint named FirstPersonHUD. Open it and add one variable:

Var Name Var Type Default Value Description UI_OnItemSelected UI_OnItemSelected Widget Reference Store reference of actually selected item.

Implement IInventory Interface on the HUD and add those events:

It should be selfexplainatory.

FirstPersonCharacter – Take / Move Item

This will be most critical part. Character is responsible for communicating with inventory and items. Before you start make sure you go to Project Settings -> Input and add those inputs:

Let’s start from components:

Add Inventory component and PhysicsHandle component. You can remove the hands mesh as it’s just cover the screen unnecessary.

Now new variables:

Var Name Var Type Default Value Description LastSelectedActor Actor Reference It will store selected actor in last frame. NewSelection bool Determine if there was new selection or not. MaxSelectionDistance float 250 Distance for picking up objects. WantToGrabItem bool Stores if we want to grab an item instead of adding it to inventory. ItemGrabbed bool Items is currently grabbed by player? DeltaTime float Current delta time. GrabbingAccumulatedDelta float It will determine if we are holding ‘E’ key special amount of time. (eg. after 0.5 s we want to grab the item) HitResult HitResult Stores hit result of our crosshair.

And one function named GetItemOverCrosshair with:

Local Variable: LocalSelectedActor (Actor Reference),

Output Name: Result, Output Type: Actor Reference,

Output Name: Hit Result, Output Type: Hit Result,

It’s searching for IInventory items over the crosshair.

Now custom events. Create new Custom Event named GrabItem:

It’s looking complicated but just read the comments and variable names! This function is responsible for grabbing the item. (to move the item you would need to change PhysicsHandler location when item is grabbed – which will be done in couple of sec in Tick function!)

Create another custom event named ReleaseItem:

Simple as that. I’m resetting the variables just in case here!

Add Tick Event:

Here’s where the magic comes. It’s searching for IInventory Actors and calling StartSelection / EndSelection if found new IInventory Actor. It will try to grab the item as well but we are missing one important part from the input.

Add Use Input Event:

At this point you should be able to add the item to inventory and grab it when holding ‘E’ key.

Adding 3d item view

Next thing I would like to achieve before starting to create UMG Inventory is to create a way to render 3d object in UMG. Currently there is no simple way to achieve this. I will use Render Target but with some “hacks”

First create new Render Target Texture named: T_ItemPreview (resolution 1024×1024) and M_ItemPreview Material:

Now create new blueprint extending Actor named BP_ItemRecordingActor. Open it.

Components:

SceneCaptureComponent2D:

Location :(X=-50.000000,Y=0.000000,Z=0.000000)

Field of View: 60

Texture Target: T_ItemPreview

Point Light:

Location: (X=-80.000000,Y=-60.000000,Z=110.000000)

Intensity: 1

Attenuation Radius: 500

Light Color: (B=255,G=220,R=238,A=255)

Use Inverse Squared Falloff: False,

Scene Component named MeshRoot and Static Mesh Component named Mesh attached to MeshRoot.

Open Event Graph and add those variables:

Var Name Var Type Default Value Description DesiredExtend Vector 18,18,18 Desired size of the object on screen. CurrentMeshExtend Vector Current size of the object on screen. I would like to scale it do desired size. bRotateEnabled bool Is object currently rotated in inventory? OnStartRotateLocation Vector2D It will store 2D coordinates of the mouse when started to rotate the item from inventory.

What I would like to accomplish here is to have a render target which will render my object to 2d texture. The problem is with assets different scale and pivots.

Basically if you will be in pro game development your graphics team will create specific 3d items for your inventory. With the same pivot and scale – to fit the screen (Screen = Texture in this example) as good as possible. I’m not a graphics artist and I’m using meshes from packs. They have different scale and different pivots. My goal here is to have a system that will scale the items and move the pivot so I can render any object without thinking of the scale or pivot. Unreal is able to do that.

This event will be responsible for that. Create new Custom Event named UpdatePivotAndScale:

Now add new Function named SetNewMesh with one Static Mesh input:

It will be used when selecting items in inventory.

Now add custom events responsible for rotating the actor. They will be called from UMG Inventory:

And that’s all here. Now we need to spawn the actor somewhere.

Open Inventory Component and add those variables:

Var Name Var Type Default Value Description RecordingActorLocation Vector (X=0,Y=2000000,Z=0) This will be spawn location for Recording Actor RecordingActorRef BP_ItemRecordingActor Reference It will store reference to the recording actor.

Now add Begin Play and spawn recording actor:

Why I’m spawning it that far away? It need to be outside the sky sphere so we will get alpha in Render Texture.

Adding Inventory UMG

At this point functionality is there. Now we would need to implement Inventory UMG to show the inventory. It won’t be so easy as Skyrim Inventory is advanced.

Base Inventory UMG

Create new Widget named UI_Inventory. Implement IInventoryInHUD Interface. For now leave it as it.

Category Button

Create new Widget named Widget_CategoryButton and go to Designer:

Delete Canvas Panel,

Add Button named Button_Category, (isVariable is True)

Add Text named Text_Type and add it to Button_Category, (is Variable is True, is Focusable: False)

Go to Event Graph and add those variables:

Var Name Var Type Default Value Description CategoryType Item Category ENUM All Editable, Expose On Spawn. InventoryRef UI_Inventory Reference Editable, Expose On Spawn,

Add OnClicked event to Button_Category:

This will let know Inventory UI that category button was clicked.

Now in Construct let’s change Text_Type text depending of the type:

That’s all here.

Item in List

Create another Widget named Widget_InventoryItemInList. Open it and delete Canvas Panel from Designer. Add:

Overlay on top,

Button named Button_Item (Align: Fill – both)

Horizontal Box,

Text named TextBlock_ItemName added to Horizontal Box, (Fill – both) Is Variable = true,

Text named TextBlock_ItemCount added to Horizontal Box, (Fill – both) Is Variable = true,

Open Event Graph and add those variables:

Var Name Var Type Default Value Description ItemToShown Inventory Item Struct Editable, Expose On Spawn. InventoryRef UI_Inventory Reference Editable, Expose On Spawn, bIsHovered bool

Add Construct Event:

It will check how many of the same item do we have.

Now add Tick event which will be responsible for hovering the item in list:

It would be simpler to have OnHover event in Buttons. I have requested this feature on the Unreal Engine 4 Forums. For now we need to use Tick to determine that.

Item Preview Widget

Create new Widget named Widget_ItemPreview. Delete Canvas Panel and add Image named Image_ImagePreview (Is Variable = True, Brush = M_ItemPreview material created earlier)

Make sure Is Focusable is set to False. Just click on Root of the Hierarchy. It’s needed as I will use TAB key to open and close inventory. TAB is used to control UMG widgets as well. Setting this to false will disable TAB to focus.

Add those variables:

Var Name Var Type Default Value Description OnClickMousePos Vector2d It will store mouse position when clicked on Widget. ItemPreviewActorRef BP_ItemRecordingActor Reference Storing reference to Item Recording Actor. bIsHovered bool Store if Item is hovered currently.

Now in event graph go to functions and click Overwrite On Mouse Move Function:

This is how I’m communicating with Recording Actor to rotate the Actor.

Overwrite On Mouse Button Down:

Overwrite On Mouse Button Up:

Now in Event Graph add On Mouse Leave event:

This will be called when our mouse will leave whole widget. That’s all here!

UI_Inventory Preparation

Now go back to UI_Inventory and try to recreate my hierarchy:

Go to Event Graph and add those variables:

Var Name Var Type Default Value Description bHasItem_Weapon bool bHasItem_Armor bool bHasItem_Potion bool bHasItem_Ingredient bool bHasItem_Book bool bHasItem_Misc bool InventoryItems Inventory Item Struct ARRAY Storing all inventory items. ActualSelectedItem Inventory Item Struct Storing currently hovered item. CurrentOpenedCategory Item Category ENUM Storing currently opened category. ItemDropCount int Storing how much items did we drop when in inventory. Inventory Reference Inventory Component Reference

Open Event Graph and add Category Button Clicked from IInventoryInHUD interface event:

This will be responsible for showing items depending on which category we have clicked. The first one is All. Here’s next:

I won’t be showing rest as it’s only changing Cast To – Specific Type. Try to fill the rest switch.

Now add new Custom Event named AddCategoryButtons:

I won’t be showing rest as it’s only changing the bool type and category type. You should figure this out.

Add another Custom Event named Clear Data:

And another one named AddAllCategoryButton:

This will add “ALL” category button.

Add another one named UpdateCategoryItems:

It will search for all items and select if we have Weapon, Armor etc.

Add another one named UpdateData:

In Construct:

I have directly set variable in Widget_ItemPreview you should use Function for that!

Add another one Custom Event named TABInput:

And another named DropInput:

Now add Event from IInventoryInHUD Interface named Inventory Item Hovered:







I have separated it for 2 parts.

Yes – managing UMG in Blueprints is really hard.You can spend days to improve your Blueprints visibility. I assure you that this can be done much more easier. Just understand how it works and try to create it by yourself!

Last thing here is to get “E” and “TAB” events. Currently UMG doesn’t support Inputs from Project Settings so you need to Overwrite On Key Down Function:

Add one local variable named LocalKeyEvent extending from Key.

And that’s all here!

Triggering Inventory UMG

Now we need to somehow open inventory. Open FirstPersonCharacter Blueprint and add UI_Inventory variable extending from UI_Inventory Reference.

Add Input Action Inventory:

And that’s all. You have Skyrim like inventory completed!

Assets

I have used Bumping Pub for showcase. The pack isn’t modular but it’s great for showcasing things! Shield has been found here and weapon here.

You can found ready to use Inventory in Marketplace as well. I have done this for you for free and hope you will learn from it!

Final Result