1

INVENTORY EXAMINE INTERFACEFor Unreal Engine

Step by Step Instructions for Migration, Setup and Usage

By

2

System Overview

Pickup, examine (3D tumble and turn), put back, drop, throw and use actions. The Inventory Examine Interface is a 100% blueprint driven Inventory system great for escape room, puzzle solving, treasure hunts and adventure games. This system allows you to pick up objects in the game, examine them by tumbling them around in 3D, then take them into your inventory. You can drop the items, throw the items or use the items depending on what it is. Also included in the system are ‘Interact’ object blueprints to activate/animate/open/close things like drawers and doors when you click on them and connect them to items in your inventory like keys and other tools. Features:Fully 3D turn and tumble of item being examinedInventory assets obey physics and gravity rules for throwing and dropping actionsCreate items to be picked up and taken into inventoryCreate items to be picked up and examined, but not taken (too big or heavy like a desk)Create items to be interacted with in the world like doors and drawers that tie directly into items in your inventory like keys or lock picksExamine and Take MenuExamine Only MenuInventory Menu Interface with roll over action buttons (Drop, Use, Throw)Heavily commented modifiable blueprint systemPre-set blueprint class Templates and step by step instructions makes it easy to add your items to the inventory systemTemplates include variables for setting up item name, description, thumbnail, 3D mesh to use when examining the item close up, if the item is ‘Takable’, ‘Usable’ and moreCompletely customizable and modifiable to suit your individual requirementsMigrate-able to new or existing projects Technical DetailsPrevious knowledge of how blueprints work is recommended for editing and customizingIntended platform: Works on Windows and MacOverview scene included showcasing Take-able items, Examine Only Items, Usable Items, Throw-able Items, Interact Items (opening drawer), and Interact Item with lock (unlocked with key when in inventory) Any questions, comments, suggestions, please contact me at:support@creativevilla.com

Best wishes, Jerry

3

Contents

Step 1 Migrating to a new or existing project

Step 2 Setting up dependencies

Step 3 Creating a Post Process Volume for highlighing of objects

Step 4 Opening and Setting up your new project

Blueprint Type Overview

Creating a New Pickup Item and Inventory Actor

Putting a newly created BP_Pickup_Actor into the level

Bringing up the Inventory Examine Interface

Examine Only Items

Interact Items

Creating an Interact Item

Creating an inventory Icon Image (Thumbnail)

Troubleshooting the Inventory Examine Interface system

4

Step 1 Migrating to new or existing project folder

1) Open original CVInvInterface project you want to migrate from (the marketplace project)

2) In the Content Browser, locate the folder: CVInvInterface

3) Click on the CVInvInterface folder to select it.

4) Right click and select Migrate

5) A window will come up showing you all the components being migrated. Click OK.

6) Navigate to your new project folder structure and locate your Content Folder

7) Select the Content folder in your new project and click OK

8) When done you will receive a message: Content migration completed successfully.

9) Close the original Marketplace project

5

Step 2 Setting up dependencies

1) Go to the config folder of the original project.

2) Copy Input_CVInvInterface.ini

3) Go to your new project’s Config folder and Paste the .ini file there.

4) Open new project

5) Open the Project Settings window.

6) Under the Engine category on the left, click INPUT.

6

7) In the top-right, click Import… button

8) Navigate to the your project’s Config folder and select the newly placed Input_CVInterface.ini

9) Confirm that the new Action and Axis Mappings were imported by clicking on the

small triangle next to them.

Step 3 Creating a Post Process Volume for the highlighting of objects – OR modifying your existing Post Process Volume.

1) First you will need to turn on Custom Depth Stencils in the Project Settings

2) Go into the Project Settings Window

3) Under the Engine section, select Rendering

4) In the right panel locate the Postprocessing section.

5) Next to Custom Depth-Stencil Pass, click the drop down and select Enabled with Stencil. Be

sure ‘…with stencil’ is the selected choice.

7

6) Close this window.

7) If you do not already have a Post Process Volume in your level, create one by going into

the Modes panel, clicking on Visual Effects, and then dragging a post process Volume into the

level.

8) In the details panel click on the Post Process Volume (PPV) to bring up its details.

8

