Sprite rotated in 16 positions

[R-Tape]

It's really hard to make decent rotated graphics for vector games (see above!). I understand that it's a fudge, because if your sprite is a square, it's not possible to properly represent it on any diagonal.

Has anyone got any tips or shortcuts for starting with a sprite and crowbarring it into varying rotations? I'm thinking about complicated sprites rather than simple triangles.

[Nienn Heskil]

There are slopes that look nice in pixel art, 45° (1:1) is the obvious one but also e.g. those with 2:1 or 3:1 ratios of vert/horiz pixels. So for those intermediate rotations, see if you can orient your sprite along one of those so that straight lines in it look like that. That would be a better place to work from.

In theory, if your sprite is mostly symmetric, you only need to draw 3 versions of it (0°, 45° and one in between), and derive others using mirroring. I'm not sure if there are any editors that support mirroring along a diagonal though. So you might also need one more inbetween for 45°~90°.

[AndyC]

Make them as big as you can get away with, avoid adding detail where you can.

[deanysoft]

To give myself a headstart, I use the free rotation tool on Promotion which is a PC graphics package that is the most similar in use to the old Deluxe Paint I used to use (back in the day on the Amiga). After that it's matter of tidying them up by hand. But as already mentioned you can speed yourself up by mirroring the rest and changing any 'shadowing' you might have added.

[sn3j]

Like so?

[R-Tape]

Like so?

That's the easy bit—now try and fit that into a 16 x 16 pixel grid!

[R-Tape]

In theory, if your sprite is mostly symmetric, you only need to draw 3 versions of it (0°, 45° and one in between), and derive others using mirroring. I'm not sure if there are any editors that support mirroring along a diagonal though. So you might also need one more inbetween for 45°~90°.

ZX-Paintbrush has a rotate 90 and mirror horizontal/vertical which handles this nicely (though if development ever resumed on it, user defined rotations that it would try and crowbar into pixels would be lovely).

[R-Tape]

Make them as big as you can get away with, avoid adding detail where you can.

This is the uncomfortable truth I fear. It seems round sprites with pointy bits are easiest and work best. I've found that drawing a circle with a radial line showing where the front is pointing at 0, 22.5, 45... degrees, and then sculpting around it makes things a bit easier.

[AndyC]

Yeah, if you can limit you drawing to a circle contained within your sprite boundaries, that's going to make it easier.

[sn3j]

That's the easy bit—now try and fit that into a 16 x 16 pixel grid!

This is for 45°, the 22.5° ones didn't look ok. I scaled the original from 16x16 to 512x512, did a 45° rotation, dithered to b/w and downscaled to 16x16, all in IrfanView.

[Lee Bee]

I don't feel the responses here are addressing the issue Dave raised. The issue being that it's hard to rotate 'square' sprites that fill the graphic:



In my own experience, the only options you have are:

1. Make the sprite smaller than the graphic boundaries so you have 'breathing room'
2. Shrink / "tuck in" the sprite slightly during rotation
3. Truncate slightly during rotation.
4. various combinations of 1, 2 & 3
5. Increase the sprite size of rotation frames
6. Somehow use software rotation
7. Come up with a clever way of animating the sprite during rotation so it loses its pointed edges, for example, a robot that 'changes' while spinning. Or a wizard with a flowing cloak that 'tucks in' during rotation, but fills the frame while static

Another 'tip' for rotating graphics is to always draw them at higher resolution then scale down, which gives a far more accurate rotation. This is especially true for systems with more colours than the Speccy.

[R-Tape]

I don't feel the responses here are addressing the issue Dave raised. The issue being that it's hard to rotate 'square' sprites that fill the graphic:

The square sprite thing wasn't the only thing I had in mind. I was speaking quite generally, so the replies were useful.

You've come up with a lot of great ideas there Lee. I embarrassed to say that my coder's thinking is quite siloed these days, so I didn't consider most of your suggestions. The smaller sprite (or bigger box) is a good practical solution if I wanted a square sprite. I particularly like the animations based on rotation position—maybe it could even be the basis of a gameplay mechanic.

[Nienn Heskil]

ZX-Paintbrush has a rotate 90 and mirror horizontal/vertical which handles this nicely (though if development ever resumed on it, user defined rotations that it would try and crowbar into pixels would be lovely).

Just to correct myself here (...lack of practice!!!) but yes, these are actually enough to get a 67.5' frame from a 22.5' one: do a 90' rotation, then horizontal mirroring.

[Joefish]

There is no easy answer. What you could do is start by drawing either a circle outline or solid disc within the sprite area and duplicate that 5 times; this tells you the extent of a sprite that is still able to rotate within the frame. Then you sketch details by chipping away at this item.

The first frame should be your sprite pointing in one compass direction. The fifth one should be an exact pixel reproduction but rotated 90°. The middle sprite at 45° is the next easiest to sketch. Just remember that diagonally stepped pixel lines are approximately 1 1/2 times the length of straight lines (i.e. two diagonal pixels equal three straight line pixels). Strictly it's 1.414 times, but 1.5 is a rough guide.

