It’s a beginners guide but some existing programming knowledge is assumed, if you’re familiar with Cocos2d-iPhone the book removes much of the pain in transitioning to Cocos2dx.

A quick read through the table of contents reveals a lot of content crammed into just over 200 pages but the structure is good and I found myself flying through the chapters.

Each Chapter clearly lays out at the beginning what you will learn. Careful thought has gone into the order that the content is introduced and from the off you’re building game mechanics rather than menu systems and splash screens, an approach that reminds me of Emanuele Feronato’s Blog.

Techniques are introduced once and repetition is avoided allowing more material to be covered in fewer pages, the code for all the example projects is available for download and commented.

It’s written in a friendly style and much like the StanfordU iOS lectures cuts through waffle;

So what is a 2D framework? If I had to define it in as few words as possible, I’d say: rectangles in a loop.

Having avoided C++ for as long as possible I was a little dubious as to how the book would cover it. Enough help is given in the early chapters to get on with using the framework and this was all that was needed to get stuck in. Familiarity with C++ will grow as you use it and with Cocos2dx being open source you can pick up techniques looking through the source code.

The book aims to develop your Cocos2dx skills by following through the development of 6 games. As well as basing each game around a different game mechanic the author also throws in some practical game development techniques along the way. Rapid prototyping introduced in chapter 4 helps to keep the reader focussed on building something playable rather than getting bogged down too early with the detail.

The games

1. Air Hockey
2. Sky defense
3. Rocket through
4. Victorian Rush hour
5. Pool
6. Eskimo

Screenshots of the games are available over at Roger Engelberts blog

Amongst the techniques discussed;

Multi touch, supporting multiple resolutions, roll your own collision detection, Sprite sheets, bitmap fonts, actions, animation, Particle systems, Drawing primitives, vector maths, rapid prototyping, placeholder sprites, platform game collision code, side scroller terrain generation, Box2d, cross platform development …

The final chapter ‘Code once. Retire’, covers setting up a hybrid iOS/Android project. It’s this type of chapter that usually goes out of date before the book hits the shelves however the chapter does attempt an explanation of the process rather than a list of actions to blindly follow.

The Appendix ‘Vector Calculations with Cocos2d-x’ is a great resource for anyone struggling with subjects like dot products and angular based speed.

I really enjoyed this book, Roger has done a great job at making the subject both friendly and approachable and the example games cover a wide range of techniques. If you’re currently turning work away because you don’t support Android development this is a great place to start.

edit: There are a few deprecations in the latest release of Cocos2d-x that are not reflected in the book or errata, if you’re having any problems the following link may help;

Deprecations since the book release

Overview:

• Learn to build multi-device games in simple, easy steps, letting the framework do all the heavy lifting
• Spice things up in your games with easy to apply animations, particle effects, and physics simulation
• Quickly implement and test your own gameplay ideas, with an eye for optimization and portability
• Enjoy building the games as much as you will enjoy playing them

Win Free e-copies of Cocos2d-X by Example Beginner’s Guide

You’ll be pleased to know that I have teamed up with the nice people at Packt Publishing to organize a Giveaway of Cocos2d-X by Example Beginner’s Guide

3 lucky winners stand a chance to win e-copies of their new book.

How to Enter?

All you need to do for a chance to win is head on over to the book page and look through the product description of the book and drop a line via the comments below this post to let us know what interests you the most about this book. It’s that simple.

Deadline

The contest will close on May 30, 2013. Winners will be contacted by email, so be sure to use your real email address when you comment!

We can’t change the icon on the link itself but we can add the link to a folder and change the folder icon. The first step is to create a folder somewhere and drag the links into it from your browser of choice.

Changing the folder icon

Find the image you want to use as the new icon and grab a squareish section of it using preview. We need to grab this into the clipboard using Copy (⌘ + c). Alternatively you can screen capture it directly using ⇧ + ⌘ + 4 to bring up a selection crosshairs and then before making the selection holding down the Control key to copy directly into the clipboard rather than depositing the selection as a file on the Desktop.

Select the folder to have it’s icon changed and open the Info panel (⌘ + i)

Select the small Icon towards the top of the Info panel and Paste the contents of the clipboard (⌘ + v). The folder icon should now be your selected image.

Adding the link to the Dock

Drag the updated folder onto the right hand side of the Dock (anywhere after the dividing line). If it doesn’t show the new icon make sure you have it selected to display as Folder and not Stack (right click on the folder to find this setting).

When the folder is selected the links inside will be displayed.

I have a folder set up within Applications to group all the cocos2d tools I use regularly and have used the same approach to make the folder a little more recognisable.

/** CCNode is the main element. Anything thats gets drawn or contains things that get drawn is a CCNode.
 The most popular CCNodes are: CCScene, CCLayer, CCSprite, CCMenu.
 
 The main features of a CCNode are:
 - They can contain other CCNode nodes (addChild, getChildByTag, removeChild, etc)
 - They can schedule periodic callback (schedule, unschedule, etc)
 - They can execute actions (runAction, stopAction, etc)
 
 Some CCNode nodes provide extra functionality for them or their children.
 
 Subclassing a CCNode usually means (one/all) of:
 - overriding init to initialize resources and schedule callbacks
 - create callbacks to handle the advancement of time
 - overriding draw to render the node
 
 Features of CCNode:
 - position
 - scale (x, y)
 - rotation (in degrees, clockwise)
 - CCCamera (an interface to gluLookAt )
 - CCGridBase (to do mesh transformations)
 - anchor point
 - size
 - visible
 - z-order
 - openGL z position
 
 Default values:
  - rotation: 0
  - position: (x=0,y=0)
  - scale: (x=1,y=1)
  - contentSize: (x=0,y=0)
  - anchorPoint: (x=0,y=0)
 
 Limitations:
 - A CCNode is a "void" object. It doesn't have a texture
 
 Order in transformations with grid disabled
 -# The node will be translated (position)
 -# The node will be rotated (rotation)
 -# The node will be skewed (skewX, skewY)
 -# The node will be scaled (scale, scaleX, scaleY)
 -# The node will be moved according to the camera values (camera)
 
 Order in transformations with grid enabled
 -# The node will be translated (position)
 -# The node will be rotated (rotation)
 -# The node will be skewed (skewX, skewY)
 -# The node will be scaled (scale, scaleX, scaleY)
 -# The grid will capture the screen
 -# The node will be moved according to the camera values (camera)
 -# The grid will render the captured screen
 
 Camera:
 - Each node has a camera. By default it points to the center of the CCNode.
 */

Some points to note;

* they can contain other CCNode nodes (addChild, getChildByTag, removeChild, etc)
* A CCNode is a “void” object. It doesn’t have a texture and so…
* has a default contentSize: (x=0,y=0) (CCSprites set their initial contentSize from the size of the supplied texture)
* has a default anchorPoint: (x=0,y=0) (0.5f,0.5f makes no sense when the node has no size)
* Each node has a camera. By default it points to the center of the CCNode.

Apple has finally approved my #1GAM entry for January, it was initially rejected for a metadata issue and some confusion as to what the app actually was.

It’s pretty simple and isn’t written in cocos2d this time but I did get it submitted to the app store within the onegameamonth.com January deadline. I’d initially resigned myself on the 31st January to missing the submission and getting a late one in but a quick change of heart (and project idea) and I was off. The game is an audio version of Simon Says and was designed to minimise the need to look at the screen. This enabled a quicker development time as I didn’t need visual assets or screen transitions and meant that with headphones on, the game could be played while in your pocket.

If you’ve not signed up for #1GAM it’s not too late, head over to http://onegameamonth.com and jump in, it’s a great way to break out of a rut and get those project ideas that don’t seem to fit in anywhere out into the world.

