Sound Creates Impacts!

SOUND

To play sounds you need the Sound Engine, which you import into your layer like so:

#import “SimpleAudioEngine.h”

Then you can just code a method to handle some background music playing:

-(void)loadAudio {

// Loading Sounds Synchronously

[CDSoundEngine setMixerSampleRate:CD_SAMPLE_RATE_MID];

[[CDAudioManager sharedManager] setResignBehavior:kAMRBStopPlay

autoHandle:YES];

soundEngine = [SimpleAudioEngine sharedEngine];

[soundEngine preloadBackgroundMusic:BACKGROUND_MUSIC];

[soundEngine playBackgroundMusic:BACKGROUND_MUSIC];

}

You can see immediately that you can preload the audio in one place and then play it in another. This is great for game performance. This means you can preload audio in the main menu, for example, and then play it when you actually need it.

Another way to put this into perspective is to preload an audio when an object such as an enemy ship or main player is created and then play the specific sound when his state is changed. For example, if you create a main player class which manage the player’s state between walking, jumping, running, flying…you can make the calls to play different sound effects when the player’s state changes.

For example;

-(void)changeState:(CharacterStates)newState {

// stop all, nil action, nil move, newPosition ivar, set new state passed into it…

[self stopAllActions];

id action = nil;

[self setCharacterState:newState];

switch (newState) {

case kStateFlying:

action = [CCAnimate actionWithAnimation:flyingAnim];

break;

default:

break;

} // ends the switch that checks for state

if (action != nil) {

[self runAction:[CCRepeatForever actionWithAction:action]];

}

}

You can also get more sophisticated and preload audio into your layer using plists for lists of files which are loaded as soon as the scene is loaded. We will look at this in the Advanced flavor of this post!

Text is Terrific!

TEXT

Now let’s move on to some text. One of my favorite places to add text is at the beginning of a layer when the game is about to start. For this we create a label like so:

CGSize winSize = [CCDirector sharedDirector].winSize;

label = [CCLabelTTF labelWithString:@"hello!" dimensions:CGSizeMake(300, 250) hAlignment:UITextAlignmentCenter fontName:@"Stencil" fontSize:40];

label.color = ccc3(000,000,000);

label.position = ccp(winSize.width/2, winSize.height/2);

This creates a simple label which you can place anywhere on the screen, change its color etc. Let’s say you also wanted to animate this label, you could string this along at the bottom:

CCScaleTo *scaleUp = [CCScaleTo actionWithDuration:2.5 scale:1.8];

CCScaleTo *scaleBack = [CCScaleTo actionWithDuration:0.5 scale:1.5];

CCDelayTime *delay = [CCDelayTime actionWithDuration:3.0];

CCFadeOut *fade = [CCFadeOut actionWithDuration:1.5];

CCHide *hide = [CCHide action];

CCSequence *sequence = [CCSequence actions:scaleUp, scaleBack, delay, fade, hide, nil];

[label runAction:sequence];

Cool! Now you’ve got the workings of some awesome eye candy for your games.

Reblogged from Quique's Blog:

GCD helps improve your apps performance and responsiveness by outsourcing processes that require a lot or computing power to the background while keeping your UI responsive.  Normally you might want to do some heavy lifting.

Let's create an Empty Application.  You need to declare a IBOutlet UIImageView *imageView ivar in your appDelegate, make it a property and synthesize it in .m and make the connection in Interface Builder, IB.  

Read more… 524 more words

GameObjectHierarchy

Keep your game classes organized and logically ordered. Create a GameObject class, a GameCharacter class and then subclass these.

Its important to keep your Game Objects ordered as well as your code.  The more you order your objects, the cleaner your code will be as well.  A GameObject is anything used in a game from labels to sprites to power ups.

Its important to create a base class for all objects because, as a simple example, you want to be able to constrain all game objects to your screen.  Its not unthinkable to believe that at some point you might inadvertently cause a game object to be pushed off screen.  Thus it would be nice to have a method, something like keepObjectInBounds, to make sure you can call it on any or all objects to make sure they are not halfway or all the way offscreen.

