Sprite Swapping with Sprite Frame Manager

Overview

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 correctly for Swapping Method 1 ( Pro, Easiest Way )

A new feature called Sprite Swap Auto Fit now enables you to easily fit your Sprite Swapped images of different sizes onto mesh regions. It accomplishes this by automatically sizing sprite swaps on mesh regions with Simple Transform Motors installed on them.

Video Tutorial

A video tutorial of this functionality is here

Running Sprite Swap Auto Fit

Important! When doing Sprite Swapping, you should always sprite swap onto a Rectangular Region Mesh Block. This will ensure that most images will be able to fit the swapped mesh.

1. Install a Mesh Simple Transform Motor onto your mesh region
2. Perform Sprite Swapping using the Sprite Frame Manager as per normal
3. Now go to the first frame of your Sprite Swapping animation, and adjust the scaling factors ( width and height ) of your sprite swap to make it fit the dimensions of your intended image.
4. Once you are happy with the size of the Sprite Swap, click on Edit Motor -> Auto Fit Sprite Swaps:

6. The Sprite Swap Auto Fit window appears:

• Start: First frame to run Auto Sizing on
• End: Last frame to run Auto Sizing on
• Relative Sizing: If unchecked, sprite swaps will be sized according to image dimensions. If checked, the Axis comes into play. Sprite swaps will be sized relative to the current frame's sprite swap size. This is useful if you want to keep width or heights consistent during the auto size process.
• Axis: Which dimension to preserve when doing Relative Sizing

Additional Tips for Sprite Swap Auto Fit

• You should try setting the Origin values of the Simple Transform Motor if you want the sprite swap sizing to be relative to a certain location from the image
• Make sure the first frame of your sprite swapping is adjusted correctly for size; the Auto Size algorithm uses that for proper sprite sizing
• When you perform new Sprite Swaps onto the current region, you will need to run Sprite Swap Auto Fit again over the new time/frame range
• Reduce/remesh the resolution of your rectangular swapped mesh block down to a reasonable value to improve performance and reduce Game Engine Export asset sizes

Sizing Images correctly for Swapping Method 1 ( Non Pro, 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 ( Non Pro, 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.