サイトのトップへ戻る

libGDX ドキュメント 日本語訳

サイト内検索

基本的なグラフィック Part 2 - 簡単なアニメーション

チュートリアル3では、Timer を使って手動でフレームを設定し、 TextureAtlasから簡単なアニメーションを作成しました。 これは、LibGDX を使ってアニメーションを実行する際の理想的な方法ではありません。 あくまでTextureAtlasをどのように使うのかを例示するためコードで、アニメーションを実行するためのコードではありません。 前回のやり方とは別に、アニメーションを実行するためにより良い方法はAnimation クラスを使うことです。 以下にチュートリアル3と同じspritesheet を使った例を記載します。 spritesheet をAndroid プロジェクトのassets フォルダーに追加する必要があるので、忘れないでください

package com.gamefromscratch;

import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL10;
import com.badlogic.gdx.graphics.g2d.Animation;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.TextureAtlas;

public class AnimationDemo implements ApplicationListener {
    private SpriteBatch batch;
    private TextureAtlas textureAtlas;
    private Animation animation;
    private float elapsedTime = 0;
    
    @Override
    public void create() {        
        batch = new SpriteBatch();
        textureAtlas = new TextureAtlas(Gdx.files.internal("data/spritesheet.atlas"));
        animation = new Animation(1/15f, textureAtlas.getRegions());
    }

    @Override
    public void dispose() {
        batch.dispose();
        textureAtlas.dispose();
    }

    @Override
    public void render() {        
        Gdx.gl.glClearColor(0, 0, 0, 1);
        Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
        
        batch.begin();
        //sprite.draw(batch);
        elapsedTime += Gdx.graphics.getDeltaTime();
        batch.draw(animation.getKeyFrame(elapsedTime, true), 0, 0);
        batch.end();
    }

    @Override
    public void resize(int width, int height) {
    }

    @Override
    public void pause() {
    }

    @Override
    public void resume() {
    }
}

上記コードを実行すると、以下が表示されます:

Animation

このコードで重要なのは、以下で作成した Animationです:

animation = new Animation(1/15f, textureAtlas.getRegions()); 

animation を作成する時、フレームあたりの時間 ( 今回の場合は1秒間ごとに15 フレーム)と TextureRegionsの配列を引数として渡します。 これらはTextureAtlas内の個々のanimation フレームを表します。 今回の例では、Atlas 内の使用可能なフレーム全てを、一つのアニメーションとして使用しています。 二つ目に重要な変更点は、以下です:

elapsedTime += Gdx.graphics.getDeltaTime(); 
batch.draw(animation.getKeyFrame(elapsedTime, true), 0, 0); 

上記では、animation の中からカレントフレームを画面に描写しているだけです。 経過時間を引数として渡しているので、animation は自身がフレームのどの位置にいるのかが分かります。 true 引数では、アニメーションをループさせるように指示をしています。

もちろん、一つのtexture Atlasから複数のアニメーションを作ることもできます。 現在使用しているspritesheetで考えてみましょう。 .atlas ファイルを見ると、個々のフレームに名前が付けられているのが分かります:

image

spritesheetを見ると、アニメーションは以下のように構成されているのが分かるでしょう:

spritesheet

今回やりたいのは、二つに別々のアニメーションとしてこれを扱うことです。 1から10までのフレームで上向き回転を表し、11から20までのフレームで下向き回転を表します。 それでは、アニメーションを行う方法を見てみましょう:

public void create() {        
    batch = new SpriteBatch();
    textureAtlas = new TextureAtlas(Gdx.files.internal("data/spritesheet.atlas"));
    
    TextureRegion[] rotateUpFrames = new TextureRegion[10];
    
    // Rotate Up Animation
    // Create an array of TextureRegions
    rotateUpFrames[0] = (textureAtlas.findRegion("0001"));
    rotateUpFrames[1] = (textureAtlas.findRegion("0002"));
    rotateUpFrames[2] = (textureAtlas.findRegion("0003"));
    rotateUpFrames[3] = (textureAtlas.findRegion("0004"));
    rotateUpFrames[4] = (textureAtlas.findRegion("0005"));
    rotateUpFrames[5] = (textureAtlas.findRegion("0006"));
    rotateUpFrames[6] = (textureAtlas.findRegion("0007"));
    rotateUpFrames[7] = (textureAtlas.findRegion("0008"));
    rotateUpFrames[8] = (textureAtlas.findRegion("0009"));
    rotateUpFrames[9] = (textureAtlas.findRegion("0010"));

    rotateUpAnimation = new Animation(0.1f,rotateUpFrames);
    
    // Rotate Down Animation
    // Or you can just pass in all of the regions to the Animation constructor
    rotateDownAnimation = new Animation(0.1f,
            (textureAtlas.findRegion("0011")),
            (textureAtlas.findRegion("0012")),
            (textureAtlas.findRegion("0013")),
            (textureAtlas.findRegion("0014")),
            (textureAtlas.findRegion("0015")),
            (textureAtlas.findRegion("0016")),
            (textureAtlas.findRegion("0017")),
            (textureAtlas.findRegion("0018")),
            (textureAtlas.findRegion("0019")),
            (textureAtlas.findRegion("0020")));

    Gdx.input.setInputProcessor(this);
}

ご覧の通り、一つのTextureAtlasから複数のアニメーションを作成するのは簡単です。 Keep in mind, when creating a TextureAtlas using TexturePacker, it was the filename that you passed in that created the region names.  そのため、普通は各アニメーションの内容に応じてWalkLeftやWalkRightなどのような名前を付けます。




エンジェル戦記