Cocos2D Tutorial for iOS: How To Create A Mole Whacking Game: Part 1/2

Whack this Mole!

Whack this Mole!

One of the students in the iOS Programming 101 workshop that Shawn Grimes and I recently offered requested that I write a Cocos2D tutorial on how to write a mole whacking game.

I thought this was a great idea for a Cocos2D tutorial for three reasons:

1. We’ve had a lot of Cocos2D tutorials on this site, but it might be hard to see how to combine everything together to make a game. So this Cocos2D tutorial does exactly that!
2. It will be a good opportunity to cover a new topic: how to make a game that works on the iPhone, iPad, and iPhone retina display.
3. And of course the most important reason – whacking moles is fun!

This Cocos2D tutorial builds on the following Cocos2D tutorials:

• How to Make a Simple Game with Cocos2D,
• How to Use Animations and Sprite Sheets in Cocos2D
• How to Create and Optimize Sprite Sheets in Cocos2D with Texture Packer and Pixel Formats
• How to Drag and Drop Sprites with Cocos2D

If you have not reviewed these Cocos2D tutorials already (or have similar knowledge), I recommend you go through them first.

This is a two-part Cocos2D tutorial series. In this first part, we’ll create the basics of the game – cute little moles popping out of holes. We’ll spend a lot of time thinking about how to organize the art and coordinates so that the game looks good on the iPhone, iPad, and Retina display – and be efficient too! (Jump to the second part.)

Planning the Art: Overview

Since we want this app to work on both the normal iPhone, retina-display iPhone, and the iPad, we need to take some time to carefully plan out how the art is going to be set up before we proceed any further.

In order to understand how to propery size and set up the art, we need to cover three topics first:

• Retina Display and UIKit
• Retina Display and Cocos2D
• iPad, iPhone, and Aspect Ratios

So let’s get started!

Retina Display and UIKit

The difference between a normal iPhone and a retina-display iPhone is the Retina display can show double the pixels. So (in landscape) instead of the display size being 480×320 px as it is on a normal iPhone, it’s 960×640 px on a Retina display.

“But wait a minute”, you may think, “wouldn’t doubling the number of pixels break all of the apps that were written assuming the 480×320 display size?” It would have (especially since when you’re programming with UIKit it’s common to hard-code frame sizes etc), except when you specify frame sizes in UIKit, you’re actually setting the sizes in points, not pixels.

On a normal iPhone, a point is defined to be exactly one pixel. But on a retina-display iPhone, a point is defined to be two pixels. So when you specify a location as (10,10) in points, it will be (10,10) on a normal iPhone, and (20,20) on a retina-display iPhone, so will appear to be at the same relative offset. Cool, eh?

When you’re using Apple’s controls or Core Graphics, Apple has already written the code to make things look nice and crisp on the Retina display.

The only trick comes into play when you use an image. Say you have a 200×200 image in an iPhone app. If you don’t do anything, on the Retina display it will just scale the image to be 2x larger – which won’t look that great because you aren’t taking advantage of the extra resolution available to you.

So what you need to do is provide another version for all of your images: a normal version, and one that is double the size. If you name your image with double the size with an “@2x” extension, whenever you try to load an image with [UIImage imageNamed:…] or similar APIs, it will automatically load the @2x image instead on the Retina display.

So making a UIKit app use the Retina display is pretty easy – just add @2X images and you’re done for the most part.

But what about Cocos2D?

Retina Display and Cocos2D

Well, there’s good news – the latest version of Cocos2D contains full support for the retina display, and makes it as easy as 1-2-3!

1. Call enableRetinaDisplay on CCDirector to enable retina display support when your app starts up. If you’re using the Cocos2D project templates, you can just uncomment the lines that do this in your app delegate.
2. Add double-sized sprites to your app, but instead of using the “@2x” extension, you use an “-hd” extension for Cocos2D. When loading your sprites, use hte normal name (without the “-hd” extension) – Cocos2D will automatically load the hd images on the Retina display.
3. Now you can use points instead of pixels when positioning your sprites in Cocos2D. Note some APIs (but not many of them) still have to deal with pixels – when that is the case, they will have pixel in the method name to make it clear, otherwise assume points.

When the rubber hits the road, the easiest thing to do is to have your artist make images at the highest-necessary resolution (i.e. the 2X size for the Retina display), and you can easily scale down the images for the normal iPhone yourself from there.

You might wonder why even bother having two different sized images – why not just always load the bigger image and just scale it programatically? Well, loading textures into memory is one of the most memory intensive aspects of an app, so if you’re running on a device that isn’t going to take advantage of the higher resolution images, it’s a big saving to load the smaller images that are intended for the device.

But don’t worry – you don’t need to be constantly scaling images down in Photoshop. Texture Packer actually has a nice feautre that makes it easy to create scaled down images given a full-resolution image, and that’s what we’ll be using in this Cocos2D tutorial.