Unreal Engine 5 Documentation has been moved to the Epic Developer Community

Creating a Height Field Painter with Blueprints and Render Targets

How-To use Blueprints and Render Targets to create realtime Height Filed Painter.

Choose your operating system:

Windows

macOS

Linux

HFP_Header_Image.png

Having the ability to raise and lower various surfaces enables interesting and unique gameplay elements. In the following How To, we will go over how you can use Blueprints & Render Targets to create a Height Field Painter that raises the surface of an object when the player shoots at it. To accomplish this we will first create and setup a new Game Mode and HUD Blueprint that will allow the user to interact with the Height Field Painter. We will then create and setup the needed render targets and Materials. Finally we will create a Blueprint that will tie all of the individual pieces together, resulting in a Blueprint that can raise the surface of the object that it is applied to inside of Unreal Engine 4 (UE4).

1 - Project Setup

Before we get started, there are a couple assets that we'll need to create as part of our project setup.

Before we can start to create and setup the required Actors for the Height Field Painter, we will first need to create and setup a Gamemode Override . In the following section, we will take a look at how this can be accomplished in your project.

If you are working out of the Content Examples map, you can skip this step and use the MyGame game mode. This game mode can be found under Content > Blueprints > MyGame .

HFP_PS_00.png

Creating a New Game Mode & HUD

In order to see the crosshair that will let the user know where they are shooting, we will need to create and setup new Game Mode and HUD Blueprints. In the following section, we will take a look at how to setup all of this so that it will work with our Height Field Painter.

  1. Right-click in the Content Browser and from the menu in the Create Basic Asset section, click on the Blueprint Class option.

    HFP_BP_Setup_00.png

  2. From the Pick Parent Class Window, click on the Game Mode option, naming the new game mode, HighFieldPainterGameMode .

    HFP_PS_01.png

  3. Right-click in the Content Browser again to bring up the Create Basic Asset menu and then click on the Blueprint Class option.

    HFP_BP_Setup_09.png

  4. When the Pick Parent Class window is displayed, expand the All Classes option and input HUD into the search box. Look for the HUD option and when located, click on it and then press the Select button to create it.

    HFP_PS_02.png

  5. Name the newly created HUD Blueprint, HeightFieldPainterHUD , and then double-click on the HeightFieldPainterGameMode Blueprint to open it up.

    HFP_PS_04.png

  6. In the Details panel of the HeightFieldPainterGameMode under the Classes section, set the HUD Class to the HeightFieldPainterHUD Blueprint that was just created.

    HFP_PS_03.png

  7. Now, Compile and Save the HeightFieldPainterGameMode Blueprint and then open the HeightFieldPainterHUD Blueprint by double-clicking on it in the Content Browser.

    HFP_PS_05.png

  8. Inside of the HeightFieldPainterHUD Blueprint, go to the Event Graph and copy-paste the following Blueprint code into the graph.

    Copy Node Graph

    HFP_PS_06.png

    Do not forget to Compile and Save your Blueprint so that it can be used.

    This Blueprint code is telling the HUD to draw the specified Material so that it will be centered on the player's screen while the game is running. To see if everything has been setup correctly, press the Play button to run the game and you should now have a crosshair positioned in the center of the screen (as shown in the following image).

    HFP_PS_07.png

If you don't see a cross hair on the screen, check to make sure that the Material input on the Draw Material node has something inputted into the Material input.

HFP_PS_08.png

Now that the level and HUD have been created, in the next section we will take a look at what assets need to be created and how to set them up.

2 - Required Asset Creation & Setup

Before we can create the Height Field Painter Blueprint, we will need to create and setup the following asset types inside of the UE4 Content Browser. In the following sections, we will go over how each of the assets needs to be setup as well as any special properties that you will need to be aware of.

Please note that the following is not specific to any UE4 project type. The following can be accomplished in any project that uses UE4 version 4.13 or later.

  • Render Target

  • Material

  • Blueprint (Based off Actor)

Render Target Creation & Setup

  1. Right-click inside of the Content Browser and from the displayed menu, go to Create Advanced Asset > Materials & Textures and then select the Render Target option.

    HFP_RT_Creation_00.png

  2. Name the newly created Render Target, RT_Height_Filed_Painter , and then press the Save All button to save your work.

    HFP_RT_Creation_01.png

