レベルデザインについて(その3)
前回は Tiled Map Editor にて作成したマップファイルを、 libGDX で読み込み、描画するところまで行いました
今回はマップファイルにオブジェクト情報を追加し、衝突判定を設定したいと思います
まずは、前回作ったマップファイルを Tiled Map Editor で開きます
レイヤーウィンドウにて、「オブジェクト・レイヤーを追加」を選択し、オブジェクトレイヤーを追加します
追加後、タイルレイヤーと同様にレイヤー名をダブルクリックして、日本語から英語に変更します
今回は「objects」に変更しました
次に、追加したオブジェクト・レイヤーを右クリックし、表示されたメニューから「レイヤーの設定」を選択します
選択後、表示される「オブジェクト・レイヤープロパティ」ウィンドウの「色」の項目を選択し、赤色に変更、「OK」ボタンをクリックして設定を反映します
ウィンドウ上部のメニューから「四角形を追加」を選択します
選択後、タイル・レイヤーに描いたブロックに沿ってドラッグ&ドロップを行い、マップオブジェクトを追加します
これを繰り返し、すべてのブロックに対してマップオブジェクトを追加し、完了したらファイルを保存します
最後に libGDX 側にてオブジェクト・レイヤーに追加した情報を読み込みます
libGDX では追加した情報を MapObject インターフェイス、及びそれらを実装した CircleMapObject クラス、 EllipseMapObject クラス、 PolygonMapObject クラス、 PolylineMapObject クラス、 RectangleMapObject クラス、 TextureMapObject クラスが用意されています
RectangleMapObject (libgdx API)
以下のデモでは、マップオブジェクトと Rectangle クラス、及び Circle クラスの衝突判定をおこなっています
マップオブジェクトには今回四角形を使用していますので、 RectangleMapObject クラスとの判定となります
RectangleMapObject クラスのインスタンスからは Rectangle クラスのインスタンスが取得できるため、それとの判定を実装しています
また、わかりやすいように赤線にてマップオブジェクトを描画しています
レベルデザインについて(その2)
前回はレベルデザインのためのツールである、 Tiled Map Editor の使用とマップの作成について説明しました
今回は作成したマップを libGDX で開発するゲーム内に読み込み、描画する方法について説明します
作成したマップファイルは、 TmxMapLoader クラス、及び TiledMap クラスを使用して読み込みます
また、描画には正投影の OrthogonalTiledMapRenderer クラス、及びいわゆるクオータビューと言われる IsometricTiledMapRenderer クラスなどが使用されます
OrthogonalTiledMapRenderer (libgdx API)
IsometricTiledMapRenderer (libgdx API)
以下のデモでは、作成したマップを、 TmxMapLoader クラス、 TiledMap クラス、 OrthogonalTiledMapRenderer クラス、及び OrthographicCamera クラスを使用して表示しています
次回は読み込むマップ情報にオブジェクトとしての情報を追加し、ゲームで利用できるようしたいと思います
レベルデザインについて(その1)
ステージクリア形式のゲームでは、ステージが進むごとに地形や敵の配置、様々な仕組みが複雑になっていき、難易度があがります
その難易度を調整し、簡単すぎず、難しすぎず、プレイヤーが楽しんでプレイしてもらえるようバランスを取ることをレベルデザインといいます
このレベルデザインをするにあたり、ステージの構造を都度プログラムで記述していては調整がとても大変となります
そのため、文字に意味付けしてテキストファイルで記述する、色に意味付けして画像ファイルで記述するなどして、それらをプログラム側で解析し、地形、敵などの配置するということを行います
今回はこの作業を、 Tiled Map Editor というツールを使って行いたいと思います
ツールの使い方についての詳細は下記サイトを参照ください
まずは Tiled Map Editor のサイトからファイルをダウンロード、インストールし、新しいマップを作成します
今回は以下のような設定にてマップを作成します
「OK」ボタンをクリックすると、以下のような画面となります
まず、今後プログラムで操作しやすいようにレイヤー名を日本語から英語に変更します
レイヤー名をダブルクリックすることで変更可能になります
今回は「タイル・レイヤー1」を「tiles」に変更しました
メニューから「マップ」 > 「新しいタイルセット」と選択し、表示されたウィンドウにてタイルセットとなる画像を選択します
タイルセットを設定したら、画面上部の「スタンプ」ツールなどを使い、適当にタイルを配置します
今回は以下のようにタイルを配置し、ファイルを保存しました
次回は、今回作成したファイルを libGDX にて読み込み、表示するようしたいと思います
衝突判定について
ゲーム中では、次キャラクターと敵、地面など、異なるオブジェクトとの衝突(重なり)を判定することが多くあります
libGDX では、以前図形描画にて使用した Rectangle クラス、 Circle クラスなどを利用して衝突判定を行うことができます
Rectangle クラス、 Circle クラスでは、それぞれが持つ overlaps メソッドや contains メソッドを使用し、衝突判定を行うのですが、対象は同じクラスのオブジェクト、または座標での判定となります
異なるクラスのオブジェクト同士の衝突を判定するには下記 Intersector クラスを使用します
詳細については下記記事を参照ください
以下のデモでは Rectangle 同士の衝突判定を行っています
以下のデモでは Intersector クラスを使用して、Rectangle クラス、 Circle クラスの衝突判定を行っています
音の再生について
ゲームでは効果音、 BGM など様々な場面で音を使うことになります
libGDX では音を扱うために Sound インターフェイス、 Music インターフェイスが用意されています
対応するファイル形式としては、 WAV, MP3, OGG があります
(iOS(RoboVM) では現在 OGG の再生はサポートされていません)
Sound インターフェイス、 Music インターフェイスの使い分けとしては、数秒ほどの長さの音であれば Sound インターフェイス、 それ以上に長いものであれば Music インターフェイスを使うほうがいいとされています
(また、 Android では 1MB を超えるファイルサイズのものを Sound インターフェイスの実装インスタンスでは再生できないため、 Music インターフェイスの実装インスタンスを使用する必要があります)
音の再生についての詳細は下記記事を参照ください
デモでは Sound インターフェイス、 Music インターフェイスそれぞれを使い、タップされたタイミングで音を再生しています
Sound インターフェイスを利用したものは以下になります
Music インターフェイスを利用したものは以下になります
文字表示について
ゲーム中では点数やキャラクターの話すテキストなど、多くのところで文字を表示することがあります
libGDX ではこれらの文字表示(フォント描画)のために、 BitmapFont クラスが用意されています
クラス名からもわかる通り、ビットマップフォントの描画に対応したクラスとなります
(デスクトップアプリケーションなどで一般的なアウトラインフォントは、拡張ライブラリを利用することで対応できますが、ファイルサイズなどの問題から今回はビットマップフォントのみを使用します)
フォントの詳細に関しては下記ページを参照ください
(下記ページの通り、最近のバージョンにてフォント周りの API が変更されたため、フォント関連の資料を参照する際にはご注意ください)
ビットマップフォントは、 libGDX の公式ツールに含まれる Hiero や Bitmap Font Generator 、Glyph Designer などがあります
デモでは画面中央に "Hello, libGDX!!" の文字を表示しています
フォントのレイアウト情報を取得するには GlyphLayout クラスを使用しています
また、デモで使用しているのビットマップフォントは libGDX のテストプログラムに含まれる以下のファイルを使用しています
画面の遷移について
ゲームではタイトル画面、ゲーム画面など多くの画面を遷移します
libGDX ではこれを実現するために Game クラスと Screen インターフェイスが用意されています
Game クラスは、 ApplicationAdapter クラスと同じく ApplicationListener インターフェイスの実装で、 Screen インターフェイスを実装したクラスのオブジェクトを処理するメソッドが追加されています
詳しくは下記サイトを参照してください
特にライフサイクルとリソース解放(Screen インターフェイスにある dispose() メソッドの取り扱い)に関する箇所はとても重要なので一読をお勧めします
デモでは背景黒に赤線で円が描画された画面と、背景白に青塗りで四角形が描画された画面とを交互に切り替えています
(デモのため dispose() メソッドの実装は行なっていませんのでご注意下さい)
