• Editor

  • Need advice on how to improve image quality in Spine exports.

    inglés

I've been using Spine since 2015, but I'm still not sure how to get the best image quality for my exports. I've been making high-resolution images, thinking that this would allow me to scale up to 4K or 8K in the future. However, I've noticed that my characters don't need to be that big when exported. I do still scale by 50% in the export texture settings, but I'm not sure if that's helping.

Is there ever a reason to use native resolution assets in Spine? Should I import my assets at 1.5x of the expected size in engine, or is it best to work in Spine with a 1:1 ratio of how they will appear in game? I'm asking about 1.5x because I might need to zoom in on a character at some point.

I'm wondering what the proper scale is needed for my art and skeleton in order to get the best image quality without any shimmering, aliasing and or other artifacts. I'm familiar with texel density, but I'm not sure if I'm applying it correctly. I'm trying to replicate the image quality of hand-drawn animation, and I'm concerned that the line quality is not consistent. It's almost like scaling up pixel art 2x and then drawing 1x1 pixels on top of it, which results in very inconsistent line quality.

Any advice on how to get the best image quality for my Spine exports would be greatly appreciated.

PS. When I talk about image quality of hand drawn I am not talking about framerate or smoothness or animation, just the quality of the line itself. Thanks!

Related Discussions
...

  • Nate

  • Publicación n.º 2
  • Publicación en inglés

You can use any size assets in Spine -- it doesn't limit the size of the assets you use at runtime. At runtime you can use a different size, smaller or larger. Many people work on their art at high resolution and scale it down to something reasonable to work in Spine, which may not be the same size they use at runtime. You can even include multiple sizes of your assets and at runtime choose the closest one that matches the user's screen resolution.

You will almost always have filtering artifacts at runtime, as it is rare that the image pixels match the screen pixels. Much of the quality will come from the filtering used, eg nearest, linear, bilinear, or bicubic. Your source image size can matter, result can be worse if more than twice the size it is shown on screen. Mipmapping and trilinear filtering (a technique to apply at runtime) can help. See this recent post:
https://esotericsoftware.com/forum/d/24306-ue5-pixelization-of-characters-animations-need-anti-aliasing/3

Ah interesting. I'm not the only one that is having issues with this. I'll check out that post but I am bummed out that this seems to be a default state of Spine's image quality or rather the image quality for engines to render. I'll experiment with different options and see what I can come up with. Thanks for the quick response.

It comes down to how software needs to map image pixels to screen pixels. It happens in every app and every game on all computers and gaming consoles. Rarely the image pixels map 1:1 to the screen pixels, only in UIs and games that just draw images without translation between pixels, rotation, scale, or shear. Even then, there is a wide range of screen resolutions, especially on mobile, so if your game or app is scaled to fit the screen, then there is filtering happening. It doesn't have to look bad, but it does take some careful consideration.

I have another question. Is anti-aliasing possible on Spine models? Wouldn't that fix weird shimmering or stuff like that? Is it possible to just apply a slight blur shader to maybe soften the effect of aliasing/shimmering?

The Spine editor exports skeletal data. The Spine Runtimes load that data and provide an API for manipulating it. Spine Runtimes for a particular game toolkit use the game toolkit APIs to render the skeleton's images. There are no limitations for how that rendering is done except for what functionality the game toolkit provides.

Yes, you can use antialiasing to improve rendering of your Spine skeleton. However, you will still need to choose how texture filtering is done. As mentioned, using bilinear or bicubic will likely already solve those problems. It is extremely easy, generally you just specify that the texture should use bilinear by using some game toolkit API. You should try it.

For the highest quality you will want to apply all of the available techniques to improve image quality.