入力の受け取りについて

ゲームではユーザからの入力(操作)を受け、キャラクターや敵、カメラなどを動かすといったことがあります

libGDX にて簡単に入力されたデータを受け取りたい場合は下記 Gdx クラスの input という静的プロパティを使用します
このプロパティでは Input インターフェイスが実装されています

 

Gdx (libgdx API)

Input (libgdx API)

 

Gdx.input プロパティ、及び Input インターフェイスを使った入力の受け取りに関する詳細については下記ページを参照ください

 

snoopopo.hatenablog.com

 

以下のデモではタップ(クリック)された位置に向かって円が移動するよう実装しています
タップ(クリック)された位置はスクリーン(物理)上の座標となるため、カメラを使用してワールド(論理)上の座標に変換しています
(カメラについてはコチラを参照ください)

 

gist.github.com

 

Input インターフェイスの実装ではスワイプなどの制御ができないため、それらに対応する下記 InputProcessor インターフェイス、 InputAdapter クラスが用意されています

 

InputProcessor (libgdx API)

InputAdapter (libgdx API)

 

また、複数の InputProcessor インターフェイス、 InputAdapter クラスの処理をまとめるには下記クラスを使用します

 

InputMultiplexer (libgdx API)

 

詳細については下記ページを参照ください

 

snoopopo.hatenablog.com

 

以下のデモではスワイプ(ドラッグ)された方向に向かって円が移動するよう実装しています

 

gist.github.com

カメラとビューポートについて

ゲーム内のカメラは何を、どこから、どのように表示するかを設定する際に使います

例えば、ユーザの操作するキャラクターの動きを追っかける、または衝撃を表現するためにカメラを揺らすなどがあります

libGDX ではこのカメラの機能として、以下のクラスが存在しています

 

OrthographicCamera (libgdx API)

PerspectiveCamera (libgdx API)

 

今回は 2D ゲームを作成することを考えていますので、 OrthographicCamera クラスを使用します

カメラについての詳細は、以下のページを参照してください

 

mikio.github.io

 

snoopopo.hatenablog.com

 

ビューポートは、上記カメラにて得たイメージを、最終的にウィンドウへ表示するサイズと解像度に変換するものです

これにより、モバイル端末などの異なる解像度の画面への対応も可能となっています

libGDX ではこのビューポートの機能として、以下のクラスが存在しています

 

ExtendViewport (libgdx API)

FillViewport (libgdx API)

FitViewport (libgdx API)

ScalingViewport (libgdx API)

ScreenViewport (libgdx API)

StretchViewport (libgdx API)

ExtendViewport (libgdx API)

 

ビューポートについての詳細は、先述のざる魂さんのページ、及び以下のページを参照頂ければと思います

 

qiita.com

 

ビューポートについては種類も多く、開発するゲームによって様々となるため、性質を理解し、利用する必要があります

Ubuntu Linux でのスクリーンキャストの取得について

今回記事を書くにあたり、いくつかのスクリーンキャストを作成しています

Window や Mac 環境であれば、 LICEcap をはじめいくつものツールがあるのですが、 Ubuntu 環境では GUI で簡単にスクリーンキャストを作成するようなツールを見つけることはできませんでした

そのため、今回は Byzanz というツールを使用しました

 

github.com

 

Byzanz は標準でインストールされるパッケージには含まれていませんので、別途インストールが必要です

 

sudo apt-get install byzanz

 

Byzanz の使い方は以下のようになります

 

byzanz-record -d «録画時間(秒)» --delay= -x «X座標» -y «Y座標» -w «幅» -h «高さ» «出力ファイル名»

詳細については下記ページを参照ください

 

アニメーションをGIFファイルとして録画(Ubuntu) - TIM Labs

 

Byzanz で特定のウィンドウのスクリーンキャストを生成したい場合は、そのウィンドウの座標やウィンドウサイズを知る必要があります

それらの情報を得るには、 xwininfo というコマンドがあります

使用している環境に xwininfo コマンドがインストールされていない場合は下記コマンドにてインストールを行ってください

 

sudo apt-get install x11-utils

 

xwininfo コマンド実行後、対象となるウィンドウをクリックすると、そのウィンドウの座標、サイズなどの情報を取得することができます

また、オプションに frame を追加することで、タイトルなどのフレームを含めた座標、サイズを取得できます

xwininfo コマンドの使用方法についての詳細は下記ページを参照ください

 

