How to create sprite sheets for UnrealEngine Paper2D

How to create sprite sheets for UnrealEngine Paper2D
Last update: More than 3 months ago

Creating sprite sheets for the Unreal engine

With TexturePacker you can easily create Paper 2D sprite sheets. Paper2D is Unreal engine's 2D system for building sprite-based games.

Download TexturePacker, it is available for MacOS, Windows and Linux. You can test it within a 7 days trial period before purchasing a license:

Start TexturePacker and drop the sprites that should be packed in a sprite sheet on TexturePacker's main window. You can also drop folders, TexturePacker will automatically scan it for image files and add them to the sheet.

UnrealEngine Paper2D: Add sprites for packing UnrealEngine Paper2D: Sprites added for packing

Click on the Framework button at the top of the left side bar, select "UnrealEngine - Paper2d" as data format. The sprite sheet data contains for each sprite its coordinates on the sheet, its size and its pivot point. It is used by Paper2D to extract the sprites from the sheet automatically.

Select the UnrealEngine Paper2d Project

Use the "Data file" field (below the framework button) to select the location and file name of the data file. The file name extension "paper2dsprites" is added automatically. The "Texture file" name can be left empty, TexturePacker will save the PNG containing the sprite sheet next to the data file.

Press the "Publish sprite sheet" button in the tool bar. This will save the sprite sheet image, and a ".paper2dsprites" file containing the sprite coordinates.

Import sprite sheets in Paper2D

Now switch to your Unreal Editor project and import both files with the Content Browser. Paper2D automatically generates a Texture asset for the sprite sheet in the "Textures" folder, and it creates Sprite assets in the "Frames" folder for all sprites of the sheet.

TexturePacker sprite sheet imported in Unreal Paper2D

As you can see the directory names, and the full sprite file name is part of the sprite name, the characters / \ . are replaced by an underscore. To get rid of the "_png" suffix you can enable the "Trim sprite names" option in the TexturePacker settings and re-publish the sheet.

The way how a sprite sheet that you have updated with TexturePacker is re-imported in Unreal editor depends on the location where TexturePacker saves the texture and the .paper2dsprites file. You can place these files either inside the Content folder of your Unreal project or outside:

  • If they are placed inside, the Unreal editor is able to detect file changes and asks if it should reload the assets.
Sprite sheet changed
  • If you place them outside, you have to reload them manually ("Reimport" in the context menu of the sprite sheet).
Reimport sprite sheet

Animations

Sprite animations are called Flipbooks in Paper 2D. You can select a bunch of sprites and use the "Create Flipbook" in the context menu to create a flipbook asset with the selected sprites. Or you can use "Create Flipbooks" on a Sprite Sheet asset to create flipbooks for all sprites of the sheet. Paper2D will automatically group sprites which only differ in a number.

Automatically create flipbooks for sprite sheet

Drag a Flipbook into the viewport to add the animation to your scene, or double click it to open the Flipbook editor.

Pivot points

For proper alignment of your sprites you can edit the pivot points of the sprites in TexturePacker. Click on the "Edit Pivot Points" button in the tool bar to open the editor:

TexturePacker's pivot point editor

Select one or multiple sprites on the left side. The pivot point coordinates you are setting here will be written to the data file and imported by Paper2D.

You can use TexturePacker's Animation Preview to watch the animation while editing the pivot points.