Organizing your project folders and images before you begin. Before you start up Spriter itself, its important to understand, Spriter is not used to draw images from scratch, it's used to combine, move, rotate and stretch images you've already created in order to create fully assembled frames and animations.
Step 8) (Creating bones to more easily animate complex objects or characters) While you are not required to use bones to animate with Spriter, and in act, for many types of animations bones would just be an inconvenience, for the case of animating complex objects or characters the initial investment of literally a minute or two to “rig” the character with bones will end up making work much easier and more natural, and save you a lot of time, even resulting in a superior final animation. To create bones, simply hold the Alt key and left click and drag from the point you want the bone to begin to the point where you want the bone to end. The point where the bone begins (the thick end) acts as the pivot point of the bone. When you let go of the left mouse button that bone is done being created and is automatically selected...if you create a new bone while the previous bone is still selected, the new bone will automatically be a child of the selected bone. You can continue to hold Alt and create all of the bones you need for the full character...just be sure the bone you want to be the next bone's parent is selected while creating the new bone. At any time in this process you can let go of the Alt key and select, move, rotate and scale any of the bones to perfect their position relative to the sprites you will be assigning to them.
Step 7) (Aligning the assembled key-frame to the canvas crosshair) Now that your first key frame is properly assembled, you might want to make sure that the entire frame (all sprites collectively) is aligned to the “canvas crosshair” in a manner that will be most useful for game engines. The point where the vertical and horizontal lines bisect the canvas represent coordinate 0,0 for the frame. If you tell a game engine to draw your frame to the screen at a given coordinate, it will place the animation based on this 0,0 point as it's pivot point or “hotspot”. In the case of this example, for a platformer character, you'd likely want the 0,0 coordinate (canvas cross- hair) centered near the feat of the character. To move all sprites at once you can press Cntrl+A to instantly select all objects on the canvas or left click and drag a selection rectangle to select all of the objects. You can then use the arrow keys or click and drag on any of the selected objects to move everything at once to properly align the frame.
Step 6) (adjusting the z-order of sprites) As you assemble and tweak your initial key- frame you may need to adjust the z-order of your Sprites. (the order in which they are drawn on screen..in other words, which are in front and which are behind). This can be done by clicking and dragging on the sprites in the z-order palette on the upper-left of your screen or by selecting a sprite on the canvas and then holding Cntrl and pressing the up or down arrows. You can also hold Cntrl and press the left or right arrows to send the selected sprite to the absolute top or bottom of the z-order respectively.
Step 5) (Adding Sprites to the canvas and manipulating them) Now that your images are ready to use, you can simply start dragging them from the file palette onto the “canvas” in the center of your screen to begin assembling the first key frame. Once on the canvas, you can select any Sprite (the image's you've placed) by left clicking, and then use the transform controls which appear around the sprite to rotate it or stretch it as you need. You can also use the “object properties” dialogue on the lower left of your screen to keep track of or carefully edit any of the currently selected sprites attributes. This palette can also be used to adjust the currently selected sprites opacity.
Step 4) (Setting default pivot points for Sprites) On the upper right of your screen (above the animation palette) you should see the file palette. Use this palette to browse through the image folder's you'd created in step one to find the images you'll be using to assemble the initial key-frame. Before you begin using the images you might want to take your time to give each image a custom pivot point. (images default to a top-left pivot point, and its often more convenient and leads to better final results to set pivot-points based on actual aspects of the image in question...for example, the image of an upper arm would scale and rotate more naturally around a pivot point set in the center of the shoulder). To set a default pivot point for an image, double-click on that image in the file palette and a dialogue box will appear giving you the ability to set the pivot point. Once you've set the pivot point how you'd like, click OK.
Step 3) toward the lower right of your screen you should see the “animations palette” You'll see Spriter started your new project file with its first entity (character) and first animation for that character. You can double-click on the name of either to rename them to something more descriptive... for example, you could rename the entity to “hero”, and the animation to “idle”
Step 2) (Starting Spriter and creating your project file) Start Spriter and from the main menu choose: File/New Project or hold Cntrl+N. You will be prompted to choose the root folder for your project. Click OK and then use the file dialogue to direct Spriter to the main project folder you had created.. In the case o four example, this would be the folder called “Platformer”. Spriter's working interface will then appear and you'll be ready to begin creating your first key frame.
IMPORTANT! Once you begin your Spriter project, the actual Spriter file (.scml) should always be saved in the main project folder which you'd created. You can save backup files of the .scml anywhere you'd like, but if you then load them, they won't know where to find the required images because Spriter only looks for images from the same root as the .scml file itself.
Creating the initial key-frame.
Step 9) (Assigning Sprites as children of bones) Now that your bones are set up where you want for the whole character, properly aligned with the sprites, you just need assign (child) the appropriate sprites to each of them. To do this, simple select a bone by left clicking on it, and then hold the B key...you'll see all Sprites become more translucent. Now if you left click on any Sprite while still holding the B key, that Sprite will become a child of the selected bone. You will see that it is now assigned because the sprite is now more opaque. If you click that same sprite again while holding B it will disassociate that sprite from the selected bone. You can select as many sprites to each bone as you'd like. He sprite does not have to be touching the bone, or even be close in proximity to the bone. Once finished assigning all sprites to their respective bones I recommend you quickly play with putting the character in extreme poses with limbs overlapping the body and the other limbs so you can double- check that all Sprites are z-ordered properly. This way, you won't have to stop and manually fix the z-order of sprites across several key-frames once you're animating.
Step 10) (Animating with bones and sprites) If you've assigned sprites to bones you'll see that if you rotate, move or scale bones, the assigned sprites will be effected with them. If all sprites are assigned to bones you may not have a need to ever select or edit a sprite directly. If this is the case, you can lock and/or even hide all sprites so that you can not accidentally select or edit a sprite by clicking on the show or lock buttons along the top right of the canvas. You can do the same for bones if you have a need at any point to only edit sprites.To start animating, first edit your starting frame by selecting and moving, rotating, stretching or changing the alpha (translucency) of any of the sprites or bones. Then click on another point along the time line and then adjust the sprite or bones as necessary to create the next key frame. Editing any sprite or bone while on a new point in the time line will automatically create a key frame. You can also create a key frame at any time by clicking on the “key all” button near the bottom right of the canvas, or by clicking on the key selected button while one or more objects (sprites or bones) are selected. (See Key All vs Key Selected for more information)
Step 11) (Swapping a sprites Image at any time) You might have a need in some animations to actually swap out one image with another at some point. This can be done by simply scrolling to the point in the animation you'd like an image changed, selecting the sprite by left clicking on it in the canvas and then right-clicking any image in the file palette. When you play the animation or scroll through the time-line you'll see that the sprite now changes from its original images to the new one you'd selected at that exact moment in the animation.
Step 1) (Getting your images ready) Create a project folder which will be used for your Spriter project. Then add sub-folders in which you should organize the PNG images you'll be using to create your animations. For example: If you were creating animation sets for a platformer game, you might first create the project folder and name it “Platformer” and then inside that folder you would create other folder named ”hero”, “mushroom”, “turtle”, “effects”, “sub- boss” etc and within each of those folders you'd place the images you'll be using to create and animate those respective characters or objects.
IMPORTANT: When swapping, a new image will be placed in the exact location of the current image based on their respective pivot points, so it's very important to have the default pivot-point of the new image set appropriately. One way to ensure perfect continuity when swapping from one image to the next is to actually insure that each image to be swapped has the same exact pixel-dimensions as each other, and are arranged so that all of their default pivot points would have the same exact pixel coordinate. Look at all these head images as an example... all images are buffered with enough transparent pixels to ensure the actual head images are placed per image in perfect alignment with each other... so the exact same default pivot-point coordinates can be set for all...ensuring there will be no jarring “pop” in position as one image is switched to the next.
Step 12) (Editing the timing of key-frames or the entire animation) You'll likely find as your animation progresses that you'll need to tweak the relative distance between key- frames. To do so, you can simple click and drag on any key-frame in the time-line located at the bottom of your screen. You can also hold the Cntrl key in order to be able to select multiple key frames so you can move them simultaneously.
It will also often be necessary to expand or reduce the total length of the animation. To do so you can simply left click in the second number box of the “current time” section of the time line. This will allow you to not only type in a new total length for the animation, but will also present a check-box letting you either stretch the keys to maintain there relative positions to each other or not. You can also preview your animation playing back at different speeds simply by adjusting the playback speed slider at the left side of the time-line.
Step 13) (Advanced time-line editing) As your animation gets closer to being perfected, you might find the need to slightly offset the timing of one or more objects relative to the rest. Spriter actually keeps separate time-lines and key frame per object. To view and edit them you need to expand the time- line area upward by left clicking the top of the time-line window upward. Now you can left click and drag to change the time position of any objects key-frames. You can also delete them via the delete key after selecting them.
Step 14) (Duplicating entire key-frames) You can also copy and paste an entire full frame to any other place on the time-line by choosing the position the time-line to copy on the main time-line, then pressing Cntrl+Shift+C, then by going to the target location on the main time-line and pressing Cntrl+V. This even works if you are copying from a spot in the time-line that is not key-framed. This is often a fantastic way to start a new animation for a character...by finding an point in an animation you'd already created that comes somewhat close to the starting pose for the new animation. Just Cntrl+Shift+C to copy the initial pose from an already existing animation, and then create your new animation, make sure you are at time 0 (the very beginning) on the main time-line of the new animation, and then press Cntrl+V.
Step 15) (Adding additional sprites to a finished animation) What if you've already created an entire animation, with lots of key-frames, but then decide you should add something to the character...like sunglasses for example? Spriter makes this easy. If you've animated your character with bones then Spriter makes the solution simple. Simply go the the very first key-frame at time 0, add your sunglasses image to the frame and perfect its position, scale, rotation etc to fit perfectly on the characters face. Then assign that new sunglasses sprite to the head bone by selecting the head bone, holding B and then left- clicking on the sunglasses sprite. You can test that the sunglasses are now firmly attached to the characters face by rotating the head bone, and then pressing Cntrl+Z to undo the movement. Now that the sunglasses are perfectly places and a child of the head bone, just select them, press Cntrl+C, then in the menu, choose “edit/paste to all keys”, or by pressing Cntrl+Shift+V. After perhaps a few seconds of processing, you can scroll through your time-line or play your animation to see that the sunglasses are now properly positioned and attached to the head on all frames.
Getting Started

# Spriter Pro User’s Manual version 0.5

Quickstart
Sprites
Bones
Animating
Character Maps
Index