After you build you base class, GameObject, you will subclass it to build objects.  But you can also subclass GameObject to build functionally similar types of objects like a Powerups subclass or an Enemy subclass.  For example, you might want all Powerup class objects to have a setAutoDestroyTime method that gives any object of that class a specific time to live onscreen before it disappears.

So let’s look at init methods, designated initializers, self and super.

You can create a GameObject Class in 1 file set or in different file sets.  This is where self and super take hold in your brain.  Self means, that very same class you are currently in.  Super means its super or parent class.  For example, lets say we create this hierarchy:

1. GameObject (Everything is a GameObject)
   1. GameCharacter (Distinguish between GameCharacters and GamePowerUps)
      1. GameEnemy (Some GameCharacters are bad and some are good)
         1. GameBigBossEnemy
      2. GamePlayer
         1. GamePlayerHero 
         2. GamePlayerFriend
   2. GamePowerup

GameCharacter is a subclass of GameObject.  Which is to say, GameObject is the parent of GameCharacter.  This makes sense because your GameObjects may be characters that have a personality and animation and perform actions.  But some GameObjects will just sit there, like trees and clouds.  Clouds may be moved by wind and that is about it!  But a GamePlayer, our hero, needs to have a lot more internal logic, his own Artificial Intelligence logic if you will.

By the same token, GamePlayer may include our hero instance but it may also include a friend instance, which may be like his sidekick or something.  The logic for a friend will not include any methods to follow or attach our hero, whereas enemies will have to have that sort of logic.

This is the reason we subclass objects, in order to use a base functionality for all (all game objects must remain onscreen at all times) but give specific functionality to others (followMainPlayer method).

Lets say you’re inside GamePlayerHero and you are coding away.  If you say

[self blowHisNose];

You are calling the blowHisNose method which should exist in our GamePlayerHero class.  If it doesn’t exist in self, that object will look to its super for a corresponding method.  You don’t need to call:

[super blowHisNose];

That is what object inheritance in OOP is all about.  So if the method doesn’t exist in GamePlayerHero, the hero object looks to its parent class or super class, GamePlayer.  If GamePlayer doesn’t have that method then it will keep going until it finds that method.  If it doesn’t, your game will crash .

So lets take a look at a practical example, an initializer.  An initializer is just another name for a Class’ init method.  Every class must have an init method.  Here is a typical one:

-(id) init {

if((self=[super init]);

}

return self;

}

This means, if this class is equal to super’s init, then do this and return self.  Since a class will always have a super class, this basically says, if I have a super class (which is always) then return myself.

Now if a child class (lets call it GameCharacter class) of this previous class (GameObject class) wants to add functionality to its parent class, then it will NOT OVERRIDE its parent class methods, it will simply add methods.  So the new GameCharacter class could just have a method like this:

-(void)checkAndClampSpritePosition {

CGPoint currentSpritePosition = [self position];

CGSize levelSize = [[GameManager sharedGameManager]

getDimensionsOfCurrentScene];

float xOffset;

if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {

// Clamp for the iPad

xOffset = 30.0f;

} else {

// Clamp for iPhone, iPhone 4, or iPod touch

xOffset = 24.0f;

}

if (currentSpritePosition.x < xOffset) {

[self setPosition:ccp(xOffset, currentSpritePosition.y)];

} else if (currentSpritePosition.x > (levelSize.width – xOffset)) {

[self setPosition:ccp((levelSize.width - xOffset),

currentSpritePosition.y)];

}

}

Which says, Im not initializing anything (because if it does, it will erase its parent’s init method), Im just adding this method to any instance of GameCharacter AND every instance of GameCharacter will still have to be initialized from GameObject’s init.

Let’s see a more practical example.  Let’s look at an Enemy Class which can generate many different kinds of instances, all from the same code:

@interface ShipTarget : CCSprite {

int _curHp;

int _minMoveDuration;

int _maxMoveDuration;

NSString *filename;

}

@property (nonatomic, assign) int hp;

@property (nonatomic, assign) int minMoveDuration;

@property (nonatomic, assign) int maxMoveDuration;

