[cocos2d]CCMenuクラスを使って簡単にメニューを作ろう

(Xcode 4.3.2 、cocos2d 1.0.1)

こんにちは。

本日は、cocos2dで「メニュー」を作成する

"CCMenu"の使い方について説明します。

ゲームを作る上で「メニュー」の作成はかかせません。

「ゲームスタート」、「ハイスコア」、「ランキング」といったボタンを作成し、

ボタンをタップすると各画面へ移動・・・といった処理は、

"CCMenu"クラスを使えば簡単に実現できます。

CCMenuの構成

CCMenuクラスによるメニューは、選択するボタンである複数の"アイテム"と、

そのアイテムを纏めた"メニュー"で構成されます。

１つの"アイテム"は、ボタンとして表示する画像やラベル、ボタンをタップすると呼び出す関数を持ちます。

"アイテム"も一つのクラスで表現します。画像をボタンにするなら"CCMenuItemImage"クラスです。

画像、ラベル等、何をボタンにするかによってクラスが異なります。

以降、メニューを作成していきます。

３つのアイテムを持ったメニューで、ボタンはすべて画像を使用します。

① ボタン画像ファイルを作成する

ボタンとなる画像を作成します。

サンプルとして、以下の３つの画像を作成しました。

・image_item1.png

・image_item2.png

・image_item3.png

このファイルをプロジェクトに追加します。

② .hファイルの修正


ヘッダファイルに、ボタンをタップすることにより呼び出される関数を書きます。
以下、サンプルコードです。

<br /> // メニューを選択したときに呼び出される関数<br /> - (void) item1_function;<br /> - (void) item2_function;<br /> - (void) item3_function;<br />

③ .mファイルの修正

メソッドファイルに、メニュー作成の処理を書きます。
以下、サンプルコードです。

<br /> // Layerクラスの初期化メソッド<br /> -(id) init<br /> {<br /> if( (self=[super init])) {<br /> <br /> // 背景　-------------------------------------<br /> back = [CCSprite spriteWithFile:@"back.png"];<br /> back.position = ccp(160,240);<br /> [self addChild: back z:0];<br /> <br /> // メニュー作成 --------------------------------<br /> CCMenuItemImage *m_item_001 = [CCMenuItemImage itemFromNormalImage:@"image_item1.png" selectedImage:@"image_item1.png" <br /> target:self selector:@selector(item1_function)];<br /> CCMenuItemImage *m_item_002 = [CCMenuItemImage itemFromNormalImage:@"image_item2.png" selectedImage:@"image_item2.png" <br /> target:self selector:@selector(item2_function)];<br /> CCMenuItemImage *m_item_003 = [CCMenuItemImage itemFromNormalImage:@"image_item3.png" selectedImage:@"image_item3.png" <br /> target:self selector:@selector(item3_function)]; <br /> CCMenu *menu = [CCMenu menuWithItems: m_item_001 , m_item_002 , m_item_003 , nil];<br /> [menu alignItemsVertically]; // ボタンの位置を調整<br /> [self addChild:menu z:1]; // メニューを配置<br /> }<br /> return self;<br /> }<br /> <br /> <br /> // メニューのボタンをタップすると呼び出されるメソッド<br /> - (void) item1_function<br /> {<br /> NSLog(@"selected item1!!");<br /> }<br /> <br /> - (void) item2_function<br /> {<br /> NSLog(@"selected item2!!");<br /> }<br /> <br /> - (void) item3_function<br /> {<br /> NSLog(@"selected item3!!");<br /> }<br /> <br />

まず、メニューを構成するアイテムを作ります。一つのアイテムは以下のコードで作成しています。

<br /> CCMenuItemImage *m_item_001 = [CCMenuItemImage itemFromNormalImage:@"image_item1.png" selectedImage:@"image_item1.png" <br /> target:self selector:@selector(item1_function)];<br />

第一引数はボタンとして使用する画像名を文字列形式で指定します。

第二引数（selectedImage:）ボタンを押しているときの画像名を文字列形式で指定します。

　※サンプルでは同じ画像を指定しています。

第三引数（target:）はボタンをタップしたときに呼び出したい関数を持つクラスインスタンスをid型で指定します。

　※サンプルでは自クラス内の関数を呼び出すので"self"を指定しています。

第四引数（selector:）は呼び出したい関数をSEL型で指定します。

メニューアイテムをすべて作成したら、
それらを纏めたメニューを作成します。

<br /> CCMenu *menu = [CCMenu menuWithItems: m_item_001 , m_item_002 , m_item_003 , nil];<br />

纏めたいメニューを引数に並べて書くだけです。

最後は必ず"nil"を入れなければなりません。

メニューをLayerに追加するまえに実行している以下のコードは、

メニューアイテムを表示する際、ボタンを縦に並べることを意味します。

これを行わないと、すべてのボタンが重なってしまいます。

<br /> [menu alignItemsVertically]; // ボタンの位置を調整<br />

alignItemsVerticallyによる縦の並べ方の間隔は固定ですが、

間隔を指定するalignItemsVerticallyWithPaddingメソッドも有ります。

④ビルド！！

以下のように、メニューが表示されます。

ボタンが押されたと認識する範囲は画像のサイズと同じになります。

サンプルではボタンのタップによって呼び出される関数にLogの書き出ししかしていませんが、

Sceneの移動処理を追加すれば「タイトル画面からゲーム画面へ移動」といった処理が可能です。

最後に

今回説明していませんが、他に以下のようなメニューアイテムを作成することが出来ます。
・文字列をボタンにする。
・ラベルをボタンにする。
・タップするたびにボタンを切り替える（トグルボタン）

以上です。