[cocos2d-iphone]CCParallaxNodeで多重スクロール試してみた。

CCParallexNodeで簡単多重スクロールが便利と聞いて、サンプル作ったりしてみた。
公式のドキュメント。

cocos2d for iPhone: CCParallaxNode Class Reference parallaxの意味 - 英和辞典 Weblio辞書

【名詞】
〔天文・光学・写真〕視差, 変位.

視差（CCParallaxNodeのposition）によって、(childの)見え方が変わる、的な感じっすかね。

 実装方法は簡単、だったけどpositionOffsetあたりが一瞬違和感。
parallaxRatioが移動速度の比率。 parallaxRatioのyは全部1.0にしてるので、y軸は通常通りの動作。
parallaxRatioのxはchildによって変えてるので、x方向の移動速度がそれぞれ変わる。

 例えば、parallaxRatio:ccp(2.0, 1.0)だと、x方向だけ2.0倍動く。y方向は通常動作。


ソースは以下の通り。

-(id) init
{
 if( (self = [super init]) ) {
  
  CGSize size = [[CCDirector sharedDirector] winSize];

        //多重スクロール用Node
  CCParallaxNode* parallax = [CCParallaxNode node];
        [self addChild:parallax];
        
        //大きいアイコン。速い。
        CCSprite *bigIcon = [CCSprite spriteWithFile:@"Icon-72.png"];
        bigIcon.scale = 2.0;
        [parallax addChild:bigIcon z:3 parallaxRatio:ccp(2.0, 1.0) positionOffset:ccp(0, size.height/2)];
        
        //中くらいのアイコン。ちゅうくらい
        CCSprite *mediumIcon = [CCSprite spriteWithFile:@"Icon-72.png"];
        mediumIcon.scale = 1.5;
        [parallax addChild:mediumIcon z:2 parallaxRatio:ccp(1.5, 1.0) positionOffset:ccp(60, size.height/2)];
        
        //小さいアイコン。遅い
        CCSprite *smallIcon = [CCSprite spriteWithFile:@"Icon-72.png"];
        [parallax addChild:smallIcon z:1 parallaxRatio:ccp(1.0, 1.0) positionOffset:ccp(120, size.height/2)];
        
        
        //ずっと左右に動かす
        [parallax runAction:[CCRepeatForever actionWithAction:[CCSequence actions:
                                                               [CCMoveBy actionWithDuration:5 position:ccp( 240, 0)],
                                                               [CCMoveBy actionWithDuration:5 position:ccp(-240, 0)],
                                                               nil]]];
    }
    return self;
}

ってな感じで、動画のサンプルはできた。

 childは、CCParallaxNodeのpositionとaddChild時のpositionOffsetによって場所が決まるので、 CCParallaxNodeのPositionが (0,0)じゃないときは、若干意図しない位置にchildが設置されるかも。


あとは、無限スクロールとかもやりたい場合には、工夫して実装ないといけなさげ。

1. ループしそうになったら、新しくaddChildとかする。
2. GL_REPEAT使う。

CCParallaxNode infinite scroll | cocos2d for iPhone
How to scroll the background screen continuously from top to bottom | cocos2d for iPhone

 こっちはいつか試す。