@property (nonatomic, retain) NSString *filename;

@end

@interface Asteroid : ShipTarget {

}

+(id)target;

@end

This says, Im a ShipTarget class and my instances will all be based off of CCSprite.  This means all my instances will have any methods and properties of CCSprite unless I override them (create new ones).  At the same time, I wish to create an Asteroid class which derives from this ShipTarget class and it will return an object by calling its class method named target.  Then in its implementation you have:

@implementation ShipTarget

@synthesize hp = _curHp;

@synthesize minMoveDuration = _minMoveDuration;

@synthesize maxMoveDuration = _maxMoveDuration;

@synthesize filename;

@end

@implementation Asteroid

+ (id)target {

Asteroid *target = nil;

if ((target = [[[super alloc] initWithFile:@”Comet.png”] autorelease])) {

target.hp = 1;

target.minMoveDuration = 2;

target.maxMoveDuration = 4;

}

return target;

}

@end

Notice again, the use of self, or target.  If there is such a thing returned from calling target’s super class, (target is ShipTarget class and ShipTarget’s super class is CCSprite) initWithFile… then set those properties and return it.  There is such a thing as target’s super class initWithFile method.  CCSprite has an initWithFile method.  Don’t believe me?  Then don’t, right click over initWithFile and select Jump to Definition and watch Xcode take you to CCSprite:

-(id) initWithFile:(NSString*)filename

When you create a game in Cocos2d, your screen measures 960 pixels wide on iPhone4+ and 2048 on iPad. If we want him to move farther to the right then we need to make the level bigger.  Normally we set:

levelSize = screenSize;

But now we basically wish to make:

levelSize = CGSizeMake(screenSize.width * 2.0f, screenSize.height); // levelSize code

What we are doing is changing our scene levelSize to 2x the screenSize.

Our level is now twice as big and we have a GameScene, which contains a GameplayLayer & a BackgroundLayer with some background image.  We want to add a layer that will scroll in the opposite direction as our player moves.  To do this we will need to add a method a method called adjustLayer:

-(void)adjustLayer {

Player *player = (Player*)[sceneSpriteBatchNode getChildByTag:kPlayerSpriteTagValue];

float playerXPosition = player.position.x;

CGSize screenSize = [[CCDirector sharedDirector] winSize];

float halfOfTheScreen = screenSize.width/2.0f;

CGSize levelSize = [[GameManager sharedGameManager] getDimensionsOfCurrentScene];//1

if ((playerXPosition > halfOfTheScreen) && (playerXPosition < (levelSize.width – halfOfTheScreen))) {

// then scroll background

float newXPosition = halfOfTheScreen – playerXPosition;

[self setPosition:ccp(newXPosition,self.position.y)];      // 2 self is the game layer

}

}

Here comment //1 is a call to a method which returns the desired levelSize.  Or you can simply hard code it in this case by replacing this line with the //levelSize code line from above.  Remember we are running this method in the GameplayLayer, which is self in this code.  This needs to be called constantly so you must add this line to your update layer.  What we are doing here is keeping the screen centered on the player.  Now in the update method add this code:

//1. Get the list of objects on the layer & loop through them

CCArray *listOfGameObjects = [sceneSpriteBatchNode children];

for (GameCharacter *tempChar in listOfGameObjects) {

[tempChar updateStateWithDeltaTime:dt andListOfGameObjects:listOfGameObjects];

}

//2. Call the adjustLayer method

[self adjustLayer];

Perfect!  Now let’s add the image that is actually going to scroll.  Add this method to your GameplayLayer.m:

-(void)addScrollingBackground {

CGSize screenSize = [[CCDirector sharedDirector] winSize];

CGSize levelSize = [[GameManager sharedGameManager] getDimensionsOfCurrentScene];

CCSprite *scrollingBackground;

if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {

// Indicates game is running on iPad

scrollingBackground = [CCSprite spriteWithFile:@"mars_landscape2x.png"];

} else {

scrollingBackground = [CCSprite spriteWithFile:@"mars_landscape2x.png"];

}

[scrollingBackground setPosition:ccp(levelSize.width/2.0f,screenSize.height/2.0f)];

[self addChild:scrollingBackground z:1];

}

