Sprite Swapping with Sprite Frame Manager


The Sprite Frame Manager in Creature allows you to swap in custom hand drawn sprite frames onto the region meshes of the character. This is very useful for animating a sequence of images you have prepared yourself like a fire animation or a person's facial expression.

Best of all, all sprite frames swapped onto your mesh regions behave and respond to Creature's underlying bone and mesh motors. This means some rather fancy and sophisticated effects can be achieved. For example, you can very easily do a flickering flame that wavers in the wind by importing frame by frame drawings of an animated flame and swapping those images onto a bone chain with rotate cycle and physics bone motors applied to them.

Step 1: Enabling a mesh region for Sprite Swapping


First switch over to Region mode when animating. Then, click on a region you want to swap the sprites onto:


Make sure the Enable Image Swap box is checked to enable sprite/image swapping.

Step 2: Starting the Sprite Frame Manager

Click on Image Swap. A menu will pop up. Select Sprite Frame Manager to invoke the Sprite Frame Manager:


Step 3: Using the Sprite Frame Manager

A new panel will show up. This is the Sprite Frame Manager:


Functions available:

  • Import - Import an image or a series of images into your scene. These image sprites will be added into your current Sprite Frame Manager collection and show up on the panel.

  • Remove - Remove selected sprite frames from your current collection.

  • Set - Applies the selected Sprite Frames to be swapped onto your mesh region.

  • Frame Delta - How many frames to show a single sprite frame before it gets swapped to the next sprite frame.

  • Repeat Num - How many times the sprite frame swapping animation should be propagated over your entire animation timeline

The typical way you would use the Sprite Frame Manager is to first import a series of images into your scene. Next, you would multi select (CMD+CLICK on Mac, CTRL+CLICK on Windows) images for your animation swapping:


Notice there are numbers that appear below the selected sprite. This indicates the order in which the sprites get swapped onto the mesh region.

After that, you set the appropriate Frame Delta values to determine the speed of the sprite swapping. You also set the Repeat Num value to determine how many times you want the sprite swapping animation to be propagated across the animation timeline.

Once you are done, click Set to apply the Sprite Frame Swapping animation onto your region mesh.

Sizing Images correclty for Swapping Method 1 ( Easy way )

This tutorial shows you how to prepare your rig and mesh for Sprite Swapping as well as use the Simple Transform Mesh Motor to scale and translate your mesh live in animation mode.


Resolving Incorrect Image Size Swapping Issues with Sprite Sizer Tool, Method 2 ( More difficult )

Because of the inherent nature of Creature's Mesh deformation framework, swapping raw images onto region meshes in Creature might result in incorrect sizes/distortion. This is because sprite swapping in Creature involves a complicated process of mapping a rectangular image onto a non-regular mesh region. This is a non-trivial image mapping transform.

This can be fixed with the new Sprite Sizer script provided on the CreatureTools Github Page: https://github.com/kestrelm/CreatureTools

The Sprite Sizer Tool essentially reads in images from a provided input folder, resizes those images to the correct aspect ratio and then outputs them back out into a provided destination folder.

Installing the Sprite Sizer Tool

Head over to the Github Creature Tools Page and grab the file: spriteSwapPrepare.py

Python - You need this installed on your system. Here is a guide on how to install python on Windows. By default, python is already installed on Mac OSX machines. Once that is installed, setup the following:

  • Pillow Python package. Instructions to install here

  • EasyGui Python package. Instructions to install here

Python Package installation Tip: In general if you have the PIP setup for python, installing the above python packages is very easy.

For example, to install EasyGui, you would simply type:

pip install easygui

at the command prompt/terminal.

Running the Sprite Sizer Tool

Please watch the video here on how to use this tool to size your swapped Sprite Images correctly:


Tool Options

  • Source & Destination Directories: The source and destination folder of the images to read and write to

  • Aspect Ratio: This the value you retrieved from Creature in the Tools -> Determine Sprite Swap Dimensions menu. You have to select the mesh region in Animate mode in order to run this tool.

  • Buffer Ratio: This should always be a value > 1.0. It gives some padding your images and allows them to be properly swapped. If there is no padding in your images, swapped images might draw into overlapping images.

  • Offset X & Offset Y: You should set these values to 0 in general. This allows you to offset the images in X and Y directions. Be careful however not to increase the values by too much as they will result in the images overlapping/cropping to their neighbours when added into the swap texture atlas.