In all the game plus submission took around 3.5 hours to write.

Development notes

The audio assets were created using the terminal command ‘say’

During development I threw together a quick script so I could try out different voices, this created a caf file named after the spoken work within it.

mkdir audio2
 
cat lines.txt | while read line
do
   # do something with $line here
   say -vTrinoids $line -o audio2/$line.aiff
   afconvert -d LEI16 -f 'caff' audio2/$line.aiff audio2/$line.caf   
   rm audio2/$line.aiff
done

Where lines.txt is a simple text file containing the words I needed, not so good with multiple words on a line :S

up,
down,
left,
right, 
tap,
play,

Grabbing the gestures was simple using apples gesture recognisers;

-(void) addGestures
{
    // Single Tap
    UITapGestureRecognizer *tapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:<span class="hiddenGrammarError" pre=""><span class="hiddenGrammarError" pre=""><span class="hiddenGrammarError" pre=""><span class="hiddenGrammarError" pre=""><span class="hiddenGrammarError" pre=""><span class="hiddenGrammarError" pre=""><span class="hiddenGrammarError" pre=""><span class="hiddenGrammarError" pre=""><span class="hiddenGrammarError" pre=""><span class="hiddenGrammarError" pre=""><span class="hiddenGrammarError" pre=""><span class="hiddenGrammarError" pre=""><span class="hiddenGrammarError" pre=""><span class="hiddenGrammarError" pre=""><span class="hiddenGrammarError" pre=""><span class="hiddenGrammarError" pre="">self
                                                                                    action</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>:@selector(onViewSingleTap:)];
    tapRecognizer.numberOfTapsRequired = 1;
 
    // Swipe up
    UISwipeGestureRecognizer* swipeUpGestureRecognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipe:)];
    swipeUpGestureRecognizer.direction = UISwipeGestureRecognizerDirectionUp;
 
    // Swipe left
    UISwipeGestureRecognizer* swipeLeftGestureRecognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipe:)];
    swipeLeftGestureRecognizer.direction = UISwipeGestureRecognizerDirectionLeft;
 
    // Swipe right
    UISwipeGestureRecognizer* swipeRightGestureRecognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipe:)];
    swipeRightGestureRecognizer.direction = UISwipeGestureRecognizerDirectionRight;
 
    // Swipe down
    UISwipeGestureRecognizer* swipeDownGestureRecognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipe:)];
    swipeDownGestureRecognizer.direction = UISwipeGestureRecognizerDirectionDown;
 
 
    [self.view addGestureRecognizer:tapRecognizer];
    [self.view addGestureRecognizer:swipeUpGestureRecognizer];
    [self.view addGestureRecognizer:swipeLeftGestureRecognizer];
    [self.view addGestureRecognizer:swipeRightGestureRecognizer];
    [self.view addGestureRecognizer:swipeDownGestureRecognizer];    
}

While handling the audio was made a lot easier using ObjectAL for iPhone by Karl Stenerud. The only issue I had with the audio was needing to know when one sound had finished so I could start the next, I opted in the end to schedule an NSTimer to play them one by one after a delay that gave enough time for the previous time to finish.

#import "ObjectAL.h"
 
// create NSArray of actions
@property (nonatomic, strong) NSArray    *actions;
self.actions = @[@"up", @"down", @"left", @"right", @"tap"];
 
// This loads the sound effects into memory so that
// there's no delay when we tell it to play them.
for (NSString *action in _actions) {
  NSString *filename = [action stringByAppendingPathExtension:@"caf"];
  [[OALSimpleAudio sharedInstance] preloadEffect:filename];
}
 
// Grab a random action from the actions array
-(NSString*)randomAction
{
    return [_actions objectAtIndex:(arc4random() % _actions.count) ];
}
 
// Here we play 'play.caf' but we could be playing a sound returned by the
// randomAction method (remember to add .caf onto the end first)
[[OALSimpleAudio sharedInstance] playEffect:@"play.caf"];

Then it just needed a simple state machine to get the gestures and audio playback/capture happening in the right order.

The scoring display was added later initially as a way for me to test it was working.

There’ll shortly be an update to address a couple of issues including a minor audio bug (and the mis-alignment of the headphones in the icon which is annoying @creativewax)

To borrow from the iTunes description text;

“Justin Dike teaches iOS game programming with Xcode and Cocos2d v2. Learn with HD images, interactive galleries, video examples, and color coded examples. Anyone learning Cocos2d or Xcode, beginner or otherwise, will benefit from this comprehensive book.

Topics specific to game programming include: collision detection, platform collisions, virtual joysticks, accelerometer, 3D effects, animation, particles, menus, sound FX, singleton classes, game engines, points, health meters, levelling up, and much more!”

A lot of work has gone into this, the structure is good and it’s an interesting read with videos that work with the content rather than being shoe horned in afterwards.

Don’t take my word for it, the first 4 chapters can be sampled for free.

For further information, a chapter by chapter breakdown and Cocos2d v2.1 ready code samples check out the following link.

Tried the following first;

pyPDF – Output a lot of junk, maybe a Unicode issue?
swfTools – Required a bunch of libraries installing and seemed to be overkill for just grabbing a bit of text.

Then came across pdfMiner a PDF parser and analyzer written entirely in Python.

Installation is simple, download, unpack and run setup.py;

If you get a permissions issue when installing you may need to use sudo

pdfMiner also comes with a couple of additional tools and some sample content so you can get started straight away

It does a reasonable job of delivering text in the correct order, but your mileage will vary depending on what you used to create the PDF and its complexity. Titles sat amongst multiple columns for example can cause some issues.

Some of the tools are free, others have trial versions so you can try them out before purchasing, those that are not free I have paid for personally. A few of the tools started out with less features and early adopters were rewarded with a lower price, as the tools have had features added the price has increased to reflect this. Getting in on an app early helps support the developer in the early stages while often saving you money over time.

The sample code alongside some of the apps below is not meant to serve as best practice, they’re small code snippets that will hopefully help find the answers you’re looking for in google/cocos2d forums. A search for CCLabelBMFont should bring up far better cocos2d specific label answers than typing in ‘label‘. This article follows on from the Cocos2d – Getting started post.

• Graphics tools
• Spritesheets and Physics
• Audio
• Layout
• Animation
• Utilities

Graphics tools

Particle Designer

Paid app available from the Particle designer site. Before particle designer, trying to get a particular look for a particle system in cocos2d was a long winded process of trial and error, change some values in the code, build, run, change, build, run etc. Particle designer is a Mac app that gives you a dashboard of sliders and a preview so you can modify your particle system on the fly. When you’ve finished you simply select the embedded texture option, save out as a cocos2d plist and add it to your project.

For a plist saved out as myParticleSystem.plist get your particle effect to appear in your project using the following code;

  // 1. Create a particle emitter using the setting in the plist file. ARCH_OPTIMAL_PARTICLE_SYSTEM
  //    is a macro that picks the optimal particle system for the device you're running on.
  CCParticleSystem *emitter = [ARCH_OPTIMAL_PARTICLE_SYSTEM particleWithFile:@"myParticleSystem.plist"];
 
  // 2. Add the particle system
  [self addChild:emitter];

Particle designer has a random mode and also contains a library of shared emitters submitted by other users.

Glyph Designer

Paid app available from the Glyph designer site.If you have text being regularly updated in a game, CCLabelTTF is going to start hitting your performance. A solution is to create a bitmapped font atlas, a single texture that contains all the characters that you are going to need along with a data file that contains the coordinates of where those characters are located. Cocos2d provides a CCLabelBMFont class that reads the fnt file format and build up your text by copying the characters you need from the texture atlas you provide.
Building these atlas and data files by hand would be very painful, Glyph designer makes creating the files very easy and you can preview the final font output in real time as you add effects like drop shadow, outline etc.

