2013年10月19日土曜日

#3 libGDX - 2D画像の表示libGDX (viewport の設定)


前回のサンプルをスマフォ上で実行すると、縦長に表示されてしまします。
デフォルトの描画領域は画面全体になってしまうので、
縦横比がデバイスに依存してしまうためです。



今回は、前回のサンプルに縦横の比を調整を入れます。
さまざまな、デバイスがあるため縦横比をどうするかは、、、作りたいアプリ次第です。
今回は、横:縦 = 2:3 で設定します。

ちなみに、どんな縦横比があるかは、このページが参考になります。
iPhone/Android画面解像度早見表【2011年〜2013年夏最新機種】



カメラの論理サイズを (10,15) にしているので、縦横比が 2:3 になるように viewPort を設定します。

サンプルソース(抜粋)
・・・
 private Vector2 camPos;
 private static final float LOGICAL_WIDTH = 10.0f;
 private static final float LOGICAL_HEIGHT = 15.0f;

 private Rectangle viewport;

 @Override
 public void create() {

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

  batch = new SpriteBatch();

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

  // デバイスの画面サイズを取得
  int physicalWidth = Gdx.graphics.getWidth();
  int physicalHeight = Gdx.graphics.getHeight();

  // 描画領域を計算
  float viewWidth = physicalWidth;
  float viewHeight = physicalWidth * 1.5f;

  viewport = new Rectangle(0, (physicalHeight - viewHeight) / 2.0f,
    viewWidth, viewHeight);

 }
・・・
 @Override
 public void render() {

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

  // ビューポート(描画領域)を設定
  Gdx.gl.glViewport((int) viewport.x, (int) viewport.y,(int) viewport.width, (int) viewport.height);

  // カメラ位置を設定 (右上に移動)
  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();

 }
・・・

サンプルソースのダウンロードはコチラから

0 件のコメント:

コメントを投稿