Skin constraints for different proportions

March 11th, 2020

Skin constraints are a great way to increase the expressiveness of your skeletons. In this blog post we'll explore how to use skin constraints to alter the proportions of a character using the Mix-and-match example project.

The Mix-and-match project is part of our set of example projects that come installed with Spine. The project can be found by opening the welcome screen, then clicking Examples. Alternatively, the project can be downloaded from the example page. The example page contains detailed explanations of the project's inner workings. Go ahead and open the project in Spine!

The goal of this exercise is it to create a skin variation that not only affects the set attachments, but also the proportions of the character. Specifically, we want the skin to make the character smaller. The technique described below can of course also be applied to create taller, skinnier, or fatter characters, and anything in between.

Constraint setup

Let's get started! With a change in proportions, the location of the hips also changes relative to the root of the character. This can be done via a transform constraint.

Select the hips bone and create a new transform constraint with the root bone as target. Call the constraint small-hips.

With the small-hips constraint selected in the tree, check the Relative option and set the translate mix to 100. The constrained hips bone will now follow the translation of the root bone. The hips bone will be offset relative to the root bone by the translate offset set on the small-hips constraint.

The legs of the character will not look nice after the creation of the small-hips constraint. This is due to the constraints order. We want the small-hips constraint to be applied before all other constraints. To fix it, drag the small-hips constraint to the very top of the list under the Constraints node in the tree.

To see the effect of the constraints, modify the translate offset on the small-hips constraint, e.g. set it to -85 on the y-axis to make the character squat.

It is time to turn our character into a tiny, adorable human! Select the 8 bones called arm-front-up, arm-front-down, arm-back-up, arm-back-down, leg-up, leg-down, leg-up-back, and leg-down-back, as in the image above.

Next, create a new transform constraint called small-limbs with the root bone as its target.

As before, we need to fix the constraint order. Drag the small-limbs constraint right below the small-hips constraint under the Constraints node.

In order to make these 8 bones smaller, check the Local option and set the scale mix to 10.7. We can then set the offset scale value on the x-axis such that the character's legs straighten out. A value of -2 works nicely.

Skin constraints

We can now add the small-hips and small-limbs constraint to a skin, which means the constraints will only be applied when that skin is active.

Create a new skin and name it small. Drag and drop the small-hips and small-limbs constraint nodes to the small skin under the Skins node.

Alternatively, first select the small skin, press the Add to skin button, select the constraints small-hips and small-limbs, then press the button Add to skin again to complete the process.

Done!

To create a tall, skinny, or fat variation, simply repeat the above process. Each variation will require its own constraints and skin. Multiple skins can be active at the same time using the Skins view, so you can combine skins that change proportions with other skins that change attachments. You could even have separate skins for changing the proportions of the legs, arms, torso, etc and combine them however you like.

This simple technique can be applied to more than just proportions! It is a powerful way for skins to affect not just which attachments are visible, but the skeleton's bone transforms.

Discuss this blog post and share your experiments on the [Spine forum]().

Unity Universal Render Pipeline support

March 9th, 2020

Animated Universal Render 2D Demo

We are happy to announce support for Unity 2019.3's Universal Render Pipeline and its 2D Renderer feature set in our spine-unity runtime!

The Universal Render Pipeline (URP) is a prebuilt Scriptable Render Pipeline (SRP) optimized for delivering high graphics performance and is the successor of the Lightweight Render Pipeline (LWRP). It scales seamlessly from mobile platforms to high-end PCs and consoles. It adds a new 2D Renderer workflow, providing a flexible 2D lighting system designed specifically for 2D games.

There is now an additional Unity Package Manager (UPM) package com.esotericsoftware.spine.urp-shaders available for download which extends the spine-unity runtime by adding URP support.

Why a separate package

Unity has moved many of their optional modules to the new Unity Package Manager (UPM) ecosystem. Their URP base shader files are also provided as a UPM package under the name Universal RP and not part of every new Unity project out of the box.

Including our URP Spine shaders in the spine-unity runtime would lead to confusing error messages and additional configuration steps in case Unity's Universal RP package has not been installed in a project. By providing our URP Spine shaders as a UPM package, such dependencies are automatically resolved, making it easier to use this additional functionality.

