【10円ゲーム講座】第4回 10円ゲームの進め方と最初の変更

Cocos2d-x

Cocos2d-x 10円ゲーム講座 第4回、10円ゲームの進め方と画面の縦長使用についてです。

第3回はこちら目次はこちら

スポンサーリンク
レクタングル(大)広告

10円ゲームの進め方

10円ゲームの遊び方をふまえて、今回のゲームの遊び方を決めてみます。

  1. コイン投入口をタッチすることでコインを投入、ゲームスタートする
  2. コインがレバーではじける位置に来た場合、レバーを操作してコインをはじく
  3. コインをゴールに導くことができればクリアとする。クリアの場合は景品が出る。はずれの穴もいくつかあり、はずれに到達してしまった場合は失敗、コインを失う。

10円ゲームは大体こんな感じだと思います。

10円ゲーム画像

筐体としてこんな画像を用意しました。

コイン投入口ボタンを押すことで、コイン投入口からコインを投下、重力とレールに従って左に転がっていきます。そこからレバーで4回はじき、下部の橙色のゴールに入ればゴールとして、景品を出力することにします。

10円玉ではなくコインにしましたが、この画像を元に10円ゲームを作っていきます。

画面を縦長にする

コインゲームはゲーム的に縦長の方が良いと思います。用意した筐体画像も縦長なので、画面を縦長にします。

Cocos2d-xではデザイン解像度と画面解像度があります。

designResolutionSizeがデザイン解像度の定義。Cocos2d-x内で指定する座標系は、全てこの座標を元にした値になります。この例では180, 320が中心位置ということになり、画像表示位置を180,320にすると中心に貼り付けることになるということです。(AnchorPointなどによって中心位置の取り扱い方を変えることはできます)

こちらha

画面解像度の定義。スマートフォンなどの解像度に合わせて、画面のスケーリング(拡縮)を決定します。

今回は縦長9:16の360×640を解像度として設定します。9:16なのでスマフォでもピッタリになることが多いでしょう。

デザイン解像度と画面解像度を360×640とその倍率に合わせて変更します。

Cocos2dx縦長ウィンドウ

実行結果。縦長になりました。

ソースコードはこちら

10円ゲームのシーンを追加する

Cocos2dxファイルツリー

現在のファイル構成は上記のようになっています。

初期プロジェクトでは、アプリケーション起動後、各種初期化を行ってからHelloWorldシーンに遷移してCocos2d-xロゴを表示するのが流れになります。

HelloWorld::createScne()はHelloWorldScene.cppで定義されており、プロジェクト生成時に作られるCocos2dのロゴを表示するサンプルシーンになります。

そのまま利用しても良いですが、HelloWorldという名前がいまいちなので変更して使用します。

HelloWorldScene.hとHelloWorldScene.cppを、それぞれOneCoinGameScene.hとOneCoinGameScene.cppに変更します。

one-coin-game-filetree2

変更に合わせて、AppDelegate.cppのapplicationDidFinishLaunching()で指定するシーンも変更します。

OneCoinGameScene.hとOneCoinGameScene.cppのコードも載せておきます。

元々のHelloWorldScene.cppにあったサンプル表示コードは削除して、何も表示しないようにします。

Cocos2dx新規ファイル

実行結果。サンプルコードの内容を空にしたので、実行すると真っ黒です。

ソースコードはこちら

次回は画像(スプライト)を表示します。

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

シェアする

  • このエントリーをはてなブックマークに追加

フォローする