Sprite Animation
Learn how to create Sprite Animation with Texture Packer
Create an Animation Folder
Before you can create an Animation and load it into the Engine, you need to organize all the sprites of your Animation inside one folder, that we will call the Animation Folder.
For the Engine, an Animation is made of several little animations called Sequences. For example, if you have a character that can walk, run, jump and just stand doing nothing, we say that your character has 4 animation sequences : a walk sequence, a run sequence, a jump sequence, and an idle sequence. Finally, we say that each Sequence is made of several Frames. The name of the Frames are important, you can choose the name you want but you have to add the numbering at the end.
The image below resume everything.
An Animation Folder is a folder that contains all your sprites (also call Frames here) organized like in the graph above. The Animation Folder contains one sub-folder for each Sequence, and each sub-folder contains the frames for the corresponding Sequence.
If your Animation contains only one (1) Sequence, you still have to build an Animation Folder
Here is the Animation folder of the player character used in the Adventure Scene Example.
Create Animations With Texture Packer
The goal here, is to generate two files. An Image file (PNG) containing your Animation and a JSON file describing how to extract it. The two files need to have the same name, Example : my_animation.png and my_animation.json. Once you have the two files you can copy them inside your project resource/animation folder.
There are mainly three steps to create a Sprite Animation with Texture Packer :
- Step 1 – Import your Animation Folder : Click on the button Add Smart Folder and select your Animation Folder
- Step 2 – Configure the output
- The Framework has to be set at JSON (Array)
- The Data file is our JSON file
- The Texture file is our Animation
- Step 3 – Generate the Sprite Sheet : Click on the button Publish Sprite Sheet and Texture Packer will generate the JSON and the Image files
- Optional Step : You can preview an Animation Sequence, first you select the animation on the left by clicking on the right sub-folder, then you on the button Preview Anims
Split GIF Images
When searching for Sprite Animations on the internet you may come across GIF Images. If it is the case, you can convert your GIF into a Sequence of Frames. You have two methods to do that :
- Method 1 : Use Shoe Box. Open Shoe Box and select the Animation tab. Then simply drag and drop your GIF on the button Ani Frames. A new window will open up showing the different frames, you just have to save them.
- Method 2 : Use an online tool. On the Download Page, you have a link to a tool called Easy GIF, you can use it to split your GIF into several Frames.