9) Scroll down the PPV Settings list and expand Rendering Features and Post Process Material.

10) Add an Array element by clicking the + symbol on the right

11) In the Choose drop down, select Asset Reference

12) Click on the ‘none’ drop down and select PP_OutlineColored (Or you can drag and drop this

material directly onto the drop down from the Content Browser.)

13) Lastly, check the Unbound tic box at the bottom of the PPV settings section to turn Unbound

ON. This ensures that this effect will be used beyond the bounding box of the PPV. Otherwise it

will only visually highlight items within the PP volume.

9

Step 4 Opening and Setting up your new project

1) Launch your new project with the recently migrated CVInvInterface folder

2) Open the Project Settings window.

3) On the left panel, select Maps & Modes

4) Under Default Modes section, click the Default GameMode drop down, and select FirstPer-

sonGameMode

5) You are now ready to start creating Items to examine, take, use, drop and throw.

10

Blueprint Type Overview

There are 3 types of interactive items within the CVInvInterface system.

1) Items you can examine and take into inventory, drop, throw, or use (small things like a

ball, key or fire extinguisher)

2) And Items you can examine but can not take with you (desk, alarm pad, etc)

3) Items you can Interact with (Open a drawer, open a door, flip a switch)

When you get close to one of these 3 types of items in the level (the distance is adjustable) the

cursor will turn into a Magnifying Glass or a Pointer Hand, and the item will highlight a different

color letting you know if they are a Pick up, Examine Only (Magnifying Glass) or Interact Item

(Pointer Hand). Pickups are green, examine onlys are orange and Interacts are blue.

11

These colors can be changed to suite your needs within the BP_Gameplay/PP_OutlineCol-

ored material.

12

For the Pick Up and Examine Only items, there are 2 blueprint classes for each item.

1) BP_PickupBase (this is the item that appears in the level that you pick up and take)

2) BP_InventoryActor (this is the item you examine, and take into inventory)

13

They are the exact same blueprint class with one exception, a variable that sets whether the

item is Takable or Not. Depending on this variable, when clicked on, the Examine Menu that

appears will have different action choices for the player.

Creating a New Pickup Item and Inventory Actor

When creating a new item to put in your world that you can pick up and add to the inventory,

you will need to create 2 Blueprint classes. One is the Pickup blueprint class that lives in the

game world – it reacts to physics. The other is an Inventory Actor which spawns when examin-

ing an item closer, or when examining it within the Inventory screen - it appears in front of you

so you can examine it closely, and tumble it around in 3D. When simply inspecting it, you can

Take it, Drop it, or Put it Back exactly where it was. After you take an item, the Pickup blueprint

is removed from the world, and the Inventory Actor is placed within your Inventory.

14

First you will create these two new Blueprints and then start setting their variables. You will

create the Pickup Item first, and then create the Inventory Item.

1) Inside the CVInvInterface/Blueprints/BaseBPs folder are where the Pickup items are kept.

These are blueprint classes which contain the mesh and all the variables associated with that

item such as if its usable, its name, its description, what icon to use in the inventory screen,

etc.

2) BP_Pickup_base is the ‘parent’ class. It contains all the variables and actions that get

passed down to the children. Anything added to this Pickup_base, will trickle down to the

children blueprints. There is only ever a SINGLE Pickup_base. You will not be duplicating it.

3) Also in that folder is a Blueprint class called BP_Pickup_Child_Template. Before creating

your item, duplicate this BP and rename it BP_Pickup_Child_XXXX (XXXX is the name of your

item) Example: BP_Pickup_Child_GoldKey

15

4) Now for the Inventory Actor. Inside the CVInvInterface/Blueprints/InventoryActorsBPS folder

you will see a similar structure as the BaseBPs

5) There is a BP_InventoryActor which is the Parent to all the rest of the children in this folder.

There will only ever be one of these, and this holds the majority of the blueprint scripting which

gets handed down to the individual Inventory children.

6) Inside this folder you will also find BP_InventoryActor_Child_Template. Before creating your

Inventory Actor, duplicate this BP and rename it to match your Base Pickup blueprint. In the

previous example that would be something like BP_InventoryActor_Child_GoldKey

7) Now that these are both created, navigate back to the BaseBPs folder and open up your

