Week 7: Creating the Western Prototype in UE5 (Part 1)

Creating a New Level

I created a new level and called it 'my_saloon', and then I imported the following assets that I will use to build the environment: Saloon Interior, Old West VOL.1 - Interior Furniture, Old West - VOL 2 - Tradesmen Tools and Props, Old West VOL.3 - Travel Supplies and Goods, Old West - VOL 4 - Goods and Supplies, Old West - VOL 5 - Town Props and Old West VOL. 6 - Town and Industrial. I then used the modular wall meshes from Saloon Interior to start building the layout of the saloon. 

Creating the HUD

I created a simple crosshair widget by adding a small white box and aligning it to the centre of the canvas panel. In the character blueprint, I used a 'Create Widget' and 'Add to Viewport' node to make the crosshair visible at the start of play. I promoted the return value to a variable so I can reference the HUD widget later.

Creating a Working Door

To enable the player to pass through an open door, I had to take one of the existing modular wall meshes and make a hole in it. I did this by adding a cube the size of the door's opening and entering into modelling mode and using 'Boolean' to subtract the mesh of the cube from the wall mesh. 

Doing this created a hole in the wall; however, the original collision of the modular wall mesh was preventing the player from walking through the opening. To fix this, I removed the existing collision of the static mesh and created a custom collision using three collision boxes. 

After doing this, I realised the capsule component within the first-person character blueprint was too wide for the player to pass through the opening, so I reduced the half-height to 75 and the radius of the capsule to 25, and the player is now able to pass through the opening of the wall. 

I then began to create blueprints that would either show an 'open' or 'close' UI prompt when the player overlaps the collision box within the door blueprint.

Creating an Interaction System

I used a YouTube tutorial by UE5 BP GURU to help me create an interaction system. 

I first created a new input action and called it 'IA_Interact'. Then, in 'IMC_Default', I added a new mapping and set the keybinding for 'IA_Interact' to 'E'. I then created a new blueprint interface called 'BPI_Interact'. I opened 'BPI_Interact' and created a new function called 'Interact'. 

To make an object be able to be interacted with using the interaction system, you need to implement the 'BPI_Interact' interface within the class settings of the object's blueprint. Then, within the object's event graph, you can use 'Event Interact' to trigger code when the player presses 'E', thereby triggering the interaction system.

In the first-person character blueprint, in class settings, I added the 'BPI_Interact' interface. Then, in the event graph, I created the blueprint shown below. This blueprint sends out a line trace from the first-person character camera, and if the trace hits an object that implements 'BPI_Interface', then 'Event Interact' will be triggered within that object's blueprint. 

I then implemented 'BPI_Interact' in my door blueprint, and used 'Event Interact' with a 'Flip Flop' node to trigger the 'Event Open' and 'Event Close' custom events I created earlier, each time the player presses 'E'. 

I further edited the interact script within the door blueprint, using Boolean variables to determine whether the door was open or closed, and then show either an 'open' or 'close' UI prompt accordingly. 

Although my blueprint worked, I decided to instead use a line trace, rather than collision boxes, to trigger interact UI prompts, as I believe it will be more accurate and intuitive using a line trace, as the player will be aiming at objects anyway, as the interaction system utilises a line trace. It will also be more efficient to create a system using a line trace, as it's quicker and easier to implement an interface in an object's blueprint, rather than add collision to each object I want the player to be able to interact with. 

Creating a System to Show 'Interact' UI Prompts

I used a YouTube tutorial by JimDublace to help me create this system. 

Firstly, I created the blueprint below, which continuously sends out a line trace and checks if the hit actor implements 'BPI_Interact'. If the line trace does hit an actor implementing 'BPI_Interact', then the actor is set within the 'interacting actor' variable, and the 'interact' UI prompt is shown. 

Then I created the script below, which does a validated 'get' of 'interacting actor'. If the value within this variable is valid (when the line trace has found an actor that implements 'BPI_Interact'), the 'Interact' function is called. This starts 'Event Interact' within the hit actor's event graph, triggering code. 

Creating an Object Highlight 

I used a YouTube tutorial by Boat in a Bottle Studios to help me create an object highlight system. 

Firstly, I created a blueprint interface called 'BPI_HoverInteract'. In 'BPI_HoverInteract', I created a function called 'OnInteractHighlight' and another function called 'OnInteractEnd'. I then created a third function called 'CanInteract' and added a Boolean output called 'Value'. 

In the first-person character blueprint, I used a line trace to search for actors that implement 'BPI_HoverInteract' and then call 'On Interact Highlight' accordingly. This blueprint uses a line trace, similarly to the interaction system; however, instead of using an 'Event Tick' node, the object highlight system uses a 'Timer' node to fire the code (which is stored in the function, 'Look for Interactable') in specified increments of time. I set the time increment to 0.1 seconds; however, I may change this in the future to improve performance.  

Next, I created a material that will be the outline around objects when they are hovered over. I then created a material instance and altered the outline thickness and colour values. 

To enable the highlight system to work for an actor, you have to implement the 'BPI_HoverInteract' interface within the class settings of an actor's blueprint. You also have to open 'Can Interact' in the My Blueprint panel and set the Boolean value to 'true'. This enables the player to be able to interact with the actor. Further script can be added in 'Can Interact' to determine when the player is able to interact with an actor, for example, the player could be prevented from interacting with an NPC for a duration of time, or there could be a condition which either enables or disbales the player to interact with the actor. 

To make the outline appear when the player is hovering over an object and disappear when the player stops hovering over the object, I created a script using 'Event on Interact Highlight' and 'Set Overlay Material' to set the overlay material to the outline material I created earlier. I then created a script using 'Event on Interact End' and 'Set Overlay Material' to set the object back to its original material. 

This material worked well for simple meshes, but it became distorted for more complex meshes; therefore, I decided to use a YouTube tutorial by Matt Aspland to create the post-process material shown below. 

To make the new material visible, I first created a material instance of my material. I then added a post-process volume to my level, and in the details panel, under 'Post Process Materials', I added my material instance to the array. In the details panel, I then set 'Infinite Extent' to 'true'. 

To make the outline appear and disappear, I added my new material to the 'Set Overlay Material' node in the script I created earlier; however, this didn't work. After some research, I then realised I had to use a 'Set Render Custom Depth' node instead, and created the script below.

This script worked, but the outline was jittery and pixelated. To fix this, within the material, I changed the 'Blendable Location' to 'Scene Color Before DOF', and this made the line much smoother and clearer. 

Creating Door SFX

To create sound effects for the door opening and closing, I got a sound effect from Artlist and then used Audacity to cut and reverse clips to create my sound effects.

Creating a 'Take' UI Prompt

I wanted the player to be able to distinguish between interactable objects, such as doors and drawers, and objects that can be taken, such as loot and keys; therefore, I decided to add a 'Take' UI prompt alongside the 'Interact' UI prompt. I did this by duplicating the 'Interact' UI prompt code I created earlier and converting the two codes into functions. There probably was a more efficient way of doing this; however, it works, and I can modify it later if I encounter any issues with performance. 

Creating the Saloon Environment 

With my basic interaction blueprints created, I started creating the saloon environment using imported assets. I also added collisions to any assets without collisions to stop the player from walking through meshes, and created lantern blueprints to light the scene.