mofumofu: #2 libGDX - 2D画像の表示

サンプルを改造して2D画像の表示をしてみました。
OpenGLの座標は、中心を (0,0) として、ｘ座標は右がプラス、ｙ座標は上がプラスになっています。

OpenGLの座標

ディスプレイ上に表示する範囲は、OrthographicCameraクラスを使って指定します。カメラの範囲は自分で指定した論理的な値でOKです。
ただし、縦横の比率が物理的な表示範囲と一致していないと不自然な画像になってしまいます。
今回は、カメラの範囲を縦横 (10.0,15.0) で設定しました。

OrthographicCameraで表示範囲を指定

ソース：カメラの設定（抜粋）

･･･
 private Vector2 camPos;
 private static final float LOGICAL_WIDTH = 10.0f;
 private static final float LOGICAL_HEIGHT = 15.0f;

 @Override
 public void create() {

  camera = new OrthographicCamera(LOGICAL_WIDTH, LOGICAL_HEIGHT);
  camPos = new Vector2();

･･･
 }

･･･

 @Override
 public void render() {

  Gdx.gl.glClearColor(1, 1, 1, 1);
  Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

  // カメラ位置を設定
  camera.position.set(camPos.x, camPos.y, 0.0f);
  camera.update();
  batch.setProjectionMatrix(camera.combined);
･･･

画像の読み込みは、Textureクラスを使います。Textureクラス読み込める画像サイズは 2のn乗 (2,4,8,16,32,64,128,256･･･）でないとエラーになります。
今回は以下の画像(128px * 128px) を表示します。

表示する画像

実際の描画の流れは、Textureクラスで、画像ファイルを読み込んで、SpriteBatchクラスのdrawメソッドで画面表示です。

ソース：画像表示（抜粋）

･･･
 @Override
 public void create() {
･･･
  batch = new SpriteBatch();

  // 画像読み込み
  texture = new Texture(Gdx.files.internal("data/image.png"));

 }

 @Override
 public void render() {
･･･
  // 描画
  batch.begin();
  batch.draw(texture, 0, 0, 10.0f, 10.0f);
  batch.end();

 }
･･･

Textureの原点(0,0)は画像の左下になります。デフォルトのカメラ位置のまま、座標(0,0) に描画すると以下のように向かって右側が見切れた状態になります。

カメラの原点とTextureの原点

これを解消するには、カメラの位置を変えるか、画像の描画位置を変える必要があります。
今回はカメラの位置を変更しました。

ソース：カメラの位置を変更（抜粋）

･･･
 @Override
 public void render() {

  Gdx.gl.glClearColor(1, 1, 1, 1);
  Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);

  // カメラ位置を設定 (右上に移動)
  camera.position.set(camPos.x + LOGICAL_WIDTH / 2.0f, camPos.y + LOGICAL_HEIGHT / 2.0f, 0.0f);
  camera.update();
  batch.setProjectionMatrix(camera.combined);

  // 描画
  batch.begin();
  batch.draw(texture, 0, 0, 10.0f, 10.0f);
  batch.end();

 }
･･･

ちなみに、desktopで実行した時の画像です。