How to Create 3D Imposter Sprites in Unreal Engine 4 - Part 2

We covered the steps for capturing a high resolution screenshot of your mesh in Part 1 of this tutorial, so now it's time to put those together and make them into an imposter sprite.

Tutorial completed using Unreal Engine 4.7 Preview 5
If you created very high resolution textures (like 8192), begin by downsampling your image to a more manageable size (like 2048 or smaller). It may also be a good idea to go ahead and run a couple "Blur More" passes in Photoshop to soften the edges of the your texture.

You will have to use some sort of program to convert the files from bitmap to png. Once you are satisfied with your images, import the screenshot textures into your project.

Create a new material for your imposter mesh.

Open up the new material you just created and move the window off to the side. In the Content Browser, type "materialfunctions" into the search bar and find the "ImposterUVs" material function. Drag and drop this function into your material graph.

Add the screenshot textures you imported earlier to your material graph. Right-click on your graph and use the search function to add a "Constant" node. Click on the node and press Ctrl+W to duplicate the node.

Click on one of the nodes and set the value to be the same as the number of frames you set when you were setting up the screenshot. If you were following the values used in the tutorial, set this to "12." Drag a wire from the output of this constant node and connect one wire to the "FramesX" input of the ImposterUV node and Connect another wire to the "FramesY" input.

For the remaining Constant node, set the value to 64 and connect the outputs to the SpriteWidth and SpriteHeight.

Drag a wire from the "UVs" output of the ImposterUVs node and connect those to the UV input of both your base color, opacity mask, and normal textures. Then plug the outputs of your base color and opacity mask textures into your main material input.

Right-click on your graph and use the search to create an ActorPositionWS node (appears on the screenshot as "Actor Position"). Connect the output of this node to the "Position (V3)" input of the ImposterUVs node.

Create a ConstantBiasScale node. In the details of the node, set the Bias value to "-0.5" set the Scale value to "2.0." Connect the output of your Normal texture to the input of the ConstantBiasScale node. Connect the output of the ConstantBiasScale node to the "Normals" input of the ImposterUVs node.

Finally, connect the "TransformedNormals" output of the ImposterUVs node to the "Normal" input of your material node and connect the "WorldPositionOffset" output to the material node with the same name. Save your material.

Right-Click on an empty space in your content browser and use the pop-up menu to create a sprite. The location may vary depending on which version of the engine you are using, but in 4.7 it is found under Miscellaneous>Sprite

Open up your newly created sprite. In the details panel in your sprite, set the Source Texture as the Base Texture you used in your material and set the material we just finished making as the Source Material. Save your sprite and you are done.

I've personally had issues with my sprite appearing to be very blocky using this method. The best fix I've found so far is to run the "Blur More" filter twice in Photoshop, but the end result is still not perfect. I'll update the tutorial with any fixes that I find in the future.