Ubuntu xwininfoコマンド その1 - ウィンドウの情報を調べる - Ubuntu kledgeb

アセット管理について

ゲーム開発には画像以外にも、文字(フォント)、ゲーム中音楽、効果音、アニメーションデータなどのデータファイルがあり、それらをまとめてアセットと呼びます

ゲーム中ではそれらのアセットを効率良く読み込み、解放を行う必要があります
(場合によっては、プログレスバーなどを表示して、ユーザに読み込み終わるまで待ってもらうなどの処置も必要となります)

libGDX ではアセット管理のために下記のクラスがあります

 

AssetManager (libgdx API)


このクラスではアセットの読み込みや読み込み進度の取得、一括解放などを行うことができます
詳細については以下のページを参照ください

 

qiita.com

 

snoopopo.hatenablog.com

 

デモでは以下のように、 AssetManager クラスを使用して画像を読み込んだあと、その画像を描画しています

 

f:id:picopicolab:20151107001526p:plain

 

gist.github.com

 

 

アニメーションについて

キャラクタの動きつけのためにアニメーションを利用することがあります

ゲーム開発でアニメーションを行う場合、パラパラマンガのように複数の画像を切り替えて表示するスプライトアニメーション、1枚の画像を動かしたい部位毎に切り分けて動かすスケルタルアニメーション(ボーンアニメーション)などの方法があります

今回開発するプラットフォーム・ゲームでは、前者のスプライトアニメーションのみを使うことにします

libGDX にてこのスプライトアニメーションを実現するには Animation クラスを使用します

 

Animation (libgdx API)

 

デモでは以下のように複数のテクスチャを読み込み、アニメーションを行なっています

このとき、別途アニメーション進度を保持するための値(ソースコード中では stateTime)が必要になりますのでご注意ください

 

f:id:picopicolab:20151106194909g:plain

 

gist.github.com

スプライトシートについて

ゲーム開発では、プレイヤーキャラクタ、敵キャラクタ、背景、地面、ブロックなど数多くの画像が使われます

先の記事の通り、それらを1枚1枚読み込んでテクスチャとして生成していては負荷が高くなってしまいます

そのため、複数の画像を1枚の画像として合成し、必要に応じて部分を切り出すということで負荷を下げることができます

この、合成した一枚の画像のことをスプライトシートと呼びます

スプライトシートを作成するツールはいくつかあるのですが、 libGDX では公式ツールとしての TexturePacker 、(名前が同じで紛らわしいのですが) CodeAndWeb の TexturePacker などが使用可能です

今回は CodeAndWeb の TexturePacker Essential 版を使用します
(有料の Pro 版と無料の Essential 版の機能差についてはコチラのページを参照ください)

なお、 TexturePacker の使い方については以下のページを参照ください

 

qiita.com

 

TexturePacker にて画像合成をすると、1枚の画像ファイル(スプライトシート)と合成元の各画像ファイルの座標などの情報が記述されたテキストファイルが生成されます

libGDX ではこれらを読み込むために TextureAtlas クラス、合成されたそれぞれの画像を取り扱うには TextureAtlas.AtlasRegion クラスを使用します

 

TextureAtlas (libgdx API)

TextureAtlas.AtlasRegion (libgdx API)

 

デモでは以下のように、 TextureAtlas クラス、及び TextureAtlas.AtlasRegion クラスを使い、スプレッドシートを読み込んだあと、それを描画しています

 

f:id:picopicolab:20151106071630p:plain

 

gist.github.com

画像について

libGDX では、読み込んだ画像ファイルの取り扱いには以下のクラスを使用します

 

Texture (libgdx API)

TextureRegion (libgdx API)

Sprite (libgdx API)

 

Texture クラスは画像ファイルを読み込んだままの状態のクラスとなります
(先の記事の SpriteBatch クラスの解説で使用した Texture クラスがこれになります)

TextureRegion クラスは Texture クラスの画像の一部を切り出した(切り出し範囲を指定しなければ全体)状態のクラスとなります

Sprite クラスは画像データに加え、描画する座標や角度、サイズなどの情報を持ったクラスとなります

詳細については以下のページを参照ください

ttlg.hateblo.jp

 

デモでは以下のように、 Texture クラス、 TextureRegion クラス、 Sprite クラスを使って画像を描画しています

 

f:id:picopicolab:20151105072355p:plain

 

gist.github.com