cocos2d-x ボタンを設置する
2017/10/25
今回は、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");