• Editor
  • Perspective Animations... In pixel art?

I’m attempting to do something that I don’t think Spine is really made to do. But my fingers are crossed that I’ll come up with something interesting by the experiment, or at least find an alternative I’m happy with.

This game project has 2D characters viewed from the side as well as a three-quarters perspective. Also… it’s pixel art. While Spine can animate pixel art from a front or side perspective and it can animate a three-quarters perspective (with enough meshes)... could it do both at the same time?

Here’s one of my sprite characters in a perspective walk cycle in four frames below:

Not really Spineable, is it? I’ve only had Spine for a day so I’m not ready to throw in the towel. Here are some ideas I’m considering:

  1. Make all spine animations using high-res (non pixel art). Then use a program like Pixelator to convert animations to pixel art.
  2. Design the game around using mostly side or front pixel art animations and make those with Spine. Only have a three-quarters walk animation and make this by hand with pixel art.
  3. Forget pixel art and come up with some other style that makes sense that can more easily be animated with Spine.
  4. ????

Any input or direction?

Related Discussions
...
  • Изменено

Animating pixel art is really no different from animating larger images, except that the pixels are bigger, though there are different pixel art styles.

How do you want to use Spine's interpolation? You may want to keep each frame on pixels. Some games render each pixel as 4 or more pixels, giving a retro look. With that Spine's interpolated movement can happen at the pixel level, so the 4x4 pixels can move smoothly between 4x4 pixels. You could also round the image locations so you don't get that interpolation.

Have you seen this thread?
Using Spine with Pixelart in Dan The Man

Nate написал

Animating pixel art is really no different from animating larger images, except that the pixels are bigger, though there are different pixel art styles.

How do you want to use Spine's interpolation? You may want to keep each frame on pixels. Some games render each pixel as 4 or more pixels, giving a retro look. With that Spine's interpolated movement can happen at the pixel level, so the 4x4 pixels can move smoothly between 4x4 pixels. You could also round the image locations so you don't get that interpolation.

Have you seen this thread?
Using Spine with Pixelart in Dan The Man

I've seen that thread and there's some ideas. Do you have any other examples of some things you mention?

I would be using interpolations to create the animations. Otherwise, it defeats the purpose of using Spine here. Also, un like Dan the Man, I would need to modify meshes to create animations.

What I'm trying to say is that it would be nice if I could create all the doll parts and then rotate, transform and edit their meshes in an animation to create a three quarter animation walking cycle, like the one below. I think that's possible with a high resolution image but I don't see how it could be done with pixel art.

The Axiom Verge author has posted on these forums a fair amount. I think Axiom Verge 2 uses Spine, might be interesting for you to check out:
https://twitter.com/AxiomVerge/status/1425561294850207747

Ah, I see. I think that would be possible with pixel art in exactly the same way it's possible with larger images.

Spine has a Pixel grid setting that rasterizes like some pixel art games do. This prevents pixels in your images from being rotated and may help doing something like you've shown.
Settings - Spine User Guide: Pixel grid

Thanks for the suggestions. I was very skeptical this was going to work but then I checked Pixel Grid. I remade my original sprite and took out the lines and reduced the colors. I looked at sprites from Xenogears as an example. Here's a quick result. It still needs work but it's my first animation in Spine.

Edit. Adding a version that uses the original style with lines and more colors. Which one do you prefer?

I think I like the second one, with stronger edges. However, I'm a programmer and shouldn't be allowed to judge such things! 😉

BTW, your animation has a problem called "twinning", which is where different things (arms/legs here) are keyed on the same frames. If you offset the keys a little, it can help to feel less robotic. I understand it's your first animation though! 🙂

месяц спустя

The pixel grid is a setting in the Spine viewscreen. How do I achieve the pixel grid look in the engine in the game?

That's a bit beyond the scope of Spine and depends on your game toolkit, but you can Google "retro" pixel art rendering and your game toolkit. You can just render to the screen using nearest neighbor filtering. Or, you can render to a buffer (eg in OpenGL an FBO) using nearest neighbor, then render the buffer to the screen scaled eg 2x. This will give you 4 pixels for every 1 pixel in the buffer.

10 дней спустя

Let me back up and start from the beginning.

So here is my sprite animated in Spine

Now after some tests, I found that the best look for this animation is what it looks like as an animated gif, 100% size and at 6fps.

Here is currently the Spine animation playing in my 3D game engine where it looks, as expected, the same as the animation in the Spine software.

The idea is with pixel art, you don't want it to be smooth like it is in the non-pixel view of the Spine animation. But chunkier and with fewer frames like it is when exported as a gif.

So I the goal here is to have the animation in the game look like it does in the exported gif. The fact that my game is in 3D adds another layer of complexity.


Update: Step 1 Complete

So I've successfully imported and run the spine animation in a 2D environment such that the animation in the game engine matches perfectly the animated gif I exported from spine. So this is exactly how I want the spine character to look. But I want them to look like this in a 3D environment. Next step is to project the drawing onto a rendertarget.

Update: Finished

It's working. I draw the spine animation in the bottom center of a 398x224 render target. Then I project that render target onto a plane. The plane rotates to always face the camera too of course. Also I have the render target created and updated every 6 frames to give it a more crunchy pixelly movement. In the video you'll notice how there is no "subpixel" movement in the animations. With each frame of animation the characters pixels translate at distances that match the pixel size of the character.

Awesome!! It looks really nice 😃

Very cool, thanks for sharing! I guess no-one would expect skeletal animation software behind this. 8)