Prainブログ

ゲーム開発とかIT小話とかその他雑記のブログ

*

ゲーム制作 Cocos2d-x関連 第3回 「画像の表示処理 解説」

      2016/07/15

今回は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++言語プログラミングのシリーズにて解説いたします。

5分でわかる プログラミング 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」だけにチェックを入れましょう。これで設定は完了です。

sc_project_general

 

ゲーム画面の解像度変更

画面解像度を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です。

 

3_sc_simu

まだ画面を出しただけでゲームとはいいがたいですね。次回ではタップ操作に反応するプログラムを紹介します!!

 

次回

第4回 「画面タッチに反応して画像を出そう」

 

 - ,

        

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

シミュレータ
ゲーム制作 Cocos2d-x関連 第4回 「画面タッチに反応して画像を出そう」

画面を眺めててもゲームにはならないよ。画面タッチしたいんだけど!   …

アプリ 購入画面
SDKBoxを使ってアプリ内課金をするやり方 プログラム実装~実機テストまでの13の手順

この記事では、SDKBoxを利用したiOSアプリ内課金のプログラム実装から実機テ …

Cocos2d-x iOS アプリ名(アプリのアイコン名)のローカライズ方法

こんにちは。akiです。 この記事ではCocos2d-xでのアプリ名(アプリのア …

エフェクト
Cocos2d-x エフェクトアニメーションの終了と同時にエフェクトを消す方法

この記事では、アニメーションを表示し終わった後に、アニメーション表示を消す方法を …

ゲームを面白くするために
ゲームを面白くするために意識する3つの要素

  この記事は、シリーズ記事 ゲーム制作 Cocos2d-x関連 第1 …