coders

Programming iPhone Games with Cocos2D Part 4

hhamm — Wed, 03 Mar 2010 15:15:18 +0000

Cocos2D gives you a huge amount of features and all that stuff you need and want in your game. But one thing is really missing – a simple collision detection between sprites. In this article I want to give you some hints how you could implement your own CCSprite collision detection routine without using box2d or other physic libraries.

Update Calls

Ok, lets say you want to detect a collision between two objects A and B by checking one with the other. One way would be to enhance your CCSprite with an update routine which will detect its collisions by checking collision with all other children. The pseudo-code would look like:

// assuming we are implementing an update routine 
// for an extended CCSprite class, lets say: CCSpriteExt.m
-(void) onUpdate:(ccTime) delta
{
	for (CCNode * you in children)
	{
		if ( you == self) continue;
 
		if ( [self isCollidingWithObject:you] ) 
		{
			// collision detected !
			[collisionDelegate performSelector:collisionSelector withObject:self withObject:you];
		}
	}
}

Lets say you have 5 Objects (A,B,C,D and E) and you use the above code to check the collisions, you will count 20 check calls where 10 calls are double :

AB, AC, AD, AE -> 4 checks, 0 double checks
BA, BC, BD, BE -> 4 checks, 1 double checks: AB
CA, CB, CD, CE -> 4 checks, 2 double checks: AC, BC
DA, DB, DC, DE -> 4 checks, 3 double checks: AD, BD, CD
EA, EB, EC, ED -> 4 checks, 4 double checks: AE, BE, CE, DE
20 total checks, 10 double checks

If you have many objects this really would take time.

Another solution would be one update call for all you objects. Like if you have a game scene or something which allready has an update call, you could place your collision detection there and write a more efficiant object loop:

// assuming we are implementing an udate routine in a CCScene or CCLayer class
..
for (int idxMe=0; idxMe < [children_ count]; idxMe++ )
{
	CCNode * me = (CCNode *) [children_ objectAtIndex:idxMe];
	for (int idxYou=idxMe+1; idxYou < [children_ count]; idxYou++ )
	{		
		CCNode * you = (CCNode *) [children_ objectAtIndex:idxYou];
 
		if ( [self isCollidingObject:Me WithObject:you] ) 
		{
			// collision detected !
			[collisionDelegate performSelector:collisionSelector withObject:me withObject:you];
		}
	}
}

So now you would’nt have any double check calls:

AB, AC, AD, AE -> 4 checks, 0 double checks
BC, BD, BE -> 3 checks, 0 double checks
CD, CE -> 2 checks, 0 double checks
DE -> 1 checks, 0 double checks
10 total checks, 0 double checks

if you have objects in your scene which you dont want to test in your collision detection or even better if you want to have collision groups you have to advance your CCSprite with a collisionGroupID. To be sure the collision detection will be as fast as possible you should check the collisionGroupID before you check the collision it self :

// assuming we are implementing an udate routine in a CCScene or CCLayer class
..
for (int idxMe=0; idxMe < [children_ count]; idxMe++ )
{
	CCNode * meNode = (CCNode*) [children_ objectAtIndex:idxMe];
 
	if ( ! [meNode isKindOfClass:[CCSpriteExt class]] )
	{
		continue;
	}
 
	CCSpriteExt * me = (CCSpriteExt *) meNode;
 
	for (int idxYou=idxMe+1; idxYou < [children_ count]; idxYou++ )
	{		
		CCNode * youNode = (CCNode*) [children_ objectAtIndex:idxYou];
		if ( ! [youNode isKindOfClass:[CCSpriteExt class]] )
		{
			continue;
		}
 
		CCSpriteExt * you = (CCSpriteExt *) youNode;
 
		if ( (me.collisionID == you.collisionID) && 
		    [self isCollidingObject:Me WithObject:you] )
		{
			// collision detected !
			[collisionDelegate performSelector:collisionSelector withObject:me withObject:you];
		}
	}
}

Now take a deep breath before we take a closer look into the method isCollidingObject:WithNode:. To keep the performance and avoid lags you should know how many collision calls you could have and how time intensive they are - even if you optimize your collision detection method pretty much.

Collision Detection Math

There are many collision detections you may want to test, lets say if you have fast moving projectiles, you probably want to test if a line (motion between two points of one projectile) collides with another (motion between two other points of a second projectile). Since this is a lot of stuff I will put that into my next post.

Collision Detection Method

You should start by testing a bounding box even if you want a pixel by pixel collision detection to save cpu time. May be its a good idea to setup a collision type for each CCSpriteExt and when detecting the collision you could choose the best algorithm for it. Lets say there are 4 collision body types: BOUNDING_BOX, BOUNDING_SPHERE, POLYGON and PIXEL. All of them starts with bounding box since this is a really easy thing for the cpu. If you are not rotating your sprites you could use CCSprite.contentSize and CCSprite.anchorPoint to calculate your bounding box. You could also use CCSprite.boundingBox which returns the current transformed bounding box.

To keep all colliding stuff in one method you should shift the code "(me.collisionID == you.collisionID)" into this function, too and remove it from the collision test loop. To make this example not to difficult I will just test collisions with the same collision body type and I will not implement a pixel by pixel test routine here.