In order for this to appear, we need to call it from the init method by adding this line:

[self addScrollingBackground];

Let’s review.  addScrollingBackground adds a new image to the GameplayLayer.  (This image is positioned over the true background, which is in the BackgroundLayer.)  Therefore, the new image you add here should be a sort of rocky ground floor that will slide sideways as the player moves.

Make sure the image is twice as big as the screen so there will be enough of it to scroll through as the player moves.

Now Build & Run and watch your ground scroll differently as your background as your player moves left or right.

Parallax

Parallax makes one layer scroll faster or slower than the other.  It’s quite easy to achieve this effect.  First add a new instance variable to your GameplayLayer.m file like so:

@implementation GameplayLayer {

CCParallaxNode *parallaxNode;

}

NOTE: We are extending the @implementation line to include an ivar.  No need to declare it in the @interface file.  Remember .h files (header files) only need to include what properties or methods you want your object to expose to other calling objects.

And now replace your addScrollingBackground method with this one:

// Scrolling 3 Parallax backgrounds

-(void)addScrollingBackgroundWithParallax {

CGSize screenSize = [[CCDirector sharedDirector] winSize];

CGSize levelSize = [[GameManager sharedGameManager]

getDimensionsOfCurrentScene];

CCSprite *BGLayer1;

CCSprite *BGLayer2;

CCSprite *BGLayer3;

if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {

// Indicates game is running on iPad

BGLayer1 = [CCSprite spriteWithFile:@"mars_landscape2x.png"];

BGLayer2 = [CCSprite spriteWithFile:@"some_rocks.png"];

BGLayer3 = [CCSprite spriteWithFile:@"some_pillars.png"];

} else {

BGLayer1 = [CCSprite spriteWithFile:@" mars_landscape2x.png"];

BGLayer2 = [CCSprite spriteWithFile:@" some_rocks.png"];

BGLayer3 = [CCSprite spriteWithFile:@" some_pillars.png"];

}

parallaxNode = [CCParallaxNode node];

[parallaxNode setPosition:ccp(levelSize.width/2.0f,screenSize.height/2.0f)];

float xOffset = 0;

// Ground moves at ratio 1,1

[parallaxNode addChild:BGLayer1 z:40 parallaxRatio:ccp(1.0f,1.0f) positionOffset:ccp(0.0f,0.0f)];

xOffset = (levelSize.width/2) * 0.3f;

[parallaxNode addChild:BGLayer2 z:20 parallaxRatio:ccp(0.2f,1.0f) positionOffset:ccp(xOffset, 0)];

xOffset = (levelSize.width/2) * 0.8f;

[parallaxNode addChild:BGLayer3 z:30 parallaxRatio:ccp(0.7f,1.0f) positionOffset:ccp(xOffset, 0)];

[self addChild:parallaxNode z:10];

}

Don’t forget to change the GameplayLayer’s init method call to:

[self addScrollingBackgroundWithParallax];

What we are doing now is adding more layers and offsetting their center positions.  Thus when they move, they will move at different rates.  Build & run the app.

You can use scrolling to add clouds or stars or alien birds to make some eyecandy for your users.  If you choose to scroll many objects on the screen though, you might want to look into reusing them.  This is a very popular technique used to improve performance of a game.  You create one instance of the object at a time and add it to an array for tracking.  When that instance moves offscreen, you remove it from that array.  This saves you a lot of memory.

How Cocos2d taught me iOS

I started studying iOS in 2009, started studying Cocos2d in 2011.  I never understood how to do things in code for iOS.   It was all a big mystery to me.

What do you mean create a button programmatically and add it to the subview and position it and change its attributes?  I can just drag one from the Object Library onto the canvas and put it wherever I want and change its color etc…

After a year of using Cocos2d, I know cherish its teachings as I find myself trying to make an app which requires objects such as UIPageControl and UIScrollView and UIImageViews with UIImages.  In doing this you run into the situation of:

How do I position a view, or rather a bunch of UIImageViews that are not on the canvas but will be when the UIPageControl’s value changes!?

