Spriter Pro offers the ability to add and several gameplay related types of data to your animations, with the
ability to change their values or settings at any time throughout the animation. These values, if numerical
can even tween smoothly from one keyframe to the next. If this sounds confusing so far, don’t worry, We’ll
go over the diferent data types and an example use one by one.
Adding Variables to an Animation
VARIABLES: Variables can be alpha-numeric (test), floats (numbers with decimal points), or intigers
(whole numbers). You can give variables any name you’d like, and even give them a default value to
start off with. Variables are a way to have your Spriter antimations tell your game engine all kinds of
information that can change aspects of gameplay, visual que’s for the user etc.
TEXT VARIABLES: Some-times text is more useful or easy to understand than numbers, and can either
communitcate a string to your game engine, or directly to the player.
EXAMPLE: Imagine you were making a game in which there were animated devices on screen that
would display specific letters or words, and cycle through, changing the word or letter they display over
time, on a loop. The player can click on the device while its displaying that specific letter or word in
order to input that specific letter or word to the game, perhaps to solve a puzzle or answer a question.
Of course you could just check the specific times alonfg the timeline in Spriter where each letter or word
is displayed and hard-code those time intervals into your game engine to represent each character...but
not only is this tedious and unintuitive, it would mean if you changed the timing of your animation
you’d need to check and replace all your hardcoded time numbers in the game engine which represent
each letter or word. Luckily, With Spriter pro you can work in a much more intuitive and flaexible
manner. Here’s how.
1) Expand your timeline pannel upward to reveal the timelines for each specific object. If you scroll to
the very bottom of all timelines you’ll see a timeline titled “meta data” Double click in the meta data
timeline exactly where the first letter or word is visible and should now be clickable to the player. This
will bring up a dialogue which you will use to create and edit your “current word” variable. Type in the
name you’d like for your variable in the find/create variable box at the top-left of the dialogue, then click
the “create variable” box.
2) This will bring up a second dialogue box which will allow you to set the type (we want text), and the
default value. If the animation starts on a specific word or letter you can set that as the default if you’d
like. In this example we’ll assume the animated device is displaying the letter “A” by default. Once
you’ve entered your starting word or letter, (if there is no starting word or letter, just leave the default
blank.) click “create variable”.
3) You’ll now see your variable in the variable list in the “Edit MetaData” dialogue box. Click on the
“active in key” checkboc and this will create a keyframe in the metadata timeline for this new variable.
Now you can doubleclick on the “current value” box and type in the word or letter that the device
animation is currently displaying. Once you’ve finished typing the letter or word, press enter and then
close the dialogue box via the red X close icon at the top right of the window. Don’t worry, your changes
will be automatically saved.
4) Now you should double click later on in the timeline, when the animation is either showing no letter
or word, or has changed to a new letter or word. This will bring the “Edit MetaData” dialogue back up.
Now reselct the variable you’ve already made by left clicking on it’s name, and then check the “active in
key” checkbox again. Now you can double click in the “current value” box again and enther the new
text value for the new letter or word that’s being displayed by the animation.
5) Once you’ve repeated step 4 for the entire animation so that all visible letters have a corresponding
text value set in the metadata for that portion of the timeline, then save your Spriter project.
In the game engine itself, once this Spriter file is being read and displayed, the logic of the game engine
would be somehting like:
Is the player clicking on the Spriter object displaying the device animation?
If yes, then set the text value of the letter or word to the current value of the “current vord”
variable from the metadata.
Then you’d have the game react accordingly depending on whether or not the word or letter the playe
rclicked on was the apropriate answer.
INTIGER AND FLOAT VARIABLES work exactly the same, except they are useful when you need to
communicate changing numerical data to your game engine, depending on the current time of the
currently playing animation. One cool bonus to numerical variables is that they automatically tween
between each of their keyframes in the metadata timeline if the numerical value is different on each of
the key frames.
PER OBJECT METADATA: In the previous example we created a variable in the metadata for the
entire animation. This is useful if the data you wish to create is relative to the timing of the entire
animation, but there’s a better option for when you want to create and communicate value which should
related directly to specific objects within the animation.
We’ll use collision rectangles as an example:
Assigning Numeric Data to a collision rectangle: As you might already know, you can place as many
distinct collision rectangles as you’d like at any given point along the time line of an animation. Their
size, shape, and angle can tween between their key frames. Each Collision rectangle can have a diferent
name. This allone offers some pretty awesome control of game play related data right within Spriter, but
Spriter takes it much further than that....
1) If you click on the little “+”icon to the right of the name of any objects timeline in the time line
palette it will expand to reveal the metadata timeline for that specific object. This works exactly like the
metadata we’ve created the text variable for earlier, but now this creates variables specifically for that
particular object!
EXAMPLE: In this example we’ll be adding a variable to a collision rectangle to control the amount of
damage it would inflict when it collides with enemies within a game.
2) In our example we have a punching animation for a fighting game, with a collision rectange to
designate the part of the animation that should do damage to an anemy character to the game if the
rectangle overlaps the enemy. We’ve named this rectangle “AttackBox”. Just as in the previous example
for the text variable lets double click in the meta data timeline and add a variable, called “damage”, and
decide if its type os going to be float or intiger. For most game types intiger would be fine. Lets leave
its default value blank, and set its current value to 10. Dont forget to make sure its set to “active in key”.
3) Now we’ll do the same thing, when the punch is at its apex (when it would do the most damage on
impact) and well double click at that spot further along in the timeline so we can set the “current value”
to a higher number. So lets check the “active in key” box, then double click the “current value” box and
then set it to 20.
In your game’s engine, the logic would be something like this:
Uppon overlap of player Damage Collision box and an enemy.
AND the enemy is in a state where it can take damage.
THEN make the enemy play his taking damage animation.
AND temporarily set the enemy’s state so it can no longer take damage.
AND subtract the current value of the Variable :Damage” from the Collision Rectangle
called “Damage” from the hitpoints of that specific enemy.
As you can see, Spriter makes creating, editing and tweaking game play related data, and synchronizing
it perfectly with each animation very easy and intuitive. In this example, not only have we included the
hit strength of a punch right into its collision rectangle, but we even made the number tween and change
depending on how much damage that punch in motion would inflict if it collided with an enemy at that
specific milisecond!
Be sure to read the next section: “Adding “Tags” to an Animation”, because Tags are the other, super
powerful and flexible half of the example logic I provided above for the collision box delivering the
damage ot the enemy. Specifically the portion:“AND the enemy is in a state where it can take damage.”
Tags are Spriters easy and intuitive way to designate what “state” your entity or character is in at any
moment along the time line of each animation.