inventory examine interface - creativevillacreativevilla.com/invexintinstructions.pdf · items in...
TRANSCRIPT
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:[email protected]
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: [email protected]
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: [email protected]