Sprite shearing to fake rotation

A place for your artistic side. Discuss techniques and tools for pixel art on the NES, GBC, or similar platforms.

Moderator: Moderators

tepples
Posts: 22708
Joined: Sun Sep 19, 2004 11:12 pm
Location: NE Indiana, USA (NTSC)
Contact:

Re: Sprite shearing to fake rotation

Post by tepples »

If you're moving only 8-pixel-wide strips, as in the example, you can move bytes at a time, or you can just move the sprites.
psycopathicteen
Posts: 3140
Joined: Wed May 19, 2010 6:12 pm

Re: Sprite shearing to fake rotation

Post by psycopathicteen »

tepples wrote: or you can just move the sprites.
Shearing in both x and y directions at the same time are smoother than just shearing in one direction.
tepples
Posts: 22708
Joined: Sun Sep 19, 2004 11:12 pm
Location: NE Indiana, USA (NTSC)
Contact:

Re: Sprite shearing to fake rotation

Post by tepples »

I'm developing a video game in Python that I plan to port to the NES once all the physics and gameplay elements are in place. I've implemented shearing of 8-pixel-wide strips into its graphics engine to simulate shifting 8x8 pixel sprites on the NES. The sprite sheet stores 8 frames of rotation through a half circle; these flip to 16 and shear to 48. The end result almost cannot be distinguished from hardware matrix rotation like that of the GBA.

Play video (103 kB)
(Should play in Chrome, Firefox, Opera, and VLC)
Bananmos
Posts: 552
Joined: Wed Mar 09, 2005 9:08 am
Contact:

Re: Sprite shearing to fake rotation

Post by Bananmos »

Wow, that looks really awesome! Highly innovative way to get so smooth rotation-animation and I can't wait to see the full game! :)

One suggestion though is that you probably should spend some more frames of animation on that turning box, because the smoother the overall animation is, the more distracting it is when it suddenly goes jerky...
tepples
Posts: 22708
Joined: Sun Sep 19, 2004 11:12 pm
Location: NE Indiana, USA (NTSC)
Contact:

Re: Sprite shearing to fake rotation

Post by tepples »

Shearing on the boxes would look like this.
Attachments
About 12% speed
About 12% speed
tumblingblock_slowed.gif (2.9 KiB) Viewed 6990 times
Full speed
Full speed
tumblingblock_fullspeed.gif (2.92 KiB) Viewed 6990 times
Sik
Posts: 1589
Joined: Thu Aug 12, 2010 3:43 am

Re: Sprite shearing to fake rotation

Post by Sik »

Yeah, I guess the only reasonable solution would be to double the amount of frames the animation has ^^;
User avatar
rainwarrior
Posts: 8734
Joined: Sun Jan 22, 2012 12:03 pm
Location: Canada
Contact:

Re: Sprite shearing to fake rotation

Post by rainwarrior »

Shearing on the boxes looks fine to me. The only thing I don't like about the boxes is the light pixels on the bottom edges in the 2nd/4th frames.
tepples
Posts: 22708
Joined: Sun Sep 19, 2004 11:12 pm
Location: NE Indiana, USA (NTSC)
Contact:

Re: Sprite shearing to fake rotation

Post by tepples »

Sik wrote:Yeah, I guess the only reasonable solution would be to double the amount of frames the animation has ^^;
I tried that, and it didn't look quite as smooth as shearing. But I'll make sure to remove the failed attempt to antialias, as rainwarrior suggested.
Sik
Posts: 1589
Joined: Thu Aug 12, 2010 3:43 am

Re: Sprite shearing to fake rotation

Post by Sik »

The problem is that in the example you provided the jumps between different sprites is still way too noticeable to look smooth. If it spins faster it probably wouldn't matter much, but at that speed it's still too obvious.
User avatar
tokumaru
Posts: 12427
Joined: Sat Feb 12, 2005 9:43 pm
Location: Rio de Janeiro - Brazil

Re: Sprite shearing to fake rotation

Post by tokumaru »

It looks like the box is made of Jell-O.
User avatar
Gilbert
Posts: 564
Joined: Sun Dec 12, 2010 10:27 pm
Location: Hong Kong
Contact:

Re: Sprite shearing to fake rotation

Post by Gilbert »

One problem I see about the current box animation is that the original upright sprite has dithering and the sheared sprites look really really unpolished, thus a glaring dive in image quality when it starts rotating (but at 45 degree the sprite suddenly looks good again, which IMO looks even better than the upright one), so I think it's wiser to design the sprites without those "checkbox dithering", or else you may hand edit each sheared sprites to make them look better.
User avatar
tokumaru
Posts: 12427
Joined: Sat Feb 12, 2005 9:43 pm
Location: Rio de Janeiro - Brazil

Re: Sprite shearing to fake rotation

Post by tokumaru »

Gilbert wrote:but at 45 degree the sprite suddenly looks good again, which IMO looks even better than the upright one
Really? I think the upright one looks much nicer than the 45 degree one (which looks kinda generic), but no matter which one you like better the fact that they are radically different from each other make the animation less believable.
User avatar
Bregalad
Posts: 8056
Joined: Fri Nov 12, 2004 2:49 pm
Location: Divonne-les-bains, France

Re: Sprite shearing to fake rotation

Post by Bregalad »

It looks interesting, but it'd be better to the eye if the center of the rotation was the center of the block itself instead of being below it.

Now I'm thinking what kind of games the rotation would be actually useful...
Sik
Posts: 1589
Joined: Thu Aug 12, 2010 3:43 am

Re: Sprite shearing to fake rotation

Post by Sik »

Gilbert wrote:One problem I see about the current box animation is that the original upright sprite has dithering and the sheared sprites look really really unpolished, thus a glaring dive in image quality when it starts rotating (but at 45 degree the sprite suddenly looks good again, which IMO looks even better than the upright one), so I think it's wiser to design the sprites without those "checkbox dithering", or else you may hand edit each sheared sprites to make them look better.
Eh, in motion the dithering doesn't look as bad (probably because it's constantly changing).
User avatar
tokumaru
Posts: 12427
Joined: Sat Feb 12, 2005 9:43 pm
Location: Rio de Janeiro - Brazil

Re: Sprite shearing to fake rotation

Post by tokumaru »

Bregalad wrote:it'd be better to the eye if the center of the rotation was the center of the block itself instead of being below it.
Have you played or watched a video of the game where this is used? These are boxes that a (disturbingly legless) person pushes around, so they have to be animated like that.
Post Reply