Going forward, we will provide separate UPM packages for other spine-unity features that depend on Unity's optional packages.

Installation

You can download the UPM package via the download page or find it in the spine-unity/Modules subdirectory in the Git repository. Please follow the guidelines on Installing Extension UPM Packages on our spine-unity documentation pages on how to install the package.

URP examples

URP shader selection

The package contains two example scenes similar to the animated GIFs above at com.esotericsoftware.spine.urp-shaders-3.8/Examples/2D/URP 2D Shaders.unity and com.esotericsoftware.spine.urp-shaders-3.8/Examples/3D/URP 3D Shaders.unity for you to check out. These demonstrate how to use the URP shaders in the respective 2D and 3D renderer setup. Note that the scenes react to changing the settings of your current UniversalRenderPipelineAsset, set under Project Settings - Graphics.

Usage

The standard Spine shaders in the spine-unity runtime Spine/Skeleton Lit, Spine/Sprite/Vertex Lit and Pixel Lit are not compatible with the universal render pipeline. Instead, the Spine Universal RP Shaders package provides shaders specifically built for the universal render pipeline, including 2D Renderer support:

  1. Universal Render Pipeline/2D/Spine/Skeleton Lit

    Universal 2D Renderer variant of the Spine/Skeleton Lit shader.

  2. Universal Render Pipeline/2D/Spine/Sprite

    Universal 2D Renderer variant of the Spine/Sprite/Vertex Lit and Pixel Lit shaders.

  3. Universal Render Pipeline/Spine/Skeleton

    Universal variant of the Spine/Skeleton shader.

  4. Universal Render Pipeline/Spine/Skeleton Lit

    Universal variant of the Spine/Skeleton Lit shader.

  5. Universal Render Pipeline/Spine/Sprite

    Universal variant of the Spine/Sprite/Vertex Lit and Pixel Lit shaders.

The shaders can be assigned to materials as usual via the Shader menu in the material properties:

URP shader selection

The universal render pipeline shaders will respect your settings of the assigned UniversalRenderPipelineAsset under Project Settings - Graphics. The following GIF shows how the characters in the scene are affected by changing these settings:

Project settings - URP asset

URP asset settings live update

Restrictions

Like all other Spine shaders, the LWRP shaders do not support Premultiply alpha (PMA) atlas textures when using the Linear color space. If you are using the Linear color space, please export your atlas textures as straight alpha textures by disabling the Premultiply alpha setting. See these instructions for straight alpha export and import settings for more information.

If you are unsure you can check the currently active color space via Edit > Project Settings > Player > Other Settings > Color Space.

Player Settings - Gamma

We hope that these additions to the spine-unity runtime let you create even more impressive games and apps for both high- and low-end devices. Share your thoughts on the forum.

Distance limit setup for eyes

February 24th, 2020

final result

Flexible eye rigging can bring even more life to your characters. In this tutorial we'll create an eye rig that always looks at a target, without the iris and pupil going outside the bounds of the eyeball. This is the long form version of a tip we previously published. Let's go through it step by step!

Images setup

circle

For the purpose of this tutorial, we'll keep things simple. The eyeball is made up of a white circle image located in our image path. We drag it from the images node into the viewport, then duplicate its slot.

circle

We'll turn this second circle into the iris of the eye. All we need to do is change the color of the attachment to an iris color we like. Images can be scaled and translated independently of bones in setup mode, so we'll scale the copy down to make it smaller in proportion to the eyeball. To establish the limit beyond which iris should not move, we also translate it so that it touches the border of the white circle beneath it.

circle

Next, we duplicate the iris slot to create the pupil. Pick a new color for the image attachment and scale down the attachment as before.

Lastly, let's also add a tiny reflection of light on the pupil. Duplicate the pupil slot, make it smaller, change its color to white and place it on top of the pupil.

Finally we are ready to start creating some bones!

Bones setup

bones

To get the desired effect, we need to create 3 bones. The limiter bone originates from the center of the eyeball and extends to its border. It's angled at to make alignment easier later on.

The pupil bone is placed in the middle of the pupil, which also aligns with the midpoint of the limiter bone. All the images except the white eyeball are parented to this bone. The pupil bone itself is parented to the limiter bone.

Lastly, the target bone is placed along the axis the other two bones are placed at. It is parented to the root bone.