-(BOOL) isCollidingObject:(CCSpriteExt*)obj1 WithObject:(CCSpriteExt*) obj2
{
	if ( obj1.collisionID == obj1.collisionID )
	{
		if ( obj1.collisionBodyType != obj2.collisionBodyType) 
		{
			// not supported yet.
			return NO;
		}
		switch (obj1.collisionBodyType )
		{
			case BOUNDING_BOX : 
			return [self isCollidingBox:obj1 WithBox:obj2]; 
 
			case BOUNDING_SPHERE :
			return [self isCollidingBox:obj1 WithBox:obj2] && // first boxed test!
			[self isCollidingSphere:obj1 WithSphere:obj2];
 
			case POLYGON : 
			return [self isCollidingBox:obj1 WithBox:obj2] && // first boxed test!
			[self isCollidingPolygon:obj1 WithPolygon:obj2];
 
			case PIXEL : 
			return [self isCollidingBox:obj1 WithBox:obj2] && // first boxed test!
			[self isCollidingPixel:obj1 WithPixel:obj2];
 
			default:
			// not supported type
			break;
		}
	}
	return NO;
}

Since all collision tests need a boundingbox test first lets take a look into its method. Basically you want to check if a bounding box intersects with another bounding box. If you dont have transformed bounding boxes you could check the intersection even more efficiant. Two sprites are colliding if the vertical distances between anchor points and edges of both sprites are smaller than the vertical distance between them and the horizontal distances between anchor points and edges of both sprites are smaller than the horizontal distance between them.

Non-transformed bounding boxes goes here :

-(BOOL) isCollidingBox : (CCSpriteExt *) obj1 WithBox: (CCSpriteExt *) obj2 
{	
	float dx = fabs(obj2.position.x - obj1.position.x);
	float dy = fabs(obj2.position.y - obj1.position.y);	
 
	float dx1;
	float dx2;
 
	if (obj2.position.x > obj1.position.x) 
	{
		dx1 = (1-obj1.collisionSprite.anchorPoint.x) * obj1.collisionSprite.contentSize.width * obj1.collisionSprite.scaleX;
		dx2 = obj2.collisionSprite.anchorPoint.x * obj2.collisionSprite.contentSize.width * obj2.collisionSprite.scaleX;
	}
	else 
	{
		dx1 = (obj1.collisionSprite.anchorPoint.x) *  obj1.collisionSprite.contentSize.width * obj1.collisionSprite.scaleX;
		dx2 = (1-obj2.collisionSprite.anchorPoint.x) *obj2.collisionSprite.contentSize.width * obj2.collisionSprite.scaleX;
	}
 
	float dy1;
	float dy2;
 
	if (obj2.position.y < obj1.position.y) 
	{
		dy1 = obj1.collisionSprite.anchorPoint.y * obj1.collisionSprite.contentSize.height * obj1.collisionSprite.scaleY;
		dy2 = (1 - obj2.collisionSprite.anchorPoint.y) * obj2.collisionSprite.contentSize.height * you.collisionSprite.scaleY;
	}
	else 
	{
		dy1 = (1 - obj1.collisionSprite.anchorPoint.y) * obj1.collisionSprite.contentSize.height * obj1.collisionSprite.scaleY;
		dy2 = (obj2.collisionSprite.anchorPoint.y) * obj2.collisionSprite.contentSize.height * obj2.collisionSprite.scaleY;
	}
 
	return !((dx > (dx1+dx2)) || (dy > (dy1+dy2)));
}

But if you have transformed bounding boxes use cocos boundingbox function and CGRechtIntersection to test the collision - and even more it is human readable ;-) :

-(BOOL) isCollidingBox : (CCSpriteExt *) obj1 WithBox: (CCSpriteExt *) obj2 
{
	return !CGRectIsNull( CGRectIntersection(obj1.boundingBox, obj2.boundingBox) );	
}

The spherical collision detection needs a radius to test the collision. A collision is detected if the distance between two objects is smaller than the sum of radius. If you dont want to enhance CCSprite with a radius use CCSprite.contentSize.width/2 or CCSprite.boundingBox.width/2 or what ever.

-(BOOL) isCollidingSphere:(CCSpriteExt*) obj1 WithSphere:(CCSprite *) obj2
{
	float minDistance = object.radius + self.radius;
	float dx = obj2.position.x - obj1.position.x;
	float dy = obj2.position.y - obj1.position.y;
	if (! (dx > minDistance || dy > minDistance) )
	{
		float actualDistance = sqrt( dx * dx + dy * dy );
		return (actualDistance < = minDistance);
	}
	return NO;
}

If you dont want mix up CCSprite with your collision detection code you could also try to create a new class "CCCollisionBody" and put all the collision attributes like "radius" and "collisionBodyType" there and also a reference to your sprite so you can access the position and dimensions of your sprite :

//
//  CCCollisionBody.h
//
 
/**
 * collision body types
 * @version 1.0
 */
#define COLLISIONBODYTYPE_NONE		0
#define COLLISIONBODYTYPE_POINT		1
#define COLLISIONBODYTYPE_LINE		2
#define COLLISIONBODYTYPE_SPHERE	3
#define COLLISIONBODYTYPE_RECT		4
#define COLLISIONBODYTYPE_POLY		5
#define COLLISIONBODYTYPE_PIXEL		6
 
@class CCNode; // pre decleration of CCNode, import will be in .m file
/** 
 * A class to define the collision body for a proxy game object.
 * collisionbodys are classified by types. Not all types are yet defined to collide with each other.
 * please use sphere and rect collisionbodys only to ensure proper functionallity
 */
