cocos2d の parallax 機能で奥行き感を出す
公開日:
:
最終更新日:2013/11/08
cocos2d
画面をスクロールさせた際に、手前にあるスプライトと奥にあるスプライトとでスクロール量を変化させ、立体的な奥行き感を出したいときに使う。ここでは
- タイトルロゴ
- 背景
- コピーライト表示
の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 で実際にどうなったのかについては未調査。
関連記事
- PREV
- シャネルがモバイルデジタルサイネージバッグを作っている
- NEXT
- iPhoneシューティング