Making animated tiles in Spine to Unity

JonathanAndersen

I'm trying to make rolling waves for beaches in our game.

400x400 pixels in size and sharp edges inside spine.

However when imported to Unity, and you create a row of these, you can notice small lines between them.

it's very subtle, but when you have 20 of these in a row, you notice it. What's going on is the texture, going from its sharp edge has gone soft.

Is this an Spine export issue? We have fiddled with bleed, premultiply alpha and edge padding, and nothing seems to work.

Any suggestion to fix this, or is this a Unity issue? Overlapping them only increases the opacity strength.

Harald

JonathanAndersen What's going on is the texture, going from its sharp edge has gone soft.

What texture does this screenshot show? Is this the atlas texture exported from the Spine Editor? If so, what does the respective input attachment image look like? Could you perhaps share this problematic Spine project with us, then we can have a look at what's going wrong. You can either share it here on the forum, of send us an email to contact@esotericsoftware.com, briefly mentioning this forum thread URL so that we know the context.

JonathanAndersen

Harald This is how the texture looks in the running Unity editor, the atlas texture file itself is NOT blurry, only when unity runs it.

Here is the Spine project if you want to look.

wave-1.spine

12kB

Harald

JonathanAndersen This is how the texture looks in the running Unity editor, the atlas texture file itself is NOT blurry, only when unity runs it.

What do you mean by the "when Unity runs it"? Do you mean that the texture looks blurry when inside Unity and dragged into a scene without a SkeletonAnimation component? Then it's likely that you need to adjust the Texture import settings, and change Filter Mode from Bilinear to Point (no filter), or your mip-map settings are causing problems if you don't want your skeleton to look like pixel-art.

Here is the Spine project if you want to look.

Thanks, but this is just the .spine file without the relevant attachment images. This will not help us much in diagnosing a texture issue 🙂.

JonathanAndersen

Harald
The texture file is not blurry. When the texture is used on a gameobject with a skeletonAnimation component it's blurry.

Also my fault, here is the images

images.zip

145kB

JonathanAndersen

Harald With filter mode Point (no filter) it's still blurry. Changing mip map settings seems to do nothing.

Harald

@JonathanAndersen Your input images that are used as attachments already show an issue of a transparent border line, see here:

This will create a half-transparent pixel at the border when image interpolation is used. Why did you add a transparent border if you don't want one?

Aside from that, the top-right vertex location seems to be off as well:

JonathanAndersen

Harald This was not something I added with intention, however I see on the Photoshop to spine panel, that it does indeed add 1 pixel of padding to the drawing.

This is a unintentional fault on my end, and I do now worry it might have screwed the entire thing and requires a whole new redo of the project.
Also the top-right vertex location out of place had no importance, I do think the padding is the thing which did it, as it screws the entire scale of the mesh.

Harald

JonathanAndersen This was not something I added with intention, however I see on the Photoshop to spine panel, that it does indeed add 1 pixel of padding to the drawing.

Oh, good find! In this case it's a rather nasty pitfall, and well hidden.

JonathanAndersen Also the top-right vertex location out of place had no importance, I do think the padding is the thing which did it, as it screws the entire scale of the mesh.

The problem is not so much the scale of the mesh being off, but that right at the border texels is interpolating to a transparent color. And bleed, which usually fixes such problems, will effectively not help anything, since it bleeds the already fully transparent pixel further outwards.