2.Tạo Background

GameCanvas mô tả cấu trúc game. Bây giờ, chúng ta sẽ thêm background vào màn hình game. Background được thêm vào là nhờ sử dụng lớp TiledLayer.

TileLayer gồm có một lưới(grid) các cell, và đây là một phần tử trực quan. Các grid của các cell có thể được fill với những tile image. Hình ảnh nguồn có thể được chia thành các bộ đều có kích thước tile với chiều rộng và chiều cao bằng nhau.

Ví dụ ta có một image đơn chia thành các tile có kích thước 16×16 lần lượt là chiều rộng với chiều cao. Xem hình 1:

Việc fill background sử dụng TiledLayer trên những tile này. Chia màn hình thành hai phần, một đại diện cho mặt trời(sky) và một đại diện cho quả đất(earth). Xem hình 2:

Trong tile, số thứ tự ứng với tile được đánh số từ 1 và từ trái sang. Có nghĩa là hình ảnh sky được đánh số 1 và hình ảnh earth được đánh số 2.

Bây giờ file ảnh được tạo ra từ những tile imagei. Định nghĩa grid để biểu diễn background. Sau khi xác định kích thước tile, số hàng và cột trong grid sẽ là:

Number of columns = screenWidth / tile size.
Number of rows = screenHeight / tile size.

Số columns=(160/16)=10 và số rows=(160/16)=10.

Lúc đó, Grid có dạng như sau:

int[] gridCells = { // array that specifies which tile image goes where
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, // sky
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, // sky
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, // sky
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, // sky
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, // sky
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, // sky
2, 2, 2, 2, 2, 2, 2, 2, 2, 2, // earth
2, 2, 2, 2, 2, 2, 2, 2, 2, 2, // earth
2, 2, 2, 2, 2, 2, 2, 2, 2, 2, // earth
2, 2, 2, 2, 2, 2, 2, 2, 2, 2, // earth
};

Contructor của TiledLayer sẽ là:

TileLayer backgroundLayer = new TiledLayer(10, 10, elementImg, tileSize, tileSize);

Như vậy, grid sẽ có 10 hàng và 10 cột, và mỗi tile sẽ có kích thước là 16×16. Dùng phương thức setCell() để fill background.

public void setCell(int col, int row, int tileIndex)

Gọi phương thức paint() để render background. Bây giờ, bạn tạo phương thức createBackgroundScreen() để tạo ra đối tượng TiledLayer:

...
public void createBackgroundScreen()
    {
        /* array that specifies which tile image goes where */
        int[] gridCells  = {          
            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, // sky
            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, // sky
            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, // sky
            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, // sky
            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, // sky
            1, 1, 1, 1, 1, 1, 1, 1, 1, 1, // sky
            2, 2, 2, 2, 2, 2, 2, 2, 2, 2, // earth
            2, 2, 2, 2, 2, 2, 2, 2, 2, 2, // earth
            2, 2, 2, 2, 2, 2, 2, 2, 2, 2, // earth
            2, 2, 2, 2, 2, 2, 2, 2, 2, 2, // earth           
        };       
       final int noRows = 10;
       final int noCols = 10;
       backgroundLayer =  new TiledLayer(noCols, noRows, elementImg,tileSize,tileSize);

        /* set the background with the images */
        for (int i = 0; i < gridCells .length; i++) {
            int column = i % 10;
            int row = (i - column)/10;           
            backgroundLayer.setCell(column, row, gridCells [i]);
        }

        /* set the location of the background */
        backgroundLayer.setPosition(0, 0);
    }
...

Tương tự như vậy, bạn tạo ra các TiledLayer va chạm:

...
final int collisionIndex = 3;
int[] collisionCells  = {
     collisionIndex,  /* fire  */
};
final int no_Collision_Rows = 1;
final int no_Collision_Cols = 1;
collisionLayer =  new TiledLayer(no_Collision_Cols, no_Collision_Rows, elementImg,tileSize,tileSize);

/* set the background with the images */
collisionLayer.setCell(0, 0, collisionCells [0]);
/*  set the location of the background */
collisionLayer.setPosition(4*tileSize, screenHeight-(5*tileSize));
 ...

Trong đó, 3 là chỉ số tile của elementImg của TiledLayer va chạm.

Để biểu diễn background, bạn thêm phương thức paint() của đối tượng TiledLayer trong phương thức renderScreen() :

...
private void renderScreen(Graphics g) {
        /*clear the background*/
        g.setColor(0xffffff);
        g.fillRect(0, 0, screenWidth, screenHeight);

        /* Rendering background*/
        backgroundLayer.paint(g);

       /*Rendering Collision Layer*/
       collisionLayer.paint(g);            

        /*draw character image*/
        /* g.drawImage(charImg,charX,charY, Graphics.TOP | Graphics.LEFT); */

        /*paint off-screen buffer to screen*/
        flushGraphics();
    }
...

Ở đây, ta cần đối tượng Layer va chạm được đặt trên earth. Theo mặt định, nó được đặt ở góc trên cùng bên trái của màn hình. Nếu muốn thay đổi vị trí, bạn sử dụng phương thức setPositon(int x, int y). Màn hình output như hình 3 dưới đây:

Các bài liên quan:
Game API – Phần 1
Game API – Phần 2
Game API – Phần cuối