S&box Wiki

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*