@interface CCCollisionBody : NSObject 
{
	CCNode * proxy; // proxy object 
	uint type; // defines the collision body type (see above)
	CGSize size; // if used by the type : defines the dimensions of the collision body.
	float radius; // if used by the type : defines the radial dimensions of the collision body.
	BOOL disabled; // if true the collions are deactivated otherwise collisions with this body will be checked.
	int collisionGroupID; // collision group ID - only objects of the same group IDs will collide
}
@property (nonatomic, assign) int collisionGroupID;
@property (nonatomic, assign) bool disabled;
@property (nonatomic, retain) CCNode * proxy;
@property (nonatomic, assign) uint type;
@property (nonatomic, assign) CGSize size;
@property (nonatomic, assign) float radius;
 
/**
 * creates a spherical collision body specified by a given radius and a proxy game object.
 */
-(id) initAsSphereWithProxy:(CCNode*) proxyObject Radius: (float) sphereRadius;
 
/**
 * creates a rectangle collision body specified by a given size and a proxy game object.
 */
-(id) initAsRectWithProxy:(CCNode*) proxyObject Size:(CGSize) rectSize;
 
/**
 * returns if a collision body collides with another collision body.
 * v1.0 only supports sphereical and rectangle collisionbodys.
 */
-(bool) collidesWith:(CollisionBody*) object;
 
@end

//
//  CollisionBody.m
//
 
#import "CCCollisionBody.h"
#import "cocos2d.h"
 
#pragma mark -
#pragma mark CCCollisionBody Implementation
@implementation CCCollisionBody
@synthesize radius, size, type, proxy, disabled, collisionGroupID;
 
#pragma mark -
#pragma mark Initialisierung
 
#pragma mark  
#pragma mark COLLISIONBODYTYPE_NONE : no collision
 
-(id) initWithProxy:(CCNode*) proxyObject
{
	self = [super init];
	if (self)
	{
		self.type = COLLISIONBODYTYPE_NONE;
		self.proxy = proxyObject;
	}
	return self;
}
 
#pragma mark  
#pragma mark COLLISIONBODYTYPE_RECT : bounding box
-(id) initAsRectWithProxy:(CCNode*) proxyObject Size:(CGSize) rectSize
{
	if ([self initWithProxy:proxyObject])
	{
		self.size = rectSize;
		self.type = COLLISIONBODYTYPE_RECT;
	}
	return self;
}
 
#pragma mark  
#pragma mark COLLISIONBODYTYPE_SPHERE : bounding sphere
-(id) initAsSphereWithProxy:(CCNode*) proxyObject Radius: (float) sphereRadius;
{
	if ([self initWithProxy:proxyObject])
	{
		self.radius = sphereRadius;
		self.type = COLLISIONBODYTYPE_SPHERE;
	}
	return self;
}
 
#pragma mark -
#pragma mark cleanup
 
-(void) dealloc
{
	self.proxy = nil;
	[super dealloc];
}
 
#pragma mark -
#pragma mark collision tests
 
#pragma mark  
#pragma mark Rect-Rect collision 
-(bool) isRectRectIntersection:(CollisionBody*) object
{
	return !CGRectIsNull( CGRectIntersection(proxy.boundingBox, object.proxy.boundingBox) );	
}
 
#pragma mark  
#pragma mark Sphere-Sphere collision 
-(bool) isSphereSphereIntersection:(CollisionBody*) object
{
	float minDistance = object.radius + self.radius;
	float dx = object.proxy.position.x - self.proxy.position.x;
	float dy = object.proxy.position.y - self.proxy.position.y;
	if (! (dx > minDistance || dy > minDistance) )
	{
		float actualDistance = sqrt( dx * dx + dy * dy );
		return (actualDistance < = minDistance);
	}
	return false;
}
 
 
 
#pragma mark  
#pragma mark main collision detection
-(bool) collidesWith:(CollisionBody*) object
{
	if (!self.disabled && !object.disabled && self.collisionGroupID == object.collisionGroupID)
	{
		if (self.type == COLLISIONBODYTYPE_RECT && object.type == COLLISIONBODYTYPE_RECT)
		{
			return [self isRectRectIntersection:object];
		}
 
		if (self.type == COLLISIONBODYTYPE_SPHERE && object.type == COLLISIONBODYTYPE_SPHERE)
		{
			return [self isSphereSphereIntersection:object];
		}
 
		// NOT SUPPORTED COLLISION TYPE!
	}
 
	return NO;
}
 
@end

Programming iPhone Games with Cocos2D Part 3

hhamm — Fri, 26 Feb 2010 10:55:06 +0000

As promised in this post I want to give you a detailed view into animated sprites with cocos2d.

Lets say we have 24 png pictures as frames for our animation ( see below ). Since Cocos 0.8.x or something the zwoptex format is supported. Basically the zwoptex format is based on two files. One is a so called AtlasSprite png file containing all frames and sprites somhow arranged in it. The other is a plist file which has all the location data and sprite dimensions of each frame and sprites as xml formated readable text in it. Here is an example how the xml tree like :

root
+-frames
|    |
|    +-Frame1.png
|    |    |
|    |    +-x
|    |    +-y
|    |    +-width
|    |    +-height
|    |    +-offsetX
|    |    +-offsetY
:    :
.    .
:    :
|    +-Frame9.png
|         |
|         +-x
|         +-y
|         +-width
|         +-height
|         +-offsetX
|         +-offsetY
|
+-texture
|
+-width
+-height

