Create a Keycard with the Prefab Editor

This tutorial shows you how to use the Custom Items and Inventory system with Scene Graph and Verse to make a custom keycard item.

In this tutorial you'll learn how to build a keycard item with the Prefab Editor. The keycard item can be used in objective-based games that require players to locate and use keycards to access locked areas, for example:

• Heist games

• Escape rooms

• Assault and extraction

Setting Up Your Project

Follow these steps to set up your project and enable Custom Inventory and Items.

1. Open UEFN and create a project from any island template. Name your new project, and click Create to open it in the editor.

   

2.   From the toolbar, select Project > Project Settings.

   

3. Scroll down to the Beta Access section, and enable Scene Graph System and Custom Items and Inventory.

   

Setting Up a Door Prop

First you need a wall with a door in it. You can use any Wall Prop that has a FortDoorLinkComponent. Search the content browser for a wall with door prop, then drag your chosen prop into the scene. 

You can find the door used in this tutorial in the content browser in the project files under All > Fortnite > Props > Art Deco.

Any wall prop with a Fort Door Link Component provides a way for you to control the door. 

Setting Up the Devices

Lock Device

First you need to add a device which controls the door in the wall prop. The Lock device can open, close, lock, or unlock a door. 

1. Open the content browser and search the All > Fortnite > Devices > Logic folders.

   

2. From the Logic folder, drag a Lock device into your level.

3. From the Outliner panel, drag the Lock device onto your wall prop. 

   

   This attaches the Lock device to the wall prop and binds the device’s functionality to the door.

   

The default state for a Lock device is Locked, the door can't be opened without you explicitly telling the Lock device to Unlock. 

Volume Device

Next you need to set up a volume that can be used to detect a player entering. Then you’ll check whether the player has the required Item. If the player does possess the item, the door Unlocks.

You’ll also make sure to Lock the door when the player leaves the volume to prevent another player from passing through who doesn't have the required Item. 

1. Open the Logic folder from the content browser.

2. Find the Volume device then drag it into your level.

   

3. Place the volume in front of the door so a player must enter the volume before reaching the door.

   

Creating an Entity Prefab

Now that you have your door and devices set up, you can create the custom keycard. You’ll start by making a prefab, then you’ll add some components to it before writing some custom components to expand its functionality through Verse code. 

1. In the content browser, right-click to open the context menu then select Entity Prefab Definition > New Prefab. This adds a new Scene Graph Entity Prefab to the content browser.

   

2. Rename the prefab Item_Keycard.

   

3. Double-click the Item_Keycard prefab thumbnail in the content browser to open the Prefab Editor.

   

Adding Scene Graph Components to the Prefab

Now that you have your keycard open in the Prefab Editor, you’ll need to add the Scene Graph components that give it functionality.

Description Component

Start with a description_component, this provides user facing text to anyone looking at the Item. 

1. Select the Item_Keycard base entity in the Prefab Editor's Outliner panel.

   

2. Click +Component in the Details panel to add a new Scene Graph component.

   

3. From the menu, select the description_component.

   You can scroll through the list to find the component or type "description" in the search bar to limit the results and find it more quickly.

4. Select the description_component in the Details panel and complete the fields.

   

Icon Component

Now that you have text to describe the Keycard, you can add an icon_component to show an image inside the HUD. UEFN has icon textures you can use for this.

1. Make sure you have selected the Item_Keycard base entity in the Prefab Editor Outliner.

2. Click +Component in the Details panel and select the icon_component.  

   

3. Select the icon_component in the Details panel and select a texture to use for the Icon field.

   You can find the texture in the image below in the following Fortnite folders, All > Fortnite > Textures > Icons > 128x128.

   

The Item_Keycard now has two components that represent it in 2D, the text from the description_component and the texture from the icon_component.

Mesh Component

Next you'll add a mesh_component to represent the keycard in the 3D world. Not only will this provide a way for the Item to be seen in the level, but it also gives the Item a physical body to interact with.

1. Select the Item_Keycard base entity in the Prefab Editor Outliner.

2. Click +Component in the Details panel and select the mesh_component.

   

   A sub menu appears, select Plane.

3. Adjust the Scale value inside the transform_component to shrink the mesh down to an appropriate size.

   The suggested size for the keycard mesh is: (X=0.400000,Y=0.400000,Z=0.400000)

   

You now have an entity prefab that has 2D and 3D representation, however it won’t behave as an Item unless it has an item_component. The Item also needs a method for being added to the player’s inventory. You can do this by writing some custom components with Verse.