Material Creation & Setup

  1. Right-click inside of the Content Browser and from the Create Basic Asset list, select the Material option to create a new Material, naming it MAT_HeighfieldPainter .

    HFP_Material_Creation_00.png

  2. Select the MAT_HeightfieldPainter Material in the Content Browser and then right-click on it. From the displayed menu, under the Common section, select the Duplicate option to create a copy of the Material, naming it MAT_ForceSplat .

    HFP_Material_Creation_01.png

  3. Double-click on the MAT_HeighfieldPainter Material to open it up and then select the Main Material Node . In the Details panel under the Material section, setup the following parameters.

    • Shading Model: Unlit

    HFP_Material_Creation_04.png

  4. The MAT_HeighfieldPainter Material is going to use the World Position Offset input to increase the Z-height of the Static Mesh vertices it is applied to. You can copy it into your Material by hovering your mouse over the image below and then clicking on the Copy Expression Graph option, copying-and-pasting the provided Material code into MAT_HeighfieldPainter .

    Copy Expression Graph

    HFP_Material_Creation_05.png

    Do not forget to Apply and Save your Material so that it can be used.

  5. Open up the MAT_ForceSplat Material and then select the Main Material Node . In the Details panel under the Material section set up the following parameters.

    • Blend Mode: Additive

    • Shading Model: Unlit

    • Allow Negative Emissive Color: Checked

    HFP_Material_Creation_02.png

  6. Since the MAT_ForceSplat Material is going to act as our paint brush for raising the surface of our height field, it will need to have a few options that will allow you to control its size and intensity. You can copy the completed Material into your Material by hovering your mouse over the image below and then clicking on the Copy Expression Graph option, copying-and-pasting the provided Material code into MAT_ForceSplat.

    Copy Expression Graph

    HFP_Material_Creation_03.png

    Do not forget to Apply and Save your Material when done so that it can be used.

With the required assets now setup, in the next section, we will take a look at creating a Blueprint that will link all of the assets together to create the height map painter.

3 - Blueprint Setup

With the render targets and needed Materials setup and ready to use, it is now time to bring everything together using a Blueprint. In the following section, we will go over how to setup all of the various parts of the Height Field Painter Blueprint.

Blueprint Creation & Variable Setup

  1. Right-click in the Content Browser and from the menu in the Create Basic Asset section, click on the Blueprint Class option.

    HFP_BP_Setup_00.png

  2. From the Pick Parent Class window, select Actor and name it HeightFieldPainter .

    HFP_BP_Setup_01.png

  3. Double-click on the HeightFieldPainter Blueprint to open it up and then click on the Event Graph tab. When the Event Graph is open, add the following variables.

    HFP_BP_Setup_02.png

    Variable Name

    Variable Type

    Default Value

    HeightfieldRT

    Texture Render Target 2D

    N/A

    PainterMaterialInstance

    Material Instance Dynamic

    N/A

    MouseDown

    Bool

    N/A

    ForceSplatMID

    Material Instance Dynamic

    N/A

    InteractionDistance

    Float

    1000.0

    BrushSize

    Float

    0.04

    BrushStrength

    Float

    1.0

Components Setup

Inside of the Components tab, press the Add Component button and add a Static Mesh Component to the Blueprint. Once the Static Mesh Component has been added, select the Static Mesh Component and setup the following options.

HFP_BP_Setup_06.png

Section

Property

Required Asset

Value

Transform

Mobility

N/A

Movable

Static Mesh

Static Mesh

SM_Plane1000_512

N/A

Materials

Material

HeightfieldPainterMaterial

N/A

Collision

Generate Overlap Events

N/A

Checked

Collision

Collision Presets

N/A

OverlapOnlyPawn

Construction Script Setup

The Construction script is used to create and assign a 2D render target in addition to creating and assigning the required Dynamic Material Instances. If you arean't already there, click on the Construction Script tab and then copy the following code into your Blueprints Construction Script.

Copy Node Graph

HFP_BP_Setup_03.png

Trace from Camera Function Setup

There are two ways you can implement this function. The first method requires a bit of math and works primarily on planes or other flat surfaces. The second method uses the Find Collisoin UV node which requires more memory to use, but will work across any Static Mesh Component , regardless of shape (UV seams will still cause artifcats). You can choose your implementation method below.