There is a great tool online to create these two files : http://zwoptex.zwopple.com . Once Zwoptex started make sure the canvas is big enough and also not too big to import all your frames. Zwoptex will trim your png files so transparent spaces will be cutted off. If you dont want that, you can select all images and choose “untrim”. Once all frames are loaded and trimmed or untrimmed you can choose any autoalignment function or align them manually. Some times you get better or worse results when choosing an alignment function twice. Try it!

Ok, now we have two files blob.png containing 24 frames of our blob animation and a blob.plist containing the location and dimension information of all frames.

In cocos2d they changed pretty much since v0.8 especially how to create an animation. I will not explain how to create them in earlier version, but if some one is really interested in that, feel free to ask me here.

In Cocos2d all animation frames are stored in a so called animation cache ( CCSpriteFrameCache ). Once you loaded your plist file into that cache you can access the location and dimension information in it by using the former name of the png file. In this example this would be “blob_idle_01.png” for frame 1. If you want to change that name you have just to open the plist file in xcode and change it in what you want. But be sure you dont use any frame name twice.

Once you loaded the plist into the cache you can create an animation (CCAnimation) object and add all the frames you want into it. CCAnimation does support creating your frames based on files, but using a frame cache is much faster. After you have your animation object the best way you create the sprite is to use the frame cache creating your sprite, like “gimmi the first frame as sprite”. Finally you have to run the animation action. Here is a complete code of how to create your animated sprite :

CCSpriteFrameCache * cache = [CCSpriteFrameCache sharedSpriteFrameCache];
[cache addSpriteFramesWithFile:@"blob.plist"];
 
CCAnimation * animation = [[CCAnimation alloc] initWithName:@"idle" delay:1/24.0];
for ( int i=1; i < 25; ++i )
{
	// frame name format: blob_idle_01.png .. blob_idle_24.png
	NSString * fname = [NSString stringWithFormat:@"blob_idle_%02i.png", i];
	[animation addFrame:[cache spriteFrameByName: fname]];
}
CCSprite * blob = [CCSprite spriteWithSpriteFrameName:@"blob_idle_01.png"];
// deprecated since 0.9: CCSprite * blob = [cache createSpriteWithFrameName:@"blob_idle_01.png"];
id action = [CCRepeatForever actionWithAction:[CCAnimate actionWithAnimation:animation]];
[blob runAction:action];
 
// position our blob
blob.position = ccp( 160, 240 );
 
// add blob to scene ( self should be a visible CCLayer or CCScene )
[self addChild:blob];

Finally :

Programming iPhone Games with Cocos2D Part 2

hhamm — Tue, 23 Feb 2010 15:54:34 +0000

The huge Library of cocos2D gives you some really good start for nearly everything you want to program. But sometimes it still might not fit your needs as you wanted. In this post I will show you how to enhance the menu class of cocos2d to function as radio menu.

A Menu in cocos2d grabs the touch events and delegates them to the menu items. You can hover over the menu items and when releasing the touch the current menu item under your finger will be executed. In cocos2D it is the same if you want to create a menu or a single button. If you just need one button you have to create a menu with one button. Keep in mind that you cannot slide from one menu into another, if the user does not release the touch the touch will be still captured by the first menu. But you can compose diffrent button types to one menu and also place them where you wanted. The menu class does have some align functions but you dont need to use them.

Ok, lets start with that what cocos2D have for you. First you have to create some menu items. In cocos2d they are called CCMenuItem (sounds reasonable). There a plenty of them but I will introduce here just one : CCMenuItemImage is an image button with diffrent images for each state: normal, selected and disabled. If you dont need disabled you dont have to set it up. Menu items support targets, so if you press a button a function will be called. Here is an example of how to create a CCMenuItemImage:

#import "MyScene.h"
@implementation MyScene
-(void) onButton1Pressed:(id) sender
{
	// TODO: something phenomenal 
}
 
-(void) onButton2Pressed:(id) sender
{
	// TODO: something even more phenomenal 
}
 
-(void) setupMenu
{
	CCMenuItemImage * button1 = [CCMenuItemImage itemFromNormalImage:@"b1_up.png" selectedImage:@"b1_down.png" target:self selector:@selector(onButton1Pressed:)];
 
	CCMenuItemImage * button2 = [CCMenuItemImage itemFromNormalImage:@"b2_up.png" selectedImage:@"b2_down.png" disabledImage:"b2_disabled.png" target:self selector:@selector(onButton2Pressed:)];
}

To actually create the menu you have to put all your buttons into a CCMenu class. One really strange thing is you have to create the CCMenu with items, you are able to add more items (childs) later but you have to create it with at least one item. So here is the complete code including alignment of all buttons:

#import "MyScene.h"
@implementation MyScene
-(void) onButton1Pressed:(id) sender
{
	// TODO: something phenomenal 
}
 
-(void) onButton2Pressed:(id) sender
{
	// TODO: something even more phenomenal 
}
 
-(void) setupMenu
{
	CCMenuItemImage * button1 = [CCMenuItemImage itemFromNormalImage:@"b1_up.png" selectedImage:@"b1_down.png" target:self selector:@selector(onButton1Pressed:)];
 
	CCMenuItemImage * button2 = [CCMenuItemImage itemFromNormalImage:@"b2_up.png" selectedImage:@"b2_down.png" disabledImage:"b2_disabled.png" target:self selector:@selector(onButton2Pressed:)];
 
	CCMenu * menu = [CCMenue menueWithItems:button1 , button2, nil]; // you have to terminate the list with nil
 
	menu.position = ccp ( 160, 240 );
	[menu alignItemsHorizontallyWithPadding:10.0f];
	[self addChild: menu];
}

