Support our Sponsors:

Go Back   Touch Arcade > Developer Discussion > Public Game Developers Forum

Reply
 
Thread Tools Display Modes
  #1  
Old 03-17-2013, 01:08 AM
owlie owlie is offline
Junior Member
iPhone 5, iOS 6.x
 
Join Date: Mar 2013
Location: Melbourne Australia
Posts: 3
Default Pixel art for iOS games - Best practices?

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.

[URL="http://forums.toucharcade.com/showthread.php?t=174695"]TIPS and TRICKS Graphics for Universal Apps[/URL]
[URL="http://forums.toucharcade.com/showthread.php?t=171528"]Graphics retina display - iphone 4 & 5 ?[/URL]

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.
Reply With Quote
  #2  
Old 03-17-2013, 02:38 AM
SleepNinja SleepNinja is offline
Junior Member
iPhone 4S, iOS 6.x
 
Join Date: Mar 2013
Posts: 2
Default

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.
Reply With Quote
  #3  
Old 03-17-2013, 02:52 AM
owlie owlie is offline
Junior Member
iPhone 5, iOS 6.x
 
Join Date: Mar 2013
Location: Melbourne Australia
Posts: 3
Default

Quote:
Originally Posted by SleepNinja View Post
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?
Reply With Quote
  #4  
Old 03-17-2013, 08:31 AM
deemen deemen is offline
Member
iPhone 4, iOS 6.x
 
Join Date: Mar 2013
Posts: 47
Default

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.
Reply With Quote
  #5  
Old 03-17-2013, 05:30 PM
owlie owlie is offline
Junior Member
iPhone 5, iOS 6.x
 
Join Date: Mar 2013
Location: Melbourne Australia
Posts: 3
Default

Quote:
Originally Posted by deemen View Post
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 ([URL="http://forums.toucharcade.com/showthread.php?t=174695"]TIPS and TRICKS[/URL]) 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.
Reply With Quote
  #6  
Old 03-17-2013, 08:59 PM
deemen deemen is offline
Member
iPhone 4, iOS 6.x
 
Join Date: Mar 2013
Posts: 47
Default

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.
Reply With Quote
  #7  
Old 03-18-2013, 08:40 PM
SleepNinja SleepNinja is offline
Junior Member
iPhone 4S, iOS 6.x
 
Join Date: Mar 2013
Posts: 2
Default

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.
Reply With Quote
  #8  
Old 03-18-2013, 09:10 PM
MidianGTX MidianGTX is offline
Senior Member
iPad (3rd Gen), iOS 7.x
 
Join Date: Jun 2009
Location: London, UK
Posts: 3,765
Default

Quote:
Originally Posted by deemen View Post
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.
Reply With Quote
  #9  
Old 03-19-2013, 02:38 AM
Hercule's Avatar
Hercule Hercule is offline
Senior Member
 
Join Date: Dec 2010
Posts: 240
Default

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

Last edited by Hercule; 03-19-2013 at 02:44 AM..
Reply With Quote
  #10  
Old 03-19-2013, 05:43 AM
deemen deemen is offline
Member
iPhone 4, iOS 6.x
 
Join Date: Mar 2013
Posts: 47
Default

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

Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Copyright 2012, TouchArcade.com, LLC.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2014, vBulletin Solutions, Inc.
Copyright 2008 - 2011, TouchArcade.com. Privacy Policy / DMCA Copyright Agent