Once you’re happy with your font, export it as a .fnt file (Cocos2d Text format). Add the generated .fnt and .png file (generated at the same time) to your project and use the code below to get it to show.

  // 1. add the .fnt and .png generated by Glyph designer to your project
 
  // 2. create a CCLabelBMFont label, specifying the initial text and the .fnt file
  CCLabelBMFont *myLabel = [CCLabelBMFont labelWithString:@"hello world" fntFile:@"blob.fnt"];
 
  // 3. Add it
  [self addChild:myLabel];
 
  // ... when you want to update the string use setString
  [myLabel setString:@"This is an update!"];
 
  // Only characters that are in your font atlas will be displayed

There’s no font alignment setting in Glyph designer, you need to handle that in cocos2d, for a single line of text it’s just a case of moving the anchor point.

Font alignment

  // by default label is center aligned (a)
  myLabel.anchorPoint = ccp(0.5, 0.5);
 
  // left aligned (b)
  myLabel.anchorPoint = ccp(0, 0.5);
 
  // right aligned (c)
  myLabel.anchorPoint = ccp(1.0, 0.5);

Anchor points are not set using pixels or points but as a fraction of the contentSize. Right aligned for example ccp(1.0, 0.5), the ccp is a macro shortcut for CGPointMake, the x value 1.0 indicates that we need the full width of the Label for our anchorPoints x position and the 0.5 y value gives us half of the labels height for the anchorPoints y position.

Photoshop

Paid app available from the Adobe site. The daddy of the digital art world, comes at a premium price but packed with features and with .PSD files being pretty much an industry standard, one that’s hard to be without. I’m still happy with CS3 but the rest of the world is up to CS6.

At it’s heart Cocos2d maps textures onto openGL geometry, these textures will likely start life as .png files in Photoshop or Gimp. When you create a sprite, CCSprite creates some geometry (two triangles) to map some texture data onto (an image) and calls addImage on a singleton object called CCTextureCache. The image is converted into a form that openGL can deal with efficiently and the filename is used as a reference. This means if you create a 100 sprites using the same image file, the texture is only created once and shared between all the sprite instances, saving memory and vastly speeding everything up.