Now when you just want to have a radio button menu instead, so that one item always is selected and if you select another you want to unselect the previous one. When hovering over the items you want to show both – the current selected one and the one you are targeting. Also if you cancel your hovering (like if the touch gets outside the screen) you want to unselect the one you are targetting and fallback to the one that was previously selected. All in all you need to enhance the CCMenu class. Lets start with the easy part, the header file of our new class called CCRadioMenu :

//
//  CCRadioMenu.h
//  Cocos2d Version used: 0.9.0 alpha
//  Created by Hans Hamm on 24.11.09.  
//
 
#import "cocos2d.h"
 
 
@interface CCRadioMenu : CCMenu {
	int selectedItemIndex; // will be the current targeted item 
	int fallBackItemIndex; // will be our fall back item (previously selected one)
}
 
@property int selectedItemIndex;
 
-(CCMenuItem *) itemForTouch: (UITouch *) touch; // will retrieve the current item for the touch
 
@end

Ok, there are several ways to implement such a menu, and probably this is not the best one. If someone has an improved version, feel free to post it. My working code sounds like :

//
//  CCRadioMenu.m
// 
//  Cocos2d Version used: 0.9.0 alpha
//  Created by Hans Hamm on 24.11.09.  
//
 
#import "CCRadioMenu.h"
 
@implementation CCRadioMenu
 
@synthesize selectedItemIndex;
 
/**
 * will be called if a touch started.
 */
-(BOOL) ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event
{
	if( state != kMenuStateWaiting ) return NO; // do not track events if menu is busy
 
	selectedItem = [self itemForTouch:touch]; // any of our items was selected?
 
	if( selectedItem ) // if one of our items was selected
	{
		[selectedItem selected]; // make it be selected
		state = kMenuStateTrackingTouch; // mark menu as busy
		return YES; // say : "yes, we want more events from this touch"
	}
	return NO; // none of our items was selected, so we dont want to hear from this touch event anymore
}
 
/**
 * will be called if a touch event ended.
 */
-(void) ccTouchEnded:(UITouch *)touch withEvent:(UIEvent *)event
{
	NSAssert(state == kMenuStateTrackingTouch, @"[Menu ccTouchEnded] -- invalid state");
 
	for( CCMenuItem* item in children ) // unselect all items
	{
		[item unselected];	
	}
 
	if (selectedItem) // if we have selected an item:
	{
		[selectedItem selected]; // make it selected
		[selectedItem activate]; // an execute it
		fallBackItemIndex = selectedItemIndex; // the new fall back item is the current target
	}
	else // there is none selected
	{
		self.selectedItemIndex = fallBackItemIndex; // so just fall back to the old one
	}	
 
	state = kMenuStateWaiting; // we are not busy anymore
}
 
/**
 * will be called if a touch event was canceled. Normaly the user dont want
 * to execute the last selected one, so just fall back to the old one here.
 */
-(void) ccTouchCancelled:(UITouch *)touch withEvent:(UIEvent *)event
{
	NSAssert(state == kMenuStateTrackingTouch, @"[Menu ccTouchCancelled] -- invalid state");
 
	for( CCMenuItem* item in children ) // unselect all items
	{
		[item unselected];	
	}
	// on cancel just fall back to the old one :
	self.selectedItemIndex = fallBackItemIndex;
 
	// we are not busy anymore
	state = kMenuStateWaiting;
}
 
/**
 * will be called if a touch event moved.
 */
-(void) ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event
{
	NSAssert(state == kMenuStateTrackingTouch, @"[Menu ccTouchMoved] -- invalid state");
 
	// still one of our items selected?
	CCMenuItem * currentItem = [self itemForTouch:touch]; 
 
	// if not, what was the fallback item again?
	CCMenuItem * fallBackItem = (CCMenuItem *) [children objectAtIndex:fallBackItemIndex];
 
	// if the new selected item changed and is not our fallback item
	if (currentItem != selectedItem && currentItem != fallBackItem)
	{				
		[selectedItem unselected]; // unselect the previous one
		selectedItem = currentItem; // this is our new targeted one ( could be nil ! ) 
 
		if (selectedItem) // if there is a new one ( touch could be outside the menu )
		{		
			[selectedItem selected]; // select this new one
		}
		else // there is no new one, so just fall back to the old one
		{
			[[children objectAtIndex:fallBackItemIndex]selected];
		}
 
	}
}
 
/**
 * Returns the first menu item hit by a touch event.
 * Also we could update the selectedItemIndex here.
 */
-(CCMenuItem *) itemForTouch: (UITouch *) touch
{
	CGPoint touchLocation = [touch locationInView: [touch view]]; // touch location
	touchLocation = [[CCDirector sharedDirector] convertToGL: touchLocation]; // in gl coordinates
	int idx = -1; // helper variable to determine the index of the item ( 0 = first item )
 
	for( CCMenuItem* item in children ) 
	{
		idx++; // in first step this would be zero ( 0 )
 
		// convert the touch to the local coordinates of the current item
		// and check if the location is inside the rect of it
 
		CGPoint local = [item convertToNodeSpace:touchLocation]; 		
		CGRect r = [item rect];  
		r.origin = CGPointZero;
 
		if( CGRectContainsPoint( r, local ) ) // if touch is inside it
		{
			selectedItemIndex = idx;  // save the itemIndex and..
			return item;	 // .. return the item
		}
	}
 
	// we found not item hit by that touch:
	return nil;
}
 
