Making delicious games.

Hi fellow developers!

For those who are interested in game development, let me tell you we use Cocos2d for most of our iOS games. (If you don’t know what Cocos2d is, check it out here).

So, we are going to be writing some tutorials or posting some information about how we achieved certain parts of our games. We don’t intend to make this a full tutorial sites or anything like that, we just feel it is right (and fun!) to do it.

Let’s get to it!

In Turtle World, at some points in the game, the night falls. This was one of the key things we wanted to do to change the pace of the game and add some interesting stuff.

One way to do this would be to replace all the images with edited colors, but as you can image that is a pain to do and can easily double the game’s size since we would need to change all the background images plus all the characters and some of the UI or pop-ups. Also, we wanted the change to have a nice transition to a red-ish color simulating dawn. So this method was out of question.

If you have played Andreas Illiger’s Tiny Wings (If you haven’t, grab it here! What are you waiting for?), you will notice we wanted to achieve a similar effect to this game.

So what did we end up doing? We created an grey-scale image with a gradient, added it on top of the sprites we wanted to be affected by the night effect and used a Blending Function on it. Then when we want the game to turn into night mode, we just tint this image to blue!

This might not be the best way to do it, performance-wise, but it looks fine and the game keeps running nicely even in older devices. Here is a step by step tutorial for doing it:

1. Add a sprite with an image like the one above:

	CGSize wins = [[CCDirector sharedDirector] winSize];
	nightFilter = [CCSprite spriteWithFile:@"testFilter.png"]; // nightFilter is an ivar CCSprite * defined in the .h
	[self addChild:nightFilter z:40];
	[nightFilter setPosition:ccp(wins.width/2,wins.height/2)];

2. Set the correct blend func for the effect to look nice and the tint to white so it doesn’t immediately turn the screen into blue.

	[nightFilter setBlendFunc:(ccBlendFunc){GL_DST_COLOR, GL_SRC_COLOR}];
	[nightFilter setColor:ccWHITE];

 3. Now, when we want the night to fall, we call this little method:

	-(void)makeTheNightCome
	{
		[nightFilter runAction:[CCSequence actions:[CCDelayTime actionWithDuration:5],
							[CCTintTo actionWithDuration:2 red:255 green:155 blue:0],
							[CCTintTo actionWithDuration:3 red:145 green:145 blue:255],
							nil]];
	}

This will make the screen turn to orange and then to blue to simulate dawn.

And that is all! If you want it to look as it was originally, just run the reverse action tu make the filter image be white again.

I hope you find this useful and come back for more tutorials and news!

Please follow us on Twitter!