原文鏈接：https://github.com/libgdx/libgdx/wiki/2D-Animation
譯者：重慶好爸爸 game4kids@163.com
謝絕轉載
概述
2D動畫是一種使用靜態圖片來創建動態效果的技術。這篇文章描述了如何利用libGDX的Animation類來創建動畫。
動畫是由按照設置的時間間隔和和一定順序顯示的多個幀。比如可以通過拍攝人跑步時的多張照片，然后在循環播放這些照片來實現這個人跑步的動畫。
下面的“sprite sheet”圖展示了一個人跑步的完整周期。每個框包含一個靜態畫面。當這些畫面在一段時間內順序顯示時，它們將形成動畫。
幀率表示每秒顯示的畫面數量。上面的例子中，整個跑步周期共有30幀畫面。如果角色在1秒中內完成整個跑步周期，那么這30幀畫面需要在1秒鐘之內全部顯示完，這中情況下幀率就是 30 FPS。每幀的時間（稱為幀時間或間隔時間）是FPS的倒數，在這種情況下為每幀0.033秒
animation是一個非常簡單的狀態機。在例子中跑步的人一共有30個狀態。編號的幀表示跑步的人經歷的狀態，一個時間只能存在一個狀態。當前是何種狀態取決于動畫開始后到當前經歷的時間。如果少于0.033秒，我們在狀態1，所以第一個sprite被繪制。 如果我們在0.033和0.067秒之間，那么我們在狀態2，依此類推。 如果動畫循環，則在顯示所有幀后返回到第一幀。
Animation類 The Animation class
LibGDX's Animation (code) 類可以用來方便的管理動畫。Animation類通過一系列圖片和幀間隔來創建動畫。在動畫播放的時候，getKeyFrame()方法可以通過一個elapsed time參數得到相應的圖像。
Animation有一個泛型參數，用來表示圖像的類型。 典型的類型是TextureRegion 或者 PolygonRegion, 但是任何renderable 對象都是可以的。該類型通過在動畫聲明中，指定動畫類型來聲明，比如：
Animation<TextureRegion> myAnimation = new Animation<TextureRegion>(/*...*/)
請注意，使用Sprite類來表示動畫的幀通常是不合適的，因為Sprite類包含的位置數據不是從幀到幀的(because the Sprite class contains positional data that would not carry from frame to frame.)。
TextureAtlas 例子
LibGDX's TextureAtlas (code) 類
通常用于將許多單獨的紋理區域組合成較小的紋理集合，以減少昂貴的繪圖調用 (details here).
TexturePacker和TextureAtlas提供了一種方便的方法來生成動畫。 動畫的所有源圖像應以最后的下劃線和幀號命名，如running_0.png, running_1.png, running_2.png, etc. TexturePacker 會自動使用這些號碼來作為幀的編號(要求打包參數： use-Indexes 為 true)。
加載TextureAtlas之后，可以立即獲取完整的幀數組，并將其傳遞到Animation構造函數中：
public Animation<TextureRegion> runningAnimation;
//...
runningAnimation = new Animation<TextureRegion>(0.033f, atlas.findRegions("running"), PlayMode.LOOP);
Sprite sheet example
以下代碼片段將使用animation_sheet.png sprite-sheet創建一個動畫，并將動畫渲染到屏幕。
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();
}
}
使用以下構造函數創建動畫非常簡單。
| Method signature | Description |
|---|---|
| Animation (float frameDuration, TextureRegion... keyFrames) | The first parameter is the frame time and the second is an array of regions (frames) making up the animation |
Best practices
- 將幀與其他sprites一起打包成一個紋理，可以優化渲染。 這很容易用TexturePacker完成。
- 根據游戲類型確定合理數量的幀。 對于復古的街機風格，10 fps可能就足夠了，而更逼真的運動需要更多的幀。
Asset
獲取 sprite-sheet 這里.
