Paper 2D Sprites

Paper 2D's primary asset type is called a Sprite. Sprites are static 2-dimensional textures that you can use to represent characters or objects, when developing projects in Unreal Engine.

Sprites often come in the form of a Sprite Sheet, or a single image file that contains many variations of the sprite, that you can use to animate characters and objects.

You can download any of the example sprites found on this document by Right-clicking the images and selecting save as from the context menu. You can then use these image files in your own projects or as example content.

See the Example Content section for a single image file containing all of the example sprites used in this document.

For more information on animating sprites, see the Flipbook documentation.

Tiles

Tiles are specific kinds of sprites that you can use to build 2D levels and environments.

For more information on Tile Sets and Tile Maps, see the Tile documentation.

Importing Sprites

To get started using sprites in your project, you must first Import the assets into Unreal Engine. To import a sprite or a sprite sheet, click Import in the Content Browser and navigate in the file browser to your sprite's image file. This file will be imported into Unreal Engine as a Texture Asset.

Paper 2D Texture Settings

By default, all 2D images, imported into Unreal Engine will be imported as Texture Assets. The default image processing, designed to process textures for 3d models and objects, smooths and softens low-resolution files like 2D characters and objects.

In order to preserve the low resolution look of Sprites, you can apply a Paper 2D Texture Setting to the asset.

You can apply the Paper 2D Texture Settings by Right-clicking the Texture asset in the Content Browser and navigating in the context menu to Sprite Actions > Apply Paper 2D Import Settings.

The Paper 2D Texture Setting, removes Mipmaps, sets the Filter to Nearest, and uses the Editor Icon as the Compression Setting. You can modify the default Paper 2D Texture Settings in the Paper 2D - Import section of the Project Settings.

You can also apply other Materials to Sprites to alter their appearance, color and lighting behaviors.

You can now convert the texture asset into an individual sprite by right-clicking the asset and selecting Sprite Actions > Create Sprite. A new Sprite asset will be created using the naming convention: NameOfTextureAsset_Sprite.

Extracting Sprites

If you are importing a Sprite Sheet containing many animation frames of a single character or object, you can extract each individual frame as its own sprite by right-clicking the texture asset and selecting Sprite Actions > Extract Sprites to open the Extract Sprites panel.

The naming convention for sprites is important for Flipbook implementation, so it's best to decide upon a name before extracting sprites from a Sprite Sheet to not encounter errors later. You can name the set of extracted sprites by using the Naming Template property in the Extract Sprites window.

With the Sprite Extract Mode setting, you can choose how to separate the sprites within the sprite sheet. Using Auto, Unreal Engine will outline groups of pixels that are surrounded by a transparent background or alpha layer. In instances where this feature is not automatically detecting the proper grouping of sprites, your sprite sheet does not contain a transparent background or alpha spacing in between sprints, or you want uniform sprite sizes, you can set the Sprite Extract Mode to Grid.

When using Grid as the Sprite Extract Mode it is important to use a Sprite Sheet that has a uniform sizing and distribution of the sprites for the extraction process.

It is also helpful to know the size of the individual sprites in X and Y pixel-length to, and if there is a uniform spacing between sprites.

With the Naming Template property you can define the naming convention with which your sprites will be named. The field outside the curly brackets ({}) will be consistent for each generated sprite. Within the curly brackets a number will be generated starting with the Naming Start Index property value, and will increase by 1 for each subsequent sprite. When extracting sprites, the first sprite will be recognized as the top left most box, then proceeding left to right, and returning to the left for each new row.

This naming convention is important to consider, especially when creating a Flipbook using a set of sprites. When creating a flipbook from a selected group of sprites, Unreal Engine will automatically organize the sprites in alpha-numerical order. The order can be changed later, but is most conveniently set up during sprite extraction.

After making all adjustments to the sizing and properties of your sprites, select Extract to create unique sprite assets from each outlined box.

Extract Sprites Property Reference

Here you can reference the Extract Sprites properties and their descriptions.

Example Content

Here you can download and use the example sprites used in this document. To save the image file, right-click the image and select save as from the context menu. The image file will need to be converted to a .png file format, and you must add an alpha layer to remove the background. You can then import the image file, using the method detailed in the Import Sprites section.

If extracting sprites from the provided sprite sheet using the Grid Sprite Extract Mode, each sprite is 95 pixels by 95 Pixels that you can use as the Cell Width and Cell Height properties to extract uniformly sized sprites from the sprite sheet.

The sprite sheet does not contain spacing between sprites.

The sprite sheet cotains the following frames of animation in extraction order:

Animation	Frame Count
Idle	4
Run	10
Jump Start	5
Jump Loop	1
Jump Land	7