EPIPHANY!

First, I opened up an image that I wanted to spruce up.

Second, I Added a Layer Mask in the Layer Menu

Then, I used a Transparent to Black Gradient and got this:

Gradient Transparency

Why is this cool?  Well, now you can add a nice background color or even another image in the background to make some very professional looking artwork!

Transparency Gradient

The original idea I was after was from a tutorial I found online which took a picture, such as this one.  You take a picture such as this:

Add a Layer Mask as before but this time choose Brush 100 with a black foreground color.  Eliminate everything around her by painting with the brush to get this:

Cute huh!

Now create a new layer and Add a Gradient, preferrably one with 2 pastel colors and move it over this one:

Finally change Blending to Screen and voila!

Eventually your game will grow and you will have to create a clear structure to keep everything organized.

As you can see, as with any app, the AppDelegate is the first object called. As such, it is the entry point to your game and will call the very first scene of your game. This means the first scene should probably the main menu which welcomes the user to the game and presents him with options.

As you can see from the Cocos2d tips “Creating a Menu”, menus can be quite complex:

http://quique123.wordpress.com/2012/09/12/cocos2d-tips-creating-a-menu/ ‎

When a cocos2d game is created, a Singleton instance of the GameDirector is instantiated and charged with managing scenes. After all, your Main Menu scene is just another scene/layer called by the game director. Thus it is quite common to create another Singleton class used to tell the director which scene to call.

Let’s call it the GameManager and his sole job is to tell the director which scene to call. Before we take a look at some code, keep in mind a game may grow to have quite a few scenes and while text is more human readable, it is easier to manage variables as numbers. The main reason is that switch statements use numbers, not text.

So it is common practice to use code such as this in a Constants.h file that you import into your GameManager.m Class:

typedef enum {

kNoSceneUninitialized=0,

kFirstScene=1,

kSecondScene=2,

kThirdScene=3,

} SceneTypes;

Now you can easily use a method such as this:

-(void)runSceneWithID:(SceneTypes)sceneID {

SceneTypes oldScene = currentScene;

currentScene = sceneID;

id sceneToRun = nil;

switch (sceneID) {

case kMainMenuScene:

sceneToRun = [MainMenuScene node];

break;

case kFirstScene:

sceneToRun = [Scene1 node];

break;

case kSecondScene:

sceneToRun = [PlaneScene node];//[Escena2 node];//

break;

case kThirdScene:

sceneToRun = [Scene3 node];

break;

default:

CCLOG(@”Unknown ID, cannot switch scenes”);

return;

break;

}

if (sceneToRun == nil) {

// Revert back, since no new scene was found

currentScene = oldScene;

return;

}

}

if ([[CCDirector sharedDirector] runningScene] == nil) {

NSLog(@”runningScene is nil…its ok because we are in process of setting the new scene???”);

[[CCDirector sharedDirector] runWithScene:sceneToRun];

} else {

[[CCDirector sharedDirector] replaceScene:[CCTransitionFlipAngular transitionWithDuration:0.5f scene:sceneToRun]];

}

currentScene = sceneID;

}

GAME START

Now this simple switch can be used to change scenes.  All you have to do at the end of the AppDelegate is call GameManager’s sceneToRun method and pass it the MainMenuScene.

MAIN MENU SELECTION

At the Main Menu scene, depending on the level selected from the menu you can pass a particular scene constant to GameManager in order to determine the level scene to call.

LEVEL END

From within your game level layer, after defining if your player won or lost, you can call GameManager to run a custom EndOfLevel scene/layer.  Then from that transitional scene you can call the MainMenuScene again.

The most common example is the main action layer (where the players and enemies are) having to communicate with the HUD layer (which presents score, health and other info) to the gamer. Let’s see how we can communicate between layers.

Typically you create a Scene and then a Layer in order to add that Layer as a child to the Scene.

Let’s say our Scene.h looks like this:

#import <Foundation/Foundation.h>

#import “cocos2d.h”

@interface Scene1 : CCScene {

}

@end

And our Scene.m looks like this:

