Scaling Images, getting pixealation

Rhino

I have a game and it looks decent at 1024x768. In software though, I scale everything if it's a different resolution. For most things this looks ok; but for 1 pixel wide "borders", it pixelates badly.

This is a random image I got off the internet to use as example: http://www.gap-system.org/~history/Curvepics/Circle/Circle1.gif

At 1024x768 it looks "ok". But since it's only 1 pixel wide, if I scale it to 800x600 or 1280x1024 it looks horrid.

What would I have to do to that image? I use paint.net. Is there a way to "anti-alias" it?

I tried blurring it and that looks better; but makes not clear enough and it's noticeable. One QA guys said it was all "smugdey". "You changed the pixels to smuges"

ASimPerson

Not much you can do. Unlike on CSI, you can't take a 1024x768 image, increase the resolution, and hope to have it as clear as the original. Most scaling programs try to "guess" and fill in the new pixels with something that should "look" right, but that's why it's perceived as blurry.

Jake!

I'm not entirely sure what you're trying to do, but one way of scaling without the problems you're talking about is using fractal scaling. Not cheap mind, you need photoshop, and the Genuine Fractal plug-in is $159. Without seeing what you're talking about, its difficult to know what you're trying to do. Generally, you'll get better results if you start with your higher res and downscale.

MagicToaster

I really don't understand what you're saying. It's 1024x768... but it's one pixel wide?

Raneados

also did you mean smudge

underdonk

Get one of those things they have in the movies where they can zoom in on images and it makes the pixelation go away.

UncleSporky

MagicToaster wrote: »

I really don't understand what you're saying. It's 1024x768... but it's one pixel wide?

Sounds to me like he's making a video game at 1024x768 resolution and wants to insert other graphics into it, but when scaled up they look bad.

Which is true, and there's not much you can do about it besides living with how it looks, or touching it up/redoing it in your preferred resolution.

Some programs can help "vectorize" low res art to make it react more smoothly when scaled. Adobe Illustrator is probably one of the more famous ones. This page may help:

http://www.masternewmedia.org/how_to_convert_bitmaps_into_vectors/

Bitmap to vector conversion is a difficult, highly technical and time-consuming task. There is no program or utility which can vectorize the image you have into a perfect one because the software doesn't know what you need.

This is why bitmap to vector conversion work requires dedicated time, patience and several trial and error sessions to fine tune the best procedure and workflow to adopt for your assignment.

peterdevore

Downscaling features of 1 pixel wide is almost impossible. It already is at the smallest size it can be in the picture, so there is no way to represent the same thing at a smaller scale except to blend it in with the surrounding pixels, which rarely looks good.
Upscaling shouldn't be that hard though, look into the different interpolation modes for scaling that your drawing code supports. Wikipedia has an article about it.

If your game is pixel-artsy you could better scale at whole factors, 2x, 3x etc. and put a border around it to make up the difference to the resolution.

Scaling your whole screen image to fit a resolution is a really unprofessional way of handling different resolutions though. GUI elements, like text easily become unreadable or ugly through the scaling. It's better to just draw less or more of the level and to reposition the GUI elements according to resolution. If there is just no way of making a playable game at lower resolutions, just don't support them.
A better example of what exactly you're trying to achieve would help.

flatlinegraphics

vectors. that's about the only solution. there is really no other way to change a graphic other than providing different raster graphics for different resolutions. this is especially bad for 1px things, or text. once things start getting interpolated up or down you are in for a world of hurt. blurry hurt.

if this is a game, you need to create tile-able sections and just let more or less of the level get shown per the users resolution. use embedded font files for the UI rather than rasterizing them. that will keep them sharp on any res, as (most) font files are already vector based.

Gihgehls

When you go to resize (resample) something in paint.net, instead of picking bilinear or bicubic, pick nearest neighbor and be sure to resize in whole number increments.

evilmrhenry

It sounds like you're not using a good scaling algorithm.

From left to right, using the GIMP for scaling:

None, Linear, Cubic, Sinc.
I assume paint.net has something similar. Note that except for the None version, they are all anti-aliased.