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

We're nearing the release stage for our game and we've gotten to the point where we are working on optimizing everything for mobile devices. We want to try to support as many devices as possible, so we considered the idea of using sprites to replace our 3D models to save on system resources.

Unreal has a built in way to make what they call "3D Imposter Sprites" (also known as billboard sprites or 3D sprites) that are 2D sprites that look like 3D models from every angle (or just from one axis if you really want to save on system resources) because their surfaces are always facing the camera. This sounds great in theory, but I had some trouble getting them working when I was following the Unreal documentation. Here is my modified (and, in my opinion, clarified) method for creating 3D imposter sprites for your game.

Tutorial completed using Unreal Engine 4.7 Preview 5
In short, what we will be doing in this tutorial is setting up your level to take a screenshot of your mesh from over a hundred angles, and then turning those screenshots into a sprite.

To begin, open up your game and create a new "empty" level. This level will serve as the tool you use to bake the textures that will make your sprite materials.

You can make a brand new project solely for making imposter sprites if you want, but if you already have your soon-to-be-sprite meshes in your project, then it will probably be easier to work within your existing project. If you work within a pre-existing project, you will delete this level after you're done making your sprites (unless you're really sentimental), so don't worry about this taking up unnecessary space in your game.

If you plan on using this technique for several projects, then definitely create a brand new project to serve as your imposter mesh maker because this is going to be a fairly time consuming setup.

Find the "View Options" button located at the bottom-right corner of your content browser and check the box labeled "Show Engine Content." This will populate a new "Engine" folder in your Content Browser.

Use the search bar to navigate to the "RenderToTexture" (all one word) folder and then open up the "blueprints" folder inside of this folder. Drag and drop a "RenderToTexture_LevelBP" into your viewport.

With the RenderToTexture_LevelBP still selected in the viewport, navigate to the "Details" panel on the right and set the X,Y, and Z values of both its location and rotation to 0,0,0.

In the "Modes" tab at the top-left of your editor, drag and drop a "Player Start" into your viewport. Also set the X,Y, and Z values of both the location and rotation to 0,0,0.

Open up your "World Settings" by pressing the "Settings" button on the top toolbar and then click on "World Settings" in the drop-down menu. The world settings should appear as a tab in the lower-right cell of your editor, in the same spot as your "Details" menu.

Change the Game Mode to "RenderToTexture_Game" using the Game Mode Override drop-down box. You can close the World Settings tab once you are finished.

Next open up your Editor Preferences by clicking Edit > Editor Preferences on the top toolbar.

Inside the editor preferences, select "Play" under the "Level Editor" heading. Find the "New Window Size" setting under the "Play in New Window" heading and change the Window Width and Window Height value to some power of 2 of your choosing (ex. 512 x 512, 1024 x 1024, 2048 x 2048, etc.).

The size you choose will only affect how big this window appears on your screen and not the resolution of your sprite texture (I'll get to setting your resolution in a second), so it's advisable to use, at maximum, 1024 x 1024 to keep the window from taking over all your screen space.

Close the Editor Preferences menu to save your changes.

Select the RenderToTexture_LevelBP you added to your level a few steps ago by clicking on it in your Scene Outliner.

1. In the Details panel, find the "Default" heading an use the drop-down box to set the Render Type to "Render 3D Imposter Sprites." 
2. I have no idea what the "Sheet Height" is, but the Unreal Documentation sets it to -250, so I followed suit. 
3. Make sure to set the alpha value (the "A" in RGBA) to 0. 

Next, move on to the Capture Settings heading and check the boxes for the types of UV maps you plan to generate from your mesh. The Unreal Documentation suggests that, for most cases, "Base Color" and "Normal" are all you need. If you will need to render out opacity masks, use check the box next to "Decal Mask."

The resolution multiplier will multiply the number you choose by the value you set earlier for your "Play in New Window." So if you set your window to be 512 x 512 and your Resolution multiplier is set to 4, your resulting sprite image will have a 2048 resolution.

In the screenshot below, I only have it set to 2048 (512 x 4), but if your sprite looks very low res in your screenshots that we will take later in this tutorial, ramp up the multiplier value to 8 (so 4096) or 16 (8092) and then use Photoshop to scale down the size to 2048 (or smaller). Fair warning, 8192 crashed the editor for me every time I tried taking a screenshot, but you may have better luck.

Next we will set the correct values for the Render 3D Imposter Sprites heading. Set the mesh you plan to turn into a sprite for the "Imposter Static Mesh." I left the rest of the settings at their defaults, but if you want a detailed explanation of what each of the settings mean, consult the Unreal Documentation.

Next, open up the material for your soon-to-be-imposter mesh. Select the material node and on the Details panel on the left, uncheck the box for "Tangent Space Normals." Right-Click on your graph and use the pop-up menu to search for a "TangentBasis" node and add it to your graph. By default, it will be set to "Tangent to World." Click on your node and use the Details panel to change the Destination to "Local."

Hook your normal texture into the input of the TangentBasis node, and connect the output of the TangentBasis node to the material's "Normal" input.

If you do not have a normal texture for your material, right click on the graph and use the search bar to add in a "Constant3Vector" node and in the Details panel of that node, set the "B" value to 1. Plug this node into the TangentBasis node in place of a normal map. Save your material and close the Material Editor.

In the Modes panel on the top-left of your editor, make sure that the "Place" tab is selected and use the search bar to find a Post Process Volume. Drag the volume into your scene and expand it so that it encapsulates your meshes.

With your post-process volume still selected, go to the Details panel and check the box next to "AA Method" (Anti Aliasing) under the "Misc" heading. Use the drop-down box to change the AA Method from "Temporal AA" to "None."

Click the drop-down box in the upper-left corner of your viewport and select "High Resolution Screenshot" to bring up the screenshot menu.

In the High Resolution Screenshot menu, check the box next to "Include Buffer Visualization Targets." Now move this window out of the way, but do not close it or the screenshot won't take. The window is supposed to move behind your editor, but in my experience it does not.

On your top toolbar, press the drop-down arrow next to "Play" and select "New Editor Window." This will open up the new editor window that we'll use to take our screenshot.

Press the "~" key to open up the console prompt at the bottom of the editor window that just popped up and type in "ke * rendertextures" (without the quotes) and hit the Enter key. A dialogue may or may not pop up saying the screenshot was taken. If it does, you can click it to take you to the folder where your screenshots were saved. If not, the screenshots save to your project folder under Saved > Screenshots > Windows.

The resulting screenshots should look something like this

Those are the steps for creating the UV maps for making your sprite material. In Part 2 of this tutorial we will go through the steps you need to take to put these textures together to make the material and make your completed sprite.