Unreal Engine 4 Tutorial: Painting With Render Targets

Creating the Brush Material

Navigate to the Materials folder. Create a material named M_Brush and then open it. First, set the Blend Mode to Translucent. This will allow you to use textures with transparency.

Just like the canvas material, you will also set the texture for the brush in Blueprints. Create a TextureSampleParameter2D and name it BrushTexture. Connect it like so:

Click Apply and then close M_Brush.

The next thing to do is to create a dynamic instance of the brush material so you can change the brush texture. Open BP_Canvas and then add the highlighted nodes.

Next, go to the Create Dynamic Material Instance node and set Parent to M_Brush.

With the brush material complete, you now need a function to draw the brush onto the render target.

Drawing the Brush to the Render Target

Create a new function and name it DrawBrush. First, you will need parameters for which texture to use, brush size and draw location. Create the following inputs:

• BrushTexture: Set type to Texture 2D
• BrushSize: Set type to float
• DrawLocation: Set type to Vector 2D

Before you draw the brush, you need to set its texture. To do this, create the setup below. Make sure to set Parameter Name to BrushTexture.

Now you need to draw to the render target. To do this, create the highlighted nodes:

Begin Draw Canvas to Render Target will let the engine know you want to start drawing to the specified render target. Draw Material will then allow you to draw a material at the specified location, size and rotation.

Calculating the draw location is a two-step process. First, you need to scale DrawLocation to fit into the render target’s resolution. To do this, multiply DrawLocation with Size.

By default, the engine will draw materials using the top-left as the origin. This will lead to the brush texture not being centered on where you want to draw. To fix this, you need to divide BrushSize by 2 and then subtract the result from the previous step.

Afterwards, connect everything like so:

Finally, you need to tell the engine you want to stop drawing to the render target. Add an End Draw Canvas to Render Target node and connect it like so:

Now whenever DrawBrush executes, it will first set the texture for BrushMaterial to the supplied texture. Afterwards, it will draw BrushMaterial to RenderTarget using the supplied position and size.

That’s it for the drawing function. Click Compile and then close BP_Canvas. The next step is to perform a line trace from the camera and then paint the canvas if there was a hit.

Line Tracing From the Camera

Before you paint on the canvas, you will need to specify the brush texture and size. Go to the Blueprints folder and open BP_Player. Afterwards, set the BrushTexture variable to T_Brush_01 and BrushSize to 500. This will set the brush to a monkey image with a size of 500×500 pixels.

Next, you need to do the line trace. Locate InputAxis Paint and create the following setup:

This will perform a line trace going forward from the camera as long as the player is holding down the key binding for Paint (in this case, left-click).

Now you need to check if the line trace hit the canvas. Add the highlighted nodes:

Now if the line trace hits the canvas, the DrawBrush function will execute using the supplied brush variables and UV location.

Before the Find Collision UV node will work, you will need to change two settings. First, go to the LineTraceByChannel node and enable Trace Complex.

Second, go to Edit\Project Settings and then Engine\Physics. Enable Support UV From Hit Results and then restart your project.

Once you have restarted, press Play and left-click to paint onto the canvas.

You can even create multiple canvases and paint on each one separately. This is possible because each canvas dynamically creates its own render target.

In the next section, you will implement functionality so the player can change the brush size.

Changing Brush Size

Open BP_Player and locate the InputAxis ChangeBrushSize node. This axis mapping is set to use the mouse wheel. To change brush size, all you need to do is change the value of BrushSize depending on the Axis Value. To do this, create the following setup:

This will add or subtract from BrushSize every time the player uses the mouse wheel. The first multiply will determine how fast to add or subtract. For safe measure, a Clamp (float) is added to ensure the brush size does not go below 0 or above 1,000.

Click Compile and then go back to the main editor. Use the mouse wheel to change the brush size while you paint.

In the final section, you will create functionality to let the player change the brush texture.

Changing the Brush Texture

First, you will need an array to hold textures the player can use. Open BP_Player and then create an array variable. Set the type to Texture 2D and name it Textures.

Afterwards, create three elements in Textures. Set each of them to:

• T_Brush_01
• T_Brush_02
• T_Brush_03

These are the textures the player will be able to paint. To add more textures, simply add them to this array.

Next, you need a variable to hold the current index in the array. Create an integer variable and name it CurrentTextureIndex.

Next, you need a way to cycle through the textures. For this tutorial, I have set up an action mapping called NextTexture set to right-click. Whenever the player presses this button, it should change to the next texture. To do this, locate the InputAction NextTexture node and create the following setup:

This will increment CurrentTextureIndex every time the player presses right-click. If the index reaches the end of the array, it will reset back to 0. Finally, BrushTexture is set to the appropriate texture.

Click Compile and then close BP_Player. Press Play and press right-click to cycle between the textures.

Where to Go From Here?

You can download the completed project using the link at the top or bottom of this tutorial.

Render targets are extremely powerful and what you’ve learnt in this tutorial is only scratching the surface. If you’d like to learn more about what render targets can do, check out Content-Driven Multipass Rendering in UE4. In the video, you will see examples of flow map painting, volume painting, fluid simulation and more.

Also check out the live training for Blueprint Drawing to Render Targets to learn how to create a height map painter using render targets.

If there are any effects you’d like to me cover, let me know in the comments below!