abitofcode

Cocos2d – Getting started


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.

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.

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 :)

5 Comments

  1. Very usefull post. Bookmarket!!
    Jose Antonio Andujar (@jandujar2) recently posted..¬°Adivina el personaje! llega a las 100.000 descargasMy Profile

  2. Nice list! Mind if I throw my hat in the arena and mention my Cocos2d iBook I’m writing. It’s a work in progress and the first 100 some pages are free…

    http://www.cartoonsmart.com/iBook.php5

    For the iPad-less, there’s a PDF version as well.

    Thanks! Dream big New Coders!

  3. CartoonSmart.com have some good stuff too.

  4. Thanks for this extensive resource list. I have just started with “Learn cocos2d Game Development with iOS 5″ by Apress, which seems sufficient for me now. Have bookmarked this for future reference :)
    Rahul recently posted..Learning your first programming languageMy Profile

%d bloggers like this: