Thiết kế UI
UI trên màn hình của game - bộ đếm xu, cửa hàng, menu - được dựng dưới UI trong Hierarchy. Mỗi người chơi nhận một bản riêng khi vào game, và các ClientScript bên trong làm nó hoạt động. Trang này nói về dàn trang trong KHIM Engine; Lập trình UI nói về điều khiển nó bằng code.
Các thành phần
Canvas là một màn hình UI: mọi thứ khác nằm trong một Canvas. Bên trong Canvas:
| Đối tượng | Là gì |
|---|---|
| Panel | Một hộp - nền, khung để gom các thứ |
| ScrollPanel | Panel có nội dung cuộn được (con lăn chuột hoặc kéo) |
| Label | Chữ |
| Button | Chữ bấm được |
| TextInput | Ô để người chơi gõ |
| Image | Một hình |
| ImageButton | Hình bấm được |
| ProgressBar | Thanh đầy giữa min và max - máu, kinh nghiệm, đang tải |
| SliderInput | Thanh người chơi kéo để chọn một số |
| Toggle | Công tắc bật/tắt có nhãn |
Và các bổ trợ (modifier), đặt bên trong một đối tượng để thay đổi nó:
| Bổ trợ | Làm gì |
|---|---|
| Corner | Bo góc |
| Border | Viền quanh hộp - hoặc, với ApplyTo là Text, viền quanh chữ |
| Padding | Khoảng trống bên trong mép |
| ListLayout | Xếp các con thành hàng hoặc cột |
| GridLayout | Xếp các con thành lưới |
| Gradient | Chuyển màu từ màu này sang màu khác (và một màu giữa) |
| AspectRatio | Giữ tỉ lệ rộng/cao trên mọi màn hình |
| Scale | Vẽ to hơn hoặc nhỏ hơn |
| SizeLimit | Giữ kích thước trong khoảng min - max |
| TextSizeLimit | Giữ cỡ chữ trong khoảng min - max |
Chuột phải vào UI hoặc một đối tượng UI > Insert Object để thêm. Riêng UI có thêm New Canvas ở đầu.
Vị trí và kích thước
Mỗi đối tượng UI có Position và Size, mỗi cái gồm scale (tỉ lệ so với cha, 0 đến 1) và offset (điểm UI), cho X và Y. Và một Anchor: điểm của đối tượng mà Position đặt vào.
| Bạn muốn | Position | Size | Anchor |
|---|---|---|---|
| Góc trên trái, 200 x 50 | 0, 10, 0, 10 | 0, 200, 0, 50 | 0, 0 |
| Giữa màn hình | 0.5, 0, 0.5, 0 | 0, 300, 0, 200 | 0.5, 0.5 |
| Một thanh ngang dưới đáy | 0, 0, 1, 0 | 1, 0, 0, 60 | 0, 1 |
| Rộng nửa cha | 0.5, 0, ... |
Scale giữ bố cục đúng trên mọi màn hình; offset giữ kích thước cố định. Kết hợp cả hai.
Dàn trang trong khung nhìn
View > UI over the place vẽ UI đè lên khung nhìn 3D, như người chơi sẽ thấy:
- Bấm một đối tượng để chọn; kéo để di chuyển; kéo một trong tám tay cầm để đổi kích thước.
- Bắt dính: khi kéo, mép và tâm bắt dính vào của cha và của đối tượng bên cạnh, với đường dẫn màu hồng. Bắt vào tâm hay mép của cha thì Position được ghi bằng scale, nên nó luôn ở giữa (hoặc sát mép) trên mọi màn hình. Giữ Ctrl để kéo tự do.
- Nút Align trong Inspector: Left / Centre / Right, Top / Middle / Bottom.
- Spread children theo chiều ngang hoặc dọc: chia đều khoảng cách giữa ba con trở lên.
Kiểm tra trên mọi màn hình
Trên cùng khung nhìn có một nhãn ghi màn hình đang dàn trang: This view, hoặc một thiết bị - Phone (844 x 390), Small phone, Phone upright, Tablet, Laptop, Desktop (1920 x 1080). Chọn một cái là màn hình đó được vẽ đúng tỉ lệ, để bạn sửa bố cục cho điện thoại mà không rời trình dựng.
Điện thoại
Điểm UI không bao giờ nhỏ hơn bản thiết kế. UI làm cho màn hình lớn có thể chồng lên nhau trên điện thoại: dùng scale cho kích thước, SizeLimit để panel thôi to ra trên màn lớn, và một Scale đặt theo camera.viewportSize để thu nhỏ cả nhóm trên màn nhỏ.
Chữ
Mục Text của Label, Button hay TextInput: Text, TextColor, TextSize, TextAlign (Left, Center, Right), TextWrapped, TextScaled (to nhất vừa hộp) và Font:
- Default - mặc định của loại đó (của Button là chữ đậm),
- Bold - đậm,
- Display - kiểu chữ dày cho tiêu đề và phím bấm.
Với chữ trắng trên nền game rối mắt, thêm một Border vào Label và đặt ApplyTo là Text: một đường viền quanh chữ.
Thứ gì vẽ đè lên thứ gì
Đối tượng được vẽ theo ZIndex, nhưng không bao giờ nằm dưới thứ chứa nó: con luôn trên cha. Khi bằng nhau, anh em tạo sau đè lên anh em tạo trước. Cú bấm cũng đi tới nút trên cùng theo cách đó.
Hình ảnh
Dòng Image của một Image liệt kê hình của KHIM và hình world bạn tải lên; kéo thẻ hình từ bảng Assets thả vào, hoặc gõ asset ID. Xem Model, hình ảnh và âm thanh.
Thêm code
Chuột phải vào một Canvas hay đối tượng UI > Insert Object > ClientScript. Nó chạy một lần trên mỗi người chơi, với đối tượng đó là script.parent:
-- ClientScript bên trong một Button
script.parent.clicked:connect(function()
print("đã bấm!")
end)Tiếp theo: Lập trình UI.