2013年02月18日

Cocos2d-xの画面遷移を調べてみました。

Cocos2d-xでiPhoneとAndroid同時リリースがんばるぞ〜。

今日は画像ボタンを押された後に画面遷移する動きを調べたいと思います。

前回のボタン設定時に"Menu::nagasaStartBtnDidPushCallback"を指定しました。
// 長さクイズのボタンを生成
CCMenuItemImage *nagasaStartBtnItem = CCMenuItemImage::create(
"nagasaBtn.png",
"nagasaBtnPush.png",
this,
menu_selector(Menu::nagasaStartBtnDidPushCallback) );


この関数に画面をスライドして次のゲーム画面を表示する機能を実装してみます。


// 長さクイズボタン押下時
void Menu::nagasaStartBtnDidPushCallback(CCObject* pSender)
{
// ゲーム画面のシーンを生成
CCScene* gameScene = Game::scene();

// ゲーム画面の登場シーンの種類を 0.5秒間 右からスライドに設定
CCTransitionScene *transitionScen = CCTransitionSlideInR::create( 0.5, gameScene );

// 画面シーンの切り替えを実行(メニュー画面からゲーム画面に遷移開始!)
CCDirector::sharedDirector()->replaceScene( transitionScen );
}

replaceScene001.pngreplaceScene002.png

次の画面シーンを生成して replaceScene関数で入れ替えると画面遷移するみたいですね〜。
CCTransitionSceneを使うとかっこ良く次の画面表示ができるみたいです。

明日は、各ボタン押した内容に合わせてゲーム画面を切り替えを作ってみたいと思います。
タグ:cocos2d-x
posted by itokami1123 at 01:14| Comment(0) | 日記

2013年02月17日

Cocos2d-xの画像ボタンを調べてみました。

Cocos2d-xでiPhoneとAndroid同時リリースがんばるぞ〜。

今日は画像ボタンを調べたいと思います。

ボタン関連はCCMenuクラスを使うみたいですよ。


// 画面サイズを取得
CCSize size = CCDirector::sharedDirector()->getWinSize();

// 画面の中心座標を取得
CCPoint centerPosition = CCPointMake(size.width/2, size.height/2 );

// 長さクイズのボタンを生成
CCMenuItemImage *nagasaStartBtnItem = CCMenuItemImage::create(
"nagasaBtn.png",
"nagasaBtnPush.png",
this,
menu_selector(Menu::nagasaStartBtnDidPushCallback) );
// 長さクイズのボタン座標を設定
nagasaStartBtnItem->setPosition( ccp( centerPosition.x- 64, centerPosition.y) );

// かさ(リットルとかの単位)クイズのボタン生成
CCMenuItemImage *kasaStartBtnItem = CCMenuItemImage::create(
"kasaBtn.png",
"kasaBtnPush.png",
this,
menu_selector(Menu::kasaStartBtnDidPushCallback) );

// かさ(リットルとかの単位)クイズのボタン座標を設定
kasaStartBtnItem->setPosition( ccp( centerPosition.x+ 64, centerPosition.y) );

// メニューボタンとして 長さボタンとかさボタンを登録
CCMenu* pMenu = CCMenu::create( nagasaStartBtnItem, kasaStartBtnItem, NULL);

// menuのポジションを(0,0)に指定すればCCMenuItemで指定したpositionをそのまま反映
pMenu->setPosition( CCPointZero );

// 画面に追加!
this->addChild(pMenu, 2);



CCMenuItemImage::create の引数は、
1つ目普段の画像、2つ目押された時の画像、3つめ目は関数がある場所、4つ目は押された時の関数を指定する様ですね。

出来上がったボタンをaddChildで出来上がり!
cocos2d-x_menuItem01.png

次はボタンを押した時に起動する関数で
次画面への遷移を作ってみたいと思います〜。


タグ:cocos2d-x
posted by itokami1123 at 15:07| Comment(0) | 日記

2013年02月16日

Cocos2d-xの画像配置を調べてみました。

Cocos2d-xでiPhoneとAndroid同時リリースがんばるぞ〜。

今日は画像の配置を調べたいと思います。

画像はCCSpriteクラスを使うみたいですね。

まずは画面幅を取得しますよ〜。
// 画面サイズの取得
CCSize size = CCDirector::sharedDirector()->getWinSize();


CCSizeは、Objective-CのCGSizeと一緒で
width(幅)とheight(高さ)を管理する見たいです。

では背景画像とタイトル画像を配置してみましょう!

// 画像ファイル名で作れるみたいですね。便利ですね〜。
CCSprite* pSprite = CCSprite::create("background.png");

// positionは画像の中心座標みたいです。
// さっき上で取得した画面幅から中心の座標を作ります。
pSprite->setPosition( ccp( size.width/2, size.height/2 ) );

// 配置します!
// 2番目の引数はリファレンスを見るとzOrderと書いていたので
// おそらく重なりの順で数字が大きい方が前にくるんでしょうねぇ。
this->addChild( pSprite, 0 );

// タイトル画像も配置
CCSprite* titleSprite = CCSprite::create("title.png");
titleSprite->setPosition( ccp(size.width/2, 470-titleSprite->getContentSize().height/2) );
this->addChild(titleSprite,1);


タイトルを置いた時に気づいたんですけどY座標軸が反対ですね。
数字が小さい方が下になります。
通常のiPhone開発で使用するUIViewとは反対になりますかぁ。

画像で背景とタイトルを置きましたので今こんな感じの画面です。
cocos2d-x_ccsprite001.png

 今作っているアプリはkmとかcmとかの学習が出来るもので
 「単位先生」と言う名前にしようと思ってます。

明日はメニュー画面にボタンを作ってみたいと思います。
タグ:cocos2d-x
posted by itokami1123 at 01:07| Comment(0) | 日記