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が設置されるかも。
あとは、無限スクロールとかもやりたい場合には、工夫して実装ないといけなさげ。
- ループしそうになったら、新しくaddChildとかする。
- GL_REPEAT使う。
How to scroll the background screen continuously from top to bottom | cocos2d for iPhone
こっちはいつか試す。
0 件のコメント:
コメントを投稿