• Editor
  • How to keep pixels straight when animating Pixel Art?

Hey all!

I'm working for a small game team and we are looking to animate our characters with the Spine Sofrtware! The game we are making is a pixel art game, so we want to avoid the rotated pixel issue that can come with Spine animations. I found this forum post from a few years ago that I think outlined this issue:

http://en.esotericsoftware.com/forum/Pixel-Art-Feature-Request-10063

I have attached an example of the spine settings, as well as what kind of results we are getting, and also what kind of effect we are going for with the animation. Thank you all for your time!

It's my first time posting here so please excuse me if I posted in the wrong place.

Hi, you have come to the right place! Though you have attached an image of your Spine settings, I can't see how Smoothing is set up from the image, so I suspect that may be where the cause is. Smoothing should be 0 for Pixel art. Also note that some of the viewport-related settings will not be reflected until you restart the editor.

I tried with a simple project and uploaded a video recording the Spine settings and viewport for your reference:

Misaki wrote

Hi, you have come to the right place! Though you have attached an image of your Spine settings, I can't see how Smoothing is set up from the image, so I suspect that may be where the cause is. Smoothing should be 0 for Pixel art. Also note that some of the viewport-related settings will not be reflected until you restart the editor.

Thank you!!! This really solved the problem. I realised that my original image was 640x640 instead of 64x64 which means that I only see straight pixels when I set the scale down to 0.1

Is there anyway to affect scaling so it will clamp to a 10x10 pixel base rather than a 1 pixel base? (I'm not even sure if I'm using the right terminology here, I hope I'm making sense!)

Glad to hear you've figured it out!

Is there anyway to affect scaling so it will clamp to a 10x10 pixel base rather than a 1 pixel base? (I'm not even sure if I'm using the right terminology here, I hope I'm making sense!)

I'm afraid there is no such filter option available in the Spine Editor, sorry. In general it is not recommended to use 10x the resolution that is actually needed. If you want to avoid your pixel art from being blurry, please change the filtering (also on the runtime side) of your textures to nearest-neighbour filtering. Using default linear filtering will blur your image.

A side note for later:
Please note that on the runtime side of things, you will also need to setup things accordingly so that your skeleton is rendered in a "low-resolution" style. The Spine Editor just provides features to display (or preview) your art in multiple ways. When exporting your project as a skeleton with bones and atlas textures, these preview and filter settings will unfortunately not find its way to e.g. the spine-unity runtime upon import in your game.