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で作る iPhone&iPadゲームプログラミング cocos2dで作る iPhone&iPadゲームプログラミング

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

 

cocos2d for iPhoneレッスンノート cocos2d for iPhoneレッスンノート

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

 

Learning Cocos2D: A Hands-On Guide to Building iOS Games with Cocos2D, Box2D, and Chipmunk Learning Cocos2D: A Hands-On Guide to Building iOS Games with Cocos2D, Box2D, and Chipmunk cocos2dで物理エンジンを利用したゲームを作る際に参考になります。英語ですが、物理エンジンを解説した本は少ないため、貴重です。

 



こんな記事も関係あるかも。読んでみてね。

コメントを残す

サブコンテンツ

このページの先頭へ