Learning cocos2d with samples

Arguably the most unknown cocos2d feature is the tests/samples.
cocos2d contains almost a test for each feature that it has. These tests are grouped by component. eg:

  • Sprite Test: It tests the CCSprite and CCSpriteSheet functionality like anchorPoint, visibility, parenting, reordering, honor Transform, etc…
  • Action Test: It tests the CCMove, CCRotate, CCTint, CCCamera, CCSequence, CCSpawn, etc..
  • Menu Test: It tests all kind of menus
  • CocosDenshion: It tests the Sound Engine
  • Chipmunk Accel Touch Test: It tests integration with Chipmunk physics engine using accelerometer and multi touches.
  • Particle Test: It tests all kind of particles (quad particles, point particles, sun, meteor, galaxy, smoke, fire, etc…)
  • etc…

Although these tests were coded for testing purposes they can also be used as examples. Not only they use the API in the recommended way, but some of them, also contain useful tips in the commentaries.

In order to run the tests, you should do:

  1. Open the cocos2d Xcode project
  2. Select the test target: Xcode -> Project -> Set Active Target -> eg: TransitionTest
  3. Make sure that the running executable is correct: Xcode -> Project -> Set Active Executable -> eg: TransitionTest
  4. Build and run: Xcode -> Build and run

Another quick way of doing it by customizing the toolbar:

  1. Xcode -> Right click on the toolbar -> Customize Toolbar
  2. Drag & drop the Active Target button to the toolbar
  3. Drag & drop the Active Executable button to the toolbar

The source code of the samples are in the tests subdirectory.

So, let’s say you want to learn how to use Tiled maps. What you should do is:

  1. Select the TileMapTest target
  2. Make sure that the TileMapTest executable is selected
  3. Build & Run.
  4. Try all the subtests. The TileMapTest has more than 10 subtests. Eg: Hexagonal test, Isometric test, Orthogonal tests, read-write tile tests, etc…
  5. See the TileMapTest source code: tests/TileMapTest.m
  6. Modify the source code and go to step 2. :-)

Hiding the images from your game

Sometimes it is needed to hide certain images in your game from opportunists. One possible way of doing it, is to subclass CCTextureCache and override the addImage method.

For example:

