cocos2d-x ボタンを設置する

今回は、cocos2d-xでボタンを設置してみます。

TitleScene(タイトル画面)というSceneの中でボタン設置して、
ボタン押下時にどうなるか。の処理を記載しています。

プログラムの例ではMenuItemImageを使っていますが、
一番下で、MenuItemImageのほか、
MenuItemSpriteやMenuItemFontの紹介もちらっと。。

bool TitleScene::init()
{
	bool bRet = false;
	do
	{
		
		// とりあえず画像を張り付ける場合などは
		// 良く使うので、
		// 画像解像度(画面のサイズ)と原点は
		// 取得しておくのが良いかと。
		
		
		// 画面のサイズを取得します。
		// (画面の縦と横のサイズがとれる)
		
        Size visibleSize = 
            Director::getInstance()->getVisibleSize();
		
		// 0座標を取得します。(画面の左下)
        
        Point origin = 
            Director::getInstance()->getVisibleOrigin();


		//～省略～


		// ボタンイメージを設定
		// ここではMenuItemImageを使っています。
		
		MenuItemImage *hogeItem = 
                    MenuItemImage::create(

			// 第一引数は押下する前の画像

			"test_before.png",	
			
			// 第二引数は押下しているときの画像

			"test_after.png",	
			
			// 第三引数はボタンを押下したときの処理
			// CC_CALLBACK_1というのはどこかで
			// 定義してある別のマクロを呼びだす。
			// マクロに関しては別項で記載する予定。
			// とりあえず気にしない。。
			// 自分も調べないとわからないですからwww
			// ここではTitleScene::hogeOnCallback
			// を呼び出しています。

		CC_CALLBACK_1(TitleScene::hogeOnCallback,this));

		// マクロに関しては別項で記載する予定。
		// とりあえず気にしない。。

		CC_BREAK_IF(! hogeItem);
		
		
		// ボタンの位置を決めます。

		// Pointは良く見かけるcppと同じかな？
		// Point( x座標 , y座標 )で位置を決めて
		// setPositionで配置します。

		// origin.x + visibleSize.width/2 は
		// x座標の原点(画面左端) ＋ 画面の幅の半分
		// ということで、真ん中ってことですね。
		
		// origin.y + visibleSize.height/2 は
		// y座標の原点(画面下端) ＋ 画面の高さの半分
		// ということで、真ん中ってことですね。

		hogeItem->setPosition(
                    Point(
                        origin.x + visibleSize.width/2 ,
			origin.y + visibleSize.height/2));


		// ボタンをメニューに加えます。
		
		menuHoge = Menu::create(hogeItem, NULL);

		// メニューの位置を決めます。
		
		menuHoge->setPosition(Point::ZERO);

		// マクロに関しては別項で記載する予定。
		// とりあえず気にしない。。

		CC_BREAK_IF(! menuHoge);
		
		// 第二引数は表示順です。
		// メニューをシーンの子として追加しています。

		this->addChild(menuHoge, 1);
		
		//～省略～

		bRet = true;
	} while (0);

	return bRet;
}




// ボタン押下時に呼び出される関数です。
// 上記のCC_CALLBACK_1で呼び出されています。
// ここにボタン押下時の処理を書いていきます。

void TitleScene::hogeOnCallback(Object* sender)
{
	// 音楽を止める
	
	SimpleAudioEngine::sharedEngine()->
            stopBackgroundMusic(true);
	
	// GameSceneへ遷移
	
	Scene *scene = GameScene::scene();
	TransitionFade* fade = 
            TransitionFade::create(0.5f,scene);
	Director::getInstance()->pushScene(fade);

}

●MenuItemImage

	MenuItemImage *hogeItem = MenuItemImage::create(
		"test_before.png",	
		"test_after.png",	
		CC_CALLBACK_1(TitleScene::hogeOnCallback,this));

plistファイルや複数画像を1枚のpngにしたときに切り取って画像を使用したい場合はMenuItemSpriteを使用。
Rect関数は画像を切り取るときに使用するもので、Rect(X座標,Y座標,切り取る幅,切り取る高さ)です。
画像を切り取るところで別途投稿しますwww

●MenuItemSprite

	MenuItemSprite *hoge = MenuItemSprite::create(
		Sprite::create(
                    "test_before.png",
                    Rect(0 ,0,IMAGE_SIZE,IMAGE_SIZE)),
		Sprite::create(
                    "test_after.png",
                    Rect(560 ,0,IMAGE_SIZE,IMAGE_SIZE)),
		CC_CALLBACK_1(TitleScene::hogeOnCallback,this));

画像ではなくてテキストでメニューを作ることもできます。

●MenuItemFont

	MenuItemFont *closeItem = MenuItemFont::create(
		"Close",
		this,
		CC_CALLBACK_1(TitleScene::hogeOnCallback));
	closeItem->setFontSize(35);
	closeItem->setFontName("Helvetica");

 - cocos2d-x, アプリ ボタン