/**
 * returns the current selected Item Index.
 */
-(int) selectedItemIndex
{
	return selectedItemIndex;
}
 
/**
 *  sets the current Selected Item Index ( but does not activate it )
 */
- (void)setSelectedItemIndex:(int) value 
{
	for( CCMenuItem* item in children )  // unselect all
	{
		[item unselected];	
	}
 
	selectedItemIndex = value;	// store new index
	selectedItem = [children objectAtIndex:selectedItemIndex]; // get the item for that index	
	fallBackItemIndex = selectedItemIndex; // store as fallBackIndex, too.	
	[selectedItem selected]; // mark as selected.
}
 
@end

So how to change your first “CCMenu-Code” to fit our CCRadioMenu thing ? All you have to do is to import your class, change CCMenu to CCRadioMenu and thats it. May be just one thing more. If you want a specific item be initially selected, you have to set selectedItemIndex once the menu is created:

menu.selectedItemIndex = 0; // first Item should be initially selected

so the code should now look like this :

#import "MyScene.h"
#import "CCRadioMenu.h"
 
@implementation MyScene
-(void) onButton1Pressed:(id) sender
{
	// TODO: something phenomenal 
}
 
-(void) onButton2Pressed:(id) sender
{
	// TODO: something even more phenomenal 
}
 
-(void) setupMenu
{
	CCMenuItemImage * button1 = [CCMenuItemImage itemFromNormalImage:@"b1_up.png" selectedImage:@"b1_down.png" target:self selector:@selector(onButton1Pressed:)];
 
	CCMenuItemImage * button2 = [CCMenuItemImage itemFromNormalImage:@"b2_up.png" selectedImage:@"b2_down.png" disabledImage:"b2_disabled.png" target:self selector:@selector(onButton2Pressed:)];
 
	CCRadioMenu * menu = [CCRadioMenu menueWithItems:button1 , button2, nil]; // you have to terminate the list with nil
 
	menu.selectedItemIndex = 0; // first Item should be initially selected
 
	menu.position = ccp ( 160, 240 );
	[menu alignItemsHorizontallyWithPadding:10.0f];
	[self addChild: menu];
}

Update to 0.99

Since they changed some ivar names in 0.99 you have to use “children_” instead “children”. So if you are using 0.99 or later you have to use my updated code for CCRadioMenu class.

Updated code of CCRadioMenu class for cocos2d 0.99 stable and later :

#import "CCRadioMenu.h"
 
@implementation CCRadioMenu
 
@synthesize selectedItemIndex;
 
-(BOOL) ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event
{
	if( state != kMenuStateWaiting ) return NO;
 
	selectedItem = [self itemForTouch:touch];
 
	if( selectedItem ) 
	{
		[selectedItem selected];
		state = kMenuStateTrackingTouch;
		return YES;
	}
	return NO;
}
 
-(void) ccTouchEnded:(UITouch *)touch withEvent:(UIEvent *)event
{
	NSAssert(state == kMenuStateTrackingTouch, @"[Menu ccTouchEnded] -- invalid state");
 
	for( CCMenuItem* item in children_ ) 
	{
		[item unselected];	
	}
 
	if (selectedItem)
	{
		[selectedItem selected];
		[selectedItem activate];
		fallBackItemIndex = selectedItemIndex;
	}
	else
	{
		self.selectedItemIndex = fallBackItemIndex;
	}	
 
	state = kMenuStateWaiting;
}
 
-(void) ccTouchCancelled:(UITouch *)touch withEvent:(UIEvent *)event
{
	NSAssert(state == kMenuStateTrackingTouch, @"[Menu ccTouchCancelled] -- invalid state");
 
	for( CCMenuItem* item in children_ ) 
	{
		[item unselected];	
	}
 
	self.selectedItemIndex = fallBackItemIndex;
 
	state = kMenuStateWaiting;
}
 
-(void) ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event
{
	NSAssert(state == kMenuStateTrackingTouch, @"[Menu ccTouchMoved] -- invalid state");
 
	CCMenuItem * currentItem = [self itemForTouch:touch];
	CCMenuItem * fallBackItem = (CCMenuItem *) [children_ objectAtIndex:fallBackItemIndex];
	if (currentItem != selectedItem && currentItem != fallBackItem) 
	{				
		[selectedItem unselected];
		selectedItem = currentItem;
 
		if (selectedItem)
		{		
			[selectedItem selected];
		}
		else
		{
			[[children_ objectAtIndex:fallBackItemIndex]selected];
		}
 
	}
}
 
-(CCMenuItem *) itemForTouch: (UITouch *) touch
{
	CGPoint touchLocation = [touch locationInView: [touch view]];
	touchLocation = [[CCDirector sharedDirector] convertToGL: touchLocation];
	int idx = -1;
 
	for( CCMenuItem* item in children_ ) 
	{
		idx++;
		CGPoint local = [item convertToNodeSpace:touchLocation];
 
		CGRect r = [item rect];
		r.origin = CGPointZero;
 
		if( CGRectContainsPoint( r, local ) )
		{
			selectedItemIndex = idx;
			return item;
		}
	}
 
	return nil;
}
 
-(int) selectedItemIndex
{
	return selectedItemIndex;
}
 
- (void)setSelectedItemIndex:(int) value 
{
	for( CCMenuItem* item in children_ ) 
	{
		[item unselected];	
	}
 
	selectedItemIndex = value;	
	selectedItem = [children_ objectAtIndex:selectedItemIndex];
 
	fallBackItemIndex = selectedItemIndex;
 
	[selectedItem selected];      
}
 
@end

Programming iPhone Games with Cocos2D Part 1

hhamm — Tue, 16 Feb 2010 18:31:05 +0000

Hi,
I want to talk about cocos2d since I really think this is an amazing graphics and sound engine especially for small games like run&jump games or shooters.

Cocos2D is meant to display 2D content only but for most games this is enough. Use some parallax layers to visually update your 2D to 2.5D, or if you want to create real 3D games use unity3D.

If you want to start with cocos2d just download the current version here and seek for the install bash script to install the templates. Once you’ve done that you could start by creating a new Project in XCode and choose “cocos2d 0.99.0 Application”. In this case I give it the name “MyCocosGame”. After the project has been created you will find the start of everything in “MyCocosGameAppDelegate.m”.

Since version 0.9 alpha all the cocos2d stuff starts with CC prefix. Here some quick cocos2d classes you should know about:

CCDirector

This class directs the render process, handles scheduled timers and display settings. You could say this is the heart of cocos2d. To start up cocos2d you need to set a pixelformat, attach it to a UIWindow class and startup a CCScene which will lead us to the next important class.

CCScene

A Scene basically is a layer with all the content you want to render in it. You could use transition effects to blend from one scene to another (like crossblend, roll-in, etc.). CCDirector uses a stack of scenes so you can push and pop scenes to easily define a menue structure. But I recommend not to use this feature with many scenes since this could use lots of memory. Instead of “pushScene” and “popScene” use “replaceScene” which will release the current scene after the transition is done.

CCNode

CCNode is the root node of everything you can transform. So CCScene is basically a CCNode ( well if you look into the code you well see that actually CCScene is a CCLayer, but then CCLayer is a CCNode ). You could do interesting stuff with CCNodes like scaling, positioning and you can add child nodes to nodes. Nodes also have “anchorPoints” – others may call them “pivots”. Anchors could be inside the content ( between 0 and 1) or outside (like -1 and +2).
The most interesting feature is to transform points to local coordinates and vice versa.

CCSprite

Sprites are a known feature and you will find every thing you expect from it. Simpliest way to create one is to call within a Scene :

CCSprite * mySprite = [CCSprite spriteWithFile:@"myFile.png"];
mySprite.position = CGPointMake(160, 240);
mySprite.rotation = 45; // Degrees
[self addChild:mySprite];

You could create animated sprites and even more impressive are actions you could apply to them (actually to all CCNodes). Since this is a first introduction I will explain how to create animated sprites later.

CCAction

In my humble opinion actions are the most impressive thing in cocos2d. You can create complex actions and assign them to any node. There are half a dozen actions so I will introduce just a few.

CCCallFunc CCCallFuncN CCCallFuncND	will call a function will call a function with current Node as Attribute will call a function with current Node and Data as attributes
CCDelayTime	waits a given time before next action will start
CCSequence	will call several actions one after another
CCSpawn	will call several actions at once
CCRepeat	will repeat an action for a duration or x times
CCRepeatForever	will repeat an action endless
CCFadeIn CCFadeTo	will fade in an RGBProtocol supported node will fade to a given value
CCMoveTo CCMoveBy	will move a node over time to a given destination will move a node by a given offset over a time

Here is an example how to use them :

CCSprite * tveffect = [CCSprite spriteWithFile:@"televisionStreak.png"]; 
ccBlendFunc additiveBlendFunction = {GL_SRC_ALPHA, GL_ONE};
tveffect.blendFunc = additiveBlendFunction;
 
tveffect.position = ccp(160,0);	
[tveffect setOpacity:0];
 
id fadeAction = [CCSequence actions:
				 [CCFadeTo actionWithDuration:0.5 opacity:255],
				 [CCDelayTime actionWithDuration:1.0],
				 [CCFadeTo actionWithDuration:0.5 opacity:0],
				 nil];
 