//pseudo code
-(CCTexture2D*) addImage:(NSString*)path
{
   if( file_exists( path + ".enc" )  {
       mem = decrypt( path + ".enc", secretKey );
       uiimage = [[UIImage alloc] initWithData:mem];
       texture = [[CCTexture2D alloc] initWithImage:uiimage];
   }
}

Basically, if it finds an encrypted file, it will decrypt it with a secret key. So the .app bundle will have the crypted images, and opportunists won’t be able to look at them easily.

User mhussa created a sample project that includes these ideas. The project includes:

  • CCEncryptedTextureCache.m (subclass of CCTextureCache )
  • CryptUtils.cpp (helper functions to encrypt/decrypt files)
  • The ‘Encrypt’ build phase: It encrypts files at build time. You don’t need to encrypt them manually!

To customize which files to encrypt, you have to edit the ‘Encrypt’ build phase:

  • Xcode -> Targets -> CCRadialTransitionDemo -> Encrypt
  • Right click over ‘Encrypt’ -> Get Info

For further info regarding mhussa’s implementation, please read: How to use CCEncryptedTextureCache

Download: Xcode CCEncryptedTextureCache project

Introduction to CCSpriteFrameCache

Although it is possible to reuse the cocos2d v0.8 animation code, v0.99 introduces a new way to deal with animations (and sprites in general).

v0.99 has a new class named CCSpriteFrameCache that, as the name suggests, it is the cache of all the sprite frames.
You can load sprites frames to the CCSpriteFrameCache with:

  • a plist filename (generated by Zwoptex editor)
  • a plist filename (generated by Zwoptex editor) and a CCTexture2D
  • a CCSpriteFrame and a sprite frame name

( See the full API here: CCSpriteFrameCache API )

And the CCSpriteFrame object has the following properties:

  • a CCTexture2D: which texture should it use.
  • a CGRect: the rectangle of the texture (from 1 texture you can create many CCSpriteFrame objects, in fact it is the recommend way to avoid wasting unnecessary memory).

Example:

// Obtain the shared instance of the cache
CCSpriteFrameCache *cache = [CCSpriteFrameCache sharedSpriteFrameCache;
 
// load the frames
[cache addSpriteFramesWithFile:@"frames.plist"];
 
// It loads the frame named "frame1.png".
// IMPORTANT: It doesn't load the image "frame1.png". "frama1.png" is a just the name of the frame
CCSpriteFrame *frame = [cache spriteFrameByName:@"frame1.png"];
[sprite setDisplayFrame:frame];

This was just an introduction to CCSpriteFrameCache.

For further info, please read

cocos2d and Box2d encore

Ray Wenderlich, again, wrote an interesting article about cocos2d and box2d.

This time, the article is about how to make a simple Breakout game.

The article includes:

  • How to setup Box2d (gravity, bodies, etc…)
  • How to handle collision detection in Box2d
  • How to add and destroy Box2d bodies
  • How to link a CCSprite with a Box2d body
  • Uses touches to move the paddle
  • Plays music and sound effects using CocosDenshion
  • It has a You Win and a You lose scene
  • The Xcode project

Integrating cocos2d with Box2d

Box2d is rigid-body physics engine that can be used as a good complement of cocos2d. In fact, cocos2d comes with 3 Xcode templates, and one of them is a cocos2d + box2d template.

Also, cocos2d comes with 2 box2d examples:

  • An accelerometer + multitouch box2d sample: Great sample for box2d newbies
  • And the box2d testbed: targeting more advanced users

Recently, Ray Wenderlich also wrote an interesting article regarding how use box2d with cocos2d v0.99.0:

cocos2d v0.99.0 released

After:Fireworks

cocos2d for iPhone v0.99.0 was released!

Download: cocos2d-iphone-0.99.0.tar.gz

Release Notes: release_notes:0_99_0

Full Changelog: CHANGELOG

Many thanks to all the developers, contributors, beta testers, and the community in general. We are building a professional-grade library both in terms of technical features and support!

Integrating cocos2d with Facebook Connect

Jeston Furqueron wrote a nice tutorial regarding how to integrate cocos2d with Facebook Connect.

You can read the turorial from:

The tutorial uses cocos2d v0.8.x, and it can easily be ported to cocos2d v0.99

cocos2d v0.99.0-final released

cocos2d for iPhone v0.99.0-final is available for download

Download: cocos2d-iphone-0.99.0-final.tar.gz

Release Notes: release_notes:0_99_0_final

Changelog: CHANGELOG

Highlights (from v0.99.0-rc):

  • CocosDenshion: many fixes and improvements
  • Fixed some crashes and other important fixes on: Sprites & TMX maps

Known bugs: known_bugs

How stable is this release ?
Very stable. According to the tests and feedback from the testers, this release can be considered v0.99.0. But since v0.99.0 introduces so many changes, this will the last pre-v0.99.0 release.

If there are no show-stoppers bugs, then, this will be the real v0.99.0 version.
No small fixes will be introduced unless they are show-stopper bugs.
Small fixes and improvements will be fixed during the v0.99.x series.

How fast is this release ?
All the performance tests were run, and v0.99.0-final is, at least, as fast as v0.8.2. In some cases it is faster, perhaps 10%~20% faster.

I would appreciate if you could test this release in your game. Please, report any bug that you might find.
Thanks!

Tutorial: How To Make A Simple iPhone Game with Cocos2D

Ray Wenderlich wrote a detailed tutorial about how to make a simple game with cocos2d.

The tutorial includes:

  • How to start a cocos2d project
  • How to add CCSprite objects
  • How to use the CCLayer object
  • How to use actions
  • How to use touches
  • How to detect collisions
  • How to handle the main loop
  • How to play music and sounds

Turorial: How to make a simple iPhone game with cocos2d

You can also download the XCode project: Cocos2DSimpleGame.zip

Integrating cocos2d with SIO2

What ? Yes, you can integrate SIO2 with cocos2d.

Let’s say that you want to create a 3d game, with nice menus and fonts. It’s possible to do that using SIO2 to render the 3D scene and cocos2d to render the HUD.

How ? Yarri, from Play-N-Give , posted a detailed post regarding how to mix cocos2d and SIO2:

Also, it seems that Yarri is using this technique in one of his games: