Is there a way to eliminate antialiasing in low-resolution games?

jacob@narrativemachine.com

I am in the process of developing several 8 or 16 bit style games with GameSalad. One of my biggest visual challenges is that the low resolution graphics come out very blurry. Does anyone have any ideas or pointers when developing such a game?

Thanks for your time!

Socks

Make your graphics how you want them to look at the size they will be used - so there is no need for them to be scaled.

RP

Make your graphics how you want them to look at the size they will be used - so there is no need for them to be scaled.

So then you think I should upscale in Photoshop using the setting caiokawasaki suggested?

Thanks to both of you for such a quick response.

• hijacks the inquiry to @Socks. Bwahahahaha!

What that does is prevent Anti-aliasing, but if your original image is using vectors, or hard lines rather than soft sfot/rounded lines, there is no need too. Also, depending on the scale of the image and you are not blowing it up too big (from a small scale), there really is not need to do this. The anti-alaiting will keep your image smooth and clean looking, however if you intention is to have a pixelated, retro look with hard edges... use it (if you are using photoshop, it may also be an option in the brush/shape/line pull-down selection in various apps).

MarkOnTheIron

I did some experiments with pixel art and various resolution and for the iPhone (but for the iPad the method is also similar) what I discovered is:

1. Design your graphic for a 480x320 pixels resolution
2. In Photoshop resize it using the "Nearest neighbour" algorithm to 960x640 pixels
3. Create your game by placing the actors in whole X and Y positions (ie. 132 and not 132.345)
4. DON'T check the resolution independence option
5. Publish your game

Why I do it like this:

1. and 2. if you design your art in a 960x640 canvas you will have to paint a square of 4 pixels to have 1 single pixel in a low res device and with this you will risk to place them in the wrong position and they will look blurry when viewed on a low res device.
3. Maybe things have changed by now, but some time ago there was a theory that placing actors in whole positions will avoid blurry images.
4. This is a publishing server problem. When you publish with the RI checked the GS servers will automatically create low res images for you, however they always use the bicubic algorithm that is really really bad for pixel art. This could be avoided if GS would give us the ability to add our own low res images, but in the meantime DON'T check the RI option if you're working with pixel art.

caiokawasaki

I am in the process of developing several 8 or 16 bit style games with GameSalad. One of my biggest visual challenges is that the low resolution graphics come out very blurry. Does anyone have any ideas or pointers when developing such a game?

Thanks for your time!

try this if you use photoshop: Photoshop->Preferences->General

Then change this:

jacob@narrativemachine.com

Make your graphics how you want them to look at the size they will be used - so there is no need for them to be scaled.

So then you think I should upscale in Photoshop using the setting caiokawasaki suggested?

Thanks to both of you for such a quick response.

Socks

What that does is prevent Anti-aliasing . . .

Technically speaking it (caiokawasaki's recommended setting) prevents interpolation (rather than anti-aliasing).

[/pedantry]

Socks

So then you think I should upscale in Photoshop using the setting caiokawasaki suggested?

Yes, but one thing to bear in mind:

When scaling up using 'nearest-neighbour' you would, ideally, want to be scaling up to a multiple of your original (i.e: 100 to 300 . . . or 250 to 500 . . . or 250 to 750 . . . etc).

If you upscale to a non-divisible pixel count Photoshop will have to put in (or leave out) pixels that were not in your original image.

Hope that makes sense.

RP

What that does is prevent Anti-aliasing . . .

Technically speaking it (caiokawasaki's recommended setting) prevents interpolation (rather than anti-aliasing).

[/pedantry]

Yeah, yeah.. such a stickler...

:P

Socks

Yeah, yeah.. such a stickler...

:P

=P~

gyroscope

And mainly, as @Socks said, make your graphics/images at the maximum size they'll be used in your game... in other words never upscale as you will always lose quality, no matter what setting you choose, in Photoshop, for instance; (and definitely if you upscale beyond max. size in GSC). If you stick to that rule, you shouldn't have a problem.

Although having said that, there are programs that use a special set of algorithms to obtain almost perfect images when enlarged, but these tend to be expensive... here's a couple I found with a quick search:

http://www.macupdate.com/app/mac/13283/photozoom-pro

a free one (but don't know how good it is): http://www.macupdate.com/app/mac/31807/smillaenlarger

etc.,

Anyhow, if you're using vectors, you can easily save it to the exact max. size you'll use so you won't need these anyhow...

caiokawasaki

Here is my deal: Create the art in photoshop without antialias in the editor, then save in .PNG format, if you will try to resize you have a great chance of occurring antialias or any pixels bug or something like that. So, if you want to have a good graphic, make it at the size you will want to use! Don't resize! Seriously, I play with pixel art for a long time ...