new BP_Pickup_Child_XXXX blueprint.

16

8) In the left panel, locate the Functions list. Double click on OnExamine to open up that

function in the blueprint window. This is a function Override from the parent – in here we can

put unique attributes for this particular item.

9) Follow the instructions to fill in the name, description, icon and other information the

system will need to make this a Pickup Item. When assigning the default Inventory Actor, use

the drop down to select your newly created BP_InventoryActor_Child_XXXX.

10) See “Creating an Inventory Icon Image” later in this tutorial for instructions on

making an icon for the inventory screen.

11) The last variable to set at the bottom of the Graph is Takable Or Not. This tells the

system if this item is something that you can take and put into your inventory, or just examine

and put back (heavy or large items could include those that can not be taken.) Items that

are Takable have a GREEN outline when highlighted. Items that are NOT Takable have an

orange outline, but can still be examined close up by clicking on them.

17

12) After setting the variables within the OnExamine function, Compile and save.

13) Click the Viewport tab at the top of the screen. This is where you will place your mesh

that will become the Pickup item once placed in the level.

14) Select PickupMesh from the Components tab on the left. This will bring up the Details

panel on the right. Under Static Mesh, select the mesh you want to use for this Pickup Item.

15) Size your item accordingly within the Viewport.

16) NOTE: Your static mesh MUST have collisions attached to it in order to highlight

when hovered over.

18) You can set your own rules for collision but these are set up for you to interact with the

world, and other physics objects, but not the player/user. This way the player cant get stuck

behind objects that they have thrown in front of them.

19) NOTE when placing a mesh, be sure to place it centered at the origin, this will ensure

that it rotates from the center when examining it closer.

20) NOTE there is an item called SpherePivot in the Components menu. This resets the

rotation of the item when examining it, everytime you let go of the mouse – to prevent gimble

lock and items rotating in reverse. The sphere pivot does not visually show up in the level.

21) When done, compile and save.

18

Now its time to move onto creating content for the Inventory Actor Class. This is the blue-

print that will pop up the item in the examine menu or when clicked on inside of the inventory

screen. You will repeat similar steps as the Pickup Child blueprint.

1) Navigate to CVInvInterface/Blueprints/InventoryActorsBPS

2) Open up your newly created InventoryActor that you duped from the template.

3) Click on the Construction Script tab. If this is not visible, double click on the Construction

Script Function in the left panel to open the tab. This is where you will set the variables for the

InventoryActor.

4) Follow the instructions within the blueprint to fill in the name, description, icon and other

information the system will need to make this an inventory Item. When done, click Compile.

19

5) Next click on the Viewport tab at the top of the screen. This is where you will place

your mesh that will become the Inventory item which represents the Pickup Item within your

inventory.

6) Select InvMesh from the Components tab on the left. This will bring up the Details

panel on the right. Under Static Mesh, select the mesh you want to use for this Inventory Item

– you can use the same Mesh as the PickUpMesh or a different one with more detail if you

prefer.

7) Right below the InvMesh component is a SizeReference component. This is not visible

in the level, and is here simply as a reference point for scale. Your item you have just brought

in as your InvMesh, should fit within or close to within this rectangular box. You can adjust to

fit your needs later. Be sure to center the item at the origin.

8) There is also a SpherePivotINV. This does the same as the SpherePivot in the Pickup

Base and helps control the item when rotating and spinning it around while in the inventory

screen.

9) Compile and save this blueprint

20

10) Now that you have created and filled out all the variables for both your BP_Pickup_Child

and your BP_InventoryActor_Child, its time to put the item in the level and test it out.

Putting a new BP_Pickup_Child into the level.

1) Locate your newly created BP_Pickup_Child_XXXX blueprint within the BaseBPs folder and

click drag it into the level. It has physics and gravity, so if you place it above the floor/table, it

will fall until it hits something and settles. Take note when placing items that when you click

PLAY, they will become ‘active’ physics objects. IE if an item is imbalanced, it will tip over.

2) Once placed, click play to test this object.

3) As you approach the item with your first person character, you will notice the red crosshairs

change to a Magnifying glass once you hover over the item. You will also notice that the item

will highlight with a thin Green line around it – letting you know that this is an item that you can

examine and take in to inventory.

