So you have some art but don’t know how to properly size it for the iPad or iPhone in their 2 versions (retina and non-retina display)! Let’s learn about image sizing and how to use these images in animations for your game objects (player, enemies, power ups or simple eye candy).
Before we even get into creating animations, we need to clear up the sizing issue. Currently there are 4 screen sizes:
iPhone NonRetina = 480 x320
iPhone Retina = 960 x 640
iPad NonRetina = 1024 x 768
iPad Retina = 2048 x 1536
This means that when creating art for a game, you will go bonkers sizing images for each device. Backgrounds basically need to cover the whole screen thus they must be the above sizes. One option is to split the background into parts because some things will scroll and others won’t. We will take a look at scrolling later on.
Players & images on the other hand will have to be of a certain size. A typical player image for iPhoneNR will be ~ 1/3 x height = 106. But in the iPhoneR it must be 212. On the iPadNR it will have to be 256 and on the iPadR it will be 512 pixels high. You can get away with iPhoneR being the same size image for iPadNR. However this is not very useful when you realize we will soon need to get rid of iPadNR assets since it will be phased out. Phased out because most people switch Apple devices quite frequently. Anyway, if we don’t consider iPadNR size being phased out, you still have to come up with 3 size images:
106px high
212-256px high
512px high
The problem is that the headache doesn’t stop there. You must make those images in 2 versions, normal and -hd. There are programs that help you take an image and automatically get both -hd and non-hd versions of your image but you still have to feed it 3 different sized images. Cocos2d also helps because you can name those images:
Image.png
Image-hd.png
Image-ipad.png
Image-ipad-hd.png
and cocos2d will automatically use the right one wherever needed.
Ok so now you have your images ready. Now you have to create animations for them. This means that your outsourced graphic designer must not only create a single image for your main player, but also a few more “frames” to cover that single player’s animation. Animations can be as complex as you want them because you can animate his jumping, his running, his attacking, his just-standing there etc. If each animation requires on average 10 “frames” or images…that means you have 10 frames x 4 movement options = 40 frames. Each of them in 3 sizes and 2 resolutions. So this can get complicated pretty quick. But lets just look at how to create a simple animation.
CCAnimation and CCAnimate. These are CCActions which you can use to animate a sprite. Basically you do something like this:
CCSprite *animatingSprite = [CCSprite spriteWithFile:@”frame1.png”];
[animatingSprite setPosition:ccp(50,50)];
[self addChild:animatingSprite];
CCAnimation *spriteAnim = [CCAnimation animation];
[spriteAnim addFrameWithFilename:@”frame2.png”];
[spriteAnim addFrameWithFilename:@”frame3.png”];
[spriteAnim addFrameWithFilename:@”frame4.png”];
id spriteAnimationAction = [CCAnimate actionWithDuration:0.5f animation:spriteAnim restoreOriginalFrame:YES];
id repeatSpriteAnimation = [CCRepeatForever actionWithAction:robotAnimationAction];
[animatingSprite runAction:repeatSpriteAnimation];
What we did here is create the sprite as we always do, position it and add it to the layer. Then we created a CCAnimation and added frames to it. Finally we used CCAnimate to implement that CCAnimation we created. However we chained that action with the repeat forever action so we can clearly see the animation. Sometimes animation frames are too few and too fast to be seen after game launch.
The takeaway here is that you have to create animations for all 3 sizes mentioned above. This can get cumbersome. So TexturePacker is very handy for this particular job. It comes with an option for generating an NR or non-hd version as well as a Retina or -hd version of your images. This means you still have to come up with the different iPad and iPhone sized images. Once you name the image as:
frame1.png (which is for iPhone NR ~ 110 px high)
frame1.png (which is for iPadNR and iPhoneRet ~ 250 px high)
frame1.png (which is for iPadRET ~ 500 px high)
This way when you put your images in a Texture Altas file, you can have it generate the -hd versions automatically. Create an atlas called:
ImagesAtlas.tps
ImagesAtlas-iPad.tps
Now when you publish the plist and png files, make sure to click on the AutoSD option in TP. This will generate:
ImagesAtlas.plist/png
ImagesAtlas-hd.plist/png
ImagesAtlas-iPad.plist/png
ImagesAtlas-iPad-hd.plist/png
Now you can simply import ImagesAtlas into your Xcode project and Cocos2d v2.0 will automatically sift through your project and find the corresponding atlas according to the device its running on.
Remember you should create a texture atlas for iPad images and another for iPhone images because if you put them all in one, an iPhone user will have an unnecessarily large atlas being loaded, slowing down his game, which he will never user because he is on the iPhone.