今回はCocos2d-xにおける画像表示コードの解説です。
画像表示処理の解説
前回 第2回 「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);
2行目
・Sprite
cocos2dxで使用される、画像を表示するためのクラスです。
ただし、この行では画像インスタンスを生成しただけで、表示は行っていません。
Spriteの後ろにくっついている「*」はC++のポインタです。 ポインタについては、以下のC++言語プログラミングのシリーズにて解説いたします。
3行目
生成した画像の表示位置を設定しています。
・setPosition、Vec2
いずれもcocos2dxで使用されるメソッド及び変数です。「setPosition」メソッドに「Vec2」で指定した座標を入れると、画像の表示位置が設定されます。
・visibleSize.width
画面の横方向の長さを表しています。
・visibleSize.height
画面の縦方向の長さを表しています。
「->」はアロー演算子でC++のものです。アロー演算子についても別途C++言語プログラミングのシリーズにて解説いたします。
4行目
生成した画像を3行目で設定した表示位置に表示します。
・addChild
cocos2dxで使用されるメソッドです。この一行を実行すると実際に画面に画像が表示されます。
・オーダー
1という数字は画像のオーダーを表しています。オーダーとは画像表示の順序のことで、複数の画像が重なった場合、数字の大きい方が手前に表示される仕様となっています。
・タグ
0という数字は画像のタグを表しています。このタグを利用して画像を取得したりできるのですが、本シリーズでは特段活用の予定がないため、適当な数字を入れています。
「this」はC++のものです。別途C++言語プログラミングのシリーズにて解説予定です。
このようにcocos2dxでは
・画像インスタンスの生成
・画像の表示位置の設定
・実際に画像を表示
を行うことで画像を表示します。
残りの画像の表示
それでは残りの画像も表示してしまいましょう。先ほどのコードの後に以下を記述して下さい。
HelloWorldScene.cpp HelloWorldScene::init
// ドロップ5種 // 赤 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);」の0に気付いたでしょうか?
背景のオーダーは最背面としたいため、ボールやドロップよりも小さい数字を入れています。
また、ボール画像と同様に、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);
上記の1行目から20行目に当該する箇所をコメントアウトし、21行目をソースコードに追加してください。
シミュレータの起動
シミュレータを起動してこのような画像が表示されていればOKです。
まだ画面を出しただけでゲームとはいいがたいですね。次回ではタップ操作に反応するプログラムを紹介します!!
次回