Jump to content
SubSpace Forum Network

Recommended Posts

Posted

I was reading about pixel artists on wikipedia and encountered a few interesting algorithms for upscaling pixel art (using scale2x algorithm) and rotating (which can be useful for applying on a ship set).

 

The rotating algorithm is RotSprite, which apparently outperforms the most common tools like photoshop because it's focused on pixeled graphics, you can find more info and a tool here: http://info.sonicretro.org/RotSprite

 

RotSprite

 

 

RotSprite is a sprite rotation and scaling utility developed by Xenowhirl. It outperforms most professional graphics software (such as Photoshop or Paint Shop Pro) when rotating sprites through an angle other than 90° or one of its multiples. Typically, other graphics editors will apply anti-aliasing or use a primitive nearest-neighbor method when rotating images, which produces results that are ugly or unsuitable for sprites.

 

As Xenowhirl has himself said [1], this utility has been released because "the walking and running frames in Sonic 1, 2, and 3 all need 45 degree rotated equivalents" and "making rotated versions of sprites is usually a pain in the ass, because most programs that rotate a sprite will antialias it (which blurs it and messes with the colors)". RotSprite uses a special algorithm instead which tries to preserve the original sprite's feature by "guessing" pixel patterns.

 

As an additional feature, RotSprite can also resize sprites (and it does a very good job also for this task).

 

Several major sceners found this utility very useful.

  • 5 weeks later...
Posted
all their image comparisons are aliased (which I think means nearest neighbor interpolation). I wonder how it compares to an anti-aliased rotation, such as the one employed by EZ Image Rotator. One of the requested features for shipset rotation was anti-aliasing (which makes sense since aliased versions look terrible), so I don't know if this actually produces better results.
Posted
anti-alias can make the edges of the ship look horrible as well... you get near-black all around the ship, and it messes up the graphics whenever the ship is over something.
Posted

the best algorithm for continuum would be a combination of the two, anti-alias the inner parts but alias the edges with the transparency key color (to make sure you're not mixing it with the colors that are visible).

 

I don't know how easily feasible that is however, I know rotsprite is scaling the image up to 8x with scale2x algorithm for smoother edges, then rotates it and then downscales it again, followed by some optional post processing of pixel by pixel check if they haven't gone missing. I believe the link has a link to a forum post where the author explains it somewhat.

Posted (edited)

What if you resize the original image to 100x its size with resize mode set to "nearest neighbor" (Photoshop terminology). That way the upscaled version is the same as the original, but upscaled 100x.

 

Then rotate it. Downscale it to appropriate dimensions.

 

Then you won't have the black edges. :shok:

 

EDIT: Here's a picture to illustrate. (EDIT2: FYI the background is transparent, not white; background was removed, not switched to white. Also, this is a PNG.)

http://www.hlrse.net/Qwerty/noaa_rotation.png

Edited by L.C.
Posted

Why wouldn't you? Any frequency based downsampling algorithm is going to do filtering as part of the process. That means one pixel becomes the average of a bunch of nearby pixels. So you'll get off-black.

 

Don't forget that the rotation algorithm is doing exactly the same linear interpolation process, so even if you make your very own downsampling algorithm, you'll still have the same problem unless you fundamentally change the way you're looking at the problem.

 

I'm no image expert (I'm applying my knowledge of signals and systems theory), but the ideal algorithm would:

1.) Convert the existing black (0,0,0) pixels into a true alpha channel

2.) upscale, rotate, downscale, whatever, honoring the alpha channel

3.) Do some kind of non-linear process to bring the alpha to either 0.0 or 1.0. Rounding is probably a decent candidate.

4.) Set the alpha=0.0 pixels to black (0,0,0) and discard the alpha channel.

 

This algorithm would improve the black handling, but still suffers from the fundamental flaws in approaching the problem from a frequency domain perspective (where you talk about aliasing vs. anti-aliasing).

 

EDIT: you edited while I was typing, but in your image you've got off-white instead of off-black because you switched the background.

Posted (edited)
EDIT: you edited while I was typing, but in your image you've got off-white instead of off-black because you switched the background.
The background is transparent actually (so I didn't switch but removed). It's a PNG. Edited by L.C.
Posted

...

the ideal algorithm would

...

 

So use EZ Image Rotator, then select the black with a magic wand tool and whatever tolerance you prefer, delete, and paste black.

Posted
EDIT: you edited while I was typing, but in your image you've got off-white instead of off-black because you switched the background.
The background is transparent actually (so I didn't switch but removed). It's a PNG.

But you still get semi-transparent pixels, which doesn't solve the issue. Not that you said it did, but just making it clear :shok:

Posted
EDIT: you edited while I was typing, but in your image you've got off-white instead of off-black because you switched the background.
The background is transparent actually (so I didn't switch but removed). It's a PNG.

But you still get semi-transparent pixels, which doesn't solve the issue. Not that you said it did, but just making it clear :shok:

Not enough to make it matter. You could argue that it is quite a possibility that before a black background was applied to ships.bm2 that the ships themselves were originally rendered upon a transparent surface. :excl: Just look at the edges on that Warbird!

 

The larger you resize the image to, and then the smaller you resize that image too (or rather the more distinct binary difference you make in large and small versions), the better and more accurate the quality as far as getting rid of "antialiasing." If you analyzed my image there and move it onto different background colors (and focused on the small resized warbird that has no background), either you wouldn't notice the antialiased edges, or its too minor to notice without analyzing it at maximum zoom in Photoshop, or it doesn't have any antialiasing because the binary difference is great enough to rid of the antialiasing effect.

 

I hope you understood what I just typed ^^ because I sure don't. X_x

Posted

Don't use a nearest neighbour algorithm for upscaling, use scale2x algorithm a number of times for less blockyness, like so: http://scale2x.sourceforge.net/

 

I have made an implementation of scale2x (and scale3x) if you want to test things out, but it's on my home pc and I'm at work at the moment. I'll attach it when I get home (or if you can't wait implement your own, the pixel operations are pretty easy :shok:)

Posted

Here is my code I promised, it's part of a image transform library I've been working on (it's rather slow but it does the trick faster than in batch than I can do in paint shop pro :shok:).

 

I've attached a screen so you'll know what to expect (as you can see the transparency in the shipset I used sucks).

 

I've also written it using visual studio 2010 so you'll .NET 4.0 to run the binary and vs2010 to open the solution.

 

(copying an image & ctrl+v in textbox pastes the input image btw, by lack of other way for now).

 

And now I really need some sleep zzzzzz.

ImageTransform.zip

screen_scale2x.png

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...