How to make sprites for iOS/Android

How can I make the correct size sprites for every device (ios/android) since they are all different screen sizes? Also how to specify the positioning of the sprites in the code so that everything is in the right position on the screen? Thank you.

Hello

This is definitely an annoying problem with developing for multiple devices. There are 2 major things to consider:

Individual sprites such as characters (anything that isn’t a background or doesn’t fill the entire screen)
The best way to design these is to create them immensly large, as large as possible, then in code position and resize them based on the screen size (maybe factor in ratio), set the centre of the screen with 2 borders at the side for the main content of the game, put everything within those bounds then extend them out depending on screen resolution, that’s what the popular apps do.

Background, items that fill the entire screen
Create them huge again probably 2560x1600 is a good safe bet but higher in 4k or so would be best but depending on your hardware photoshop or any other image editing software may struggle with such big images, but have the main part of the background within the centre so your sort of having an invisible border around the edges, then crop the image for the different devices and position it is so even if some content gets cut off on the edges it doesn’t matter.

Hope that helps, feel free to email us if you need any more help at support@sonarsystems.co.uk

We also have a YouTube channel with Cocos2d-x tutorials which may be of some use, https://www.youtube.com/playlist?list=PLRtjMdoYXLf7Dr6Tp22eJoqt1Ha2k17ck

1 Like

Thanks a lot!

@SonarSystems Could you please elaborate the process for individual sprites. I am finding it difficult understanding past -|- at center of screen. Are you trying to say create quadrants or something. Please advise.

The issue with using one resolution image for all devices and scaling are:

  1. Wasting precious memory. If the OS runs low on memory, it will kill the app, making it look like the app just crashed. This is a major issue for low end devices that have limited RAM.
  2. For Tiled based games fraction scaling will be a nightmare since tiles will not align correctly and show gaps between tiles. This is an issue that I currently struggling with right now.

I personally would create three sets of spritesheets (SD, HD, 2xHD) and load only the spritesheet relevant for the device resolution, thus preserving device memory.

@rram
Exactly spot on, create assets for the different densities/resolutions.

Basically with backgrounds design them big but have the main contents in the center, aka if there is a house in a forest, house would be in the middle with the trees surrounding it, so on certain devices just more trees will be visible, it will not seem like something important is missing.

Individual assets should be sized so they fit within the main part of the background, we will have a separate tutorial series on our YouTube channel to tackle multi devices aka iOS and Android design issues, we will cover how to code it and use only about 3 different sized assets to accommodate all devices, this tutorial series won’t be out for a while as we are concentrating on V3 ATM. But feel free to message us.

Hope this helps.

You definitely want to use different assets for different devices.

My approach, since my public is mainly on iOS, is to use 3 resolutions (works well with all Android devices I could test except a few low-res ones so far) :

  • ipadhd : 2048x1536, for devices above 1280x800
  • ipad : 1024x768 (50% of ipadhd), for devices above 640x470
  • iphone : ~426x320 (42% of ipad), for the other devices

Design everything at the ipadhd size, then use a script to generate the other images (script is not perfect, you’ll have to manually retouch some images, but it works in 99% of the cases). I chose to not worry about density so far, I found this approach good enough.

For tiles, you need to first export the source images in all resolutions, then generate the spriteframe for each resolution. Zwoptex allow to do that quite fast.

Notice something else : the ratio is 4/3 : there is no device more “square” than this. This means you only have to worry about scaling in width because first you do a global scale to fill the height, then you have a bit more width, depending on the screen ratio.

A good approach is to anchor your interface in a CCnode on the sides of your screen (top and bottom may need additional rescaling). Then you are left with the center of the screen for your game viewport, which shouldn’t have much trouble with more/less size (you just show more of the game if you have more space).

Hope this helps.

thanks , @Fradow , could you give me the script to do generate the other images, and how to deal with fixed positions on the android devices.

I use an automator script (which have hardcoded paths), so I can’t easily give it. The script consists of those steps:

  • Get Finder items (you put your images there)
  • Copy Finder items (you put your ipadhd folder)
  • Copy Finder items (you put your ipad folder)
  • Rescale images at 50%
     - Copy Finder items (you put your iphone folder)
     - Rescale images at 42%

You can easily customize if you choose different sizes.

What do you mean by fixed positions? I almost always use percentages so that everything scales nicely. If you want to have nodes stay together, put them inside the same node.