3

I'm making a pixelated game, and I'm trying to rotate a sprite. However, I'm not achieving the sort of rotating effect I'm aiming for.

Currently, my sprite looks like this when it rotates:

Wrong

As you can see, it rotates relatively smoothly. You can see that the 'big pixels' rotate smoothly. However, this isn't the rotating effect I'm looking for. Instead, this is how I want it to rotate:

Correct However, preferably in a way that doesn't distort the pixels as much. You can see the difference. I want the actual 'big pixels' to rotate, not the 'screen pixels'.

I think the issue might lie in how I scale the pixels to become bigger. What I'm doing, is that I'm zooming the camera in, moving it closer sorta. What I instead want to do, is to render like normal, then just scale up the screen pixels. That way I'd automatically achieve the rotation effect I want. I don't know how to do that, though.

This is how I currently 'scale up the pixels':

camera = new OrthographicCamera();
camera.setToOrtho(false, 1280 / 4, 720 / 4);

The game's resolution is 1280x720, so the way I make the pixels bigger is that I just zoom in 4x times. However, what I instead want to do, is to render like normal, then just stretch the screen 4x times.

Any help on how I could do this would be greatly appreciated.

Vapid
  • 701
  • 7
  • 27

1 Answers1

4

Have a look at this post. Here is a kind of solution for your problem. Just render first to small frame buffer with nearest neighbor interpolation and then to screen. Perhaps it is not effective way, but definitely the way to achieve such behavior.

Good luck!

Metaphore
  • 749
  • 1
  • 7
  • 15
  • I know it's been years, but I'm looking for exactly this for my game. The link has rotten, is there another post about this topic? – natebot13 Sep 27 '21 at 02:39
  • As alternative, there's the rotsprite algorithm, but it's got to be CPU intensive rendering and thus quite unusable for real-time rendering of multiple objects. – Metaphore Sep 28 '21 at 04:46
  • Quick Google doesn't get me to any similar posts, but the idea is simple - you need to render the image to the "canvas" of the same pixel density as the pixelated image itself. Then if you rotate it while drawing onto it, it will preserve the original resolution. The concept itseld is well described on the web, give a quick look at this article https://link.medium.com/f8zfziQxUjb . But then the hardest part is too implement it using intermediate framebuffer, which is a bit tricky if you're doing it for the first time. – Metaphore Sep 28 '21 at 04:51