Cocos2d Extensionsでスクロールするレイヤーを実装する

今回は、サードパーティ製のcocos2d拡張ライブラリ「Cocos2d Extensions」を利用して
あのAngry Birdsのような、スクロールするステージ選択画面を実装します。

本エントリは下記の環境で動作確認しています。

  • cocos2d 2.0
  • Cocos2d Extensions 0.2.1


Cocos2d Extensionsとは

Cocos2d Extensionsとは、cocos2d-iphoneエンジンに追加して利用する
サードパーティ製の複数のcocos2d拡張ライブラリのパックです。
cocos2d本体には手を入れず、様々な拡張機能を利用できます。
自分の用途に合った拡張機能だけを部分的に取り入れられます。

Cocos2d Extensionsに含まれる拡張機能は以下のとおり。

  • CCMenuAdvanced
  • CCMenuItemSpriteIndependent
  • CCVideoPlayer
  • CCBigImage
  • CCSlider
  • CCSendMessages
  • CCScrollLayer
  • FilesDownloader
  • TMXGenerator
  • CCLayerPanZoom

cocos2d本体だけでは微妙に機能が足りないような
かゆいところに手が届く拡張機能が多いです。


CCScrollLayerでスクロールするレイヤーを実装する

CCScrollLayerはCCLayerのサブクラスであり、レイヤーの配列を管理し、
スムーズな動作のスクローラーを作成するためのクラスです。

このCCScrollLayerを利用すれば、
Angry Birdsライクなスクロールメニューがぱぱっと実現できます。

CCScrollLayerでスクロールするレイヤーを実装には、まず
Cocos2d ExtensionsをGitHubからダウンロードします。

ダウンロードしたZIPファイルを解凍し、
Extensions>CCScrollLayerをフォルダごと
Xcodeプロジェクトにドラッグ&ドロップします。

自作のCCSceneのヘッダファイルにて、CCScrollLayer.hをインポートします。

#import "CCScrollLayer.h"

自作のCCSceneのinit関数にて、CCScrollLayerに各レイヤーを格納します。

-(id) init
{
if ((self = [super init])){
【省略】
// シーンを複数作成する
NSMutableArray *layerArray = [NSMutableArray array];
CCLayer* layer1 = [CCLayer node];
CCLayer* layer2 = [CCLayer node];
CCLayer* layer3 = [CCLayer node];
【中略】
[layerArray addObject:layer1];
[layerArray addObject:layer2];
[layerArray addObject:layer3];

// CCScrollLayerに突っ込む
CCScrollLayer *scroller = [[CCScrollLayer alloc] initWithLayers:layerArray widthOffset: 0];
[self addChild:scroller];

【省略】
}
}

これだけで、グリグリ動くスクロールレイヤーのできあがり!

あとは、スクロール完了時の画面更新部分などを適宜追加します。

完成したステージ選択画面を
iPhoneシミュレータで動作させたデモ動画がこちら。

簡単にスクロールメニューを実装できました。

    • コルデ
    • 2012年 11月 8日

    ブログの記事、大変参考になりました.おききしたいのですが、ス­クロールの切り替わりを反映させるにはどうすればいいのでしょう­か? 動画の例でいうと、スクロールに合わせて、レベルの星を増減させ­るのはどうのようにすればいいのでしょうか?

    • 動画の例でいうと、
      ccTouchesEndedで現在のスクリーン番号を取得して、
      星の数を更新するような泥臭い実装で実現してます^^;

      もっと綺麗なやり方があればぜひ教えてください!

        • コルデ
        • 2012年 11月 8日

        ありがとうございます. とりあえずその方法を試させていただきます! また良い方法みつかればこちらからも連絡させてもらいますね^^

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。