2013年10月21日月曜日

#4 libGDX - 2D画像の表示libGDX (Tween)


下図のように、デバイスの画面より大きな画像を、
カメラの移動をして全体を見る実験をしてみました。
黄色い四画がカメラで、矢印に沿ってカメラ移動をします。
カメラの移動にはuniversal tween engine というjavaのライブラリを使用しています。

カメラ移動のイメージ

desktopでの実行結果



universal tween engineの詳しい使い方は、こちらのページが参考になります。
ざっと、手順を書くと以下のようになります。
  1. Accessorクラスを用意
  2. Tween/TweenManagerを準備
  3. フレーム毎にTweenManagerの更新をする。
以下、今回のサンプルの抜粋です。

今回使った Accessorクラス(抜粋)
・・・
public class CameraAccessor implements TweenAccessor<vector2> {

 public static final int MOVE = 0;

 @Override
 public int getValues(Vector2 target, int tweenType, float[] returnValues) {

  switch (tweenType) {
  case MOVE:
   returnValues[0] = target.x;
   returnValues[1] = target.y;
   return 2;
  default:
   break;
  }
  return 0;
 }

 @Override
 public void setValues(Vector2 target, int tweenType, float[] newValues) {
  switch (tweenType) {
  case MOVE:
   target.x = newValues[0];
   target.y = newValues[1];
   break;
  default:
   break;
  }
 }

}

createメソッド内で Tween/TweenManager の設定をします。
ソース(抜粋)
・・・
 @Override
 public void create() {
・・・

  // Tweenの設定
  tweenManager = new TweenManager();

  Tween.setWaypointsLimit(10);

  Tween.registerAccessor(Vector2.class, new CameraAccessor());

  Tween.to(camPos, CameraAccessor.MOVE, 10.0f)
     .waypoint(0.0f, 25.0f)
    .waypoint(10.0f, 25.0f)
    .waypoint(10.0f, 0.0f)
    .waypoint(20.0f, 0.0f)
    .waypoint(20.0f, 25.0f)
    .waypoint(30.0f, 25.0f)
    .path(TweenPaths.linear)
    .ease(Linear.INOUT).target(30.0f, 0.0f).start(tweenManager);

・・・
 }
renderメソッド内で TweenManagerの更新をします。
ソース(抜粋)
・・・
 @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, 40.0f, 40.0f);
  batch.end();

  // カメラ移動
  tweenManager.update(Gdx.graphics.getDeltaTime());

 }
・・・

サンプルのダウンロード

0 件のコメント:

コメントを投稿