Creative Commons License

This article was created for Gimp 2.10 and Unity 2019.

 

Table of Contents

In this workflow tutorial, I'll explain how to create a one-time sprite animation like an explosion in Unity. I'll show how to create a sprite sheet of rendered frames from Blender in Gimp and how to animate it in Unity with Shader Graph and C#.

 

Rendered Frames from Blender

First, render 64 squared frames with transparent background as PNG-files in any resolution, though I recommend a size of 2x. These images will be the layers that'll be combined to a sprite sheet in Gimp.

An example of one rendered image frame with a resolution of 512*512 pixels:

 

Gimp

Secondly, download this Python script: LayersToSimpleSquareSpriteSheet.py and save it into your Gimp plugins' folder, typically located here: C:\Users\UserName\AppData\Roaming\GIMP\2.10\plug-ins or add the scripts' location as a plug-in folder.

Then create a new image with transparency and the same size as your rendered images. In this example 512*512 pixels. Delete its background layer.

Add all 64 image frames to your new image with menu bar -> File -> Open as Layers... and multi-select all the 64 layers and open them.

Finally, create a layer as a mask to fade out the areas of each layer you don't want to display. In this example, the smoke should not reach the borders of the image. So the border areas of the layer are transparent to hide the smoke and the rest of the layer is white to show the fire.

Add this mask layer on top of all other layers like this:

 

Now you can run the script: main menu -> Filters -> Animation -> LayersToSimpleSquareSpriteSheet

Save the generated 4096*4096 image as a PNG-file.

 

Shader Graph

Download my shader to use it in Unity to display your sprite sheet. Set the emission value to 0 if you don't want any glow or simply replace the PBR master node with an Until master node. You won't need any C# code to set the sprite sheet texture offset. This is automatically done inside the shader.

Also, add this C# script to the shader's gameObject with a collider to start the one-time playback of the sprite sheet on mouse click. This C# script sets a time offset inside the shader to set the sprite sheet playback to frame #1 on mouse click.

 


UP

Copyright Timo B. Weiße