ハマケン100%開発: cocos2dでテクスチャーループ

2011年11月16日水曜日

cocos2dでテクスチャーループ

cocos2d(1.0.1)でテクスチャーループを使ってみました。
テクスチャーループとは、１つの大きなスプライトの中に、スプライトより小さなテクスチャーをループして貼り付ける方法です。
背景画像に使ったり、色々なところで重宝します。

やり方は、OpenGL ES の知識がちょっと必要ですが、難しくはありません。
今回は、cocos2d テンプレートプロジェクトの Hello World を改造して取り組みました。

テクスチャは以下の4種類の画像を用意します。
左から64×64、64×128、64×100、50×128のサイズです。

４つのサイズのテクスチャを用意

テンプレートプロジェクトを作成したら、CCSprite のサブクラスをひとつ作ります。
ファイル名は Background.m と Background.h にしました。

// Background.h
#import <foundation/foundation.h>
#import "cocos2d.h"

@interface Background : CCSprite {
}
+ (id)backgroundWithRect:(CGRect)rect;
- (id)initWithRect:(CGRect)rect;
@end

// Background.m
#import "Background.h"

@implementation Background

+ (id)backgroundWithRect:(CGRect)rect
{
 return [[[self alloc] initWithRect:rect] autorelease];
}

- (id)initWithRect:(CGRect)rect
{
 if ((self = [super initWithFile:@"worm64x64.png" rect:rect])) {
  ccTexParams params = {GL_LINEAR,GL_LINEAR,GL_REPEAT,GL_REPEAT};
  [texture_ setTexParameters:&params];
  
  self.anchorPoint = CGPointZero;
 }
 return self;
}

backgroundWithRect: メソッドでスプライトのインスタンス化を行います。その際にrect パラメータで、スプライトのサイズとポジションを指定します。

initWithRect: メソッドで、ループテクスチャーの設定を行います。
ccTexParams 変数に、テクスチャーの縦横伸縮方法(サンプルではLinear)、縦横ループ方法(サンプルではRepeat)を格納し、CCSprite の texture_ メンバ変数にテクスチャーパラメータとして設定してやります。これで完了です。

早速表示してみましょう。HelloWorldLayer クラスの init メソッドを以下のように修正します。

// HelloWorldLayer.m
#import "Background.h"
-(id) init
{
 if( (self=[super init])) {
  CGSize size = [[CCDirector sharedDirector] winSize];
  Background *bg = [Background backgroundWithRect:CGRectMake(0,0,size.width,size.height)];
  [self addChild:bg];
 }
 return self;
}

結果は以下のようになりました。テクスチャーのサイズは64×64です。