21

4) Click on the item to bring up the Examine Menu.

5) The Examine Menu will show you the name and description of the item on the left, a 3D Mod-

el of your item in the middle, and action choices on the right to either Put the Item Back where it

was, Drop the Item from where you are standing, or Take the item into inventory.

22

6) Click drag on the 3D item in the middle to rotate and tumble the item around to see it from

all sides. Releasing the Mouse re-sets the rotation settings to avoid Gimbal Lock and Reverse

Rotating. Moving the mouse left will rotate the object clockwise on its axis. Moving the mouse

up will pitch the item forward, Etc.

7) Clicking on Put Back, simply puts the item back where it was before you clicked on it.

8) Clicking Drop, Spawns the item in front of you at a pre-determined (adjustable) height, and it

will fall to the floor, or what ever is beneath it. You can stack items this way as well. (boxes)

9) Clicking Take will take the item into your inventory. The Actor in the level is destroyed, and a

new actor is spawned within your Inventory.

10) A dialog box will appear letting you know that you have taken the item into your inventory.

23

Bringing up the Inventory Examine Interface.

1) While in the Level pressing the “I” key on the keyboard will bring up the Inventory Examine

Interface.

2) The Inventory Examine Interface will appear and the player will be frozen in place while this

screen is up.

3) This interface is very similar to the Examine Menu with some additional choices on the right.

4) The Item name and description fields on the right will be blank, until you click on an item in

your inventory – then they will populate with that items information.

5) Click on a thumbnail of an item in your inventory to examine it. There are currently 5 slots for

inventory. Once they are full, attempting to take a 6th item into inventory will bring up a dialog

box telling the player the inventory is full and to remove an item to make room for the new one.

24

6) When you do click on an item, a 3D model of the item will appear in the middle of the

screen. Click drag your mouse on the item to rotate it around in 3D Space.

7) Information from your InventoryActor will populate the panel on the left – Note, this can be

different then what was in the Examine Menu and may contain more details

8) To the right there are 4 Action Items, now that you have this item in your inventory.

9) Clicking Close simply closes the inventory screen and puts you back in the level.

10) Clicking Drop will drop the item in front of the player. This is the same function as the Ex-

amine Menu Drop action.

11) Clicking Throw will close the Inventory screen and bring up a dialog message and a

Charging bar.

25

12) Instructions to Hold the Mouse button down to charge the Throw Force (Velocity) will come

up then disappear.

13) You can walk around and aim until you are ready to throw the item.

14) Click the mouse and hold it down to charge the Throw Velocity. Release the mouse to

throw the item based on that velocity.

15) Clicking and releasing quickly will simply drop the item in front of you. Holding until the

end of the Charge bar will throw the item the farthest. This inertia setting is adjustable within

the blueprints.

16) Pressing the “I” key on the keyboard before clicking the mouse will Cancel the Throw

operation and put you back into the Inventory Examine Interface.

26

17) Clicking the Use Action item will allow you to use an object within the level. What action is

performed when you press USE for that particular item is set within the Bp_InventoryActor_

Child_XXXX blueprint. This can be anything from bringing up a simple dialog box, to increas-

ing health if eating an apple, to bringing up an item like a fire extinguisher hose which can

then be used to put out a fire.

Examine Only Items

1) Examine Only items are identical in every way to a Takable Pick up item with the exception

that they can not be taken into your inventory – which means they can’t be Thrown, Dropped,

or Used, but only examined.

27

2) A good example of this might be a

Stove, or a Large Crate, or a Table. This

type of item allows you to only examine

and tumble the item in 3D, and display

details about it.

3) When hovering over an Examine Only

item, its outline turns Orange letting the

player know that it is Examinable but not

Takable.

Interact Items

1) Interact items are items in the level that

the user can interact with in some fashion.

This may include opening a door, a drawer,

flipping a switch, etc.

2) Interact items in the level highlight Blue

when hovering over them. Letting the

player know that they can interact with this

item in some way.

3) Interact Items can be tied to items within

your inventory, such as a Key or Lock Pick,

etc. A drawer can be locked until you have a certain key in your inventory to unlock it. The bot-

tom drawer in this Overview level is locked, until you have the key in your inventory.

28

