LibGDX Tutorial 7: Sử dụng camera

Tutorial này chúng ta sẽ tìm hiểu về cách sử dụng Camera. Sử dụng camera có rất nhiều ưu điểm. Nó cung cấp cho bạn một cách đơn giản hơn để làm việc với độ phân giải của thiết bị bằng cách thay đổi tỉ lệ. Cũng đơn giản hơn để di chuyển màn hình view nhìn toàn bộ khung cảnh lớn hơn so với kích thước màn hình. Đó chính là những gì chúng ta làm với đoạn code dưới đây.

Đây là hình một hình ảnh lớn (3840 x 2160) tôi đã tải về tại đây.

Và đây là code:

package com.thinhhung.basiccamera;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.Sprite;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.input.GestureDetector;
import com.badlogic.gdx.math.Vector2;

public class BasicCamera implements ApplicationListener, GestureDetector.GestureListener {
    private OrthographicCamera camera;
    private SpriteBatch batch;
    private Texture texture;
    private Sprite sprite;

	@Override
	public void create () {
        camera = new OrthographicCamera(1280, 720);

        batch = new SpriteBatch();

        texture = new Texture(Gdx.files.internal("arches-945495.jpg"));
        texture.setFilter(Texture.TextureFilter.Linear, Texture.TextureFilter.Linear);

        sprite = new Sprite(texture);
        sprite.setOrigin(0,0);
        sprite.setPosition(-sprite.getWidth()/2,-sprite.getHeight()/2);

        Gdx.input.setInputProcessor(new GestureDetector(this));
	}

    @Override
    public void resize(int awidth, int height) {

    }

    @Override
	public void render () {
        Gdx.gl.glClearColor(1, 1, 1, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

        batch.setProjectionMatrix(camera.combined);
        batch.begin();
        sprite.draw(batch);
        batch.end();
	}

    @Override
    public void pause() {

    }

    @Override
    public void resume() {

    }

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

    @Override
    public boolean touchDown(float x, float y, int pointer, int button) {
        return false;
    }

    @Override
    public boolean tap(float x, float y, int count, int button) {
        return false;
    }

    @Override
    public boolean longPress(float x, float y) {
        return false;
    }

    @Override
    public boolean fling(float velocityX, float velocityY, int button) {
        return false;
    }

    @Override
    public boolean pan(float x, float y, float deltaX, float deltaY) {
        camera.translate(deltaX, deltaY);
        camera.update();
        return false;
    }

    @Override
    public boolean panStop(float x, float y, int pointer, int button) {
        return false;
    }

    @Override
    public boolean zoom(float initialDistance, float distance) {
        return false;
    }

    @Override
    public boolean pinch(Vector2 initialPointer1, Vector2 initialPointer2, Vector2 pointer1, Vector2 pointer2) {
        return false;
    }
}

Thêm vào đó tôi cũng thay đổi kích thước ứng dụng trong AndroidLauncher thành 1280 x 720:

package com.thinhhung.basiccamera.android;

import android.os.Bundle;

import com.badlogic.gdx.backends.android.AndroidApplication;
import com.badlogic.gdx.backends.android.AndroidApplicationConfiguration;
import com.thinhhung.basiccamera.BasicCamera;

public class AndroidLauncher extends AndroidApplication {
	@Override
	protected void onCreate (Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		AndroidApplicationConfiguration config = new AndroidApplicationConfiguration();
		initialize(new BasicCamera(), config);
	}
}

Sau khi chạy nó sẽ hiển thị như sau:

Đó là một hình ảnh phong cảnh rất lớn, bạn có thể kéo hoặc vuốt sang trái hoặc phải, kéo hoặc vuốt lên hoặc xuống để nhìn toàn bộ bức hình.

Các đoạn code trên đều rất quen thuộc, nhưng điều cần chú ý là dòng code này:

camera = new OrthographicCamera(1280, 720);

Đây là đoạn code chúng ta tạo camera. Có 2 loại camera trong LibGDX, đó là Orthographic và Perspective. Về cơ bản, Orthographic hiển thị chính xác kích thước của vật thể. Còn Perspective mô phỏng hoạt động của mắt người, bằng cách làm cho vật thể nhỏ hơn khi chúng ở xa hơn.

Chú ý: điểm xa hơn sẽ nhỏ hơn trong Perspective, đó là những gì Perspective Rendering làm giúp bạn. Tuy nhiên trong 2D Rendering, chúng ta thường sử dụng Orthographic nhiều hơn.

Giá trị được truyền vào hàm khởi tạo là kích thước của camera (chiều rộng và chiều cao). Trong trường hợp này tôi truyền vào 1280x720 pixels. Bạn cũng có thể sử dụng các đơn vị khác như là mét hoặc đơn vị khác. Điều quan trọng là tỷ lệ các ảnh phải đúng. Phần còn lại của đoạn code trong hàm create() là load ảnh và đưa nó về vị trí gốc của Game World. Cuối cùng gán điều khiển cho Input Processor: Gdx.input.setInputProcessor(new GestureDetector(this)); để có thể kéo hoặc vuốt sang trái hoặc phải, lên hoặc xuống bức ảnh.

Đoạn code khác cũng quan trọng được gọi trong hàm render():

batch.setProjectionMatrix(camera.combined);

Đây là mối liên hệ giữa LibGDX camera object với OpenGL renderer. OpenGL rendering phụ thuộc vào một số matrix để dịch đúng từ scene hoặc world tới tọa độ màn hình trong khi hiển thị. camera.combined trả về cả camera’s view và projection matrixes.

Cuối cùng trong pan handler chúng ta có đoạn code sau:

camera.translate(deltaX, deltaY);
camera.update();

Bạn có thể sử dụng traslate để di chuyển camera. Chúng ta sẽ di chuyển theo cả trục X và Y mỗi khi người dùng kéo hoặc vuốt sang trái phải hoặc lên xuống. Sau đó update nó. Nếu bạn không gọi update() thì camera sẽ không bao giờ di chuyển.

Bạn có có thể tham khảo source code của project này tại đây.