id moveAction = [CCSequence actions:
				 [CCMoveTo actionWithDuration:0 position:ccp(160, 0)],
				 [CCMoveTo actionWithDuration:2 position:ccp(160, 480],
				 nil];
 
[tveffect runAction:[CCRepeatForever actionWithAction: [CCSpawn actions:fadeAction,moveAction, nil]]];

For the first introduction this should be it. In the next chapter I will talk about how to handle touch events and further more how to create your first menu.

Understanding OpenGL Blend Function

hhamm — Fri, 22 Jan 2010 18:19:08 +0000

I really don’t know who and why some one create a so complex thing like alpha blending modes in openGL. When I first saw these GL_ONE, GL_ONE_MINUS_SRC_ALPHA stuff I really did not get it. I did not get on second time, and the same when using it for thousand times. Long story short, here is what you need in the most cases: cross blending, additive blending, multiplied blending.

Cross Blending

Alpha of source will control the blending. If alpha is 1.0 you will only see the source, if its 0.0 you will see the target. Use : glBlendFunc( GL_SRC_ONE_MINUS_ALPHA, GL_SRC_ALPHA );

Rn = Rz * (1.0 - Aq) + Rq * Aq;
Gn = Gz * (1.0 - Aq) + Gq * Aq;
Bn = Bz * (1.0 - Aq) + Bq * Aq;
An = Az * (1.0 - Aq) + Aq * Aq;

Additive Color Blending

You need this to lighten up things. Use: glBlendFunc( GL_ONE, GL_ONE );

Rn = Rz + Rq;
Gn = Gz + Gq;
Bn = Bz + Bq;
An = Az + Aq;

Additive Alpha Blending

Its same like additive color blending, but it uses alpha channel of source to define the blending strength. Use glBlendFunc( GL_ONE, GL_SRC_ALPHA );

Rn = Rz + Rq * Aq;
Gn = Gz + Gq * Aq;
Bn = Bz + Bq * Aq;
An = Az + Aq * Aq;

Multiplied Blending

You just multiply the color values. You could use this to colorize a scene. etc. Use: glBlendFunc( GL_ZERO. GL_DST_COLOR );

Rn = Rz * Rq;
Gn = Gz * Gq;
Bn = Bz * Bq;
An = Az * Aq;

Hope this is useful for some one.

Change Company Name in XCode

hhamm — Tue, 24 Nov 2009 13:00:36 +0000

If you create a new file in XCode, it will autogenerate a header like :

//
//  MyFileName.m
//  MyProjectName
//
//  Created by Hans Hamm on 24.11.09.
//  Copyright 2009 __MyCompanyName__. All rights reserved.
//

To change __MyCompanyName__ to your company, just enter the following command into your console:

defaults write com.apple.Xcode PBXCustomTemplateMacroDefinitions '{ "ORGANIZATIONNAME" = "My Company";}'

Setup XCode SDK 3.0 to work for OS 3.0.1

hhamm — Fri, 04 Sep 2009 11:36:49 +0000

XCode SDK 3.0 does not yet support OS 3.0.1, so if you plug in an updated iPhone you will encounter an error. There is an Advisory at Apples developer portal which solves this problem. Since it seams there are no relevant changes from 3.0 to 3.0.1 the solution is to tell XCode to use OS 3.0 Support for 3.0.1. OS Devices by linking a directory 3.0.1 to 3.0 within your DeviceSupport directory on your mac.
To do so open your Mac Terminal and type in the following two simple commands :

cd /Applications/Utilities
ln -s /Developer/Platforms/iPhoneOS.platform/DeviceSupport/3.0\ \(7A341\) /Developer/Platforms/iPhoneOS.platform/DeviceSupport/3.0.1

XCode should now work fine with OS 3.01

calling functions from inside the watch window

fschaper — Fri, 28 Aug 2009 01:53:59 +0000

It sometimes becomes handy to be able to call functions or methods while debugging. Say you have some complex type that you want to visualize on the console or to your debug output.

The VisualStudio expression engine makes this an easy task (no need to brush up your assembler knowledge on this one) just enter the function signature into your watch window. Note that you will need to fully qualify any namespaces.

If your project consists of multiple modules, or when you use the same function signature in different compilation units you will have to tell the debugger where to find the symbol.
For this the context operator {[function],[source],[module] } location is defined.
You should have a look at the reference[1] over at MSDN to familiarize yourself with the syntax.

[1] – The context operator – http://msdn.microsoft.com/en-us/library/wztycb7f%28VS.80%29.aspx

Bomb Commander on iPhone and iPod Touch

hhamm — Mon, 03 Aug 2009 14:25:31 +0000

Bomb Commander Deploys on App Store

Fast-paced Space Combat Title Released for Download Today

Prepare yourself for an intense battle to save the Earth from total annihilation as Bomb Commander releases today in the App Store.

Developed by ANIMA Entertainment, Bomb Commander rests the fate of the world on your fingers as you seek to end a massive alien invasion from completely eliminating the human race. Armed with the fiercest arsenal of bombs ever to hit mobile gaming, battle treacherous foes in outer space using both smart tactics and quick, precise maneuvers on your iPhone/iPod Touch.

Features:

Ultimate Bombing Power — Use blast-bombs, lightning bombs and black-hole bombs to create chain reactions and conquer your foes
Unique Gaming Mechanics — Providing a whole-new spin on the “space invasion” genre, take advantage of precision touch controls that one can only experience on the iPhone!
Beautiful Space Environments — Marvel at the chaos and destruction as you bomb your way through the scenic depths of space.
Track Scores via Online Leaderboards — Show off your bombing skills to the world through online leaderboards and the tracking of your scores.

Think. Bomb. Win.

visual studio breakpoint dependency hierarchy

fschaper — Tue, 09 Jun 2009 16:27:28 +0000

A serious amount of time during software development is spent with debugging. Visual Studio makes the task of debugging native applications already a lot more comfortable but as with all things there is still room for improvement.

One feature that I was missing of late was the concept of hierarchical breakpoints.
Often during debugging I want the debugger to break in some method or function but only coming from an specific path.

To give you an example:

void some_function() {
/* breakpoint here */
}
 
void some_other_function() {
/* breakpoint here */
    some_function();
}
 
int main(int argc, char* argv[])
{
    some_function();
    some_other_function();
    return 0;
}

What I’d like to do now is to break in “some_function” but only coming from “some_other_function”.
In this easy example I could happily press F5 a couple of times and be done with it. I could also use the breakpoints hit-counter to accomplish that goal.
But for more complex software this quickly becomes unpractical.

Luckily for me Visual Studio provides an rich extension framework.

You see two breakpoints in the image above. By Draging’n'Droping the breakpoint in line 7 on the one in line 11 the one in line 7 got disabled. Once the program hits line 11 during a debug run the AddIn will in turn enable all child breakpoints (the one in line 7 in this case).

tutorial

We have created a quick tutorial video here.

download

You can download the project (source only) from sourceforge. Drop me a visit at ohloh if you like the software.