How to scale images for cocos2d game to iPhone/iPad (with and without Retina)

1
votes

I'm working on a game in cocos2d (1.0.1), my artist sent me psd project files, all 3200x1800 resolution 300ppi. I'm supposed to make it for iPad and iPhone with and without Retina display. I realised I don't know nothing about graphics. What is the best way to prepare images for iPhone and iPad (both hd and sd). Should I scale it to 480x320? Should I use apps like Texture Packer? How to do it properly without any loss?

1
imagecocos2d-iphonetexturesretina-displaypacker

1 Answers

2
votes

Easiest way is to make your graphics for both the iPad Retina display and the iPhone Retina display and then use Texture Packer to scale them automagically to the non-Retina size for each type of device.

As a workflow for the iPhone this then becomes:

  1. Create you Retina graphics for the 640x960 display.

  2. Use Texture Packer to create your textures for the Retina version and then use Texture Packer to scale the Retina texture down for the lower-resolution device from there.

  3. Look at how to use the resulting images and plists in cocos2d.

In regards to #3 there are some good tutorials here:

http://www.codeandweb.com/texturepacker/tutorials/#cocos2d

Cocos2d is very good at handling all the point conversions between Retina and non-Retina versions of you game. Once you tell it to use the Retina graphics if they are available you can program your game using the standard 320x480 cocos2d point system and all the positioning will work in your bigger Retina display enabled version. (Or the 768x1024 iPad version).