Choose Implementation Method

Method 1

Method 2

The Trace from Camera function will be used to determine the location on the Static Mesh that should have its height increased. It determines this location by casting a ray from the center of the player's camera into the world. When that ray intersects with a Static Mesh, the location that it intersects will be the location that is raised. To set up the Trace from Camera function, you will need to do the following.

  1. Click the small (white) plus sign on the Functions tab to create a new function and name it TraceFromCamera .

    HFP_BP_Setup_04.png

  2. Open the TraceFromCamera function and copy the following Blueprint code into your Blueprint by hovering your mouse over the image below and then clicking on the Copy Expression Graph option, selecting the code, copying it, and then pasting it into the TraceFromCamera function.

    Copy Node Graph

    HFP_BP_Setup_05.png

    Do not forget to Compile and Save your Blueprint so that it can be used.

Event Graph Setup

Now that all of the need parts have been created and setup, it is now time to connect all of the various parts together in the Event Graph. You can copy the completed Blueprint code into your Blueprint by hovering your mouse over the image below and then clicking on the Copy Node Graph option, copying-and-pasting the provided Blueprint code into your Height Field Painter Blueprint.

Copy Node Graph

HFP_BP_Setup_07.png

When you copy-paste the Blueprint code, the Event Begin Play node will not be added to the graph. Make sure that you add the Event Begin Play node and connect it to the Enable Input input.

HFP_BP_Setup_08.png

Now that the required Blueprints have been setup, in the next section we will go over how to use the height map painter inside UE4.

You have to enable Support UV from Hit Result feature in the editor to use this method. See getting uv coordinates from trace for information on how to do this.

  1. Click the small (white) plus sign on the Functions tab to create a new function and name it TraceFromCamera .

    HFP_BP_Setup_04.png

  2. Open the TraceFromCamera function and copy the following Blueprint code into your Blueprint by hovering your mouse over the image below and then clicking on the Copy Expression Graph option, selecting the code, copying it, and then pasting it into the TraceFromCamera function.

    Copy Node Graph

    HFP_BP_Setup_01.png

    Do not forget to Compile and Save your Blueprint so that it can be used.

Event Graph Setup

Now that all of the need parts have been created and setup, it is now time to connect all of the various parts together in the Event Graph. You can copy the completed Blueprint code into your Blueprint by hovering your mouse over the image below and then clicking on the Copy Node Graph option, copying-and-pasting the provided Blueprint code into your Height Field Painter Blueprint.

Copy Node Graph

HFP_BP_Setup_02.png

When you copy-paste the Blueprint code, the Event Begin Play node will not be added to the graph. Make sure that you add the Event Begin Play node and connect it to the Enable Input input.

HFP_BP_Setup_08.png

Now that the required Blueprints have been setup, in the next section we will go over how to use the height map painter inside UE4.

4 - End Result

Now that all of the required parts for the Height Field Painter Blueprint have been setup, it is now time to see the Height Field Painter in action. In the following section, we will go over how to use the Height Field Painter in your UE4 project.

Using the Height Field Painter Blueprint

  1. Locate the Height Field Painter Blueprint in the Content Browser and then drag it into your level, positioning it to fit your level's needs.

    HFP_BP_Use_00.png

  2. Press the Play button on the Main Toolbar and then navigate your player so that they are in front (or very close) to the Height Field Painter Blueprint that was placed in the level.

    HFP_BP_Use_01.png

End Result

To raise the height of the surface position so that the crosshair is at a desired position, hold down the left mouse button to raise the height of the Static Mesh. If you continuously hold down the left mouse button while moving the mouse around, you will continue to raise the height of the Static Mesh. If everything has been setup correctly, you should have something similar to the following video.

While this is just one way you can manipulate Static Meshes vertices using Blueprints & Render Targets, the creative possibilities are almost endless. From creating impact effects that can deform both players and the environment, to allowing players to have a real effect on the worlds they play in, the Height Field Painter Blueprint can be adopted to fit many different gameplay roles and requirements.

Help shape the future of Unreal Engine documentation! Tell us how we're doing so we can serve you better.
Take our survey
Dismiss