cocos2dで、TableViewを実現する方法(CCTableView編)
前回に引き続き、cocos2dでTableViewを実現する方法について記述します。
今回は②の方法です。
現在、cocos2dにはTableViewを実現するモジュールは標準で組み込まれていませんが、CCTableViewSuiteを利用することで、実現が可能です。
初期のCCTableViewはリストを降順に一覧表示するので、昇順に表示できるようになっている、SWTableViewを利用するのが良いと思います。
SWTableViewは、cocos2d形式のオブジェクトで、高速に描画を行え、Transition(画面遷移エフェクト)にも対応していますので、多少手間は掛かりますが、こちらの方法をとったほうが良いと、個人的には思いました。
ただ、デフォルトで使用するとメモリーが開放されない問題があるので、後半でその解決方法を記述します。
まずは、このページからソースをダウンロードさせてもらいます。
ダウンロードしたソースは自分のプロジェクトにコピーして配置しましょう。
使用するときにはまず、Layerのinitで、インスタンスの生成とプロパティのセットを行います。
//myTableはSWTableViewクラスのインスタンスです。 myTable = [SWTableView viewWithDataSource:self size:CGSizeMake(320, 270)]; //一覧のスクロールする方向を指定。以下は縦方向にスクロールします。 myTable.direction = SWScrollViewDirectionVertical; myTable.position = ccp(0,100); //delegateを自分自身のクラスにセットします。 myTable.delegate = self; //一覧を、昇順に並べます。 myTable.verticalFillOrder = SWTableViewFillTopDown; [self addChild:myTable]; [myTable reloadData];
これで、TableViewをLayerに配置できました。ただ、一般的なTableViewと同様、delegteを実装しなければ、タッチしたり、スクロールさせたり、一覧に値をセットすることができませんので、TableViewを配置するLayerクラスに、delegateの宣言を追加します。
@interface MyLayer : CCLayer
これで、上記でセットしたdelegateを、このLayerクラスで処理することができるようになりました。
では、実際にdelegateのメソッドを実装していきます。
cellSizeForTableはテーブルのセルの高さを返します。
-(CGSize)cellSizeForTable:(SWTableView *)table { return CGSizeMake(320, 104); }
-(SWTableViewCell *)table:(SWTableView *)table cellAtIndex:(NSUInteger)idx はテーブルの各セルが描画されるタイミングで呼ばれるメソッドです。1セル分に描画したい内容を記述します。
-(SWTableViewCell *)table:(SWTableView *)table cellAtIndex:(NSUInteger)idx { SWTableViewCell *cell = [table dequeueCell]; if (!cell) { cell = [[AnswerCell new] autorelease]; } CCSprite *sprite = [CCSprite spriteWithFile:@"cell.png"]; sprite.position = ccp(60,0); [cell addChild:sprite]; CCLabelTTF * lblTalentNm1 = [CCLabelTTF labelWithString:@"AAAA" dimensions:CGSizeMake(220, 20) alignment:UITextAlignmentLeft fontName:@"AppleGothic" fontSize:16]; lblTalentNm1.position = ccp(140, 80); [sprite addChild:lblTalentNm1 z:1]; return cell; }
numberOfCellsInTableView は描画するセルの件数を返します。実際には、描画対象のリストの件数等をcountして返すとよいでしょう。
-(NSUInteger)numberOfCellsInTableView:(SWTableView *)table { return 20; }
上記でAnswerCellという見慣れないクラスが出てきましたね。これは、自分で定義する1セルを表現するクラスです。名前は自由に付けて大丈夫です。
以下のようなシンプルなクラスを追加で作成しましょう。
AnswerCell.h
#import #import "SWTableViewCell.h" #import "SWTableViewSpriteCell.h" //@class SWTableViewCell; @interface AnswerCell : SWTableViewCell { } //+(CGSize)cellSize; @end
AnswerCell.m
#import "AnswerCell.h" @implementation AnswerCell /** - (id)init { if(! (self = [super init]) ) return nil; NSLog(@"nothing to see here"); return self; } */ +(CGSize)cellSize { return CGSizeMake(320, 100); } @end
これで、LayerにTableViewを追加することができます。画面遷移の際にもスムーズに動くことが確認できると思います。
だた、スクロールを上下に繰り返していると、だんだんSlowdownしてくることに気が付きませんか?
色々と動かして動きを見ていると、描画後にメモリがreleaseされていないようです。
しかも、スクロールを繰り返して同じセルを描画させると、その度にメモリが割り当てられていきます。
最初は60だったfpuが、最後には10程度にまで落ちてしまいました。
そこで、以下のような記述をSWTableViewに入れることで、速度が遅くなることなく、きれいな描画が可能になりました。参考にしてください。
SWTableViewCell.mへの記述追加(add)
-(void)onExit { //これがあると、パフォーマンスが落ちない。(this code is for performance) [self removeAllChildrenWithCleanup:YES]; }
参考までにSampleProjectを添付します。SWTableViewSample
コラム
cocos2dでゲームを作る際に参考にした本です。初心者用、中級者用とありますので、参考にしてください。私には非常に役立ちましたよ!

これは非常にいい本です。画面遷移の基本から応用まで、体系だって解説がなされており、ゲーム作成時に何度も読み返しました。パフォーマンスを考慮したコーディングや物理エンジンについても言及があります。

cocos2dを使ってゲームを作るのが初めての人に最適です。いくつかのサンプルのプロジェクトとその解説があり、それをもとに、簡単なゲームは作れるようになるでしょう。初心者がつまづきやすい、AppStoreへの申請方法も例示されています。初めてゲームをリリースするときに参考にしました。
