COOKBOOK - HIỂN THỊ LA BÀN

- Hiển thị la bàn -

Trong các địa hình hay bản đồ rộng lớn, việc hiển thị la bàn để định hướng cho người chơi là điều rất cần thiết. Bằng việc hiển thị hình ảnh minh họa hướng nhìn theo thời gian thực với GUI. Chúng ta có thể mô phỏng được hướng nhìn của người chơi trên bản đồ là hướng Nam hay Bắc, Đông hay Tây.

Chuẩn bị
Assets.rar

Cách để làm

B1. Tại thẻ Hierarchy, nhấp chọn nút Create | Directional Light. Qua thẻ Inspector, điều chỉnh như sau:

B2. Tiếp tục nhấp chọn nút Create | Terrain và điều chỉnh ở thẻ Inspector như sau:

B3. Vào Assets | Import Package | Character Controller và nhấp nút Import. Tại thẻ Project, kéo thả 3rd Person Controller vào thẻ Hierarchy. Qua thẻ Inspector, điều chỉnh Position thành X = 0, Y = 1, Z = 0.

B4. Chúng ta sẽ tạo ra một khối hộp để đánh dấu hướng Bắc. Tại thẻ Hierarchy, nhấp chọn nút Create | Cube và qua thẻ Inspector, điều chỉnh Position thành X = 0, Y = 1, Z = 5.

B5. Chúng ta sẽ tạo ra một khối tròn để đánh dấu hướng Tây. Tại thẻ Hierarchy, nhấp chọn nút Create | Sphere và qua thẻ Inspector, điều chỉnh Position thành X = -5, Y = 1, Z = 0.

B6. Tại thẻ Project, nhấp chọn nút Create | C# Script và đặt tên là Compass. Double click vào file C# vừa tạo và chèn đoạn code sau vào:

using UnityEngine;
using System.Collections;

public class Compass : MonoBehaviour
{
        public Transform playerController;
        public Texture compassBackground;
        public Texture playerBlip;

        private void OnGUI ()
        {
                // background displaying top left in square of 128 pixels
                Rect compassBackgroundRect = new Rect (0, 0, 128, 128);
                GUI.DrawTexture (compassBackgroundRect, compassBackground);
                GUI.DrawTexture (CalcPlayerBlipTextureRect (), playerBlip);
        }

        private Rect CalcPlayerBlipTextureRect ()
        {
                // subtract 90, so North (0 degrees) is UP
                float angleDegrees = playerController.eulerAngles.y - 90;
                float angleRadians = angleDegrees * Mathf.Deg2Rad;
   
                // calculate (x,y) position given angle
                // blip distance from center is 16 pixels
                float blipX = 16 * Mathf.Cos (angleRadians);
                float blipY = 16 * Mathf.Sin (angleRadians);
   
                // offset blip position relative to compass center (64,64)
                blipX += 64;
                blipY += 64;
   
                // stretch blip image to display in 10x10 pixel square
                return new Rect (blipX - 5, blipY - 5, 10, 10);
        }
} 

B7. Kéo thả file C# vừa tạo ở thẻ Project vào Main Camera ở thẻ Hierarchy.

B8. Giải nén file Assets.rar và kéo thả 2 file ảnh vào thẻ Project. Nhấp chuột chọn Main Camera ở thẻ Hierarchy, qua thẻ Inspector, điều chỉnh các mục ở Compass Script như sau:

B9. Nhấp nút Play để kiểm tra thành quả.

Nguyên lí làm việc

Để file script Compass làm việc cần 3 biến, biến đầu tiên là đối tượng để hiển thị hướng la bàn (3rd Person Controller - Người chơi), 2 biến còn lại là hình ảnh nền của la bàn (compass Background) và nút chỉ hướng nhìn của người chơi (Player Blip).

Hàm OnGUI( ) được gọi trên từng khung hình, trên từng khung hình, hình nền của la bàn sẽ được gọi và tiếp theo là nút chỉ hướng của người chơi. Vị trí của nút chỉ hướng sẽ được tính toán và trả về nhờ hàm CalcPlayerBlipTextureRect( ). Cả 2 hình ảnh nền của la bàn và nút chỉ hướng đều được hiển thị nhờ hàm DrawTexture( ) thuộc class GUI, với 2 biến để định vị trí (Rect) và hình dạng (Texture). Trong đó Rect(X, Y, chiều Dài, chiều Cao).

Nút định hướng được xác định dựa vào góc quay quanh trục Y. Thành phần (component) y có để được tìm thấy trong eulerAngles. Bạn có thể hình dung khi nhìn lên nhìn xuống và xem xem bạn đang nhìn vào hướng nào, chính là những gì chúng ta sẽ mô phỏng bằng hình ảnh trong la bàn. Trong toán học, góc quay bằng 0 mặc định là hướng Đông, để cho đúng chúng ta sẽ trừ góc quay đi 90*. Góc quay sẽ được chuyển từ độ thành radian nên chúng ta phải dùng hàm lượng giác của Unity. Sau đó, chúng ta phải nhân cho hàm Sin( ) hoặc Cos( ) cho khoảng cách của nút chỉ hướng đến tâm của la bàn (Trong đoạn code trên là 16 px). Kế tiếp, chúng ta cộng thêm 64 vào tọa độ hiển thị X, Y đó chính là tâm của la bàn. Cuối cùng, các giá trị của blipX và blipY chính là vị trí hiển thị của nút chỉ hướng trên màn hình. Xác định được vị trí cho tâm, chiều Dài = chiều Cao = 10 px của nút chỉ hướng, ta sẽ xác định được các biến trong hàm Rect( ) và hiển thị được nút chỉ hướng lên màn hình thông qua hàm DrawTexture( ) được gọi trong hàm OnGUI( ).