S&box Wiki

Revision Difference

creating_animated_sprites#564683

<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>⤶ ⤶ # 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 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 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="b49a2/8dc26869e733685.gif" size="1551509" name="sbox-dev_3hCRnS378j.gif" />⤶ *Example of an animated sprite* ⤶