Tutorial: Animated Spritesheets with GIMP and Unity

posted in: Programming, Tutorials | 1

This is a quick tutorial describing how to use a plugin I’ve written to create simple spritesheets with GIMP. These can be imported into Unity and used to create animated sprites for UI elements, 2D games, etc. Here’s an example of the end result (based on a free icon from the excellent game-icons.net):

Prerequisites

  • Unity: Tested with Unity 2017, but there’s nothing fancy going on so most recent versions should be fine.
  • GIMP 2.8 or later: This may work with earlier versions, but I haven’t tested any.
    • Python: Comes bundled with recent versions of GIMP, but if you’re stuck on an old copy you may need to reinstall it after installing Python for the first time.
  • The plugin: Right-click and save to your GIMP plugin folder. On Windows that’s: “C:\Users\YourUserName\.gimp-2.8\plug-ins”. Close GIMP first or restart afterwards.

 

Phase 1: Working in GIMP

  • Open GIMP and create a new image (File -> New) with a size of one animation frame (square dimensions work best, but aren’t required)
  • Create a layer for each frame of your animation and *insert actual art here* 
  • Line up the contents of each frame for smooth animation. This is easiest with a transparent background and liberal use of eye icons to toggle layers on/off in the Layers window as you go.
  • Order layers so that the first frame of the animation is at the bottom of the layer list, and the last frame is at the top. See below for an example setup.

  • You can now preview your animation in GIMP using the playback filter (Filters -> Animation -> Playback)
  • If you’re using a transparent background, make sure to add “(replace)” to each layer’s name so frames don’t overlay each other when animating.
  • Optional Export as GIF: You can also now export to an animated GIF by selecting (File -> Export As… GIF Image (*gif)) and ticking the ‘As Animation’ option on the dialog that appears.

  • If you installed the plugin as described in the Prerequisites section you should now be able to select (Filters -> Animation -> Create Spritesheet)
  • This will display a simple dialog with an option to output your animation on a single row or in a grid layout (the default). Hit OK to generate a spritesheet as a new image.
  • Voila! You have a spritesheet. Save this to your Unity project’s asset folder as a .jpg or .png (use the latter for transparent images)

Phase 2: Working in Unity

  • Select your spritesheet in Unity and under its Import Settings in the inspector make sure Texture Type is set to ‘Sprite (2D and UI)’
  • Open the spritesheet in the Sprite Editor, select Slice and change the Type to Grid by Cell Count
  • Adjust the number of columns and rows to match your spritesheet and then select Slice
  • You should now have a collection of sprites parented under your spritesheet, one per animation frame
  • These can be referenced individually by an Image (Source Image) component for UI or a Sprite Renderer (Sprite) component for 2D games

  • For full 2D games or other complex scenarios you’ll probably want to drive your animations (updating the sprite over time) from code, but for simple UI animations..
  • You can quickly test your animation by adding an Animator component to an Image object (GameObject -> UI -> Image) and animating the Image.Sprite value over time

That’s it! I hope you found this tutorial useful. I’ve released the GIMP plugin script under a Creative Commons – CC0 license which means its dedicated to the public domain and you’re free to do absolutely anything you like with it. No need to link back to me if you do either, but it’s always appreciated nonetheless.

One Response

  1. […] Description: Create a spritesheet from the layers of a GIMP image. Useful for simple sprite animation. Source: GitHub License: Public Domain (CC0 1.0) Documentation:  Tutorial: Animated Spritesheets with GIMP and Unity […]

Leave a Reply