Pixel art for iOS games - Best practices?

[owlie]

Hello I am looking for some help to get my head around best practice for creating pixel art for an iPhone + iPad game.

I want to make the sprites and scrolling background art for my game as pixel art, mainly because I want to recreate the visual style of an old-style arcade game. Plus I like working with pixel art.

Ive read some very helpful threads on this forum (links below) but I still have some questions.

TIPS and TRICKS Graphics for Universal Apps
Graphics retina display - iphone 4 & 5 ?

Because I am working with pixel art, scaling is not a simple thing. Pixel artwork created in Photoshop loses it's original appearance when scaled up or down.. Ideally I would like to be able to create one set of artwork that can be used across all iOS devices: iPhone 3, 4, 5 and iPad as well. (I dont know if this is possible).

I DO understand that certain assets like splash screens, that consist of a single static image, need to be specific sizes for each device.. I get that. I am talking about the in-game artwork: sprites and background tiles.


If I was to create my pixel artwork at 640 x 960px, will that appear stretched or odd on an iPad?

One thing I noticed that is kind of relevant is that arcade games I play on my iPhone5 using a MAME emulator look awesome! And their artwork was designed at a resolution of 320 x 240 px or something (in the case of Metal Slug). So.. I'm thinking if they are utilizing graphics made to that size, which look great when scaled to play on an iPhone5 or iPad, then maybe I should be making my artwork to those dimensions?

Thanks for any help.

[SleepNinja]

It depends on how big you want each pixel to be. I prefer to work with true pixels. So one pixel is one pixel and then size up from there. So I usually start with something around 320 wide. Sizing up is much better at figuring out pixel differences. But only scale by percentages, like 200% 2x2 pixel sizes, 300% 3x3, ect. As far as blurryness goes it's probably because you aliasing setting is on bicubic. Under preferences in photoshop you can change it. Nearest neighbor keeps it nice and crisp and doesn't do any alaising.

Hope that helps.

[owlie]

Originally Posted by SleepNinja

It depends on how big you want each pixel to be. I prefer to work with true pixels. So one pixel is one pixel and then size up from there. So I usually start with something around 320 wide. Sizing up is much better at figuring out pixel differences. But only scale by percentages, like 200% 2x2 pixel sizes, 300% 3x3, ect. As far as blurryness goes it's probably because you aliasing setting is on bicubic. Under preferences in photoshop you can change it. Nearest neighbor keeps it nice and crisp and doesn't do any alaising.

Hope that helps.

Actually that's a HUGE help! I didn't realize it was that possible to scale up and down like that. You're right I always had the 'bicubic' setting on in 'Image size'. And it works both ways. That makes it so simple for me to create my artwork working with true pixels, like you say, then size it up if need be for larger screens.

Thanks SleepNinja

How about creating background artwork. What size do you make your backgrounds? 640 x 960px?

[deemen]

You can get the phone to do this resizing for you instead of doing it in photoshop and exporting large image files. Work in true pixels in photoshop then when you render the sprite set the MaxFilter to Point (this is what the setting is in directX I imagine it's the same or close for OpenGL). The phone will do the same nearest neighbor resizing and save you a ton on file size.

[owlie]

Originally Posted by deemen

You can get the phone to do this resizing for you instead of doing it in photoshop and exporting large image files. Work in true pixels in photoshop then when you render the sprite set the MaxFilter to Point (this is what the setting is in directX I imagine it's the same or close for OpenGL). The phone will do the same nearest neighbor resizing and save you a ton on file size.

Really? So your advice would be just to make one set of graphics at the smallest size then let the device scale the sprites and tiles up if larger sizes are needed? I thought it was a bad idea to allow the device to do the scaling because it can slow it down or cause it to crash?

The OP of this thread (TIPS and TRICKS) mentions that initially he let the device scale his images, but eventually had to bite the bullet and make separate graphics for different devices because the in-game scaling was causing crashes.

At this stage I am thinking of working in true pixels at a size of 320 x 480 (half 640 x 960). Tiles will be either 16 x 16 px or 32 x 32px (haven't decided 100% yet - need to experiment), and sprites will be sized to fit that scale.

Then i can scale the artwork up 200% for 640 x 960 and I think that will give me the kind of pixel art look I want...

But yeah I need to do alot of experimenting to see how it looks.

[deemen]

I looked over it quickly but it seems like his crashes were because of using too much memory. Having big images (upscaled in photoshop) will take more memory. If you use OpenGL to render your images, you should be able to upscale them easily and keep the pixelated look.

[SleepNinja]

Depending on what engine you're using that works. However point filtering has it's issues because it doesn't do any aliasing on sprites. Which can make movement cause Jittering issues. I use unity so thats an issue with point filtering.

[MidianGTX]

Originally Posted by deemen

You can get the phone to do this resizing for you instead of doing it in photoshop and exporting large image files. Work in true pixels in photoshop then when you render the sprite set the MaxFilter to Point (this is what the setting is in directX I imagine it's the same or close for OpenGL). The phone will do the same nearest neighbor resizing and save you a ton on file size.

Does this still give a slightly burred result on retina displays or has that been fixed? I recall games like Forget Me Not looking perfectly crisp on non-retina and then being blurred on my iPod Touch 4G, despite being made entirely with pixel art.

[Hercule]

If you don't use bilinear texture, you will have a bad visual effect when you move object (or you can move pixel by pixel to avoid the need of subpixel).

PS: sorry I didn't saw SleepNinja message

[deemen]

Hadn't thought of the movement problem. That's definitely a valid concern.