【cocos2d】自作のボタンを作成する方法

cocos2dを利用して、ボタンを作成方法を紹介します。

ボタンを作成する前

実装したいボタン

cocos2dで実装をする前にどうのようなボタンを作りたいかを予め考えます。 私は、現在アクションゲーム作っているので、ボタンを押した時はもちろんなんですが、ボタンを押したままの時でも、何かしらのアクションを取りつづけるようなボタンを作成したいと思いました。

画像を準備

今回は、CCSpriteを使ってボタンを作成しますので、画像データを準備します。 画像の種類は2種類。 「通常の画像」と「ボタンが有効化されている時に使う画像」です。

Button

CCLayerを使いボタンの作成する

まずは、新規のCCLayerクラスを作成して、CCSceneクラスに追加をします。 ゲームメインのクラスの上になるようにZ値を調整します。 [c] +(CCScene*)scene{

CCScene *scene = [CCScene node];
GameLayer *layer = [GameLayer node];
InterfaceLayer *buttonlayer = [InterfaceLayer node]; //今回作成するクラス。

[scene addChild:layer z:0];
[scene addChild:buttonlayer z:10];

return scene;

} [/c]

CCSpriteをCCLayerに配置する

新規に作成したCCLayerに、ボタンとなるCCSpriteを配置していきます。 これは、ゲームに合わせて上手くボジションやボタンを大きさを調整してください。

0512 2013

マルチタッチを有効にする

CCLayerでタッチ処理が有効になるようにコードを追加します。 ボタンが複数ある場合は、マルチタッチが利用できるようにAppDelegateも変更します。 [c]

//CCLayer

self.isTouchEnabled = YES; //-init()に設置

-(void)registerWithTouchDispatcher{

[[[CCDirector sharedDirector] touchDispatcher] addTargetedDelegate:self priority:0 swallowsTouches:YES];

}

//ボタンを押した時に呼び出されるメソッド -(BOOL)ccTouchBegan:(UITouch )touch withEvent:(UIEvent )event{

 return YES;

} //ボタンを離した時に呼び出されるメソッド -(void)ccTouchEnded:(UITouch )touch withEvent:(UIEvent )event{

}

[/c]

マルチタッチを有効にする [c] //AppDelegateの- (BOOL)application:didFinishLaunchingWithOptions内 [glView setMultipleTouchEnabled:YES]; [/c]

実装

先ほど設定をしたccTouchBegan、ccTouchEndedにコードを実装します。 [c]

-(BOOL)ccTouchBegan:(UITouch )touch withEvent:(UIEvent )event{

//タッチしたCGPoint
CGPoint location = [self convertTouchToNodeSpace:touch];

//ボタンとタッチしたCGPointが重なっている場合
if (CGRectContainsPoint(leftButton.boundingBox, location)) {

    touchhashLeft = [touch hash]; //NSInteger型の変数にタッチの識別数字を代入する
    buttonflagleft = 1;//ボタンが押されているかどうかを判断するint型の変数

     //ボタンのCCSpriteを変更 [leftButton setTexture:[[CCTextureCache sharedTextureCache] addImage:@"button-left-hover.png"]];

}


 return YES;

}

-(void)ccTouchEnded:(UITouch )touch withEvent:(UIEvent )event{

CGPoint location = [self convertTouchToNodeSpace:touch];

NSInteger endTouchHash = [touch hash];

//離したタッチがどのタッチかを判別
if (endTouchHash == touchhashLeft) {

    buttonflagleft = 0; 
    [leftButton setTexture:[[CCTextureCache sharedTextureCache] addImage:@"button-left.png"]];


}

}

[/c]

コードの説明

ボタンの処理

実際に、「Playerが動く」、「ジャンプする」などのアクションは、上記でいう変数(buttonflagleft)が0か1かで判別します。 これをオブジェクトのループ内(Update)で抜き出して利用します。

[c] //オブジェクトのループ内

if ([[self getInterfaceLayer].bittonflagleft] == 1 ) {

    //1の場合に移動させる
    [self moveLeft];

} [/c]

タッチの識別

複数ボタンがあると、どのボタンを押した離したの判別をする必要があります。 その際にUITouchクラスを利用します。 [c] [touch hash] [/c] これを利用すれば、タッチの識別ができます。これをif文で利用すると、ボタンの処理がうまくいきました。

[追記] CCMenuクラスを利用したボタンの作成方法を記事にしました。 【cocos2d】CCMenuクラスで、ボタンを作成する方法 | albatrus.com