cocos2d ボタンの作成

ボタン生成

■ボタンについて

生成の流れ

・CCSpriteや文字列を使ってCCMenuItemを生成する(複数可)

・CCMenuを生成する

・CCLayerにaddChildする

■サンプルコード

#import <Foundation/Foundation.h>
#import "cocos2d.h"

@interface SampleLayer : CCLayer
{
}

+(CCScene *) scene;

@end
#import "SampleLayer.h"

@implementation SampleLayer


/**
 * 
 * シーン取得
 * 
 **/
+(CCScene *) scene
{
	// シーン生成
	CCScene *scene = [CCScene node];
	// レイヤー生成
	SampleLayer *layer = [SampleLayer node];
	// シーンにレイヤーを追加
	[scene addChild:layer];
	
	// シーンを返す
	return scene;
}


/**
 * 
 * 初期処理
 * 
 **/
-(id) init
{
	if(self = [super init])
	{
		// CCSpriteを使用したボタンをセット
		[self createSpriteButton];
		// 文字列を使用したボタンをセット
		[self createStringButton];
	}
	
	return self;
}


/**
 * 
 * ボタンセット(CCSprite)
 * 
 **/
-(void) createSpriteButton
{
	// ボタン生成(selector)
	CCMenuItem *item_1 = [CCMenuItemImage
                          // 通常状態の画像
                          itemWithNormalImage:@"icon_red.png"
                          // 選択状態の画像
                          selectedImage:@"icon_red_selected.png"
                          // pushSpriteButtonメソッドを呼ぶ
                          target:self
                          selector:@selector(pushSpriteButton:)
                          ];
    
	
	// ボタン生成(block)
	CCMenuItem *item_2 = [CCMenuItemImage
                          // 通常状態の画像
                          itemWithNormalImage:@"icon_blue.png"
                          // 選択状態の画像
                          selectedImage:@"icon_blue_selected.png"
                          // pushSpriteButtonメソッドを呼ぶ
                          block:^(id sender)
                          {
                              [self pushSpriteButton:sender];
                          }
                          ];
	
	// メニューにタグを設定
	item_1.tag = 1;
	item_2.tag = 2;
	
	// CCMenuを生成
	CCMenu *menu = [CCMenu
                    menuWithItems:
                    item_1,
                    item_2,
                    nil
                    ];
	
	// 20ポイント間隔で水平方向に整列する
	[menu alignItemsHorizontallyWithPadding:20];
	
	// 画面サイズ取得
	CGSize win_size = [[CCDirector sharedDirector] winSize];
	
	// 設置する座標を設定
	[menu setPosition:ccp(win_size.width / 2, win_size.height / 2)];
	
	// メニューを追加
	[self addChild:menu];
}


/**
 * 
 * メニューのボタンが押された(CCSprite)
 * 
 **/
-(void) pushSpriteButton:(id) sender
{
	// タグ情報を元に押されたボタンを判定
	switch([sender tag])
	{
		case 1:
			CCLOG(@"Pushed:icon_red");
			break;
			break;
		case 2:
			CCLOG(@"pushed:icon_blue");
			break;
		default:
			CCLOG(@"error...");
			break;
	}
}


/**
 * 
 * ボタンセット(文字列)
 * 
 **/
-(void) createStringButton
{
	// ボタン生成(selector)
	CCMenuItem *item_1 = [CCMenuItemFont
                          // ボタンテキスト
                          itemWithString:@"button_A"
                          // pushStringButtonメソッドを呼ぶ
                          target:self
                          selector:@selector(pushStringButton:)
                          ];
	
	// ボタン生成(block)
	CCMenuItem *item_2 = [CCMenuItemFont
                          // ボタンテキスト
                          itemWithString:@"button_B"
                          // pushStringButtonメソッドを呼ぶ
                          block:^(id sender)
                          {
                              [self pushStringButton:sender];
                          }
                          ];
	
	// アイテムにタグを設定
	item_1.tag = 10;
	item_2.tag = 20;
	
	// CCMenuを生成
	CCMenu *menu = [CCMenu
                    menuWithItems:
                    item_1,
                    item_2,
                    nil
                    ];
	
	// 20ポイント間隔で垂直に整列
	[menu alignItemsVerticallyWithPadding:20];
	
	// 画面をサイズを取得
	CGSize win_size = [[CCDirector sharedDirector] winSize];
	
	// 設置する座標を設定
	[menu setPosition:ccp(win_size.width / 2, win_size.height / 2 - 100)];
	
	// メニューを追加
	[self addChild:menu];
}


/**
 * 
 * メニューのボタンが押された(文字列)
 * 
 **/
-(void) pushStringButton:(id) sender
{
	// タグ情報を元に押下されたボタンを判定
	switch([sender tag])
	{
		case 10:
			CCLOG(@"Pushed:button_A");
			break;
		case 20:
			CCLOG(@"Pushed:button_B");
			break;
		default:
			CCLOG(@"error...");
			break;
	}
}

@end

■実行画面
cocos2d019

■各ボタンをタップした際のログ
cocos2d020

※:selectorとblockについて

■selector

selector:@selector(method:)
"method"にメソッド名を、引数がある時は末尾に:(コロン)を追加する
引数はtarget:selfのようにしてtargetで指定する。

■block

block:^(id sender){[self method:sender]}
{}(ブレイス)で囲まれた中に複数のメソッドを実装したり変数に値を代入したりすることができる。

ボタン画像の選択状態について

下記の様にすればボタン画像が一枚でON/OFFを分けることができる。

// 通常状態のアイコン
CCSprite *icon_normal = [CCSprite spriteWithFile:@"icon_red.png"];
// 選択状態のアイコン
CCSprite *icon_selected = [CCSprite spriteWithFile:@"icon_red.png"];
// グレーがかった色にする
icon_selected = ccGRAY;

// アイテム生成
CCMenuItem *item = [CCMenuItemSprite
  itemWithNormalSprite:icon_normal
  selectedSprite:icon_selected
  target:self
  selector:@selector(method:)
];

ボタン二度押し防止について

ローカル変数をBlock構文内で変更する場合は変数の宣言時に”__block”を付ける

__block CCMenuItem *item = [CCMenuItemImage
  itemWithNormalImage:@"icon_red.png"
  selectedImage:@"icon_red_selected.png"
  block:^(id sender)
  {
    // タッチを無効化する
    item.isEnabled = NO;
    [self method:sender];
  }
];

Comments are closed.