Outline shader for Spine

Questions
1

Does anyone have experience creating an outline shader for Spine objects, something like this?

outline_shader

Does it possible to get from unity runtime spine ? Any help would be appreciated.

2 Likes
2

I don’t think it’s possible to do it with one shader, simply because Spine model is rendered from separate pieces, which don’t know anything about each other in rendering. It’s more likely to make a pre render to a texture and apply outline shader to it or use some tricks.

For example, I simply added a second model under the first, slightly increased in size, literally by hundredths of a percent, and used a solid fill of the required colour.

4 Likes
3

@Dragosha Yes, we thought about this trick too, using a duplicate spinemodel within the Spine project itself. In your case, did you add another tint-model in Defold as a spinemodel, or in the Spine project?

4

a spinemodel

1 Like
5

Using a scaled version usually gives you a non-consistent width of the outline, which might be ok depending on your needs. I usually go with rendering those items to a render target and then filter it with a custom shader

6

If we don’t have such an example yet, perhaps our communiity can help us create such a render target+outline effect? (i.e. something we can put on our web page, and also as an example to download)

1 Like
7

outline.fp from the example above:

varying mediump vec2 var_texcoord0;

uniform lowp sampler2D texture_sampler;
uniform lowp vec4 tint;

void main()
{
	lowp vec4 tint_pm = vec4(tint.xyz * tint.w, tint.w);
	vec4 color = texture2D(texture_sampler, var_texcoord0.xy);

	float factorx = 0.0005; // depends on atlas resolution width
	float factory = 0.0005; // depends on atlas resolution height
	float summ = color.a;
	if (color.a < 1.0 )  {
		summ += texture2D(texture_sampler, var_texcoord0 + vec2(-1, 0) * factorx).a;
		summ += texture2D(texture_sampler, var_texcoord0 + vec2(1, 0) * factorx).a;
		summ += texture2D(texture_sampler, var_texcoord0 + vec2(0, -1) * factory).a;
		summ += texture2D(texture_sampler, var_texcoord0 + vec2(0, 1) * factory).a;
	}

	gl_FragColor =  vec4(tint_pm.xyz * summ, summ);
}
8 Likes
8

After some investigation, we came to the conclusion that it’s easier to add the outline directly in the Spine project (yeah, sure, it increases the size of the satin a little bit). Here’s a comparison of how it looks:

image
image510×284 15.4 KB

On the left, the outline is created in the Spine project, on the right, it’s done using a shader.

We weren’t able to achieve the same outline thickness in runtime, without graphic artifacts also.

I’ve attached the project if anyone wants to experiment with it.
test_spine_outline.zip (22.8 KB)

2 Likes
9

try to add some additional space between parts in the Spine atlas (Inner Padding?).

1 Like
10

We tried this, but it doesn’t work for us. Not all elements in the game will have outlines. Yes, it can be fixed by using different atlases, but using different atlases would significantly increase the number of draw calls.

11

Artboard1
Artboard11280×700 88.5 KB


I tested the padding on the SPINE.
It could add an outline in Defold.
sample.zip (317.2 KB)

6 Likes
12

This is perfect, just what I was looking for! Thank you for the idea! We’re exporting from Flash, and there’s no option to set padding when exporting images, we’re going to try Photoshop as an alternative.

1 Like
13

@yeqwep we did the import from PSD (now the workflow is Flash → Photoshop → Spine) with a padding, and we got what we wanted! Thanks for the advice!

TestSpineOutline2025-03-2413-59-58-ezgif.com-optimize (1)

test_spine_outline_updated.zip (12.4 KB)

2 Likes