cocos2d の parallax 機能で奥行き感を出す

画面をスクロールさせた際に、手前にあるスプライトと奥にあるスプライトとでスクロール量を変化させ、立体的な奥行き感を出したいときに使う。ここでは

• タイトルロゴ
• 背景
• コピーライト表示

の3つで奥行きを別々に設定し、画面をスクロールさせてみた。

Sprite* background = [Sprite spriteWithFile:@"title_bg.png"];

Sprite* logo = [Sprite spriteWithFile:@"title_logo.png"];

Sprite* copyright = [Sprite spriteWithFile:@"title_copyright.png"];



CocosNode *voidNode = [CocosNode node];



background.position = ccp([Director sharedDirector].winSize.width / 2.0f,

[Director sharedDirector].winSize.height / 2.0f);

[voidNode addChild:background z:kZBackground parallaxRatio:ccp(1.0f,1.0f)];

background.tag = kTagBackground;



logo.position = ccp([Director sharedDirector].winSize.width / 2.0f,

[Director sharedDirector].winSize.height / 4.0f * 3.0f);

[voidNode addChild:logo z:kZLogo parallaxRatio:ccp(2.0f,2.0f)];

logo.tag = kTagLogo;



copyright.position = ccp([Director sharedDirector].winSize.width / 2.0f,

[Director sharedDirector].winSize.height / 4.0f * 1.0f);

[voidNode addChild:copyright z:kZCopyright parallaxRatio:ccp(1.5f,1.5f)];

logo.tag = kTagCopyright;



id scaleOut = [ScaleBy actionWithDuration:1 scale:1.0f / 4.0f * 3.0f];

id scaleOutReverse = [scaleOut reverse];



id goUp = [MoveBy actionWithDuration:1 

position:ccp(0,background.contentSize.height / 16.0f)];

id goDown = [goUp reverse];

id go = [MoveBy actionWithDuration:1

position:ccp(background.contentSize.width / 16.0f,0)];

id goBack = ;

id seq = [Sequence actions:

scaleOut,

scaleOutReverse,

goUp,



scaleOut,

scaleOutReverse,

go,



scaleOut,

scaleOutReverse,

goDown,



scaleOut,

scaleOutReverse,

goBack,



nil];	

[voidNode runAction: [RepeatForever actionWithAction:seq ] ];



[self addChild:voidNode];

こんな感じで、addChild する時に parallaxRatio を指定するだけで良い。cocos2d 側の中身の実装はこんな感じになっている。以下、CocosNode の一部を引用。

-(void) transform

{

if ( !(grid && grid.active) )

[camera locate];



float parallaxOffsetX = 0;

float parallaxOffsetY = 0;



// XXX: In v0.8 parallax code will be moved to a ParallaxNode node

if( (parallaxRatioX != 1.0f || parallaxRatioY != 1.0) && parent ) {

parallaxOffsetX = -parent.position.x + parent.position.x * parallaxRatioX;

parallaxOffsetY = -parent.position.y + parent.position.y * parallaxRatioY;		

}

v0.8 以降では ParallaxNode に移行される予定だったようだが、v0.8 で実際にどうなったのかについては未調査。