今回はCocos2d-xにおける画像表示コードの解説です。
画像表示処理の解説
前回 第２回 「Cocos2d-xで作ろう！！～画像の表示処理」 の続きです。
先ほどの画像表示処理を再掲します。
HelloWorldScene.cpp HelloWorld::init
// プレイヤー（ボール）
Sprite* ball = Sprite::create("ball.png");
ball->setPosition(Vec2(visibleSize.width/2, visibleSize.height/2));
this->addChild(ball, 1, 0);
２行目
・Sprite
cocos2dxで使用される、画像を表示するためのクラスです。
ただし、この行では画像インスタンスを生成しただけで、表示は行っていません。
Spriteの後ろにくっついている「*」はC++のポインタです。 ポインタについては、以下のC++言語プログラミングのシリーズにて解説いたします。
３行目
生成した画像の表示位置を設定しています。
・setPosition、Vec2
いずれもcocos2dxで使用されるメソッド及び変数です。「setPosition」メソッドに「Vec2」で指定した座標を入れると、画像の表示位置が設定されます。
・visibleSize.width
画面の横方向の長さを表しています。
・visibleSize.height
画面の縦方向の長さを表しています。
「->」はアロー演算子でC++のものです。アロー演算子についても別途C++言語プログラミングのシリーズにて解説いたします。
４行目
生成した画像を３行目で設定した表示位置に表示します。
・addChild
cocos2dxで使用されるメソッドです。この一行を実行すると実際に画面に画像が表示されます。
・オーダー
１という数字は画像のオーダーを表しています。オーダーとは画像表示の順序のことで、複数の画像が重なった場合、数字の大きい方が手前に表示される仕様となっています。
・タグ
０という数字は画像のタグを表しています。このタグを利用して画像を取得したりできるのですが、本シリーズでは特段活用の予定がないため、適当な数字を入れています。
「this」はC++のものです。別途C++言語プログラミングのシリーズにて解説予定です。
このようにcocos2dxでは
・画像インスタンスの生成
・画像の表示位置の設定
・実際に画像を表示
を行うことで画像を表示します。
残りの画像の表示
それでは残りの画像も表示してしまいましょう。先ほどのコードの後に以下を記述して下さい。
HelloWorldScene.cpp HelloWorldScene::init
// ドロップ５種
// 赤
Sprite* dropRed = Sprite::create("color_drop_red.png");
dropRed->setPosition(Vec2(100.0, 600.0));
this->addChild(dropRed, 1, 1);
// 黄
Sprite* dropYellow = Sprite::create("color_drop_yellow.png");
dropYellow->setPosition(Vec2(200, 700));
this->addChild(dropYellow, 1, 2);
// 青
Sprite* dropBlue = Sprite::create("color_drop_blue.png");
dropBlue->setPosition(Vec2(100, 1000));
this->addChild(dropBlue, 1, 3);
// 緑
Sprite* dropGreen = Sprite::create("color_drop_green.png");
dropGreen->setPosition(Vec2(400, 600));
this->addChild(dropGreen, 1, 4);
// 紫
Sprite* dropPurple = Sprite::create("color_drop_purple.png");
dropPurple->setPosition(Vec2(500, 900));
this->addChild(dropPurple, 1, 5);
// 背景
Sprite* background = Sprite::create("background.png");
background->setPosition(Vec2(visibleSize.width/2, visibleSize.height/2));
this->addChild(background, 0, 6);
// 敵
Sprite* enemy = Sprite::create("enemy.png");
enemy->setPosition(Vec2(visibleSize.width / 2, visibleSize.height - enemy->getContentSize().height / 2));
this->addChild(enemy, 1, 7);
背景の「this->addChild(background, 0, 6);」の０に気付いたでしょうか？
背景のオーダーは最背面としたいため、ボールやドロップよりも小さい数字を入れています。
また、ボール画像と同様に、resourcesに画像を追加してください。
追加する画像は下記からダウンロードして下さい。
ゲーム画面の向きを縦向きにする
シミュレータで確認したいところですが、このままでは画面が横長のままです。今回のゲームは
縦長画面でのプレイを想定しているため、ゲームを縦長画面でプレイできるように設定を変更しましょう。
「PuzzleAndStrike」プロジェクトを選択するとプロジェクトの設定画面がXcode画面中央に
表示されます。「General->Deployment Info->Device Orientation」で「Portrait」だけにチェックを入れましょう。これで設定は完了です。
ゲーム画面の解像度変更
画面解像度を1366＊768に変更しておきます。AppDelegate.cppファイルの中身を以下のように変更してください。
AppDelegate.cpp AppDelegate::applicationDidFinisishLaunching
/*
// Set the design resolution
glview->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, ResolutionPolicy::NO_BORDER);
Size frameSize = glview->getFrameSize();
// if the frame's height is larger than the height of medium size.
if (frameSize.height > mediumResolutionSize.height)
{
director->setContentScaleFactor(MIN(largeResolutionSize.height/designResolutionSize.height, largeResolutionSize.width/designResolutionSize.width));
}
// if the frame's height is larger than the height of small size.
else if (frameSize.height > smallResolutionSize.height)
{
director->setContentScaleFactor(MIN(mediumResolutionSize.height/designResolutionSize.height, mediumResolutionSize.width/designResolutionSize.width));
}
// if the frame's height is smaller than the height of medium size.
else
{
director->setContentScaleFactor(MIN(smallResolutionSize.height/designResolutionSize.height, smallResolutionSize.width/designResolutionSize.width));
}
*/
glview->setDesignResolutionSize(768.0, 1366.0, ResolutionPolicy::SHOW_ALL);
上記の１行目から２０行目に当該する箇所をコメントアウトし、２１行目をソースコードに追加してください。
シミュレータの起動
シミュレータを起動してこのような画像が表示されていればOKです。
まだ画面を出しただけでゲームとはいいがたいですね。次回ではタップ操作に反応するプログラムを紹介します！！
次回
