Cocos2d Tips: Animations and image sizing

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:





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:



Now when you publish the plist and png files, make sure to click on the AutoSD option in TP.  This will generate:





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.

Cocos2d Tips: How to design a game coding strategy

Cocos2d Game Coding Tips by Marcio Valenzuela
Cocos2d Game Coding Tips by Marcio Valenzuela

Know you know quite a bit, enough to make a game. Do you know how and where to start? Let’s look at how to start coding your action layer, what code to put in what methods and how to keep your update method clean and tidy.

When I started coding, and unfortunately most of my current projects are still coded that way, I simply opened up Xcode and started coding.  iOS apps are a bit better because you can use the “hooks” methods they come with such as viewDidLoad and cellForRowAtIndexPath etc.  Games are a bit more confusing because you are given an empty slate.  At least in Cocos2d you pretty much just get an init method.

It’s important to keep your code clean and orderly.  This is hard to do if you start coding without a design blueprint in mind and even then it can get messy.  You get what is called spaghetti code, which is just a big jumble of code.  So here is a very quick and simple tip.

I normally start out by making a paper and pen sketch of the layout.  If you have read some previous posts or looked into my course at, you will have seen I start my apps with a hand drawn layout.  I don’t use digital tools for that because you can’t beat the sketch-erase flexibility of a good old fashioned scratchpad.

Anyway, here is the tip…once I have your layout and know that names of my classes, I use comments to place ideas.  IOW, I open up my mainActionLayer or actionLayer or whatever the layer name is, and I start entering lines of code like:

//Call Create my main player

//Call Make player move

//Call Enter first enemy

//IF time = x then Call Create Powerup

Notice for example I didn’t say, IF time…create power up, I said Call create…because this way I can outsource these things to individual methods.  This may be very obvious but when you get to coding a game, or app, your idea is fresh in your head and you don’t want Strategic Planning to slow you down.  This results in spaghetti code most of the time.  What you want is to get your ideas down “on paper” first.  Then worry about making those ideas happen.  The reason is that you get caught up in figuring out HOW to Call Make player move.  Most of the times you don’t know how to do something right off the bat or you get caught up in something silly like declaring ivars vs properties or you can’t recall the exact name of the method signature you had in mind to do something.  By the time you get it right, you’ve lost track of what you were doing.

So this is what I do; I take all my idea comments and put them in the init method.  Then I start creating the respective empty methods to carry out each step.  For example:


//Get image (from atlas or file) (from own subclass)

//Add to layer (or batch node)

//Position and call player initialization methods


This way I can see what needs to be done inside my layer and what I can do in another method or subclass.  Ie, in this case I may end up calling my player from its own subclass instead of just saying CCSprite *myPlayer.  This also helps me leave out specifics that belong in that subclass so that I don’t clutter up my init method or layer class with object specific code.  IOW, I wrote I needed to position my object and call its player initialization methods.  This means those methods to do initialization stuff for that object must reside outside of my layer, ergo, the object subclass methods.

I think this is a good tactic to creating games because believe it or not they will get more complex, even if you don’t intend them to.  That will make your code unreadable in the future and with API changes or new ideas, your code will be very easy to modify.

How to Read iOS or Mac OS Programming Documentation

The toughest part for me to get started was reading the Apple Documentation on iOS or MacOS. When I got into more APIs it got more complex. You need to understand how to read API or proprietary code documents in order to understand how to create a piece of code, connect to web services or debug changes in code.

You will very often see the term DEPRECATED, which means a particular method name is no longer used. This is very important so let’s take a look at Apple Docs first:

NSArray Class Reference
Santiapps. Marcio Valenzuela. Learn to program for iOS or MacOS

This tells us that the object of type NSArray has many methods that you can call on it. They may be Instance or Class methods but they are all listed here. If you want to know what an object can do, you ask it for its type and come to the Class Reference site.

Notice there are many tasks you can call on an NSArray:

5. NSArray Class Reference
Santiapps. Marcio Valenzuela. Learn to program for iOS or MacOS. Understand how to read NSArray Class Reference.

Notice the task with red text next to it that reads “Deprecated in…”. Like I said it says it was deprecated after a certain version of the OS. Now let’s suppose we want to know about a particular method we can use on this type of object, let’s look at initWithObjects, it only sounds natural that if we want to create an array, we would like to put objects in it:

6. NSArray Example
Santiapps. Marcio Valenzuela. Learn to program for iOS or MacOS. Understand how to read NSArray Class Reference.

This means that if you call our standard way of creating any object:

Object Class *objectPointer = Object Class alloc …

and then we insert that method signature -(id)initWithObjects:(id)firstObject…

we get this:

Object Class *objectPointer = Object Class alloc -(id)initWithObjects:(id)firstObject

we can start putting objects into our array object. Now let’s look at the correctly formatted code:

NSArray *myArray = [[NSArray alloc] initWithObjects:@”hi”, @”bye”, nil];

Notice we took out the -(id) at the beginning of the method signature because this forcibly has to return an NSArray object. And the reason we can add this method signature to the NSArray *myArray creation line is because we know that NSArray contains that method signature inside its Class file. We can make sure of this by using the Jump To Definition in Xcode!

Let’s do so for an example I just ran across. I had been working on a game using Cocos2d. This means I was using an API or library or third party code framework. These terms are usually interchangeable but they basically mean the same. When somebody or some company works on a bunch of code that helps you perform certain tasks. For example, Cocos2d creators worked on many Classes to create Cocos2d. One such class is CCAnimation which takes in frames and strings them together to create an animation. They recently released v.2.0 and this particular class changed some of its method signatures to include improvements I guess.

If I open my code in Xcode and try to run my old code, it crashes saying “Unrecognized Selector sent to instance”.

1. XCode Console debugging
Santiapps. Marcio Valenzuela. Learn to program for iOS or MacOS. Understand how to read NSArray Class Reference.

This means that instance of CCAnimation doesn’t recognize that old method or selector. Presumbale because they changed the old name to accommodate new structural changes. So I right click over the CCAnimation call in my code where the app crashed:

CCAnimation Definition
Santiapps. Marcio Valenzuela. Learn to program for iOS or MacOS. Understand how to read NSArray Class Reference.

And when I Jump To Definition I will be taken to that Class Reference for that Class:

3. CCAnimation Definition
Santiapps. Marcio Valenzuela. Learn to program for iOS or MacOS. Understand how to read NSArray Class Reference.

This gives me the Class Reference for CCAnimation, the one being used in my project, and tells me which methods the Class now implements. Now I just find the method which more closely matches my needs.

It’s important to learn how to go from a crash to the documentation which can help you fix that crash.