Bài học animation trong LibGDX sẽ giới thiệu đến bạn đọc sự hiểu biết về animation trong game là gì? Xử lý animation trong LibGDX ra sao?

Một Animation lưu trữ một danh sách các đối tượng đại diện cho một chuỗi hoạt hình, ví dụ như chạy hoặc nhảy. Mỗi đối tượng trong hoạt hình được gọi là một key frame (khung hình) và nhiều key frame tạo nên các hình ảnh động.

Animation trong LibGDX – Chuẩn bị và thực hiện

Chuẩn bị

1/ Danh sách hình, mỗi hình thể hiện một cử động hoặc một trạng thái của nhân vật. Ví dụ để tạo animation cho gấu ở trạng thái đi, chúng ta có một danh sách hình như sau

2/ Phần mềm TexturePacker được sử dụng để ghép những tấm hình riêng lẽ thành một tấm hình duy nhất

Các bước thực hiện ghép hình với TexturePacker

Bước 1. Khởi động phần mềm TexturePacker -> chọn libGDX

Bước 2. Tại giao diện làm việc của phần mềm -> chọn Add sprites -> chỉ định thư mục chứa danh sách hình mà chúng ta đã chuẩn bị ở Bước 1

1/ Chỉ định thư mục và tên tập tin txt tại Data file (Đây là tập tin mà chúng ta sẽ sử dụng khi xử lý animation trong libGDX)

2/ Texture format là PNG (.png)

3/ Thiết lập Max size bao gồm chiều rộng (W) và chiều cao (H) sao cho phù hợp

4/ Thiết lập Size constraints là POT (Power of 2)

Chọn Publish sprite sheet và hoàn thành xử lý ghép hình. Kết quả thu được là 2 tập tin: 1 là tập tin hình (png), 1 là tập tin txt.

Chép 2 tập tin trên vào project

Animation trong LibGDX – Viết xử lý

1/ Khai báo 3 đối tượng và 1 biến

private SpriteBatch sp;
private TextureAtlas ta;
private Animation anim;
private float elapsedTime;

2/ Tạo đối tượng trong phương thức create()

sb = new SpriteBatch();
ta = new TextureAtlas(Gdx.files.internal("text file"));
anim= new Animation(frameDuration, ta.getRegions());

Text file là tập tin txt mà chúng ta thu được ở bước chuẩn bị. FrameDuration là một con số cho biết tổng thời gian của một animation.

Ví dụ

sb = new SpriteBatch();
ta = new TextureAtlas(Gdx.files.internal("bears.txt"));
anim= new Animation(0.7f, ta.getRegions());

3/ Tại phương thức render()

sb.begin();
elapsedTime += Gdx.graphics.getDeltaTime();
sb.draw(anim.getKeyFrame(elapsedTime, true), x, y);
sb.end();

elapsedTime là thời gian chuyển sang frame khác. true cho biết animation này được lặp lại. x, y là tọa độ của đối tượng được vẽ.

Animation trong LibGDX – Xử lý sự kiện trong libGDX

Giới thiệu Sự kiện trong game trên mobile khác sự kiện trên PC. Nếu trên PC có thể có những sự kiện như nhấn phím (key press), sự kiện click chuột, … thì trên mobile sẽ có các sự kiện như tap (cham vào màn hình thiết bị). sự kiện zoom (hai ngón tay chạm, giữ và di chuyển để phóng to hoặc thu nhỏ), sự kiện pan (một ngón tạy chạm, giữ và trượt trên màn hình thiết bị). Các bước thực hiện Bước 1: Cài đặt giao diện GestureListener  và thêm xử lý sau tại phương thức create

GestureDetector gd = new GestureDetector(this);
Gdx.input.setInputProcessor(gd);

Bước 2: Cài đặt xử lý cho các phương thức (tap, longPress, pan, zoom), mỗi phương thức tương ứng với một sự kiện. Bên dưới là một phương thức dùng để xử lý sự kiện tap.

@Override
public boolean tap(float x, float y, int count, int button) {
  //Viết xử lý tại đây
  return false;
}

Animation trong LibGDX – Bài tập thực hành

Bài 1. Tạo animation cho gấu (Bear) và vẽ gấu tại vị trí góc dưới bên trái màn hình thiết bị.

Bài 2. Cho phép người dùng di chuyển gấu bằng cách chạm và rê (sự kiện pan). Lưu ý người dùng không thể di chuyển gấu ra ngoài phạm vi màn hình.

Bài 3. Gấu di chuyển từ trái qua phải. Nếu chạm biên phải, gấu di chuyển ngược lại. Và nếu chạm biên trái gấu sẽ di chuyển sang phải. Lưu ý khi di chuyển ngược lại, mặt gấu phải hướng về phía đang di chuyển.

]]>