Is there a way to rotate like Photoshop?

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By mateusak
:warning: Old Version Published before Godot 3 was released.

I mean when you rotate a pixel art in photoshop it just changes pixel locations but not pixel rotations.

I don’t understand what you mean.
Isn’t the rotation parameter doing the job?

Zylann | 2016-08-26 18:44

Exactly as yonni stated. Is there another solution like a shader?

mateusak | 2016-08-26 20:17

:bust_in_silhouette: Reply From: yonni

I guess your problem is coming from the fact that the pixel dimensions of your sprite images is not the same as they’re appearing on screen.

Imagine you have an image that’s just a single red pixel. Just a red square. If you opened that image in photoshop/gimp/whatever and rotated it, the size of the image hasn’t changed and you’d still have a red square, exactly as you started with. Simply put, there’s no space for anything to change because it’s only 1x1 pixels.

Now, if you made a sprite node in Godot and applied this image to it, then you’d want to make it render as more than one pixel (otherwise you’d not be able to see it). In fact, on different screen resolutions any sprite is going to take up a different number of physical pixels on screen and the image is scaled to compensate.
Now tell Godot to rotate that sprite by 45 degrees, say. You’re going to end up with a diamond shape on screen because Godot has taken your single-pixel image, enlarged it so it can be rendered, then rotated that enlarged version. Unlike in photoshop/gimp, it’s got all of the screen pixels to work with (photoshop/gimp can only work within the pixel dimensions of the image).
The result: your single-pixel sprite image becomes a diamond and looks like you’ve got a rotated single-pixel.

If I understand it, this is what’s happening that you don’t like.

If you want the classic pixel-art look, there are at least two ways to fix it:

  • Pre-rotate your sprites. Use photoshop or similar to create rotated versions of your sprites at enough angles and then swap these images in instead of using Godot’s rotate function. This is more work for you right now, but it does allow you to have exact control over the art that will appear on screen. Think about it as you’re forcing the above procedure to happen the other way round: rotate the image before Godot expands it to cover more pixels.
  • Force your game to run at a certain set of resolutions that matches your pixel art. This means telling Godot’s renderer to only produce images on screen at a certain resolution. If this matches the resolution of your pixel art then, just like in photoshop, Godot’s rotation function won’t have enough space to make it look like the pixels have rotated.

I hope that this makes sense and I haven’t totally misunderstood your problem. If it were me, I’d go with the first option, but only once most of the rest of the game is done. Producing rotated sprites for everything at 4 or 8 angles is a pain and you don’t want to re-do it every time you change how things look. Make sure your sprites are at their final version before you spend the time on it. I’d shy away from the second option because most games will want at least some things to be displayed at nice high native resolutions (typically UI, text, fancy shaders), even if their art has a pixel-art aesthetic.