Lập trình game với libGDX - Hướng dẫn sử dụng Texture Packer - TextureAtlas - AtlasRegion

Chào mừng các bạn đã quay trở lại blog :)
Bài hôm trước chúng ta đã tìm hiểu một số đối tượng về đồ họa trong libGDX gồm có: Sprite, Texture, TextureRegion, SpriteBatch.
Bài hôm nay chúng ta sẽ cùng nhau tìm hiểu về một công cụ khá hữu ích đó là Texture Packer. Bây giờ ta sẽ điểm qua một số ý chính mà hôm nay chúng ta sẽ học:

Texture Packer là gì? Cách sử dụng?
TextureAtlas là gì? Cách sử dụng?

I, Texture Packer là gì? Cách sử dụng?

1, Texture Packer là gì?

Texture Packer đơn giản là một công cụ có khả năng đóng gói các file hình ảnh đơn lẻ lại thành một file hình ảnh bao gồm các ảnh nhỏ đó. Điều đặc biệt là sau khi đóng gói các ảnh vào bức ảnh lớn thì Texture Packer sẽ ghi ra một file text chứ một số thông số quan trọng, vậy các thông số đó là gì? Một lát nữa qua phần hướng dẫn sử dụng mình sẽ nói rõ hơn. Các bạn cứ hình dung như trò chơi ghép tranh vậy đó: mỗi mảnh ghép là một bức ảnh nhỏ, bức ảnh lớn sẽ là bức tranh mà ta ghép được :D.

2, Cách sử dụng Texture Packer:

Đầu tiên để mà sử dụng thì ta cần download nó về đã, các bạn vào link sau để download về nha:
https://code.google.com/archive/p/libgdx-texturepacker-gui/downloads
Các bạn cứ quất bản cao nhất về mà xài, bản 3.2.0 đấy.

Rồi, sau khi down về các bạn giải nén nó ra, sẽ được kết quả như sau:

Một file jar để chạy chương trình và một thư mục demo.
Các bạn chạy file jar đó lên để chạy chương trình:
Giao diện chương trình:

Các bạn nhấn New pack để tao mới.

Nhập tên rồi bấm Ok.

Làm theo hướng dẫn là xong, nói chung giao diện rất dễ sủ dụng :)), mình không cần hướng dẫn nhiều.

Chúng ta sẽ sử dụng thư mục demo này cho ví dụ luôn nha.
Bây giờ các bạn mở thư mục đó lên xem nó có gì trong đó.

Trong này có 2 thư mục là input và output.
Trong thư mục input sẽ chứa các ảnh ảnh mà ta cần đóng gói:

Trong thư mục output sẽ chứa bức ảnh đóng gói các bức ảnh nhỏ, cùng với một file có đuôi .pack (thực ra đuôi này bạn đôi thành .txt hay .abc cũng được, không quan trọng tên đuôi).

Bây giờ ta sẽ cùng nhau xem trong file test-me!.pack kia nó có cái gì trong đó nha:

Các thuộc tính quan trọng mình đã chú thích trong ảnh. Vậy file .pack này có ý nghĩa gì?
Câu trả lời sẽ có khi bạn đọc phần tiếp theo :)).

II, TextureAtlas là gì? Cách sử dụng?

1, TextureAtlas là gì?

Ở phần trên chúng ta đã tìm hiểu Texture Packer, thì output của Texture Packer sẽ là một file ảnh và một file văn bản chứa các thuộc tính của các bức ảnh nhỏ.
Đối tượng Texture Atlas sẽ có chức năng đọc dữ liệu từ file văn bản (ở đây là file .pack đó) rồi load các bức ảnh nhỏ dựa vào dữ liệu đọc được từ tấm ảnh lớn.

2, Cách sử dụng đối tượng TextureAtlas:

Giờ ta tạo mới một project để test thử nha, hoặc nếu lười thì các bạn lấy lại project hôm trước làm luôn cũng được.
Đầu tiên thì các bạn cần copy 2 file output gồm test-me!.pack và test-me!.png vào thư mục assets trong project android đã, sau đó ta sẽ có code như sau:

package com.gameiter.hoclibgdx;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.Sprite;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.graphics.g2d.TextureAtlas;
import com.badlogic.gdx.graphics.g2d.TextureAtlas.AtlasRegion;
import com.badlogic.gdx.graphics.g2d.TextureRegion;

public class LearningliGDXb extends ApplicationAdapter {
 private TextureAtlas atlas;
 private SpriteBatch batch;
 private AtlasRegion region;
 @Override
 public void create() {
  batch = new SpriteBatch();
  atlas = new TextureAtlas("test-me!.pack");
  region = atlas.findRegion("test01");
 }
 @Override
 public void render() {
  Gdx.gl.glClearColor(0, 0, 0, 1);
  Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
  batch.begin();
  batch.draw(region, 100, 100);
  batch.end();
 }
}

Các bạn có thấy "quen" không? :))
Đối tượng TextureAtlas khá giống đối tượng Texture và đối tượng AtlasRegion lại giống đối tượng TextureRegion đúng không :)), do đó code trên khá dễ hiểu.
Đầu tiều đối tượng TextureAtlas sẽ load dữ liệu từ file test-me!.pack, trong file này có chứa tên của bức ảnh lớn. Sau đó đối tượng AtlasRegion sẽ load ảnh từ đối tượng TextureAtlas dựa theo tên file (Các tên file cũng được ghi trong file .pack - cái này hồi nãy chúng ta đã tìm hiểu rồi).
Phương thức render() đơn giản là vẽ lên màn hình đối tượng AtlasRegion :)
Kế quả thu được:

Các bạn kiểm tra lại file ảnh test01.png trong thư mục input hồi nãy có đúng ảnh này không nha, tương tự để load các tấm ảnh kia thì ta sẽ thay tên file tương ứng là xong :).

Bài hôm nay đến đây thôi, bài hôm sau ta sẽ tìm hiểu về Animation, cám ơn các bạn đã quan tâm theo dõi, hẹn gặp lại trong các bài viết sau :D