Parallax Node & Fade-in-out Sound di Cocos2D 1.9.1

Parallax Node (Thanks to Petrusali MCI atas info-nya) di Cocos2D sering digunakan untuk membuat looping background dalam pemograman game di iPhone. Namun penggunaannya itu agak lebih ribet daripada Sprite menjadikan class ini agak jarang digunakan. Penulis sendiri masih awam dan baru mencoba kelas yang satu ini. Kelebihan penggunaan kelas ini daripada menggunakan Sprite adalah lebih efisien dalam penggunaan memori untuk gambar sebesar background.

Berikut ini adalah contoh penggunaannya :

                // background layer: another image
		CCSprite *background = [CCSprite spriteWithFile:@"back2.jpeg"];
		// scale the image (optional)
		background.scale = 1.5f;
		// change the transform anchor point (optional)
		background.anchorPoint = ccp(0,0);

		CCSprite *background2 = [CCSprite spriteWithFile:@"back2.jpeg"];
		// scale the image (optional)
		background2.scale = 1.5f;
		// change the transform anchor point (optional)
		background2.anchorPoint = ccp(0,0);

		// create a void node, a parent node
		CCParallaxNode *voidNode = [CCParallaxNode node];

		// NOW add the 3 layers to the 'void' node

		// background image is moved at a ratio of 0.4x, 0.5y
		[voidNode addChild:background z:-1 parallaxRatio:ccp(30.0f,0.0) positionOffset:ccp(0,0)];
		[voidNode addChild:background2 z:-1 parallaxRatio:ccp(30.0f,0.0) positionOffset:ccp(640,0)];

		// tiles are moved at a ratio of 2.2x, 1.0y
		//[voidNode addChild:tilemap z:1 parallaxRatio:ccp(2.2f,1.0f) positionOffset:ccp(0,-200)];

		// now create some actions that will move the 'void' node
		// and the children of the 'void' node will move at different
		// speed, thus, simulation the 3D environment
		//id goUp = [MoveBy actionWithDuration:4 position:ccp(0,-500)];
		//id goDown = [goUp reverse];
		id go = [CCMoveBy actionWithDuration:15 position:ccp(-27.0f,0.0f)];
		id goBack = [go reverse];
		id seq = [CCSequence actions:
				  //goUp,
				  go,
				  //goDown,
				  goBack,
				  nil];
		[voidNode runAction: [CCRepeatForever actionWithAction:seq ] ];

		[self addChild:voidNode];

Sedangkan untuk fade-in, atau fade-out, kita dapat menggunakan kelas SimpleAudioEngine yang kita deklarasikan seperti ini :

SimpleAudioEngine *backgroundMusic = [SimpleAudioEngine sharedEngine];
		if (backgroundMusic != nil) {
			[backgroundMusic playBackgroundMusic:@"bg.mp3"];
		}

Sedangkan untuk fungsi Fade-in atau Fade-out, code-nya seperti ini :

-(void) fadeAndStopBackgroundMusic {
	if (!backgroundMusic) return;

	//Create a timer thread to take care of fading the BGM, let there be a slight fade out for every 100ms
	float calcVol = backgroundMusic.backgroundMusicVolume;
	if(calcVol == 1.0f)
	{
		[NSTimer scheduledTimerWithTimeInterval:0.3 target:self selector:@selector(fadeoutTimer:) userInfo:nil repeats:YES];
	}
	else if(calcVol <= 0.0f)
	{
		[NSTimer scheduledTimerWithTimeInterval:0.3 target:self selector:@selector(fadeinTimer:) userInfo:nil repeats:YES];
	}
}

-(void)fadeoutTimer:(NSTimer*)timer{
	/*if(!backgroundMusic) {
		[timer invalidate];
		return;
	}*/

	if(backgroundMusic.backgroundMusicVolume == 0.0f) {
		[timer invalidate];
		return;
	}

	//Calculate the next volume for the BGM
	float calcVol = backgroundMusic.backgroundMusicVolume - 0.1f;
	if(calcVol <= 0.0f) { 		//[backgroundMusic stopBackgroundMusic]; 		backgroundMusic.backgroundMusicVolume = calcVol; 		[timer invalidate]; 		return; 	} 	 	backgroundMusic.backgroundMusicVolume = calcVol; } -(void)fadeinTimer:(NSTimer*)timer{ 	if(backgroundMusic.backgroundMusicVolume == 1.0f) { 		[timer invalidate]; 		return; 	} 	 	//Calculate the next volume for the BGM 	float calcVol = backgroundMusic.backgroundMusicVolume + 0.1f; 	if(calcVol >= 1.0f) {
		backgroundMusic.backgroundMusicVolume = calcVol;
		[timer invalidate];
		return;
	}

	backgroundMusic.backgroundMusicVolume = calcVol;
}

-(void)fadeinTimer:(NSTimer*)timer{
	if(backgroundMusic.backgroundMusicVolume == 1.0f) {
		[timer invalidate];
		return;
	}

	//Calculate the next volume for the BGM
	float calcVol = backgroundMusic.backgroundMusicVolume + 0.1f;
	if(calcVol >= 1.0f) {
		backgroundMusic.backgroundMusicVolume = calcVol;
		[timer invalidate];
		return;
	}

	backgroundMusic.backgroundMusicVolume = calcVol;
}

Berikut ini adalah screenshot hasil percobaan dari gabungan ketiganya :

Parallax Node, Fade-in, Fade-out

Karena ini pake sound, jadi di screenshot cuma bisa liat gambarnya deh..

Keterangan Aplikasi Contoh :

1. Apabila disentuh layarnya, maka volume suara akan fade-out, apabila volume suara pada saat layar belum disentuh bernilai 1.0
2. Apabila volume suara pada saat layar belum disentuh bernilai 0.0, maka volume suara akan fade-in apabila layar disentuh
3. Begitu seterusnya
4. Gambar akan scroll ke kanan sampai batas, apabila mencapai batas, maka akan reverse ke kiri..

Source code :  http://www.mediafire.com/?gyghqtj5lim

Nice video tutorial for Parallax with Source Code : http://paulsonapps.wordpress.com/2010/03/15/tutorial-2-parallax-backgrounds-enemies-cocos2d-game/ (Thanks to mdiharja MCI untuk link tutorialnya)

Advertisement