<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>⤶ # Flipbook Texures⤶ Before we get started you will need a flipbook texture. ⤶ A flipbook texture is a single image containing each frame of an animation laid out in a grid. ⤶ <upload src="b49a2/8dc26861249887b.png" size="125567" name="fire_sheet.png" />⤶ *Flipbook texture example*⤶ ⤶ <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>⤶ Now that we have our flipbook texture, we need to create a `.vtex` file, so we can use it in the Sprite Renderer.⤶ ⤶ * Right click the flipbook texture in the asset browser and select `Create Texture`, save it with the desired name and location.⤶ * In the Texture Editor, press the `Edit more...` button to the right of the Sequence filepath.⤶ <upload src="b49a2/8dc268550d69944.png" size="13106" name="image.png" />⤶ * Tick the Flipbook checkbox and set the rows and columns to match your flipbook texture.⤶ * Press `Done` to close the sequence editor and then save the Texture.⤶ # Using the animated sprite * Select your new sprite in the `material` property on the Sprite Renderer * Select your new animated texture in the `texture` 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" />⤶ ⤶ <upload src="b49a2/8dc26869e733685.gif" size="1551509" name="sbox-dev_3hCRnS378j.gif" />⤶ *Example of an animated sprite*