Revision Difference
creating_animated_sprites#548907
<cat>Particle.Intro</cat>
<title>Creating animated sprites</title>
<note>
This page assumes that you know how to create a particle effect using the sprite renderer. If you do not, you can follow this wiki page: <page>Creating your first particle effect</page>
</note>
# Preparing the animated sprite
Before we get started you need at least a couple of `.png` or `.tga` images for the animated sprite.
When you have your image files prepared, we need to create a `.mks` file.
The `.mks` file describes how our animation should display our images.
* Create an `.mks` file in the same place as your `.png` or `.tga` files.
* Populate it with the following snippet.
```
sequence 0
loop
frame a_circle_001.png 1
frame a_circle_002.png 1
frame a_circle_003.png 1
frame a_circle_002.png 1
```
* Replace the `a_circle_00X.png` values, with the name of your image files.
* Add or remove frames depending on how many images that are in your animation.
<note>If you want to learn more about `.mks` files you can read the [Valve documentation](https://developer.valvesoftware.com/wiki/Animated_Particles)</note>
<note>If you're using a .png and it's not showing up, make sure you're not exporting it as a "Smaller File (8-bit)" .png</note>⤶
## Creating a .vtex file
* Now that we have our `.mks` file prepared, we need to link to it in a `.vtex` file, so we can use it in the Sprite Renderer. If you do not know how to create a `.vtex` file, follow this wiki page: <page>Using custom sprites</page>
# Using the animated sprite
* Select your new sprite in the `material` property on the Sprite Renderer
* Increase the `animation rate` property on the Sprite Renderer
Congratulations! You have just created and used your first animated sprite in the Particle Editor!
<upload src="3dc48/8d90bb34be09e8d.gif" size="163168" name="ezgif-7-df20056565e6.gif" />
*Example of an animated sprite*