Creating an Interact Item

1) Creating an Interact Item blueprint is simple.

2) Navigate to CVInvInterface/BP_Gameplay/InteractBPs

3) This folder is setup the same way as the other Blueprint items. There is a parent blueprint

named BP_InteractBase which passes all of its settings down to the children blueprints.

4) In this folder is a BP_Interact_child_Template.

5) Duplicate this template to create your own Interact Item, and rename it what you want: BP_In-

teract_Child_XXXX. (example: BP_Interact_Child_Drawer1)

6) Double click on your new child blueprint to open it up.

7) Click on the View port tab.

8) In the Components tab on the left, click on InteractMesh to highlight it.

29

9) In the Detail panel on the right, Select the Static Mesh to use for this particular Interact Item.

10) There is a RED arrow also in the components area. This is only there to help orientate you

on a particular direction. It serves no function other than to help you determine which way the

item is facing when placed in the world.

11) Click on the Event Graph.

30

12) There is an Event On Interact node here. This is called whenever you click on a particular

Interact Item within the level. The Overview level provided has 2 drawers that play a particular

Sequence animation of the Drawer opening and closing when clicked on.

13. The Drawer 2 sample provided in the sample level, shows a way to ‘Lock’ the drawer

until a key is placed into inventory. Then when you click on the Drawer again, it opens.

14. This is done by matching the Item ID within the BP_InventoryActor_Child. If it matches

the Variable set within the Interact Item BP, then the drawer opens, if not, it stays locked.

15. The Item ID is set in the Details panel of the Inventory Actor.

31

Creating an Inventory Icon Image

1) Creating an icon to represent your item inside the inventory screen is very simple.

2) You can either screen capture your model within Unreal Engine or in a different modeling/ren-

dering program.

3) Go into Photoshop or other editing software, and bring in the capture.

4) Create a new image that is 113 x 113 pixels.

5) Center your newly captured image so that the item is fully visible within the 113 frame.

6) Cut out the item and delete the background so it is floating on a transparent background.

7) Save as a 24 bit Transparent PNG.

8) Inside of Unreal Engine, determine where you want this image to reside once you import it –

In the Content Browser, click Import, and select your newly created PNG.

9) Once imported double click on it to bring up its Image Viewer. In the Details Panel, in the first

section, under Level Of Detail, select the drop down next to Texture Group.

10) Select UI

11) Save and close this window.

12) This tells Unreal engine that this is an image to use within the User Interface, and will obey

the transparency within the PNG.

32

Trouble shooting the Inventory System

1) When I click on an object in the level, The Examine screen comes up but there is no 3D

Model in the view.

a. Possible Solution: Double check that you added the InvMesh within the BP_Invento-

ryActor_Child blueprint. And that it is within the SizeReference box.

b. Possible Solution: Double check your drop down boxes in both your BP_Pickup and

your Bp_InventoryActor blueprints to make sure all your drop downs are pointing to the correct

blueprints to use.

2) When I take and Item and then press “I” to bring up the inventory menu, there is no

thumbnail of my item.

a. Possible Solution: Check to make sure that your InvIcon image is in place, and properly

formatted. One way to test if this is the problem is to pick up the item in question, and then

several other items. If the other items appear in the inventory, but the first slot is blank – that

means it’s there, but you just can’t click on it because the image is missing which initiates the

action.

3) I want more than one of the same item in my game, but when I drag the same Blueprint

many times into my game, and pick them all up, it only shows one in inventory.

a. Each item that you want to appear in the level needs to be its own blueprint class

based on the template file. If you want more than one instance of particular item, duplicate your

BP_Pickup_Child and the BP_InventoryActor and name them accordingly. Then be sure to

change their variable settings within their blueprints to reflect the new names. Now when you

drag these into the level, the system will recognize these as unique assets.

Questions, comments or suggestions: support@creativevilla.com

33

Trouble shooting the Inventory System Page 2

4) I put my Pickup blueprint class into the world, but it doesnt highlight when I hover

over it with the cross hairs.

a. Make sure that Collisions are on for the Static Mesh. You can turn collisions on by

double clicking the mesh you imported, and selecting an option within the Collions drop

down menu.

Questions, comments or suggestions: support@creativevilla.com