Next try and draw sprite number 2 at an in-between angle. 1-in-2 stepped lines are a good enough approximation of straight lines from the original.

You should be able to obtain sprite number four by rotating number 2 by 90° and then mirroring it, if your design is symmetrical.

The remaining sprites for the 16 frames are all 90° rotations or flips and mirrors of the others.

[Ralf]

I agree with others, there is no easy trick. On PC you have stuff like antialiasing, on Spectrum you have nothing.

It works better with bigger and simpler shapes but you already know it.

I remember hearing somewhere that Oliver Twins made Dizzy an egg just because of rotations. The wanted Dizzy to rotate while
falling and egg shape worked well with small sprites

[AndyC]

There is, of course, always the option of using different sized sprites for the different angles and therefore giving you more space for the angled versions without needing lots of blank space around the 90 degree frames.

The complexity of different frame sizes may, or may not, be a hindrance though. It may depend on how your engine works and how optimal the handling of transparent bytes is.

[Sol_HSA]

Here's a code solution that works eerily well: https://cohost.org/tomforsyth/post/8918 ... with-three

[R-Tape]

Here's a code solution that works eerily well: https://cohost.org/tomforsyth/post/8918 ... with-three

This is really neat. I broadly get the idea, but I'll need to put a wet flannel on my forehead to see how to apply it cleanly to spectrum pixels (I'm not a Pascal coder like in the example).

[R-Tape]

I've discovered a lot of options in ZX-Paintbrush that I didn't know about:

-Rotate points mode: allows you to freely rotate the pixels of the object drawn in one single action (e.g. an ovoid, a triangle, a sprite drawn without releasing the mouse button)

-Triangle, square, parallelogram and perhaps most useful - polygon tool. These allow you to draw the given shape and then rotate it freely.

So close to perfect! Perfect being - 'i've drawn this object, not let me freely rotate it'.

These are still very useful though.

[AndyC]

This is really neat. I broadly get the idea, but I'll need to put a wet flannel on my forehead to see how to apply it cleanly to spectrum pixels (I'm not a Pascal coder like in the example).

It's a nice way of rotating an image ( I believe two skews and a zoom also works and was how the SNES Mode 7 worked) but the end result doesn't necessarily fit into the same sized rectangle, nor is it something you'd probably want to do on the fly in Z80 - so I'm not sure it gets you closer to a solution that isn't "use a bigger sprite and centre the image inside a theoretical circle"

[Lee Bee]

Here's a code solution that works eerily well: https://cohost.org/tomforsyth/post/8918 ... with-three

That is awesome!

This is a fascinating thread. It seems like there ought to be some kind of book or "beginner's guide" for working with Spectrum graphics for games—a definitive resource for all new developers which collects together all the basic tricks, providing an overview of the options you have for stuff like sprite manipulation, drawing methods, scrolling, masking, layers, backgrounds, colour handling, frame rate, those kind of topics.

[presh]

Not much useful to add, only I share your pain having done this for the vehicles in Rival Gangs...

You've already done the important part, which is to encapsulate the sprite within a circle such that the edges never overflow the bounding box (16 x 16 in both yours and my cases) upon rotation.

In my case, I started with the basic rectangle car shape, rotated that (22.5° & 45°), then used it as a template for each design.

I ended up losing a lot of detail from the original 0° designs due to the issues you're facing. It became a case of trying to add little bits of detail to the raw template, then seeing how well they behaved once rotated. None of the final results were perfect, though the original cars I think were only 10 x 14 which didn't leave much wiggle room to add detail!

Yours looks pretty good already tbh. You may get them to rotate better, but at the expense of detail.

[Joefish]

Here's a code solution that works eerily well: https://cohost.org/tomforsyth/post/8918 ... with-three

I wan't aware of 3 shears, but I do know of combining horizontal and vertical shears with scaling to do a rotation. That didn't necessarily preserve every pixel though. That this one does is a bit spooky! I did the shears+scales one on the ST. It's good for +-45° rotation, after which you have to re-start with a 90° rotated sprite. You can't do it cumulatively though - you always have to re-start with the basic sprite.

You can use the algorithm to map a triangular image onto any other triangle, and it's how original Playstation texture-mapping worked. Since it's entirely done in 2D, it doesn't account for 3D depth or perspective, which is why PS1 textures in FPS games looked distorted when you got too close to the walls.

I guess you could apply the technique to small sprites by hand, but I'm not sure how good it will look with monochrome sprites. And any stippled shading is going to look terrible! Its also hard to do a vertical pixel shear on the Speccy.

[Sol_HSA]

I wrote an implementation of the three-shears sprite rotator. Source code at https://github.com/jarikomppa/spriterotator
Little bit more detail here: https://cohost.org/sol-hsa/post/1617419-sprite-rotator

I hope it's of some use to someone =)

[R-Tape]

I hope it's of some use to someone =)

Nice one Sol. I don't know how much work it would take, but if anyone fancies turning this into a utility for non-coders*, I'd owe them a pint!

*or perhaps rather people like me that can code z80 asm and speccy BASIC, but never took C beyond the fahrenheit to celsius converter, and then swiftly forgot even that.