Một thanh điểm số là một phần tử giao diện người dùng hiển thị thông tin người chơi quan trọng cho gameplay của trải nghiệm của bạn, chẳng hạn như thống kê tiến trình lên cấp, số lượng tiền tệ, hoặc các vật phẩm tăng cường trong kho của họ. Bằng cách hiển thị thanh điểm số trực tiếp trên màn hình của người chơi, bạn có thể giữ cho sự chú ý của họ vào những gì họ cần để thực hiện các mục tiêu khác nhau trong trải nghiệm của bạn.
Sử dụng tệp Gold Rush .rbxl làm tài liệu tham khảo, hướng dẫn này cho bạn biết cách tạo một thanh điểm số theo dõi số lượng vàng mà người chơi thu thập, bao gồm hướng dẫn về:
- Tạo một khung ở giữa đầu màn hình.
- Thêm một biểu tượng vương miện để truyền đạt thông tin thanh điểm số đang theo dõi mà không cần hướng dẫn bằng văn bản.
- Chèn văn bản điểm số ghi lại số lượng vàng người chơi thu thập.
- Kiểm tra thiết kế giao diện người dùng của bạn trên nhiều thiết bị giả lập để xem xét hình thức của nó trên các màn hình và tỷ lệ khung hình khác nhau.
Như với tất cả các tạo ra 2D, có nhiều cách để đạt được bất kỳ mục tiêu cụ thể nào. Bạn có thể tạo tài sản 2D của riêng bạn trong các công cụ giao diện người dùng của bên thứ ba và theo dõi thiết kế của mình.
Tạo khung
Để hiển thị các phần tử giao diện người dùng trên màn hình của mỗi người chơi, bạn có thể tạo một đối tượng ScreenGui trong dịch vụ StarterGui. Các đối tượng ScreenGui là các контейner chính cho giao diện người dùng trên màn hình, và dịch vụ StarterGui sao chép nội dung của nó vào mỗi container PlayerGui của người chơi khi họ vào một trải nghiệm.
Sau khi bạn tạo một đối tượng ScreenGui, bạn có thể tạo và tùy chỉnh các đối tượng con GuiObjects của nó theo mục đích của mỗi container. Để minh họa khái niệm này, phần này dạy bạn cách tạo một đối tượng ScreenGui với một đối tượng con Frame sẽ chứa cả biểu tượng và văn bản của thanh điểm số.
Ngoài việc tùy chỉnh các thuộc tính của khung, phần này cũng cung cấp hướng dẫn về việc thêm một đối tượng con UISizeConstraint và UIListLayout vào khung. Kỹ thuật này đảm bảo rằng các GuiObjects tự động sắp xếp theo chiều ngang khi bạn chèn chúng vào khung, và chúng luôn dễ đọc trên các kích thước màn hình nhỏ hơn. Nếu bạn không tuân theo hướng dẫn này, mọi GuiObject mà bạn thêm vào khung sẽ sắp xếp bên ngoài rìa của khung.
Để tái tạo khung chứa trong tệp mẫu Gold Rush:
Tạo một đối tượng ScreenGui để chứa giao diện người dùng trên màn hình của bạn.
- Trong cửa sổ Explorer, di chuột qua StarterGui và nhấn vào biểu tượng ⊕. Một menu ngữ cảnh sẽ hiển thị.
- Chèn một ScreenGui.
Tạo một container cho toàn bộ thành phần giao diện người dùng thanh điểm số.
Chèn một Frame vào đối tượng ScreenGui.
Chọn Frame mới, sau đó trong cửa sổ Properties,
- Đặt AnchorPoint thành 0.5, 0 để đặt điểm gốc của khung ở giữa phía trên của nó (50% từ trái sang phải của khung, và 0% từ trên xuống dưới của khung).
- Đặt BackgroundColor thành 0.6 để làm nền khung thành màu đen.
- Đặt BackgroundTransparency thành 0.6 để làm nền khung bán trong suốt.
- Đặt Position thành {0.5, 0},{0.01, 0} để đặt khung gần giữa phía trên của màn hình (50% từ trái sang phải của màn hình, và 1% từ trên xuống dưới của màn hình).
- Đặt Size thành {0.25, 0},{0.08, 0} để khung chiếm một phần lớn giữa màn hình để thu hút sự chú ý của người chơi (25% theo chiều ngang và 8% theo chiều dọc).
- Đặt Name thành ScoreBarFrame.
Thêm một ràng buộc vào khung để nội dung của nó luôn dễ đọc trên các kích thước màn hình nhỏ.
- Chèn một đối tượng UISizeConstraint vào ScoreBarFrame.
- Chọn ràng buộc mới, sau đó trong cửa sổ Properties, đặt MinSize thành 0, 40 để đảm bảo khung không thu nhỏ xuống dưới 40 pixel theo chiều dọc.
Thêm một đối tượng bố cục vào khung để nội dung của nó sắp xếp từ trái sang phải và căn giữa theo chiều dọc trong rìa của khung.
- Chèn một đối tượng UIListLayout vào ScoreBarFrame.
- Chọn đối tượng bố cục mới, sau đó trong cửa sổ Properties,
- Đặt FillDirection thành Horizontal.
- Đặt VerticalAlignment thành Center.
Thêm biểu tượng
Một biểu tượng là một ký hiệu đại diện cho hành động, đối tượng hoặc khái niệm trong một trải nghiệm. Sử dụng các biểu tượng đơn giản và trực quan cho phép người chơi dễ dàng nhận ra những gì bạn đang truyền đạt với giao diện người dùng của bạn mà không cần sử dụng văn bản, điều này có thể làm rối mắt màn hình và làm mất sự chú ý khỏi nội dung quan trọng.
Ví dụ, mẫu sử dụng một biểu tượng vương miện vàng đơn giản để chỉ ra số lượng vàng mà người chơi đã thu thập. Biểu tượng này dễ nhận biết như là mục tiêu quan trọng nhất trong trải nghiệm, và nó bao gồm các chi tiết tối thiểu để vẫn dễ đọc trên màn hình của các thiết bị di động.
Để tái tạo biểu tượng vương miện vàng trong tệp mẫu Gold Rush:
Chèn một đối tượng ImageLabel vào ScoreBarFrame.
Trong cửa sổ Explorer, di chuột qua ScoreBarFrame và nhấn vào biểu tượng ⊕. Một menu ngữ cảnh sẽ hiển thị.
Chèn một ImageLabel.
Chọn nhãn mới, sau đó trong cửa sổ Properties,
Đặt Image thành rbxassetid://5673786644 để làm cho biểu tượng trở thành một vương miện.
Đặt BackgroundTransparency thành 1 để làm nền của nhãn hoàn toàn trong suốt.
Đặt LayoutOrder thành 1. Điều này đảm bảo biểu tượng vẫn là GuiObject đầu tiên trong khung từ trái sang phải khi bạn chèn văn bản trong phần tiếp theo của hướng dẫn.
Đặt Size thành {1.25,0},{1,0} để mở rộng khu vực nhãn vượt ra ngoài chiều rộng của khung.
Đặt SizeConstraint thành RelativeYY để duy trì tỷ lệ khung hình của biểu tượng bằng cách điều chỉnh kích thước của nhãn theo chiều cao của khung cha.
Chèn văn bản điểm số
Văn bản điểm số ghi lại điểm số của người chơi trong một trải nghiệm, chẳng hạn như số điểm họ kiếm được trong một trận đấu. Điều quan trọng là tất cả văn bản giao diện người dùng đều rõ ràng và dễ đọc để người chơi có thể nhanh chóng hiểu thông tin họ cần để thành công trong trải nghiệm của bạn.
Ví dụ, mẫu sử dụng văn bản lớn trên nền màu tương phản để không bị hòa vào với sự ồn ào của nền. Điều này đặc biệt quan trọng cho khả năng tiếp cận vì nó đảm bảo văn bản vẫn dễ đọc khi người chơi di chuyển trong không gian 3D, có thể bao gồm các đối tượng có màu giống như văn bản.
Để tái tạo văn bản điểm số trong tệp mẫu Gold Rush:
Chèn một đối tượng TextLabel vào ScoreBarFrame.
Trong cửa sổ Explorer, di chuột qua ScoreBarFrame và nhấn vào biểu tượng ⊕. Một menu ngữ cảnh sẽ hiển thị.
Chèn một TextLabel.
Chọn nhãn mới, sau đó trong cửa sổ Properties,
Đặt BackgroundTransparency thành 1 để làm nền của nhãn hoàn toàn trong suốt.
Đặt Size thành {1,0},{1,0} để mở rộng nhãn đến toàn bộ khung (100% theo chiều ngang và 100% theo chiều dọc của khung cha). Nhãn mở rộng vượt ra ngoài ranh giới của khung vì nó bị lệch bởi biểu tượng.
Đặt SizeConstraint thành RelativeYY để đảm bảo kích thước của nhãn thay đổi tỷ lệ với chiều cao của khung cha, và duy trì tỷ lệ khung hình của biểu tượng. Bước này cũng làm cho nhãn thành hình vuông và giữ nó trong ranh giới của khung.
Đặt Font thành GothamSSm để phù hợp với thẩm mỹ của môi trường.
Đặt Text thành 0 để bắt đầu điểm số từ không.
Đặt TextColor3 thành 255, 200, 100 để làm cho văn bản có màu vàng.
Đặt TextSize thành 30 để làm cho văn bản lớn hơn trên màn hình.
Đặt TextXAlignment thành Left để đảm bảo văn bản điểm số vẫn căn trái gần biểu tượng vương miện bất kể điểm số của người chơi là 0, 1,000 hay 1,000,000.
Kiểm tra thiết kế
Trình Giả lập thiết bị của Studio cho phép bạn kiểm tra cách mà người chơi sẽ thấy và tương tác với giao diện người dùng của bạn trên các thiết bị khác nhau. Công cụ này là một phần quan trọng trong việc thiết kế giao diện người dùng vì tỷ lệ khung hình của viewport của bạn trong Studio không nhất thiết phản ánh tỷ lệ khung hình của các màn hình mà người chơi sử dụng để truy cập trải nghiệm của bạn, và điều quan trọng là giao diện người dùng của bạn phải dễ đọc và có thể tiếp cận trên mọi thiết bị.
Ví dụ, nếu bạn không kiểm tra giao diện người dùng của mình trên một loạt kích thước màn hình, người chơi với màn hình lớn có thể không đọc được văn bản của bạn hoặc hiểu biểu tượng của bạn, và người chơi với màn hình nhỏ có thể không nhìn thấy không gian 3D vì các phần tử giao diện người dùng của bạn chiếm quá nhiều không gian trên màn hình.
Để giả lập giao diện người dùng của bạn trên nhiều kích thước màn hình:
Từ menu Test của Studio, bật Device Emulator.
Trong menu thả xuống độ phân giải, chọn Actual Resolution. Điều này cho phép bạn thấy độ phân giải thực sự của các phần tử giao diện người dùng trên thiết bị mà bạn đang giả lập.
Trong menu thả xuống thiết bị, chọn ít nhất một thiết bị trong các phần Phone, Tablet, Desktop, và Console.