IK setup

ik

Time for the magic trick! As a first step, we create an IK constraint, with the limiter bone as its parent and the target bone as the target. This causes the limiter bone to always point at the target bone.

By enabling the IK compress option on the IK constraint, we allow the limiter bone to shrink and grow as the target bone comes closer to or gets farther away from it. This way, the iris and pupil can move freely within the eyeball instead of being constrained to the eyeball's border.

If we move the IK target bone around, the iris and pupil will get distorted. This is due to the parent bone's rotation and scale being applied to the pupil bone. To fix it, we simply disable the rotation and scale inheritance on the pupil bone.

inherit

Result

final result

This simple setup lets the pupil and iris follow the target bone nicely, without distortion or going outside the eyeball!

You can download the finished project here.

The setup presented above is a general way to limit movement of elements to a circular area. Can you think of other use cases? Share them on the Spine forum!

Outline shaders for spine-unity

February 10th, 2020

Outline Shader Demo

We are happy to announce outline rendering support for all shaders in our spine-unity runtime! This makes it easy to show colored selection outlines around characters, animated Spine UI elements, and much more.

Outline Shader Enable/Disable

Each shader that comes with the spine-unity runtime now provides an additional Outline section. When you enable the Outline parameter of a material, the shader will automatically be switched from Spine/shader_name to its new Spine/Outline/shader_name shader variant, and back when you disable it.

The separate outline shader ensures that no render passes are wasted where no outline is needed and keeps draw call batching optimal.

Creating and switching to outline materials

Outline Shader Duplicate Existing Material

To create an outline material, first duplicate the original material.

Note: This is the *_Material next to your skeleton asset when using a normal SkeletonRenderer, SkeletonAnimation or SkeletonMecanim. For SkeletonGraphic it is SkeletonGraphicDefault.

Select the new material and enable the Outline property via the material inspector. This will automatically switch the material to the respective outline shader variant.

Now that the outline material is prepared, you can assign it to your SkeletonRenderer and SkeletonGraphic components as usual.

Apply via SkeletonRendererCustomMaterials

  • For SkeletonRenderer, this can be via done via SkeletonRenderer.CustomMaterialOverride or by adding a SkeletonRendererCustomMaterials component.
  • For SkeletonGraphic, you can directly set the SkeletonGraphic.material property.

If you want to see an example of outlines appearing when hovering the mouse over a skeleton, please have a look at the new example scene described in section Outline Shaders example scene at the end of this blog post.

Requirements for meshes and atlas textures

How the outline shader works - neighbourhood sampling

Normally, transparent pixels within a RegionAttachment or MeshAttachment do not contribute to the frame buffer. In our outline shaders, each transparent pixel will now test whether there are opaque pixels in its neighbourhood at a certain distance. If there are, the outline color will be drawn.

Note: This requires an additional render pass of the affected skeleton to maintain correct draw order.

Image and atlas textures - add padding or whitespace

Outline Bleeding across Images

When you see outline color appearing at borders of attachments as shown above, it is most likely the outlines of nearby atlas image regions, growing into your mesh.

You can add more padding via the atlas export settings to leave enough space for the neighbour outline. You may also consider disabling whitespace stripping instead of increasing the padding.

Export Settings for Outlines

Alternatively, you can reduce outline width until this problem no longer occurs.

Mesh attachments - leave space to not cut off the outline

Outline Cut by Mesh

The outline is only drawn within the mesh borders. When you see parts of the outline cut away as shown above, your mesh borders are likely being too tightly wrapped around the opaque pixels of your images.

To fix this problem, move the mesh vertices further out to provide enough space (shown in green below). You may need to add more whitespace around the borders of your images.

Outline Move Vertices Outwards

Alternatively, you can reduce outline width until this problem no longer occurs.

Outline shaders example scene

The spine-unity runtime package now comes with an additional example scene, Spine Examples/Other Examples/Outline Shaders. This scene shows how you can switch to prepared outline material variants of existing materials on mouse over. The example scene uses EventTrigger components of the Unity event system to react to mouse pointer enter and exit events.

Conclusion

These additions to our spine-unity runtime make it easy to add colored outlines to your skeletons. Don't hesitate to share your thoughts and creations on the Spine forum!

Older