Pixel art for iOS games - Best practices?

Discussion in 'Public Game Developers Forum' started by lukasinspace, Mar 17, 2013.

  1. lukasinspace

    lukasinspace Member

    Mar 17, 2013
    12
    0
    0
    Melbourne Australia
    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.
     
  2. SleepNinja

    SleepNinja New Member

    Mar 17, 2013
    2
    0
    0
    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. :)
     
  3. lukasinspace

    lukasinspace Member

    Mar 17, 2013
    12
    0
    0
    Melbourne Australia
    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?
     
  4. deemen

    deemen Well-Known Member

    Mar 16, 2013
    50
    0
    0
    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.
     
  5. lukasinspace

    lukasinspace Member

    Mar 17, 2013
    12
    0
    0
    Melbourne Australia
    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.
     
  6. deemen

    deemen Well-Known Member

    Mar 16, 2013
    50
    0
    0
    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.
     
  7. SleepNinja

    SleepNinja New Member

    Mar 17, 2013
    2
    0
    0
    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.
     
  8. MidianGTX

    MidianGTX Well-Known Member

    Jun 16, 2009
    3,738
    10
    38
    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.
     
  9. Hercule

    Hercule Well-Known Member

    Dec 16, 2010
    240
    0
    0
    #9 Hercule, Mar 19, 2013
    Last edited: Mar 19, 2013
    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
     
  10. deemen

    deemen Well-Known Member

    Mar 16, 2013
    50
    0
    0
    Hadn't thought of the movement problem. That's definitely a valid concern.
     
  11. LucaRedwood

    LucaRedwood Active Member
    Patreon Indie

    Mar 14, 2011
    40
    0
    0
    To avoid (or at least, greatly reduce) the jittering for point filtered images in unity you can just round out the position to lie on the pixel grid
     

Share This Page