2D Animations with Spriter Pro

Atomic integrates with Spriter Pro and can use its project files for you to take advantage of in your projects.
In this overview, we'll be looking at how to import projects from Spriter Pro and using them in Atomic. The result of these instructions will be a beating image (in this case, the MonoDevelop logo), and it'll look like this:

The animation at runtime

1) Creating a project in Spriter Pro

First, we'll create a new project inside of Spriter.

Spriter will ask you to choose the root folder for your project. To make life easier for us, we'll choose the Sprites folder inside of our Atomic project folder.

Spriter will now prepare your project. It should look something like this:

Spriter will display all the images files in this location (the Sprites folder) to the right.

2) Use Spriter's tools to create animation(s)

This overview won't go into detail on how to create animations with Spriter, so let's assume that you have created one or more animations at this point, using Spriter's tools. One thing worth mentioning, however, is that you should remember to name your animation(s):

In this case, the animation name is Default.

3) Importing the animation into Atomic

**Create a new empty node**
Select your scene inside of Atomic, and in the Hierarchy section, use `Create` > `Node` to make a new [node](node).

**Create an `AnimatedSprite2D` component**
In the inspector, click on `Create Component` and navigate to `2D` > `AnimatedSprite2D`.

**Modify the component to your needs**
There are three main fields you need to take care of:

*Entity*: Whatever you have set the name of this entity inside of Spriter.

*Animation Set*: When clicking on the three dots, Atomic will present you with all files inside your project with the Spriter Pro project extension *(.scml)*. Choose the desired project file.

*Animation*: Whatever animation you want to be played. In this case, the animation I want to play is named `Default`.

## Conclusion

You should be able to see a thumbnail from the animation inside Atomic's 3D viewport. When running the application, the [result](https://github.com/AtomicGameEngine/AtomicGameEngine/wiki/2D-Animations-with-Spriter-Pro#2d-animations-with-spriter-pro) should be displayed.