Sprite rotated in 16 positions
Sprite rotated in 16 positions
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.
-
- Microbot
- Posts: 134
- Joined: Tue Jun 09, 2020 6:14 am
- Contact:
Re: Sprite rotated in 16 positions
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°.
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°.
Re: Sprite rotated in 16 positions
Make them as big as you can get away with, avoid adding detail where you can.
Re: Sprite rotated in 16 positions
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.
Re: Sprite rotated in 16 positions
POKE 23614,10: STOP 1..0 hold, SS/m/n colors, b/spc toggle
Re: Sprite rotated in 16 positions
That's the easy bit—now try and fit that into a 16 x 16 pixel grid!
Re: Sprite rotated in 16 positions
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).Nienn Heskil wrote: ↑Sat Mar 04, 2023 11:38 am 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°.
Re: Sprite rotated in 16 positions
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.
Re: Sprite rotated in 16 positions
Yeah, if you can limit you drawing to a circle contained within your sprite boundaries, that's going to make it easier.
Re: Sprite rotated in 16 positions
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.
POKE 23614,10: STOP 1..0 hold, SS/m/n colors, b/spc toggle
- Lee Bee
- Dynamite Dan
- Posts: 1359
- Joined: Sat Nov 16, 2019 11:01 pm
- Location: Devon, England
- Contact:
Re: Sprite rotated in 16 positions
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:
In my own experience, the only options you have are:
- Make the sprite smaller than the graphic boundaries so you have 'breathing room'
- Shrink / "tuck in" the sprite slightly during rotation
- Truncate slightly during rotation.
- various combinations of 1, 2 & 3
- Increase the sprite size of rotation frames
- Somehow use software rotation
- 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
Re: Sprite rotated in 16 positions
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.
-
- Microbot
- Posts: 134
- Joined: Tue Jun 09, 2020 6:14 am
- Contact:
Re: Sprite rotated in 16 positions
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.
Re: Sprite rotated in 16 positions
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.
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.
Re: Sprite rotated in 16 positions
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
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
Re: Sprite rotated in 16 positions
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.
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.
Re: Sprite rotated in 16 positions
Here's a code solution that works eerily well: https://cohost.org/tomforsyth/post/8918 ... with-three
http://iki.fi/sol - my schtuphh
https://github.com/jarikomppa/speccy/ - 48k speccy dev
https://github.com/jarikomppa/specnext/ - specnext dev
https://github.com/jarikomppa/speccy/ - 48k speccy dev
https://github.com/jarikomppa/specnext/ - specnext dev
Re: Sprite rotated in 16 positions
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).Sol_HSA wrote: ↑Tue Mar 07, 2023 6:43 pm Here's a code solution that works eerily well: https://cohost.org/tomforsyth/post/8918 ... with-three
Re: Sprite rotated in 16 positions
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.
-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.
Re: Sprite rotated in 16 positions
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
- Dynamite Dan
- Posts: 1359
- Joined: Sat Nov 16, 2019 11:01 pm
- Location: Devon, England
- Contact:
Re: Sprite rotated in 16 positions
That is awesome!Sol_HSA wrote: ↑Tue Mar 07, 2023 6:43 pm Here's a code solution that works eerily well: https://cohost.org/tomforsyth/post/8918 ... with-three
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.
Re: Sprite rotated in 16 positions
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.
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.
Re: Sprite rotated in 16 positions
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.Sol_HSA wrote: ↑Tue Mar 07, 2023 6:43 pm Here's a code solution that works eerily well: https://cohost.org/tomforsyth/post/8918 ... with-three
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.
Re: Sprite rotated in 16 positions
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 =)
Little bit more detail here: https://cohost.org/sol-hsa/post/1617419-sprite-rotator
I hope it's of some use to someone =)
http://iki.fi/sol - my schtuphh
https://github.com/jarikomppa/speccy/ - 48k speccy dev
https://github.com/jarikomppa/specnext/ - specnext dev
https://github.com/jarikomppa/speccy/ - 48k speccy dev
https://github.com/jarikomppa/specnext/ - specnext dev
Re: Sprite rotated in 16 positions
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.