Giao diện vừa mọi màn hình, kể cả máy tai thỏ
Làm sao cho giao diện vừa mọi kích thước màn hình?
Đặt Canvas Scaler thành Scale With Screen Size kèm một độ phân giải tham chiếu, rồi neo từng phần tử vào đúng góc hoặc cạnh của nó, đừng để nó neo ở giữa. Trên điện thoại có tai thỏ, co một object cha phủ toàn màn hình vào vùng Screen.safeArea để không có gì quan trọng nằm dưới phần khuyết.
Giao diện dựng trong Game view ở một độ phân giải rồi không bao giờ kiểm tra ở độ phân giải khác là giao diện sẽ hỏng trên phần lớn điện thoại. Có ba thứ xử lý chuyện này, và chúng độc lập nhau: canvas co giãn thế nào, từng phần tử neo vào đâu, và cái tai thỏ đang che mất cái gì.
Vẫn ba phần tử đó trên ba dáng màn hình. Cái nào cũng bám đúng góc đã neo, và ở máy thứ ba thì tai thỏ cắn mất một phần vùng an toàn.
1 — Canvas Scaler quyết định kích thước mọi thứ
Mặc định Canvas đặt ở Constant Pixel Size: một cái nút 40 pixel là 40 pixel trên mọi máy, nghĩa là bấm thoải mái trên laptop và bé như hạt bụi trên điện thoại 1440p. Chỉ một cái dropdown này là giải quyết xong.
- 1
Chọn Canvas, tìm component Canvas Scaler, đặt UI Scale Mode thành Scale With Screen Size.
- 2
Đặt Reference Resolution bằng kích thước bạn đang thiết kế theo. 1080 × 1920 cho game dọc trên điện thoại, 1920 × 1080 cho game ngang.
- 3
Đặt Screen Match Mode thành Match Width Or Height, rồi kéo thanh trượt về 0 cho game dọc và 1 cho game ngang.
2 — Anchor quyết định thứ gì nằm yên ở đâu
Anchor cho biết phần tử đang bám vào phần nào của vật cha. Một cái nút neo vào giữa rồi đặt lệch sang phải 400 pixel thì trên màn hình nào cũng lệch phải 400 pixel — và trên màn hẹp thì nó nằm ngoài rìa. Neo nó vào cạnh phải thì nó luôn cách cạnh phải đúng một khoảng, bất kể cạnh đó ở đâu.
Neo từng phần tử vào đúng góc hoặc cạnh mà về mặt thị giác nó thuộc về: thanh máu vào trên-trái, nút nhảy vào dưới-phải, tiêu đề vào trên-giữa.
Giữ Alt khi bấm vào một anchor preset thì phần tử nhảy luôn tới vị trí đó, thay vì chỉ đổi anchor mà vẫn đứng nguyên chỗ cũ.
Với thứ cần trải hết chiều ngang — thanh trên cùng, khung hội thoại — hãy kéo tách hai tay cầm anchor ra để nó giãn theo, thay vì đứng ở một bề rộng cố định.
3 — Vùng an toàn, trên máy có tai thỏ
Screen.safeArea là hình chữ nhật mà hệ thống đảm bảo không bị che bởi tai thỏ, lỗ camera, góc bo hay thanh cử chỉ. Unity không có công tắc sẵn cho nó: bạn tự chỉnh một RectTransform cho khớp, rồi đặt giao diện vào bên trong.
using UnityEngine;
[RequireComponent(typeof(RectTransform))]
public class SafeAreaFitter : MonoBehaviour
{
RectTransform rt;
Rect last;
void Awake()
{
rt = GetComponent<RectTransform>();
Apply();
}
// Vùng an toàn đổi khi điện thoại xoay, nên đừng làm một lần rồi thôi.
void Update()
{
if (Screen.safeArea != last) Apply();
}
void Apply()
{
last = Screen.safeArea;
// Anchor là tỉ lệ 0–1 của màn hình, nên phải chia cho kích thước màn hình.
Vector2 min = last.position;
Vector2 max = last.position + last.size;
min.x /= Screen.width; min.y /= Screen.height;
max.x /= Screen.width; max.y /= Screen.height;
rt.anchorMin = min;
rt.anchorMax = max;
rt.offsetMin = rt.offsetMax = Vector2.zero;
}
}Đặt nó lên một object con của Canvas phủ kín màn hình, rồi cho HUD làm con của object đó. Đừng bao giờ đặt lên chính Canvas — RectTransform đó thuộc quyền Canvas Scaler.
Ảnh nền thì để bên ngoài. Nền mà tôn trọng vùng an toàn sẽ chừa ra hai vệt xấu cạnh tai thỏ; chỉ những thứ bắt buộc phải nhìn thấy và bấm được mới đưa vào trong.
Trong editor, Screen.safeArea bằng cả màn hình, nên đoạn code này trông như không làm gì cho tới khi build. Cửa sổ Device Simulator là cách duy nhất thấy được nó mà không cần điện thoại thật.
Kiểm tra trước khi phát hành
- 1
Mở rồi lướt qua vài máy, nhớ chọn một máy có tai thỏ và một máy rất dài.
- 2
Trong Game view, thêm hai thái cực làm độ phân giải tuỳ chỉnh: 4:3 và 21:9. Giao diện trụ được ở cả hai thì trụ được ở mọi tỉ lệ ở giữa.
- 3
Kiểm tra cả vùng bấm chứ đừng chỉ nhìn. Thứ gì ngón tay phải chạm trúng thì cần khoảng 9 mm — cỡ 48 pixel độc lập thiết bị — dù trên màn hình máy bạn nó trông nhỏ xíu.
bài học làm ra thứ này
Điều khiển cảm ứng, joystick
Bài này là một công thức đứng riêng. Trong khoá học, cùng thứ đó được dựng như một phần của dự án xuyên suốt năm tab — Camera & Điều khiển, bài 05.