Unless you need to save space in your bundle avoid jpg files, apart from the loss in quality the first thing Cocos2d does is convert them to .png files before loading them in as textures. Opening up CCtextureCache.m and looking in the addImage method (called by CCSprite initWithFile) should reveal the following;

  // Issue #886: TEMPORARY FIX FOR TRANSPARENT JPEGS IN IOS4
  else if ( ( [[CCConfiguration sharedConfiguration] OSVersion] >= kCCiOSVersion_4_0) && 
          ( [lowerCase hasSuffix:@".jpg"] || [lowerCase hasSuffix:@".jpeg"] ) ) 
          {
            // convert jpg to png before loading the texture
            ...

Images/Textures have so many more uses than simply decorating an app, they can be used to store data or create effects that could otherwise be processor intensive.

• Create data with Photoshop
• Irregular touch detection, when CGRect is not enough – part 1
• Simple interactive depth of field effect
• Building a depth map for cocos2d in Photoshop
• CCRenderTexture category – percentage complete

If you’re using Photoshop with bitmap art pressing CMD + K and setting nearest neighbour as Image interpolation will prevent your images getting antialiased during scaling.

Gimp – GNU Image Manipulation Program

Free app available from here. A freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.

Assuming we’ve created a 480 x 320 .png image called background.png, we can display it in the center of the screen using the following e.g in the init method;

  // ask CCDirector for the screen dimension
  CGSize size = [[CCDirector sharedDirector] winSize];	        
 
  // Create a CCSprite.
  // CCSprite derives from CCNode but adds the geometry (basically a billboard) that
  // we can slap our background.png image onto. Under the hood CCSprite passes the
  // image to the CCTextureCache, uses the filename to check if we've already loaded
  // this texture and if not adds the image into the texture cache.
  CCSprite *background = [CCSprite spriteWithFile:@"background.png"];
 
  // position the background sprite which is anchored in the center, to 
  // the center of the screen
  background.position = ccp(size.width*0.5, size.height*0.5);
 
  // Add the sprite to the layer
  [self addChild:background];

Seashore

Free app available from here. Steffen (@gaminghorror) recommended this native Mac OSX app that does away with any requirement for X11, I’ve only had a quick play but it’s looking good and it also saves typing Gimp into google which is always a winner

ShipIt!

Paid app for creating retina and standard sized images. More useful for standard UIKit development, this app will take a retina image, add the @2 extension onto it and then create a standard sized image without the extension.

Cocos2d does not get on with the @2 extension as there are conflicts in some parts of the framework with apples approach to Retina. The Cocos2d director has a method contentScaleFactor that defines the relation between point and pixels. If it is 1, points and pixels are the same, but if it is 2 (like retina displays ) it means that every point has two pixels.

  CCDirector *director = [CCDirector sharedDirector];
  float contentScaleFactor = [director contentScaleFactor];

You enable retina assets in the CCDirector, I’ve changed it slightly here to only allow Retina mode if we’re not on an iPad.

  // Changed slightly to avoid Retina assets on the retina iPad
  if(UI_USER_INTERFACE_IDIOM() != UIUserInterfaceIdiomPad)
  {
    if( ! [director enableRetinaDisplay:YES])
       CCLOG(@"Retina Display Not supported");    
  }

Spritesheets and Physics

There are a number of tools available for handling texture atlases and physics data, Zwoptex was the original atlas creation tool and I used the online and offline version for a while until TexturePacker came along. I now jump between TexturePacker and the SpriteHelper/LevelHelper combo depending on what I’m building.

To find out which is the best app for you, you really need to try them out. I’d previously avoided physics libraries like Box2d and Chipmunk as I’d only needed limited physics and could roll my own. After seeing some of the stuff Juraj at GameCollage was producing I wanted to play and around the same time Mekanimo announced a Mac beta. After having a number of emails ignored and not wanting to run a PC just to generate physical systems Mekanimo was dropped. Since then I’ve found LevelHelper and it’s really nice

TexturePacker

Paid app available from the Texture Packer site. The tool runs on the command line but also has a GUI, the benefit of this setup is that you can script the texture atlas creation into your build. You create a folder of images and configure the script to create the atlas using your settings, when a new image is added the build simply adds it into the texture atlas (spritsheet). If you use flash to animate, TexturePacker also has the ability to output your animations to a SpriteSheet

• Details of XCode4 integration of TexturePacker for Cocos2d can be found here

For the best explanation by far why packing multiple images into one texture is important, watch the following video by Code’n'Web;

The website is packed full of tutorials, testimonials and information and well worth a visit.

TexturePacker has come in useful in a wide rage of projects including UIKit and Flash based work, the CLI access means it’ll be staying in my toolkit for a long time to come.

A quick example

To use a spritesheet we need to create a CCSpriteBatchNode. First add some sprites into TexturePacker making a note of the filenames (and make them meaningful).

Export the image (.png) and data (.plist) files from TexturePacker and add them to your project.

  // 1. Store all the coordinates, rotation info etc generated
  // by Texture packer. We use the filename as a key to find the
  // information for each sprites texture offset in the png.
  // CCSpriteFrameCache is a singleton.
  [[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"bob.plist"];
 
  // 2. The batchnode will draw all the sprites within it in one
  // pass, all the sprites texture data must be contained within 
  // the same .png file
  CCSpriteBatchNode *myBatchNode = [CCSpriteBatchNode batchNodeWithFile:@"bob.png"];
 
  // 3. Add a sprite to the batchnode, we use spriteWithSpriteFrameName
  // NOT spriteWithFile as the texture data will be provided by the 
  // batchnode. The filename is only used here as a key into the
  // CCSpriteFrameCache to find the right bit of the texture
  CCSprite *head = [CCSprite spriteWithSpriteFrameName:@"head.png"];
  [myBatchNode addChild:head];
 
  // ... add more sprites
 
  // 4. We now have sprites being drawn in the batchnode but the 
  // batchnode itself is not being drawn, add it to the layer.
  [self addChild:myBatchNode];

Physics Editor

Paid app available from here. The only app in the list I do not own but as it pairs with TexturePacker thought it deserved a mention.

Makes creating collision shapes very simple;

1. Drop shape
2. Press AutoTrace
3. Export to your game engine

The Physics editor website contains a number of tutorials.

SpriteHelper

Paid available from Mac app store or directly from the Spritehelper website. I bought SpriteHelper and LevelHelper when they first came out, used them for a couple of days and then reverted back to TexturePacker. I didn’t really see the point in SpriteHelper and felt it was a little tightly coupled to LevelHelper. Having played with the recent beta I have a feeling they are going to become my tools of choice for physics. Creating complex systems is a case of drag and drop and the tools generate the code required to run the systems.

Another nice feature of SpriteHelper is it can directly import PSD files

LevelHelper

Paid available from Mac app store or directly from the LevelHelper website. From the website there are a number of Purchase options including a bundle with Spritehelper.

The recent update in the beta has meant I need to rebuild my example files so I’ll post the example code up next week. There are full game tutorials on the site and Ray has a great 4 part article on building a game like Jetpack joyride using LevelHelper.

Zwoptex

Paid app available from the Zwoptex site. Great app packed with features, I still own a copy but TexturePackers build integration and CLI was too good to pass on.

The free Flash version is still available from the bottom right of their website but it may not be up to date.

There’s a great animation tutorial that uses zwoptex over on Ray Wenderlich’s site.

Audio

There are some great tools for handling audio, before firing them up though it may be worth taking a little time to get acquainted with the audio formats and best practices for sound on iOS;

• Sound on iOS: Best Practices
• Audio 101 for iPhone Developers: Converting and Recording

CFXR

Free Mac port of SFXR available from the CFXR site. A great tool for creating simple sound effects, I’ve had issues getting the exported sound to match the previewed sound so used Audacity instead (below) to record them.

Audacity

Audacity is a free, easy-to-use and multilingual audio editor and recorder for Windows, Mac OS X, GNU/Linux and other operating systems. You can download it from the Audacity site. A great app for trimming, manipulating, recording sounds for use in apps.

Keeping your effects short and using the same format (little endian, 16 bit, 22kHz CAFF files) can help reduce the amount of work the audio system has to do.

Converting a file

The best practices link takes this a step further with a script for converting a directory of wav files at once.

The iPhone can only hardware decode one mp3 at a time so you would usually use the mp3 format for your background music and CAFF files for your sound effects. The following samples handle audio in a very simple synchronous approach, Rod Strougo and Ray Wenderlich have a nice approach to asynchronous audio in their book Learning Cocos2D: A Hands-on Guide to Building IOSGames with Cocos2D, Box2D, and Chipmunk (Addison-Wesley Learning Series).

Playing a sound effect

  // The SimpleAudioEngine is another singleton, grab a reference to it 
  // and preload the wav file mysound.wav. This could be done in a loading 
  // scene. The sound is stored and referenced by the filename
  [[SimpleAudioEngine sharedEngine] preloadEffect:@"mysound.wav"];
 
  // Play the sound when required using the filename to identify the
  // sound, if there's a preloaded version it will use that version.
  [[SimpleAudioEngine sharedEngine] playEffect:@"mysound.wav"];

Playing background music

  // Preload the background music. This could be done in an earlier scene
  // [SimpleAudioEngine sharedEngine] is a Singleton and will be available
  [[SimpleAudioEngine sharedEngine] preloadBackgroundMusic:@"Beelzeboss.mp3"];
 
  // Play and loop the background music 
  [[SimpleAudioEngine sharedEngine] playBackgroundMusic:@"Beelzeboss.mp3" loop:YES];
 
  // When you're done with it, stop it and unload it
  [[SimpleAudioEngine sharedEngine] stopBackgroundMusic];
  [[SimpleAudioEngine sharedEngine] unloadEffect:@"Beelzeboss.mp3"];

If you need to do something a little more complex with audio in Cocos2d look at the CDAudioManager (CocosDenshion NOT compact disk) written by Steve Oldmeadow and also distributed along with cocos2d. Here Lam of FancyRatStudios.com shows it running as an audio meter;

Layout

Tiled

Free app available from the Tiled map editor site.
Tilemaps allow the creation of larger levels by creating them out of smaller tiles. They are far more efficient than creating and scrolling large bitmap images.

There’s a great set of tutorials How To Make a Tile-Based Game with Cocos2D over at Ray Wenderlich’s site

From the tiled site
Tiled is a general purpose tile map editor. It’s built to be easy to use, yet flexible enough to work with varying game engines, whether your game is an RPG, platformer or Breakout clone. Tiled is free software and written in C++, using the Qt application framework. The main features in a nutshell:

• General purpose tile map editor with XML-based map format
• Supports orthogonal and isometric maps
• Custom objects can be placed with pixel precision
• Full undo/redo and copy/paste support
• Add custom properties to tiles, layers, objects or the map
• Automatically reloads tilesets when changed externally
• Resize or offset your tile map later as needed
• Efficient tile editing tools like stamp and fill brushes
• Supports input/output plugins to open and save files in custom formats

Example file forest.tmx generated by Tiled

<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="orthogonal" width="20" height="15" tilewidth="32" tileheight="32">
 <tileset firstgid="1" name="dg_grounds32" tilewidth="32" tileheight="32">
  <image source="dg_grounds32.png" width="288" height="608"/>
 </tileset>
 <layer name="Tile Layer 1" width="20" height="15">
  <data encoding="base64" compression="zlib">
   eJzjZWBg4B2C2JYApqZZpJhJrFnEmEmsWnLUUTsOSFE/VM3DZSa90gyleYQacT7QGAD6gB49
  </data>
 </layer>
</map>

Here dg_grounds32.png is the image that provides the tile textures and the data element is compressed data that describes the tile layout.

Multiple tilemap layers can be created within the same tmx file and layers can be object layers or Tile layers. Tile layers are visual, object layers could be used to describe properties of each grid square.

  // Load Tilemap data from the tmx file into a CCTMXTileMap. The .png file
  // containing the tile textures is referenced within the .tmx file
  CCTMXTiledMap *mapNode = [CCTMXTiledMap tiledMapWithTMXFile:@"forest.tmx"];
 
  // Add the tile map to the layer, that's it. Done :)        
  [self addChild:mapNode];

Inkscape

Free app available from Inkscape site. Inkscape is an open source vector graphics editor similar to Adobe’s illustrator and uses the Scaleable Vector Graphics (SVG) file format.
There’s no support in cocos2d for SVG as a graphic format but we could use it as a data format to hold level layout information especially for physics games. This was the approach that LevelSVG took before it was removed from sale.

The geometry can be laid out using the simple drawing tools. If you need to add a custom property to an object, select it then press Control + SHIFT + x to bring up the XML editor. Below I’ve created a new property called myProperty with a value myValue.

Saving the file as an Inkscape SVG file will include the custom data we added to our objects e.g myProperty in the output SVG file. This file can be parsed using any number of XML parsers.

  <svg>
  ...
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <rect
       style="fill:none;stroke:#000000;stroke-opacity:1"
       id="rect3755"
       width="391.42856"
       height="208.57143"
       x="54.285713"
       y="78.076469"
       myProperty="myValue" />
  </g>
</svg>

Control + SHIFT + e will bring up the export Bitmap dialog, selecting the Page button and then Export will output the layout you’ve created as a bitmap image which could then be used as a layout guide in Photoshop to draw over.

CocosBuilder

** Update ** There’s a pre alpha of the new Animation editor available here, help out the developer by having a play and giving feedback

Free app available from the CocosBuilder site.

From the CocosBuilder site
CocosBuilder is a free tool for graphically laying out sprites, layers and scenes for Cocos2D iPhone and Mac. It’s ideal for quickly and accurately creating menus and other parts of the interface, but can also be used to create levels, particle systems or any other kind of Cocos2D node graphs. CocosBuilder is released as open source under MIT license.

The latest development only supports Cocos2d v2.0 but there is an older version 1.0 that supports cocos2d v1.

You build up your layout in CocosBuilder visually and then save the layout as a .ccb file, this is a .plist file that represents the nodeGraph you have built. This file is parsed by some helper files you add to your project (CCBReader.h, CCBReader.m).

You can associate objects in the CocosBuilder editor with bespoke classes that derive from the object you have added. e.g if you add a CCLayer and need to add some functionality, create a myLayer class that extends CCLayer and add your own code. Don’t override the init method instead use the didLoadFromCCB method. You can also link objects in your nodeGraph (e.g a CCSprite) to a member variable, and add callbacks to buttons.

There is documentation included in the distribution, and an example project you can download.

1. Open and run the example project in XCode to see the sort of effects you can get
2. Right click the .ccb file under resources in Xcode and open with external editor to see the nodeGraph in CocosBuilder. If you have both versions of CocosBuilder on your system, open the v1.0 version first and then right-click and select open.

-(int)methodname
  // 1. Add the CCBReader.h and CCBReader.m files to the project
 
  // 2. Add the CCBReader import
  #import "CCBReader.h"
 
  // 3. Import any assets you've used, the files are relative to the .ccb file so easiest to create 
  // the file in your resources directory and add the images to your project as you add them
  // in the .ccb file
 
  // 4. Load the scene from the example.ccb file
  CCScene* scene = [CCBReader sceneWithNodeGraphFromFile:@"example.ccb"];
 
  // 5. Start the first scene in AppDelegate
  [[CCDirector sharedDirector] runWithScene: scene];
 
or
 
  // 5. Push a new scene if this is not the first scene
  [[CCDirector sharedDirector] replaceWithScene: scene];

In the example project, the main Layer has a custom class associated with it HelloCocosBuilder. A button with a selector pressedButton: added to it and a sprite linked to a member variable named sprtBurst.
I’ve included the .h and .m files below;

//
//  HelloCocosBuilder.h
//  CocosBuilderTest
//
 
#import <Foundation/Foundation.h>
#import "cocos2d.h"
 
// This is a custom class for a layer specified by setting the custom
// class attribute in CocosBuilder for the root node.
// It is loaded from AppDelegate.m
 
@interface HelloCocosBuilder : CCLayer
{
    // These instance variables are defined in the CocosBuilder file
    // (example.ccb) and automatically assigned by CCBReader
    CCSprite* sprtBurst;
    CCSprite* sprtIcon;
}
@end

//
//  HelloCocosBuilder.m
//  CocosBuilderTest
//
 
#import "HelloCocosBuilder.h"
 
@implementation HelloCocosBuilder
 
// This method is called right after the class has been instantiated
// by CCBReader. Do any additional initiation here. If no extra
// initialization is needed, leave this method out.
- (void) didLoadFromCCB
{    
    // Start rotating the burst sprite
    [sprtBurst runAction:[CCRepeatForever actionWithAction:[CCRotateBy actionWithDuration:5.0f angle:360]]];
}
 
// This method is set as an attribute to the CCMenuItemImage in
// CocosBuilder, and automatically set up to be called when the
// button is pressed.
- (void) pressedButton:(id)sender
{    
    // Stop all runnint actions for the icon sprite
    [sprtIcon stopAllActions];
 
    // Reset the rotation of the icon
    sprtIcon.rotation = 0;
 
    // Rotate the sprtIcon 360 degrees
    [sprtIcon runAction:[CCRotateBy actionWithDuration:1.0f angle:360]];
}
 
@end

There’s also work on adding an Action/Animation editor to CocosBuilder http://www.cocos2d-iphone.org/forum/topic/32775

Animation

Spriter

Coming soon – Spriter is a Kickstarter project that the Cocos2d community got wind of and pushed for cocos2d support and a Mac version.

From the Kickstarter site
Spriter is a powerful animation tool for creating highly detailed 2d real-time game characters and effects in an intuitive, visual editor. The characters are saved to a format that allows game engines to produce higher quality visuals, while also using less video ram, and requiring less disk space per frame than traditional 2d sprite animation.

Spriter also provides several game specific features like collision boxes, and sound effect triggering, and saves to an open format that will be useable across many different game engines and platforms.

Feature list
features

@TacoGraveyard put a Cocos2d test project together that implemented the original rough file structure. You can see the results here.

Flash

Paid app available from the Adobe site. A great animation and prototyping tool, I also use it to walk through animations sequences that I need to convert over to code.

For a short time there was a working library – MonkSwf that enabled you to load animated swf’s into Cocos2d, unfortunately it was removed after a legal threat from somewhere

On the plus side, TexturePacker (see Graphics tools) has a great swf import feature

Dog animation - fla and swf file
Dog animation - png and plist from TexturePacker

It converts each animated frame to an image and it also appears to only import the image data for those frames that change.

Animating example

  // Cache the animation frames. i.e for each 'filename' where
  // is the image data located in the texture. Has it been rotated
  // or trimmed as it was placed into the texture atlas (spritesheet)
  // we'll need this information to restore it to its original form.
  [[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@"dog.plist"];
 
  // create a batchnode to hold the dog animation texture, we'll add our 
  // animated dog sprites into this node.
  CCSpriteBatchNode *dogSheet = [CCSpriteBatchNode batchNodeWithFile:@"dog.png"];
 
  // add the dogSheet :p to the layer
 [self addChild:dogSheet];
 
  // loop through the animation frames and add each frame to an array.
  NSMutableArray *dogAnimFrames = [NSMutableArray array];
  for(int i = 0; i <= 35; ++i)  
  {
    // [NSString stringWithFormat:@"dog.swf/00%02d", i] builds the key 
    // for each frame in the .plist
    [dogAnimFrames addObject: [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:
                               [NSString stringWithFormat:@"dog.swf/00%02d", i]]];
  }        
 
  // create the animation object
  CCAnimation *dogAnim = [CCAnimation animationWithFrames:dogAnimFrames delay:0.05f];
 
  // Do we use directly ------>
 
  // a) We could create a looped animation using CCRepeatForever, this can then be
  // run on the sprite.
  id dogAction = [CCRepeatForever actionWithAction:
                   [CCAnimate actionWithAnimation:dogAnim restoreOriginalFrame:NO]];
 
  // <-- OR use cached version ------>
 
  // b) we could set up all of this in advance and add the animation to 
  // a CCAnimationCache. When we need a copy of the animation to use on 
  // a sprite we call animationByName on the Animation cache singleton
  // As the animation cache is a singleton, these animation are available 
  // to all scenes
  [[CCAnimationCache sharedAnimationCache] addAnimation:dogAnim name:@"dogAnimation"]; 
  id cachedAnim = [[CCAnimationCache sharedAnimationCache] animationByName:@"dogAnimation"];
 
  id dogAction = [CCRepeatForever actionWithAction:
                [CCAnimate actionWithAnimation:cachedAnim restoreOriginalFrame:NO]];
 
  // <------ end cached version
 
  // Either way we now have a dogAction animation that can be run on
  // a sprite.
 
  // create the dog sprite that we'll animate
  CCSprite *dog = [CCSprite spriteWithSpriteFrameName:@"dog.swf/0000"];        
  [dog setPosition: ccp(size.width/2, size.height/2)];
  [dogSheet addChild:dog];              
 
  // run the looping animation 'dogAction' on our sprite
  [dog runAction:dogAction];

Utilities

Hue Go Lite

Paid and lite version available from the Mac app store. Useful utility that gives you a color picker to use anywhere across your desktop, I use the lite version to grab colours without having to fire up Photoshop.

  // select the color in Hue Go and use the copy as RGB 
  // option
  mysprite.color = ccc3(180,104,0);

Icons

Paid app available from the app store. Not really a Cocos2d specific tool but given the time this saves me I thought it deserved a mention.
Simply drag your 512×512 icon onto the app, preview it in all sizes and when happy export all for immediate use. Simples

TotalTerminal

Free TotalTerminal – a system-wide terminal available on a hot-key.
Press Control + ` and a terminal appears, Lovely!

Some useful shortcuts;
Command + T -> Create a new tab in the terminal
Command + Shift + ] -> Go to next tab on the right
Command + Shift + [ -> Go to next tab on the left
Tab -> path completion
Drag a folder from finder to a terminal to get the path
In the terminal type Control + r to bring up a reverse-i-search

# close the current tab
>exit

# go to users home directory
>cd ~

# go to simulator directory
cd ~/Library/Application\ Support/iPhone\ Simulator/

# open a finder window to the current terminal directory location
>open .

Dash

Paid Dash – Snippet manager, Documentation browser is available from the Mac app store. Further information available at the Dash site.

I Previously mentioned this in the Cocos2d getting started post when it was a free app, it has since adopted the nagware approach. Still very useful but one app where it didn’t pay to be an early adopter/promoter

Development

XCode

XCode available from the Mac App store.
Grabbing screenshots while playing a game can be a lot harder than the UIKit equivalent, having someone play the game while someone else uses Organizer (Command + Shift + 2) to grab screenshots, will probably get better results than trying to play the game and press both buttons at the same time.

Cocos2d

Installing the developer tools and Cocos2d

]]> http://abitofcode.com/2012/07/cocos2d-useful-tools/feed/ 21 http://abitofcode.com/2012/07/cocos2d-useful-tools/ http://feedproxy.google.com/~r/abitofcode/JoZG/~3/cZzeTeZ7Cfc/ http://abitofcode.com/2012/06/building-a-depth-map-for-cocos2d-in-photoshop/#comments Sun, 24 Jun 2012 23:48:56 +0000 Chris http://abitofcode.com/?p=496 Continue reading →]]> After the Create data with Photoshop and Irregular touch detection, when CGRect is not enough – part 1 articles last July I started to write a follow up showing another use of the raw data format. I’ve just found the source code and notes I’d put together so I figured I’d throw it up in it’s rough form (the youtube video’s been linking to an unpublished article for about a year :S )

The result

The approach uses a greyscale image saved out in raw format to provide us with height information based on pixel position. In the example project (download link at bottom of page) I use this to affect the scale of a sprite, this can be seen in the video. Each pixel has 256 possible values, I’ve used 0 to represent the highest points and 255 the lowest.

I’ve thrown all the code into the HelloWorld layer and this example uses 1 pixel in the depth map to represent 1 pixel in the hill image, if you don’t need this level of accuracy you could make your depth map smaller and adjust your calculation for the offset. The depth map itself was created in photoshop using the gradient tool.

The resources

The resource link contains the Photoshop document and a copy of the depth map and the ‘hill’ images.

Fig 1.The visible map and the depth data

The depth map image above contains ‘ff’ values as it approaches the end of the file as the bottom right of the depth map is white (see above). We can check this in the terminal.

>hexdump depth.raw | tail
0075250 dc db dc dd dd de dd dd df df df df e0 e0 e1 e2
0075260 e2 e2 e3 e2 e3 e4 e5 e5 e4 e5 e6 e6 e7 e7 e6 e8
0075270 e8 e8 e9 ea e9 ea eb ea eb eb ec ec ed ed ed ed
0075280 ee ef ee ef ef f0 f1 f1 f0 f1 f2 f1 f2 f2 f3 f3
0075290 f4 f4 f3 f4 f4 f5 f6 f5 f6 f6 f7 f7 f7 f8 f7 f8
00752a0 f9 f9 f9 f9 fa fa fa fa fb fb fb fc fb fc fc fc
00752b0 fc fe fe fd fd fe ff fd fe ff ff ff ff ff ff ff
00752c0 ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff ff
*
0075300

>printf “%d\n” 0×0075300
480000

The work is done here;

-(int)getHeightAtPoint:(CGPoint)pt { // set the value to -1, a default no data at point int retValue = -1;   // if the image lookup data is present and the value is within the bounds of the image if(self.depthData && CGRectContainsPoint(CGRectMake(0, 0, IMAGE_WIDTH, IMAGE_HEIGHT), pt)) { // The raw data assumes a top left origin pt.y = (IMAGE_HEIGHT - pt.y) - 1;   // calculate an offset int offset = pt.y * IMAGE_WIDTH + pt.x;   // get the data at the offset NSRange range = {offset,sizeof(Byte)}; NSData *pixelValue = [depthData subdataWithRange:range];   retValue = *(int*)[pixelValue bytes];   // We want 255 to be the lowest value retValue = 255 - retValue; } return retValue; }

DepthMap source
DepthMap resources

]]> http://abitofcode.com/2012/06/building-a-depth-map-for-cocos2d-in-photoshop/feed/ 2 http://abitofcode.com/2012/06/building-a-depth-map-for-cocos2d-in-photoshop/ http://feedproxy.google.com/~r/abitofcode/JoZG/~3/s8k_T_7a-E8/ http://abitofcode.com/2012/06/spritesheets-the-movie/#comments Fri, 22 Jun 2012 19:20:52 +0000 Chris http://abitofcode.com/?p=990 A great explanation in animated form of the reasoning behind using a Spritesheet from the creator of TexturePacker Andreas Loew @codeAndWeb.

SpriteSheets – TheMovie – Part 1 by Code’n'Web

Consider this the Episode IV of Spritesheet movies

]]> http://abitofcode.com/2012/06/spritesheets-the-movie/feed/ 0 http://abitofcode.com/2012/06/spritesheets-the-movie/ http://feedproxy.google.com/~r/abitofcode/JoZG/~3/KwayZjhkvB8/ http://abitofcode.com/2012/05/cocos2d-getting-started/#comments Wed, 09 May 2012 16:22:23 +0000 Chris http://abitofcode.com/?p=842 Continue reading →]]>
The following is a list of links and resources that should make finding your way around Cocos2d a little easier.

Beware of older code examples and tutorials when looking for help, a lot changed between Cocos2d v0.82 and v1.0 including the names of a lot of the framework methods.

The simplest way to find which version a project is using is to open up the cocos2d.m file and look for the version string

static NSString *version = @"cocos2d v1.1.0-beta2b";

IMHO the best way to get into Cocos2d is to build something with it. Don’t look at the resources below as something you have to finish before you begin or you’ll never get started

In no particular order;

1. Books

There are some great Cocos2d books out there now, the following are personal favorites in no particular order;

Learning Cocos2D: A Hands-on Guide to Building IOSGames with Cocos2D, Box2D, and Chipmunk (Addison-Wesley Learning Series)
By Rod Strougo and Ray Wenderlich

Comprehensive coverage of the Cocos2d framework, also covers the Box2d and Chipmunk physics engines and Game Center integration. The book walks the user through the development of a game ‘Space Viking’ that contains mini games each using a different aspect of the framework. There’s also a nice Chapter on performance optimizations towards the end that should save you a bit of time trawling through the forums if your frame rate starts dropping.

CartoonSmart – iBook on How to Get Started with XCode And Cocos2D Game Development

Still under development, the first 4 chapters are free (5 if you hurry and sign up to the cartoonSmart newsletter) and provide a great introduction to programming Cocos2d. Geared towards the beginner the chapters are clearly written in a friendly style and introduce new information as it is required rather than dump it all on you at the beginning. You can see a movie of the iBooks version in action over at the website and the book is also available as a pdf.

Cocos2d for iPhone 1 Game Development Cookbook
By Nathan Burba

I’m a big fan of the Cookbook approach, I take a similar approach when experimenting. Great for the Inquisitive/Intermediate programmer and covers a wide variety of techniques. For further detail check out Nathans site http://cocos2dcookbook.com/ which has videos detailing the techniques covered in the book.

Learn cocos2d Game Development with iOS 5 (Learn Apress) [Kindle Edition]
By Steffen Itterheim

Quick disclaimer – I don’t have the latest version (this is a Kindle version) I have the version here which is now a little out of date. This was the first book to fill the Cocos2d book void and takes you through the development of several increasingly complex games. It’s aimed at the beginner games programmer but there are plenty of tips and suggestions that should benefit the majority of cocos2d developers.

2. Download Cocos2d and have a look at the Tests

There are plenty of tutorials out there describing how to download Cocos2d and install the templates into XCode, not all of them make it clear that the downloaded folder also contains a tests folder with code demonstrating each of Cocos2d’s main features. The code isn’t the easiest code to read, these are tests rather than tutorials but they should give you an idea of what Cocos2D can do. Just open cocos2d-ios.xcodeproj in Xcode and select the test to build.

Some of these tests can be seen running in this youtube offering from 2009

3. Cocos2d API reference

Until recently I Integrated the cocos2d API reference into XCode using the approach detailed here. As soon as you get past 3 Doc sets in Xcode however, life becomes exponentially slower. I was really happy to find Dash recently which not only gives me a fast search into the cocos2d API but also makes snippets available via abbreviations and allows placeholders. The developer of Dash has indicated that there will be a browse feature in the coming update.
Install via the Mac App store (currently free) then select Cocos2d in Preferences > Docsets.

Dash – Quick just like Xcode isn’t

4. Screencasts

If video is your preferred means of learning the following may help you avoid trawling through YouTube.

Bob Ueland’s Cocos2d tutorials
http://bobueland.com/cocos2d/tutorials/

Bob has a great set of free screencasts covering a broad spectrum of the Cocos2d framework. If touches, animations and Node spaces are causing you issues then this would be the first place I would suggest looking. The screencasts are short but focused and Bob’s style is naturally clear and to the point.
For anyone wanting a project walkthrough in the same style, Bob now has a paid course that takes you through the development of a shoot-em-up game complete with end of level Boss fight named ‘Galaxy Fighter‘. This is a great introduction to writing/structuring your own game.

Cocos2d introduction and code walkthrough
Two great videos from the guys over at The Curio Dept.
The first video is a 30 minute walkthrough that gives an overview of Cocos2d, if you’re new to Cocos2d this birds eye view is a great place to start.
Introduction to Cocos2d – 30 mins
The other video takes a walkthrough approach building up a ‘Fruit Assassin’ game, there’s a link to the slides and source code in the notes of the link above.
Code walkthrough – 90 mins

LearnCocosTV by Steffen Itterheim
iTunes YouTube
Covers Cocos2d and Steffens Project Kobold2d (built upon cocos2d). The first special covered Enabling ARC in a Cocos2D project.

Learning Cocos2d Development by AzamSharp
YouTube
A collection of short video tutorials introducing you to various aspects of Cocos2D.

Paulson Apps
Vimeo YouTube
Interesting set of videos following the development of a game in cocos2d with some tutorials along the way.

iPad and iPhone Application Development (HD) – by Paul Hegarty
iTunes
Though not a Cocos2D resource this is the daddy of iOS screenCasts. Great coverage of iPhone development with ObjectiveC and UIKit.

What is a sprite sheet? – The Movie
SpriteSheets the movie
At 3 minutes long this is a great introduction to Spritesheets and why we use them by @codeandweb. @codeandweb

5. Websites and Blogs

Cocos2D for iPhone
http://www.cocos2d-iphone.org/
The home of Cocos2D for iPhone, the place to download it, show your final results, take part in the forum and find documentation.

The documentation is in the form of a wiki and contains a lot of useful resources including;

* Best practices
* Programming guide
* Migration guide
* Tips/Tricks
* Sample games
* The logos
* Release notes
* Performance tests
* Templates
* CocosDenshion Audio library cookbook

RayWenderlich.com
http://www.raywenderlich.com
A great site for well researched and written Cocos2d and iOS tutorials. It’s grown from Ray’s one man blog to a full team of well seasoned iOS developers pushing tutorials out at an alarming rate. I tend to look here before searching the apple documentation A quick look through the tutorials link should provide a selection of Cocos2d tutorials for all abilities.
The site has it’s own forum for questions/discussions around the articles and there is a regular vote to determine the subject of the next article.

Learn Cocos2d by Steffen Itterheim
http://www.learn-cocos2d.com
Some really useful stuff on this site by Steffen, have a look through the blog for some great articles covering both Cocos2D and game development. Steffen is pretty thorough so whether the subject is piracy, enabling ARC or CCArray performance tests you should get something out of it.

Abitofcode
http://www.abitofcode.com
Doesn’t post as regularly as most sites, but tries to cover the odd technique that may not get featured elsewhere, the cocos2d specific articles can be found here.

6. Podcast

There’s a great Cocos2d podcast By Mohammad Azam & Steffen Itterheim that focuses on the framework and the people in and around the Cocos2d community. Recent podcasts can be accessed via iTunes, for the full back catalogue check out their blog here.

7. Twitter

Another way to keep up to date with what’s going on is to follow people who tweet about Cocos2d and iOS development on a regular basis. Twitter is a great tool for keeping up to date, letting people know about your app, finding beta testers and finding solutions to dev problems.

Follow @cocos2dFollow @rwenderlichFollow @abitofcodeFollow @iuridiumFollow @uelandbobFollow @gaminghorrorFollow @cocos2dx

If you want to follow/build up a following of Cocos2D twitter users it’s also worth checking the Twitter thread on the Cocos2D forum, there’s also a Google+ thread here. The tags #cocos2d and #cchandshake are occasionally used to highlight Cocos2d specific content but a search for ‘cocos2d’ usually brings up some interesting results.

8. Sign up to a good newsletter

If you’re new to iOS development it can help to have other people do the research for you The following newsletters cover iOS development in general.

* IOS Dev Weekly By Dave Verwer
* Ray’s monthly newsletter by Ray Wenderlich
* Learn-cocos2d by Steffen Itterheim

9. Paid Resources

Some people prefer to purchase their materials rather than hunt around the web, here’s a collection of the better known resources out there for sale. Please consider any purchases carefully.

* Sapus tongue by Ricardo Quesada (***No longer available***)
* Galaxy Fighter by Bob Ueland
* Space Game starter kit from Ray Wenderlich
* iPhoneGame Kit by Nat Weiss
* iUridium
* Line-Drawing game by Steffen Itterheim

10. Get familiar with Git

Git is a distributed revision control and source code management (SCM) system and has made sharing code between developers much simpler. Grab an account on GitHub (free for public use) and start following some projects.

For a Fruit Ninja style blade effect there’s this repo.

Another one to watch is the Cocos2d Extensions repo maintained by Stepan Generalov which adds a number of features to the Cocos2D framework including the following;

* CCMenuAdvanced – CCMenu subclass with additional features: relativeAnchor, more align options, priority property, scrolling with swipe/trackpad/mousewheel
* CCMenuItemSpriteIndependent – CCMenuItemSprite Subclass, that doesnt add normal/selected/disabled images (sprites) as children. It retains them and delegates rect & convertToNodeSpace: methods to normalImage_. So it’s possible to use CCSpriteBatchNode & add position sprites of menuItem anyway you want.
* CCVideoPlayer – Simple Video Player for Cocos2D apps.
* CCBigImage – Dynamic Tiled Node for holding Large Images.
* CCSlider – Little Slider Control to allow the user to set the music/sfx/etc level in the range of 0.0f to 1.0f.
* CCSendMessages – CCActionInstant subclass, that is more flexible than other CCActions that run functions. Can be used in many cases as blocks replacement.
* CCScrollLayer – CCLayer subclass that lets you pass-in an array of layers and it will then create a smooth scroller. Complete with the “snapping” effect.
* FilesDownloader – Downloader for a group of files with shared source path.
* TMXGenerator – Class that generates a single TMX map with multiple layers.
* CCLayerPanZoom – CCLayer subclass that can be scrolled and zoomed with one or two fingers (complete with rubber effect, two modes & ability to click through delegate).

One way to find projects of interest is to keep an eye out in the Cocos2d forum. Doing a search for github in the forum can produce some interesting results -> Search for Github in Cocos2D forum

(Just found this one CCTMXTiledMap A* pathfinding class -> while writing this )

If you need a little help getting to grips with Git, O’Reilly have produced a video course ‘Mastering Git’ by Matthew McCullough and Tim Berglund that can be purchased here.

11. The Cocos2D forum

http://www.cocos2d-iphone.org/forum/

The MotherShip and a great resource for all things Cocos2D but please take time to read the READ BEFORE POSTING sticky post before posting your first post, it’ll also explain how to set your avatar. If you don’t have an external website, consider setting the link in your profile to your twitter address instead.
There are lots of experienced and friendly Cocos2d developers willing to help out but they like to see that you’ve had a go yourself and you’ve posted to the right place.

We’re not keen on the phrase “RockStar programmer”

Google indexes the forum on a regular basis so if the forum search isn’t returning the results you want, try searching directly in Google, just add cocos2d as one of your search words.

12. Don’t reinvent the wheel

If you came to iOS from ActionScript like me you’ll probably start of by building a bunch of helper methods and Classes, it’s worth taking a little time to look through the Cocos2D framework and some of the other frameworks first though. You can jump to a methods definition in XCode by holding Command and clicking the method name once a link shows below it.

Here’s some of the more useful bits;

ccMacros.h – Cocos2d
- COCOS2D_DEBUG
- CC_SWAP – simple macro that swaps 2 variables
- CCRANDOM_MINUS1_1() returns a random float between -1 and 1
- CCRANDOM_0_1() returns a random float between 0 and 1
- CC_DEGREES_TO_RADIANS() converts degrees to radians
- CC_RADIANS_TO_DEGREES() converts radians to degrees
- CC_ENABLE_DEFAULT_GL_STATES()
- CC_DISABLE_DEFAULT_GL_STATES()
- CC_DIRECTOR_INIT() Depth, Pixelformat, GLView bounds…
- CC_CONTENT_SCALE_FACTOR() Mac = 1, iPhone Retina = 2 otherwise = 1
- CC_RECT_PIXELS_TO_POINTS(pixels) Converts a rect in pixels to points
- CC_RECT_POINTS_TO_PIXELS(points) Converts a rect in points to pixels

CGPointExtension.h & CGPointExtension.m – Cocos2D Point extensions
These contains a lot of useful shortcuts, well worth a quick read through they include;
- ccp – CGPointMake shortcut
- ccpNeg – Returns opposite of point
- ccpAdd – Calculates sum of two points
- ccpSub – Calculates difference of two points
- ccpMult – Returns point multiplied by given factor
- ccpMidpoint – Calculates midpoint between two points
- ccpDot – Calculates dot product of two points
- ccpCross – Calculates cross product of two points
- ccpPerp – Calculates perpendicular of v, rotated 90 degrees counter-clockwise
- ccpRPerp – Calculates perpendicular of v, rotated 90 degrees clockwise
- ccpProject – Calculates the projection of v1 over v2
- ccpRotate – Rotates two points
- ccpUnrotate – Unrotates two points
- ccpLengthSQ – Calculates the square length of a CGPoint (not calling sqrt() )
- ccpLength – Calculates distance between point an origin
- ccpDistance – Calculates the distance between two points
- ccpNormalize – Returns point multiplied to a length of 1
- ccpForAngle – Converts radians to a normalized vector
- ccpToAngle – Converts a vector to radians
- clampf – Clamp a value between from and to
- ccpClamp – Clamp a point between from and to
- ccpFromSize – Quickly convert CGSize to a CGPoint
- ccpCompOp – Run a math operation function on each point component
- ccpLerp – Linear Interpolation between two points a and b
- ccpFuzzyEqual – returns if points have fuzzy equality which means equal with some degree of variance
- ccpCompMulti – Multiplies a nd b components, a.x*b.x, a.y*b.y
- ccpAngleSigned – returns the signed angle in radians between two vector directions
- ccpAngle – returns the angle in radians between two vector directions
- ccpRotateByAngle – Rotates a point counter clockwise by the angle around a pivot
- ccpLineIntersect – A general line-line intersection test
- ccpSegmentIntersect – returns YES if Segment A-B intersects with segment C-D
- ccpIntersectPoint – returns the intersection point of line A-B, C-D

If the above functions make no sense at all visit WildBunny.co.uk for the best Vector maths primer on the web by @paul_m_firth

CCDrawingPrimitives.h – Cocos2D Drawing OpenGL ES primitives
- ccDrawPoint
- ccDrawLine
- ccDrawPoly
- ccDrawCircle
- ccDrawQuadBezier
- ccDrawCubicBezier

UIGeometry.h
- NSStringFromCGPoint(CGPoint point);
- NSStringFromCGSize(CGSize size);
- NSStringFromCGRect(CGRect rect);

CGGeometry.h (Core Graphics framework)
- CGRectGetHeight(CGrect rect)
- CGRectGetMinX
- CGRectGetMidX
- CGRectGetMaxX
- CGRectContainsPoint
- CGRectContainsRect
- CGRectIntersectsRect
- CGPointMake
- CGSizeMake
- CGRectMake

Before you invent any of your own basic structs and type check out ccTypes.h which contains things like vertex structures, texture coords and colors (including some predefined colors ccRed, ccBlue, ccGreen etc).

and finally…

Fortunately ‘cocos2d’ is fairly unique and narrows the search down somewhat in google. The following links contains some great resources including tutorials and open source games to tinker with, well worth a bookmark.

* List of Open Source Cocos2d Projects, Extensions and Code Snippets by @iUridium

* ios-cocos2d develop Recommended Blog List by @SuperSuRaccoon

* Cocos2D Tutorial And Example Page by @maniacdev

Enough reading! Go and make something shiny

]]> http://abitofcode.com/2012/05/cocos2d-getting-started/feed/ 5 http://abitofcode.com/2012/05/cocos2d-getting-started/