Why do my sprites look terrible when they are rotated?

kronotic

Member
I am making a game in Game Maker 8 where an ant follows your mouse and so it also rotates to wherever your mouse is. The sprite image starts pixelating and looks horrendous when it is moving in a diagonal direction.
It looks fine when the ant moves straight up, down, left or right:
1.png
but any other direction and it looks like this:
3.png
This doesn't make any sense to me.
Is this fixable?
 

FrostyCat

Member
Drawing raster graphics at any non-right angle results in that kind of degradation. That's just the nature of the beast, and it makes sense to anyone who understands that a computer screen is a rectangular grid of discrete pixels, not a continuous environment.
 

kronotic

Member
Drawing raster graphics at any non-right angle results in that kind of degradation. That's just the nature of the beast, and it makes sense to anyone who understands that a computer screen is a rectangular grid of discrete pixels, not a continuous environment.
Then why am I able to rotate the exact same image in Photoshop in all directions just fine without any degradation..? According to you that would be impossible.
 

FrostyCat

Member
FYI this happens to every sprite image I use, not just specifically that one.
All sprites in GM8 are raster graphics. The ant is not an exception.

Then why am I able to rotate the exact same image in photoshop in all directions just fine without any degradation..? According to you that would be impossible.
Photoshop can store the angle separately at the data level to give the illusion of perfect rotations, but once it gets drawn to the screen there will be degradation of some sort. Pixel interpolation, anti-aliasing and specialized raster rotation algorithms can be used to help make the degradation less obvious, but it's still going to be there. And the prettier the algorithm, the slower it generally becomes and thus less suitable for use in games.

The world of computer graphics is a discrete-value environment. Stop thinking in terms of perfection in a world where approximations are the norm.
 

kronotic

Member
All sprites in GM8 are raster graphics. The ant is not an exception.


Photoshop can store the angle separately at the data level to give the illusion of perfect rotations, but once it gets drawn to the screen there will be degradation of some sort. Pixel interpolation, anti-aliasing and specialized raster rotation algorithms can be used to help make the degradation less obvious, but it's still going to be there. And the prettier the algorithm, the slower it generally becomes and thus less suitable for use in games.

The world of computer graphics is a discrete-value environment. Stop thinking in terms of perfection in a world where approximations are the norm.
Alright. So how do I give the illusion of a perfect rotation in Game Maker? Or at least make it a bit better then the ugly state the sprite is in right now?
 

FrostyCat

Member
Alright. So how do I give the illusion of a perfect rotation in Game Maker? Or at least make it a bit better then the ugly state the sprite is in right now?
Rotations at non-right angles are NEVER perfect in raster graphics. Stop looking for perfection, and start looking for mitigation.

With something as old as GM8, you don't have many options. Here are the 2 primary ones for that timeframe:
  • Option 1: Go to Global Game Settings > Graphics and check "Interpolate colors between pixels".
  • Option 2: Add rotated versions of the image as additional frames for the sprite (with Animation > Rotation Sequence > Counter-clockwise in the built-in sprite editor or the equivalent in another image editor of your choice), then draw the closest frame at runtime.
 

kronotic

Member
Rotations at non-right angles are NEVER perfect in raster graphics. Stop looking for perfection, and start looking for mitigation.

With something as old as GM8, you don't have many options. Here are the 2 primary ones for that timeframe:
  • Option 1: Go to Global Game Settings > Graphics and check "Interpolate colors between pixels".
  • Option 2: Add rotated versions of the image as additional frames for the sprite (with Animation > Rotation Sequence > Counter-clockwise in the built-in sprite editor or the equivalent in another image editor of your choice), then draw the closest frame at runtime.
Thank you for your help! I will mess around with this a bit, see if it helps. I guess I could also create 360 images for every possible direction. That actually would make it perfect, but an insane amount of work lol.
 

FrostyCat

Member
Thank you for your help! I will mess around with this a bit, see if it helps. I guess I could also create 360 images for every possible direction. That actually would make it perfect, but an insane amount of work lol.
In actual practice, you wouldn't create 360 images, especially if that image is large or you have lots of images. That kind of solution is worse than the problem. Instead you would create only about 20-30 frames (sometimes even fewer), then round towards the closest frame.

Again, you need to stop thinking in terms of perfection, and start thinking in terms of mitigation.
 

Jase217

Member
The best solution for this I've found is, scale up the application surface two or three times, that way there are double or triple the amount of pixels that can be used and so the degradation will be alot less obvious.

Scale up.png

Depending on how you set up your views or cameras you may want to do it differently, but the most basic way you can scale up the surface is doing something like

GML:
var _newWidth = surface_get_width(application_surface) * x;
var _newHeight = surface_get_height(application_surface) * x;

surface_resize(application_surface,_newWidth,_newHeight);

// x = how many times to scale up
I'm not sure if the application surface is something you can play around with in GM8, but I think another way you can do it is by upscaling your view ports
 
Last edited:
Top