-(id)init {

if ((self = [super init])) {

Scene1ActionLayer * actionLayer = [[[Scene1ActionLayer alloc] init] autorelease];

[self addChild:actionLayer z:0 tag:kActionLayer];

}

return self;

}

So we are adding the main action layer, actionLayer, to our scene at z=0 with a tag kActionLayer.  Simple enough.  Now let’s say we want to create a HUD layer to contain game information.  This can range from points, to level information, to instructions or simply health or powerup information.

Im not much of a designed so I created this simple rectangle as a bottom bar for my game.

The idea here is that those stars will actually represent the powerups a player must collect in order to complete a level.  Thus this will actually be a silhouette and each time the player picks up a power up, the HUD gets updated to place the powerup image in that space.  So we need the actionLayer to communicate with the HUD layer in order to say “Update the BIG GUNS power up!”.

We go ahead and create the actionLayer, possibly with a method called updateHUDWithPowerup:(Powerup*)power up; where Powerup is anything as simple as a typedef or as complex as a custom NSObject.

First, we need an instance of the HUD layer inside our actionLayer to call its method.  So inside our actionLayer, we forward declare it in our action layer :

@class “HUDLayer;

and then create an ivar for its instance:

HUDLayer *hudLayerInstance;

Second, we import the class in our action layer.m:

#import “HUDLayer.h”

Third, we simply allocate the instance in our actionLayer’s init method:

hudLayerInstance = [[HUDLayer alloc] initWithActionLayer:self];

[self addChild:backLayer z:0 tag:100];

Fourth, when the time comes to update the HUDLayer from the action layer’s update method (perhaps), we call:

[hudLayerInstance someMethodDefinedInHUDLayer:withThisValue];

Fifth, don’t forget to code the HUDLayer.  In its interface, forward declare your action layer class and add the custom initializer as well as your method like so:

@class ActionLayer;

@interface HUDLayer : CCLayer {

CCLabelTTF *_scoreLabel;

}

@property (nonatomic, assign) CCLabelTTF *scoreLabel;

-(id)initWithActionLayer:(ActionLayer*)layer;

@end

Finally implement your initializer and its “someMethodDefinedInHUDLayer” in order to pass it “withThisValue”.

Voila!  Another option is using Delegates/Protocols.

In this case we are adding all children to the Scene.  In order to get them to communicate, we would need to have methods inside the Scene itself to call actions between objects.  I prefer the former method.  I leave this kind of setup for adding layers that don’t really do much, such as timers, background, eye candy etc.  They are still important layers, they just dont interact with the actionLayer much or at all.

operationQueue = [[NSOperationQueue alloc]init];
[operationQueue setMaxConcurrentOperationCount:1];

2. Then in your viewWillAppear you can call this:

[self showLoadingIndicators]; //calls a method which presents loading indicators (optional)
[self beginLoadingTwitterData]; // this is the method that fires it all off

3. In your beginLoadingTwitterData you call this:

NSInvocationOperation *operation = [[NSInvocationOperation alloc] initWithTarget:self selector:@selector(synchronousLoadTwitterData) object:nil];
[operationQueue addOperation:operation]; // creates and adds NSOperation to a queue
[operation release];

4. In this synchronousLoadTwitterData is where you do the heavy lifting:

NSDictionary *dict = [[NSDictionary alloc] initWithDictionary:[TwitterHelper fetchInfoForUsername:[twitterIds objectAtIndex:count]]]
// this calls for a method “fetchInfoForUsername” which returns an NSDictionary, but to do so, it connects to the internet using a synchronous URL fetch which would normally hold up the main thread

Later in this method you call:

[self performSelectorOnMainThread:@selector(didFinishLoadingTwitterDataWithResults:) withObject:tempArray waitUntilDone:YES];
//which returns you to the main thread at said selector…

5. In this final method, didFinishLoadingTwitterDataWithResults, which gets called once the operation finishes, you call:

self.persons = (NSArray*)result;
[self hideLoadingIndicators];
[self.tableView reloadData];
//and you can do other things like, receive the results, hide the indicators and reload a tableview.

This is very useful when downloading data from the web.