Creating a Custom Item Component

Start by creating a unique item_component class that can differentiate your Item_Keycard from other entities.

1. In the menu bar, select Verse > Verse Explorer. Verse Explorer opens in a new tab in the Editor.

2. In the Verse Explorer, right-click on your Content folder and choose Create New Verse File to open the Create Verse Script window.

   

3. Select the Verse Class option, and fill out the Class Name at the bottom of the window.

   1. Name the class keycard_item_component.

   

4. Click Create Empty.

5. Double-click the new keycard_item_component.verse class in Verse Explorer to open the file in Visual Studio Code (VSC).

   

   You’ll declare the modules you want to use when writing your code. In this case, you need the modules relating to Custom Items and Inventory and Scene Graph. You also need to define your custom item_component. You can paste the following code into your file:  

   Verse

   # Copyright Epic Games, Inc. All Rights Reserved.
   
   using { /Verse.org/SceneGraph }
   using { /UnrealEngine.com/Itemization }
   
   keycard_item_component := class(item_component) :

   Copy full snippet(6 lines long)

6. Click Compile Verse in the editor to compile your code, then add the  keycard_item_component to the Item_Keycard prefab. Inventories can now store and control your prefab once this component is added.  

   

Now the entity is considered an Item by the Custom Items and Inventory feature. This provides a way for inventories to store and manage the keycard.

Creating a Custom Pickup Component

Although the keycard is now an Item, the Item_Keycard still needs a way to be added to a player’s inventory.

You can achieve this is by subclassing the basic_interactable_component. This component makes the Keycard Item interactable, and also provides a way to check whether the interacting agent (player) has an inventory. Once the system confirms the player has an inventory, the Keycard Item is added to it.

1. In the Verse Explorer, right-click on your Content folder and choose Create New Verse File to open the Create Verse File window.    

2. Select the Verse Class template and name it item_pickup_interactable_component.

3. Click Create Empty.

4. Double-click item_pickup_interactable_component.verse in the Verse Explorer to open the file in VSC.

5. Copy and paste the code below into your new file then click Compile Verse in the editor:

   Verse

   # Copyright Epic Games, Inc. All Rights Reserved.
   
   using { /Verse.org/Presentation }
   using { /Verse.org/Simulation }
   using { /Verse.org/SceneGraph }
   using { /UnrealEngine.com/Itemization }
   
   # Place this component onto an entity to allow it to be added to an agent inventory on interaction.
   # The owning entity must have an item_component and a mesh_component.
   # This component expects the interacting agent to have a subentity with an inventory_component.
   
   Expand code Copy full snippet(51 lines long)

   After compiling, the item_pickup_interactable_component is selectable in the +Component menu.

   

6. Add your custom component to Item_Keycard and save the prefab. 

   

7. From the content browser, drag an instance of Item_Keycard into the level.

   

8. Click Launch Session in the editor to preview your item. Once you are in the session, try interacting with the Keycard. See the Icon in your hotbar. Open the backpack and select it, see the Name and Description.  

Creating a Keycard Device

You have now created an entity prefab that is an item, can be picked up and owned by a player inventory, and has 2D and 3D representation in the world. Next you'll need to create a device that can check whether a player has the Item_Keycard in their inventory, and open the door. 

1. Open the Verse Explorer and right-click inside the Content folder to create a new Verse file in the project.

2. Select the Verse Class template, name it keycard_device and click Create Empty.

3. Double-click keycard_device.verse in the Verse Explorer to open it in VSC.

4. Copy and paste the code below into your new file and then click Compile Verse in the editor:

   Verse

   # Copyright Epic Games, Inc. All Rights Reserved.
   
   using { /Fortnite.com/Devices }
   using { /Verse.org/Simulation }
   using { /Verse.org/SceneGraph }
   using { /UnrealEngine.com/Itemization }
   using { /Verse.org/Presentation }
   
   # Helper function that gets the first descendant inventory component from an agent.
   # This will be the root inventory.
   
   Expand code Copy full snippet(63 lines long)

   After compiling, a keycard_device verse device can now be found in the content browser.

   

5. From the content browser, drag the keycard_device into the level.

   

6. From the Details panel, set the @editable fields VolumeDevice and LockDevice to the two devices you placed in the viewport.

   

Testing Your Keycard

The locked door and keycard example is now complete, click Launch Session and try it out.