原文鏈接：https://github.com/libgdx/libgdx/wiki/2D-Animation
譯者：重慶好爸爸 game4kids@163.com
謝絕轉(zhuǎn)載

概述

2D動畫是一種使用靜態(tài)圖片來創(chuàng)建動態(tài)效果的技術(shù)。這篇文章描述了如何利用libGDX的Animation類來創(chuàng)建動畫。
動畫是由按照設(shè)置的時間間隔和和一定順序顯示的多個幀。比如可以通過拍攝人跑步時的多張照片，然后在循環(huán)播放這些照片來實現(xiàn)這個人跑步的動畫。
下面的“sprite sheet”圖展示了一個人跑步的完整周期。每個框包含一個靜態(tài)畫面。當(dāng)這些畫面在一段時間內(nèi)順序顯示時，它們將形成動畫。

幀率表示每秒顯示的畫面數(shù)量。上面的例子中，整個跑步周期共有30幀畫面。如果角色在1秒中內(nèi)完成整個跑步周期，那么這30幀畫面需要在1秒鐘之內(nèi)全部顯示完，這中情況下幀率就是 30 FPS。每幀的時間（稱為幀時間或間隔時間）是FPS的倒數(shù)，在這種情況下為每幀0.033秒

animation是一個非常簡單的狀態(tài)機。在例子中跑步的人一共有30個狀態(tài)。編號的幀表示跑步的人經(jīng)歷的狀態(tài)，一個時間只能存在一個狀態(tài)。當(dāng)前是何種狀態(tài)取決于動畫開始后到當(dāng)前經(jīng)歷的時間。如果少于0.033秒，我們在狀態(tài)1，所以第一個sprite被繪制。 如果我們在0.033和0.067秒之間，那么我們在狀態(tài)2，依此類推。 如果動畫循環(huán)，則在顯示所有幀后返回到第一幀。

Animation類 The Animation class

LibGDX's Animation (code) 類可以用來方便的管理動畫。Animation類通過一系列圖片和幀間隔來創(chuàng)建動畫。在動畫播放的時候，getKeyFrame()方法可以通過一個elapsed time參數(shù)得到相應(yīng)的圖像。
Animation有一個泛型參數(shù)，用來表示圖像的類型。 典型的類型是TextureRegion 或者 PolygonRegion, 但是任何renderable 對象都是可以的。該類型通過在動畫聲明中，指定動畫類型來聲明，比如：

Animation<TextureRegion> myAnimation = new Animation<TextureRegion>(/*...*/)

請注意，使用Sprite類來表示動畫的幀通常是不合適的，因為Sprite類包含的位置數(shù)據(jù)不是從幀到幀的(because the Sprite class contains positional data that would not carry from frame to frame.)。

TextureAtlas 例子

LibGDX's TextureAtlas (code) 類
通常用于將許多單獨的紋理區(qū)域組合成較小的紋理集合，以減少昂貴的繪圖調(diào)用 (details here).
TexturePacker和TextureAtlas提供了一種方便的方法來生成動畫。 動畫的所有源圖像應(yīng)以最后的下劃線和幀號命名，如running_0.png, running_1.png, running_2.png, etc. TexturePacker 會自動使用這些號碼來作為幀的編號(要求打包參數(shù)： use-Indexes 為 true)。
加載TextureAtlas之后，可以立即獲取完整的幀數(shù)組，并將其傳遞到Animation構(gòu)造函數(shù)中：

public Animation<TextureRegion> runningAnimation;
//...
runningAnimation = new Animation<TextureRegion>(0.033f, atlas.findRegions("running"), PlayMode.LOOP);

Sprite sheet example

以下代碼片段將使用animation_sheet.png sprite-sheet創(chuàng)建一個動畫，并將動畫渲染到屏幕。

public class Animator implements ApplicationListener {

    // Constant rows and columns of the sprite sheet
    private static final int FRAME_COLS = 6, FRAME_ROWS = 5;

    // Objects used
    Animation<TextureRegion> walkAnimation; // Must declare frame type (TextureRegion)
    Texture walkSheet;
    SpriteBatch spriteBatch;

    // A variable for tracking elapsed time for the animation
    float stateTime;

    @Override
    public void create() {

        // Load the sprite sheet as a Texture
        walkSheet = new Texture(Gdx.files.internal("animation_sheet.png"));

        // Use the split utility method to create a 2D array of TextureRegions. This is 
        // possible because this sprite sheet contains frames of equal size and they are 
        // all aligned.
        TextureRegion[][] tmp = TextureRegion.split(walkSheet, 
                walkSheet.getWidth() / FRAME_COLS,
                walkSheet.getHeight() / FRAME_ROWS);

        // Place the regions into a 1D array in the correct order, starting from the top 
        // left, going across first. The Animation constructor requires a 1D array.
        TextureRegion[] walkFrames = new TextureRegion[FRAME_COLS * FRAME_ROWS];
        int index = 0;
        for (int i = 0; i < FRAME_ROWS; i++) {
            for (int j = 0; j < FRAME_COLS; j++) {
                walkFrames[index++] = tmp[i][j];
            }
        }

        // Initialize the Animation with the frame interval and array of frames
        walkAnimation = new Animation<TextureRegion>(0.025f, walkFrames);

        // Instantiate a SpriteBatch for drawing and reset the elapsed animation
        // time to 0
        spriteBatch = new SpriteBatch();
        stateTime = 0f;
    }

    @Override
    public void render() {
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT); // Clear screen
        stateTime += Gdx.graphics.getDeltaTime(); // Accumulate elapsed animation time
        
        // Get current frame of animation for the current stateTime
        TextureRegion currentFrame = walkAnimation.getKeyFrame(stateTime, true);
        spriteBatch.begin();
        spriteBatch.draw(currentFrame, 50, 50); // Draw current frame at (50, 50)
        spriteBatch.end();
    }

    @Override
    public void dispose() { // SpriteBatches and Textures must always be disposed
        spriteBatch.dispose();
        walkSheet.dispose();
    }
}

使用以下構(gòu)造函數(shù)創(chuàng)建動畫非常簡單。

Best practices

• 將幀與其他sprites一起打包成一個紋理，可以優(yōu)化渲染。 這很容易用TexturePacker完成。
• 根據(jù)游戲類型確定合理數(shù)量的幀。 對于復(fù)古的街機風(fēng)格，10 fps可能就足夠了，而更逼真的運動需要更多的幀。

Asset

獲取 sprite-sheet 這里.