RiggyTry it

From a layered PSD to an animated Spine character in Unity

Layered art to a character playing in a Unity scene with the official spine-unity 4.2 runtime: install the runtime, rename one file, set the alpha mode, drag the skeleton into the scene and play it from a script. The same cat as in the Phaser and PixiJS walk-throughs, ready to drop into a project: riggy-cat-unity.zip.

What was checked

A browser cannot run Unity, so there is no live demo here. Instead, the files in the archive were loaded and every animation played with the official spine-csharp 4.2 runtime — the library spine-unity reads skeletons with — and Cat.cs was compiled against it. The import steps follow the spine-unity documentation and its 4.2 source, linked below.

Install spine-unity 4.2

Either import the .unitypackage from the spine-unity download page, or add the runtime with the Package Manager: Add package from git URL…, one URL at a time:

https://github.com/EsotericSoftware/spine-runtimes.git?path=spine-csharp/src#4.2
https://github.com/EsotericSoftware/spine-runtimes.git?path=spine-unity/Assets/Spine#4.2

The #4.2 at the end matters: the runtime's major and minor version must match the export, and spine-unity 4.3 does not read 4.2 files. Details: spine-unity installation.

Rename the atlas to .atlas.txt

spine-unity imports an atlas only with the .atlas.txt extension. A plain .atlas file is skipped with a console warning — “If this file is a Spine atlas, please change its extension to `.atlas.txt`.” — and the skeleton is left without textures. Rename it before copying, keep the three files together, and copy the folder anywhere under Assets:

Assets/
  Characters/
    riggy-cat/
      skeleton.json
      skeleton.atlas.txt     ← renamed from skeleton.atlas
      page.png

spine-unity then creates three assets next to them: skeleton_Atlas, a _Material per atlas page and skeleton_SkeletonData, the one you will use. The archive above already has the renamed file.

Set straight alpha

Atlas pages come in two flavours: premultiplied alpha and straight alpha. spine-unity 4.2 assumes premultiplied by default; Riggy exports straight alpha. With the wrong setting, edges of parts get dark or bright fringes. For a straight-alpha page:

  • on the generated _Material, turn on Straight Alpha Texture;
  • on page.png, turn on sRGB (Color Texture) and Alpha Is Transparency.

For an export packed with premultiplied alpha it is the other way round — see spine-unity assets.

Put the skeleton in the scene

Drag skeleton_SkeletonData into the Scene view or the Hierarchy. spine-unity asks what to create: SkeletonAnimation for a regular game object, SkeletonGraphic (UI) for a canvas, SkeletonMecanim to drive it with an Animator. Pick SkeletonAnimation. In its inspector, Animation Name picks the animation that plays on start and Loop repeats it — enough to see the cat nod without a line of code. The rig has 18 bones and 15 parts, and all four animations are in the drop-down.

Play animations from a script

Add Cat.cs (in the archive) to the same game object. AnimationState is the same API as in every Spine runtime:

	void Start () {
		cat = GetComponent<SkeletonAnimation>();
		// blend 0.2 s between any two animations instead of snapping
		cat.AnimationState.Data.DefaultMix = 0.2f;
		cat.AnimationState.SetAnimation(0, "idle", true);
	}

On a click, play a one-shot and queue the loop right behind it on the same track:

		// play the one-shot once, then go back to the idle loop
		cat.AnimationState.SetAnimation(0, name, false);
		cat.AnimationState.AddAnimation(0, "idle", true, 0);

When it does not load

Licensing

spine-unity is part of the Spine Runtimes. Shipping a game with them requires a Spine license from Esoteric Software, whoever made the skeleton — see the licensing page. Riggy is an independent tool, not affiliated with Esoteric Software or Unity.

Your layered art, moving in Unity

Drop a PSD, say what should move, export Spine 4.2 and import it as above.

Animate your own PSD