Thực hiện thiết kế trong Studio | Tài liệu - Trung Tâm Nhà Sáng Tạo Roblox

Thực hiện thiết kế của bạn là quá trình tạo ra các wireframe trong Studio bằng cách sử dụng cả các phần tử UI tích hợp sẵn và tùy chỉnh với các script kích hoạt UI của bạn theo ngữ cảnh. Bước thú vị này của hướng dẫn là nơi bạn có thể thấy tất cả các thiết kế và công sức của bạn kết hợp thành một bộ quy trình làm việc thống nhất hoàn chỉnh và sẵn sàng cho sự tương tác của người chơi.

Sử dụng trò chơi laser tag mẫu tệp .rbxl làm tài liệu tham khảo, phần này của chương trình giảng dạy thiết kế giao diện người dùng cho bạn biết cách biến kế hoạch UI của bạn thành hiện thực, bao gồm hướng dẫn về:

Lấy ID tài sản từ thư viện tài sản UI để bạn có thể tái tạo các thành phần UI của trò chơi laser tag mẫu.
Mô phỏng các thiết bị khác nhau trực tiếp trong Studio để xem cách UI của bạn hiển thị trên các màn hình và tỷ lệ khung hình khác nhau.
Tạo các đối tượng ScreenGui, SurfaceGui, và BillboardGui để hiển thị UI của bạn trên màn hình của người chơi, bề mặt của các phần, và trong không gian 3D, tương ứng.

Sau khi bạn xem xét các kỹ thuật trong phần này, bạn có thể áp dụng chúng vào các dự án của riêng mình để tạo ra các thành phần UI thú vị giúp người chơi điều hướng những gì họ có thể làm trong trò chơi của bạn.

Các hướng dẫn trong phần này của hướng dẫn cho bạn biết cách tái tạo chính xác các thành phần UI bằng cách sử dụng Thư viện Tài sản Thiết kế UI. Quá trình này mất khoảng 90 phút hoặc ít hơn từ đầu đến cuối. Nếu bạn không muốn sử dụng các giá trị được cung cấp, bạn có thể điều chỉnh từng phần tử UI để đáp ứng các thông số kỹ thuật của trò chơi của riêng bạn, hoặc sử dụng mẫu đó cho phần còn lại của hướng dẫn.

Lấy thư viện tài sản

Thư viện tài sản là các bộ sưu tập tài sản mà bạn có thể thêm vào kho của mình để dễ dàng truy cập và tái sử dụng. Thư viện tài sản mà bạn sẽ sử dụng cho dự án của mình từ Cửa hàng Creator bao gồm chín tài sản phần tử UI 2D riêng lẻ, và các phiên bản cuối cùng của các thành phần mục tiêu, bộ chọn blaster, và thông tin người chơi mà bạn đang tạo trong phần này của hướng dẫn.

**Biểu tượng MultiBlaster**
rbxassetid://14309094777

**Biểu tượng SingleBlaster**
rbxassetid://14309094641

**Biểu tượng Đội Hồng**
rbxassetid://14309678581

**Hình thang ngược**
rbxassetid://14304827304

**Biểu tượng Đội Xanh**
rbxassetid://14309678701

**Nhòa đa hướng**
rbxassetid://14304827147

**Biểu tượng Nút Bắn - Mặc định**
rbxassetid://18308375067

**Biểu tượng Nút Bắn - Đã nhấn**
rbxassetid://18308372597

**Biểu tượng Nhắm**
rbxassetid://14400935532

Biểu tượng Đánh dấu trúng
rbxassetid://14401148777

**Hình lục giác**
rbxassetid://14462567943

**Biểu tượng Mũi tên Chọn**
rbxassetid://14309187282

Để lấy thư viện tài sản từ kho của bạn vào trò chơi:

Thêm thư viện tài sản vào kho của bạn.
1. Điều hướng đến trang chi tiết của thư viện tài sản trên Cửa hàng Creator.
2. Ở góc trên bên phải, nhấp vào nút Lấy Mô hình. Thư viện tài sản giờ đã có trong kho của bạn, và bạn có thể tái sử dụng các tài sản này trong bất kỳ dự án nào trên nền tảng.
Trong Studio, điều hướng đến tab Trang chủ, sau đó nhấp vào nút Toolbox. Cửa sổ Toolbox mở ra.
Trong cửa sổ Toolbox, nhấp vào tab Kho. Phân loại Mô hình của tôi hiển thị.
Nhấp vào menu thả xuống, sau đó chọn phân loại Gói của tôi.
Nhấp vào ô Các thành phần UI Màn hình Cuối , sau đó trong cửa sổ Explorer, chọn Các thành phần Hoàn thành, sau đó kéo chúng vào dịch vụ StarterGui. Bạn giờ có thể kích hoạt bất kỳ thành phần cuối nào để tham chiếu thiết kế của chúng.

Mô phỏng thiết bị

Trình Mô phỏng Thiết bị của Studio cho phép bạn kiểm tra cách người chơi sẽ thấy và tương tác với UI 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 của quá trình thực hiện 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ò chơi của bạn, và điều quan trọng là UI của bạn phải dễ đọc và dễ tiếp cận trên mọi thiết bị.

Ví dụ, nếu bạn không kiểm tra UI của mình trên nhiều kích thước màn hình, người chơi có màn hình lớn có thể không đọc được văn bản của bạn hoặc giải mã các biểu tượng của bạn, và người chơi có màn hình nhỏ có thể không thấy không gian 3D vì các phần tử UI của bạn chiếm quá nhiều không gian trên màn hình.

Để mô phỏng UI của bạn trên các kích thước màn hình khác nhau:

Từ menu Kiểm tra của Studio, bật Mô phỏng Thiết bị.
Trong menu thả xuống độ phân giải, chọn Độ phân giải Thực tế. Đ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ử UI của bạn trên thiết bị mà bạn đang mô phỏng.
Trong menu thả xuống thiết bị, chọn ít nhất một thiết bị trong các phần Điện thoại, Máy tính bảng, Máy tính để bàn, và Console.

Tạo các đối tượng ScreenGui

Để hiển thị các phần tử UI 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 bộ chứa chính cho UI trên màn hình, và dịch vụ StarterGui sao chép nội dung của nó vào mỗi bộ chứa PlayerGui của người chơi khi họ vào trò chơi.

Bạn có thể tạo nhiều đối tượng ScreenGui để tổ chức và hiển thị các nhóm phần tử UI theo ngữ cảnh trong suốt quá trình chơi. Ví dụ, trò chơi laser tag mẫu bao gồm năm đối tượng ScreenGui riêng biệt mà ban đầu bị vô hiệu hóa cho đến khi người chơi đáp ứng các điều kiện khác nhau trong luồng người dùng chính của trò chơi:

HUDGui - Hiển thị thông tin chính về gameplay khi người chơi đang hoạt động trong một vòng, chẳng hạn như mục tiêu và tổng điểm của mỗi đội.
PickABlasterGui - Hiển thị tất cả các lựa chọn blaster khi người chơi bắt đầu hoặc tham gia lại một vòng.
ForceFieldGui - Hiển thị một lưới hình lục giác khi người chơi đang chọn một blaster và trong khi họ tạm thời không thể bị đánh bại.
OutStateGui - Hiển thị một viền tối xung quanh màn hình khi người chơi bị loại.
RoundResultsGui - Hiển thị một lớp tối trên màn hình với thông tin về đội nào đã thắng vòng.

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 từng bộ chứa. Để minh họa, trong các phần ngay sau đây, bạn sẽ học cách thực hiện các phần tử UI cho ba loại thông tin mà người chơi cần biết để thành công trong trò chơi laser tag mẫu. Bạn có thể điều chỉnh bất kỳ phần nào của quá trình để đáp ứng các thông số kỹ thuật của trò chơi của riêng bạn.

Để tạo một đối tượng ScreenGui:

Trong cửa sổ Explorer, di chuột qua dịch vụ StarterGui, sau đó nhấp vào biểu tượng ⊕. Một menu ngữ cảnh hiển thị.
Chèn một ScreenGui.
Đổi tên ScreenGui theo ngữ cảnh của các phần tử UI con của nó.
Lặp lại quy trình này cho mỗi nhóm phần tử UI mà bạn cần hiển thị trên màn hình của mỗi người chơi.

UI Mục tiêu

Theo các thực hành tốt nhất về thứ bậc hình ảnh từ Wireframe Your Layouts, phần này dạy bạn cách thực hiện tất cả các phần tử UI trên màn hình liên quan đến mục tiêu của trò chơi. Nhóm các phần tử UI này gần đầu màn hình vì mục tiêu và điểm của mỗi đội có ý nghĩa lớn nhất trong việc thắng trò chơi.

Ví dụ, mẫu cung cấp một thành phần UI mục tiêu mà người chơi tham khảo để biết những gì họ cần làm để thành công trong một vòng. Khi người chơi đánh dấu các thành viên đội đối thủ và kiếm điểm, thành phần này theo dõi điểm số của mỗi đội so với mục tiêu tổng thể trong lời nhắc của tiêu đề. Để xem xét tổng quan về tất cả các script client và server hoạt động cùng nhau để theo dõi điểm số, hãy xem Theo dõi điểm số trong Chương trình Giảng dạy Lập trình Gameplay.

Để tái tạo chính xác UI mục tiêu trong trò chơi mẫu Laser Tag:

Tạo một bộ chứa cho toàn bộ thành phần.
1. Chèn một Frame vào đối tượng HUDGui ScreenGui.
  1. Trong cửa sổ Explorer, điều hướng đến dịch vụ StarterGui.
  2. Di chuột qua đối tượng con HUDGui của nó, sau đó nhấp vào biểu tượng ⊕. Một menu ngữ cảnh hiển thị.
  3. Từ menu ngữ cảnh, chèn một Frame.
2. Chọn Frame mới, sau đó trong cửa sổ Properties,
  1. Đặt AnchorPoint thành 0.5, 0 để đặt điểm gốc của khung ở giữ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).
  2. Đặt BackgroundTransparency thành 1 để làm cho nền của khung hoàn toàn trong suốt.
  3. Đặt Position thành {0.5, 0},{0.03, 0} để đặt khung gần giữa trên của màn hình (50% từ trái sang phải của màn hình, và 3% từ trên xuống dưới của màn hình để có một chút khoảng đệm).
  4. Đặt Size thành {0.5, 0},{0.13, 0} để các phần tử của khung chiếm một phần lớn ở trên cùng của màn hình để thu hút sự chú ý của người chơi (50% theo chiều ngang, và 13% theo chiều dọc).
  5. Đặt Name thành Objective.
3. TÙY CHỌN
  Chèn một UIAspectRatioConstraint vào Objective để đảm bảo tỷ lệ khung hình của nhãn vẫn giữ nguyên bất kể kích thước màn hình của người chơi. Mẫu đặt thuộc tính UIAspectRatioConstraint.AspectRatio của nó thành 7.
Tạo một bộ chứa cho các đối tượng nhắc mục tiêu.
1. Chèn một Frame vào Objective.
2. Chọn Frame mới, sau đó trong cửa sổ Properties,
  1. Đặt AnchorPoint thành 0.5, 0 để đặt điểm gốc của khung ở giữ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).
  2. Đặt BackgroundTransparency thành 1 để làm cho nền của khung hoàn toàn trong suốt.
  3. Đặt Position thành {0.5, 0},{0, 0} để đặt khung ở giữa bộ chứa (50% từ trái sang phải của khung cha, và 0% từ trên xuống dưới của khung cha).
  4. Đặt Size thành {1, 0},{0.67, 0} để các thành phần UI lựa chọn chiếm khoảng hơn một nửa bộ chứa từ trên xuống dưới (100% theo chiều ngang và 67% theo chiều dọc của khung cha).
  5. Đặt Name thành ObjectiveDisplay.
Tạo các phần tử tiêu đề.
1. Chèn một ImageLabel vào ObjectiveDisplay.
2. Chọn ImageLabel, sau đó trong cửa sổ Properties,
  1. Đặt AnchorPoint thành 0.5, 1 để đặt điểm gốc của nhãn ở giữa dưới của nó (50% từ trái sang phải của nhãn, và 100% từ trên xuống dưới của nhãn).
  2. Đặt BackgroundTransparency thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
  3. Đặt LayoutOrder thành -1.
  4. Đặt Position thành {0.5, 0},{0.34, 0} để đặt nhãn gần giữa trên của khung (50% từ trái sang phải của khung cha, và 34% từ trên xuống dưới của khung cha).
  5. Đặt Size thành {0.46, 0},{0.34, 0} để mở rộng khu vực nhắc lên gần như một nửa khung (46% theo chiều ngang và 34% theo chiều dọc của khung cha).
  6. Đặt Name thành Header.
  7. Đặt Image thành rbxassetid://14304828123 để hiển thị một hình thang.
  8. Đặt ImageTransparency thành 0.15 để làm cho tiêu đề bán trong suốt.
3. TÙY CHỌN
  Chèn một UIAspectRatioConstraint vào ImageLabel để đảm bảo tỷ lệ khung hình của nhãn vẫn giữ nguyên bất kể kích thước màn hình của người chơi. Mẫu đặt thuộc tính UIAspectRatioConstraint.AspectRatio của nó thành 13.781.
4. Chèn một TextLabel vào Header để hiển thị một tiêu đề.
5. Chọn nhãn mới, sau đó trong cửa sổ Properties,
  1. Đặt AnchorPoint thành 0.5, 0.5 để đặt điểm gốc của nhãn mới ở giữa của nó (50% từ trái sang phải của nhãn, và 50% từ trên xuống dưới của nhãn).
  2. Đặt BackgroundTransparency thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
  3. Đặt Position thành {0.5, 0},{0.5, 0} để di chuyển nhãn đến giữa nhãn cha của nó (50% từ trái sang phải của nhãn cha, và 50% từ trên xuống dưới của nhãn cha).
  4. Đặt Size thành {0.62, 0},{0.55, 0} để mở rộng không gian văn bản lên hơn một nửa nhãn cha (62% theo chiều ngang và 55% theo chiều dọc của nhãn cha).
  5. Đặt Name thành HeaderTextLabel.
  6. Đặt FontFace thành Montserrat để phù hợp với thẩm mỹ tương lai.
  7. Đặt Weight thành Medium để làm dày phông chữ.
  8. Đặt Text thành MỤC TIÊU.
  9. Kích hoạt TextScaled.
Tạo các phần tử nhắc.
1. Chèn một ImageLabel vào ObjectiveDisplay.
2. Chọn ImageLabel, sau đó trong cửa sổ Properties,
  1. Đặt AnchorPoint thành 0.5, 1 để đặt điểm gốc của nhãn ở giữa dưới của nó (50% từ trái sang phải của nhãn, và 100% từ trên xuống dưới của nhãn).
  2. Đặt BackgroundTransparency thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
  3. Đặt Position thành {0.5, 0},{1, 0} để di chuyển nhãn đến giữa dưới của khung cha (50% từ trái sang phải của khung cha, và 100% từ trên xuống dưới của khung cha).
  4. Đặt Size thành {0.89, 0},{0.66, 0} để mở rộng không gian văn bản lên gần như toàn bộ chiều rộng của khung cha (89% theo chiều ngang và 66% theo chiều dọc của khung cha).
  5. Đặt Name thành Body.
  6. Đặt Image thành rbxassetid://14304827265 để hiển thị một hình thang ngược.
  7. Đặt ImageColor3 thành 0, 0, 0 để nhuộm hình ảnh màu đen.
  8. Đặt ImageTransparency thành 0.3 để làm cho tiêu đề bán trong suốt.
3. TÙY CHỌN
  Chèn một UIAspectRatioConstraint vào ImageLabel để đảm bảo tỷ lệ khung hình của nhãn vẫn giữ nguyên bất kể kích thước màn hình của người chơi. Mẫu đặt thuộc tính UIAspectRatioConstraint.AspectRatio của nó thành 13.781.
4. Chèn một TextLabel vào Body để hiển thị một nhắc.
5. Chọn nhãn mới, sau đó trong cửa sổ Properties,
  1. Đặt AnchorPoint thành 0.5, 0.5 để đặt điểm gốc của nhãn mới ở giữa của nó (50% từ trái sang phải của nhãn, và 50% từ trên xuống dưới của nhãn).
  2. Đặt BackgroundTransparency thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
  3. Đặt Position thành {0.5, 0},{0.5, 0} để di chuyển nhãn đến giữa nhãn cha của nó (50% từ trái sang phải của nhãn cha, và 50% từ trên xuống dưới của nhãn cha).
  4. Đặt Size thành {0.85, 0},{0.39, 0} để mở rộng không gian văn bản lên hơn một nửa nhãn cha (85% theo chiều ngang và 39% theo chiều dọc của nhãn cha).
  5. Đặt Name thành BodyTextLabel.
  6. Đặt FontFace thành Montserrat để phù hợp với thẩm mỹ tương lai.
  7. Đặt Weight thành Medium để làm dày phông chữ.
  8. Đặt TextColor3 thành 255, 255, 255 để làm cho văn bản màu trắng trên nền tối.
  9. Đặt Text thành Đánh dấu các đối thủ để ghi điểm! Đội đầu tiên đạt %d điểm sẽ thắng..
  10. Kích hoạt TextScaled.
Tạo một bộ chứa cho các bộ đếm đội mục tiêu.
1. Chèn một Frame vào Objective.
2. Chọn Frame mới, sau đó trong cửa sổ Properties,
  1. Đặt AnchorPoint thành 0.5, 1 để đặt điểm gốc của nhãn ở giữa dưới của nó (50% từ trái sang phải của khung, và 100% từ trên xuống dưới của khung).
  2. Đặt BackgroundTransparency thành 1 để làm cho nền của khung hoàn toàn trong suốt.
  3. Đặt Position thành {0.5, 0},{1, 0} để đặt khung ở giữa dưới của bộ chứa (50% từ trái sang phải của khung cha, và 100% từ trên xuống dưới của khung cha).
  4. Đặt Size thành {0.44, 0},{0.27, 0} để các thành phần UI lựa chọn chiếm khoảng ít hơn một nửa bộ chứa từ trái sang phải (44% theo chiều ngang và 27% theo chiều dọc của khung cha).
  5. Đặt Name thành TeamPointCounter.
Tạo khoảng đệm cho các bộ đếm đội.
1. Chèn một đối tượng UIListLayout vào khung từ bước 5.
2. Chọn đối tượng UIListLayout, sau đó trong cửa sổ Properties,
  1. Đặt Padding thành 0.025, 0 để cung cấp không gian giữa các bộ đếm đội trong tương lai.
  2. Đặt FillDirection thành Horizontal để mỗi bộ đếm đội hiển thị cạnh nhau.
  3. Đặt HorizontalAlignment thành Center để mỗi bộ đếm đội căn giữa với nhau.
Tạo các phần tử bộ đếm đội xanh.
1. Chèn một ImageLabel vào TeamPointCounter.
2. Chọn ImageLabel, sau đó trong cửa sổ Properties,
  1. Đặt BackgroundTransparency thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
  2. Đặt Position thành {0.5, 0},{1, 0} để di chuyển nhãn đến giữa dưới của khung cha (50% từ trái sang phải của khung cha, và 100% từ trên xuống dưới của khung cha).
  3. Đặt Size thành {0.5, 0},{1, 0} để mở rộng nhãn đến một nửa chiều rộng của khung cha (50% theo chiều ngang và 100% theo chiều dọc của khung cha).
  4. Đặt Name thành TeamACounter.
  5. Đặt Image thành rbxassetid://14304826831 để hiển thị một hình nhòa hướng.
  6. Đặt ImageColor3 thành 88, 218, 171 để nhuộm hình ảnh màu xanh bạc hà.
3. Cấu hình một thuộc tính tùy chỉnh để theo dõi rằng nhãn này dành cho đội xanh.
  1. Trong cửa sổ Properties, điều hướng đến phần Attributes, sau đó nhấp vào biểu tượng cộng. Một hộp thoại bật lên hiển thị.
  2. Trong trường Name, nhập teamColor.
  3. Trong menu thả xuống Type, chọn BrickColor.
  4. Nhấp vào nút Lưu.
  5. Đặt thuộc tính teamColor mới thành Mint.
4. Chèn một TextLabel vào TeamACounter để hiển thị một nhắc.
5. Chọn nhãn mới, sau đó trong cửa sổ Properties,
  1. Đặt AnchorPoint thành 1, 0.5 để đặt điểm gốc của nhãn mới ở giữa bên phải của nó (100% từ trái sang phải của nhãn, và 50% từ trên xuống dưới của nhãn).
  2. Đặt BackgroundTransparency thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
  3. Đặt Position thành {0.95, 0},{0.5, 0} để di chuyển nhãn đến bên phải của nhãn cha của nó (95% từ trái sang phải của nhãn cha, và 50% từ trên xuống dưới của nhãn cha).
  4. Đặt Size thành {0.85, 0},{0.39, 0} để mở rộng không gian văn bản lên hơn một nửa nhãn cha (85% theo chiều ngang và 39% theo chiều dọc của nhãn cha).
  5. Đặt FontFace thành Montserrat để phù hợp với thẩm mỹ tương lai.
  6. Đặt Weight thành Bold để làm dày phông chữ.
  7. Đặt TextColor3 thành 255, 255, 255 để làm cho văn bản màu trắng trên nền tối.
  8. Đặt Text thành -.
  9. Kích hoạt TextScaled.
  10. Đặt TextXAlignment thành Right.
6. Chèn một đối tượng UIStroke vào TextLabel, sau đó trong cửa sổ Properties, đặt Color thành 8, 78, 52 để viền dấu gạch ngang bằng một đường viền màu xanh lá cây đậm.
Tạo các phần tử bộ đếm đội hồng.
1. Nhân bản TeamAICounter và các con của nó.
2. Chọn bản sao TeamACounter, sau đó trong cửa sổ Properties,
  1. Đặt Name thành TeamBCounter.
  2. Đặt Image thành rbxassetid://14305849451 để hiển thị một hình nhòa hướng ngược lại.
  3. Đặt ImageColor3 thành 255, 170, 255 để nhuộm hình ảnh màu hồng cẩm chướng.
  4. Đặt thuộc tính teamColor thành Carnation Pink.
3. Chọn nhãn TextLabel bản sao của TeamBCounter, sau đó trong cửa sổ Properties,
  1. Đặt AnchorPoint thành 0, 0.5 để đặt điểm gốc của nhãn mới ở giữa bên trái của nó (0% từ trái sang phải của nhãn, và 50% từ trên xuống dưới của nhãn).
  2. Đặt Position thành {0.05, 0},{0.5, 0} để di chuyển nhãn đến bên trái của nhãn cha của nó (5% từ trái sang phải của nhãn cha, và 50% từ trên xuống dưới của nhãn cha).
  3. Đặt TextXAlignment thành Left.
4. Chọn bản sao UIStroke của TeamBCounter, sau đó trong cửa sổ Properties, đặt Color thành 158, 18, 94 để viền dấu gạch ngang bằng một đường viền màu hồng đậm.
Tham khảo các script ReplicatedStorage sau trong tệp mẫu Laser Tag mà cập nhật chương trình mục tiêu và theo dõi điểm của đội một cách lập trình.

Script sau yêu cầu một tập hợp các script module hoạt động cùng nhau để thiết lập Hiển thị Đầu (HUD) chính, bao gồm setObjective và startSyncingTeamPoints. Sau khi một người chơi tham gia một vòng và chọn blaster của họ, script này đảm bảo tất cả các phần tử UI HUD hiển thị đúng cách cho trạng thái, thiết bị và tình trạng đội của người chơi.

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

Bây giờ, sau khi một người chơi chọn blaster của họ, UI mục tiêu hiển thị ở trên cùng màn hình của họ và theo dõi điểm của mỗi đội.

UI Blaster

Theo các thực hành tốt nhất về thứ bậc hình ảnh từ Wireframe Your Layouts, phần này dạy bạn cách thực hiện tất cả các phần tử UI trên màn hình liên quan đến blaster của người chơi. Nhóm các phần tử UI này chiếm phần lớn không gian màn hình gần giữa màn hình vì nó đóng vai trò là điểm nhấn để thu hút sự chú ý của người chơi vào hành động trong không gian 3D, và nó có ý nghĩa lớn nhất cho việc chơi trò chơi.

Nhắm

Một nhắm là một phần tử UI cho biết cho người chơi nơi họ sẽ tạo ra tác động khi họ bắn vũ khí của mình. Phần tử UI này là một yêu cầu gameplay quan trọng cho các trò chơi bắn súng góc nhìn thứ nhất vì người chơi cần có khả năng nhắm chính xác blaster của họ và đánh dấu các thành viên đội đối thủ.

Giống như hầu hết các trò chơi khác trong thể loại bắn súng góc nhìn thứ nhất, trò chơi laser tag mẫu đặt nhắm ở giữa màn hình để người chơi có một điểm tĩnh để tập trung trong khi avatar của họ di chuyển qua không gian 3D. Ngoài việc giảm chứng say tàu xe, vị trí này cho phép nhắm có thể nhận thấy trong khi cũng hòa vào môi trường tổng thể.

Để tái tạo chính xác nhắm trong trò chơi mẫu Laser Tag:

Chèn một ImageLabel vào đối tượng HUDGui ScreenGui.
1. Trong cửa sổ Explorer, điều hướng đến dịch vụ StarterGui.
2. Di chuột qua đối tượng con HUDGui của nó, sau đó nhấp vào biểu tượng ⊕. Một menu ngữ cảnh hiển thị.
3. Từ menu ngữ cảnh, chèn một ImageLabel.
Chọn ImageLabel mới, sau đó trong cửa sổ Properties,
1. Đặt Image thành rbxassetid://14400935446.
2. Đặt AnchorPoint thành 0.5, 0.5 để đặt điểm gốc của nhãn ở giữa của nhãn (50% từ trái sang phải của nhãn, và 50% từ trên xuống dưới của nhãn).
3. Đặt BackgroundTransparency thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
4. Đặt Name thành Crosshair.
5. Đặt Position thành {0.5,0},{0.5,0} để đặt nhãn ở giữa màn hình.
6. Đặt ScaleType thành Fit để hình ảnh vừa vặn trong bộ chứa của nó và không bị kéo dài trên các kích thước màn hình khác nhau.
TÙY CHỌN
Chèn một UIAspectRatioConstraint vào Crosshair để đảm bảo tỷ lệ khung hình của nhãn vẫn giữ nguyên bất kể kích thước màn hình của người chơi. Mẫu đặt thuộc tính UIAspectRatioConstraint.AspectRatio của nó thành 0.895.

Đánh dấu trúng

Một đánh dấu trúng là một phần tử UI chỉ hiển thị khi một phát bắn tạo ra tác động với một người chơi khác trong đội đối thủ. Giống như nhắm, phần tử UI này là một yêu cầu gameplay quan trọng cho các trò chơi bắn súng góc nhìn thứ nhất vì nó cung cấp phản hồi hình ảnh khi người chơi thành công trong việc đánh dấu đối thủ của họ.

Để tái tạo chính xác đánh dấu trúng trong trò chơi mẫu Laser Tag:

Chèn một ImageLabel vào đối tượng Crosshair ImageLabel.
1. Trong cửa sổ Explorer, điều hướng đến dịch vụ StarterGui.
2. Di chuột qua đối tượng con Crosshair của nó, sau đó nhấp vào biểu tượng ⊕. Một menu ngữ cảnh hiển thị.
3. Từ menu ngữ cảnh, chèn một ImageLabel.
Chọn ImageLabel mới, sau đó trong cửa sổ Properties,
1. Đặt Image thành rbxassetid://14401148736 để hiển thị biểu tượng đánh dấu trúng hình chữ nhật.
2. Đặt AnchorPoint thành 0.5, 0.5 để đặt điểm gốc của nhãn ở giữa của nhãn.
3. Đặt BackgroundTransparency thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
4. Đặt Position thành {0.5,0},{0.5,0} để đặt nhãn ở giữa màn hình.
5. Đặt Name thành Hitmarker.
6. Đặt Size thành {0.6, 0},{0.06, 0} để giảm kích thước của các hình chữ nhật xung quanh giữa nhắm.
7. Đặt ImageTransparency thành 1 để làm cho đánh dấu trúng hoàn toàn trong suốt. Các script trong bước tiếp theo sẽ làm cho độ trong suốt trở lại 0 mỗi khi phát bắn của người chơi tạo ra tác động với một người chơi khác trong đội đối thủ.
Tham khảo các script ReplicatedStorage sau trong tệp mẫu Laser Tag mà hiển thị đánh dấu trúng khi một phát bắn tạo ra tác động với một người chơi trong đội đối thủ.

Script sau yêu cầu một tập hợp các script module hoạt động cùng nhau để thiết lập Hiển thị Đầu (HUD) chính, bao gồm setupHitmarker. Sau khi một người chơi tham gia một vòng và chọn blaster của họ, script này đảm bảo tất cả các phần tử UI HUD hiển thị đúng cách cho trạng thái, thiết bị và tình trạng đội của người chơi.

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

Bây giờ, bất cứ khi nào một người chơi bắn blaster của họ và phát bắn tạo ra tác động với một người chơi khác, đánh dấu trúng sẽ hiển thị trong một thời gian ngắn.

Bộ chọn blaster

Bộ chọn blaster là một thành phần UI mà người chơi sử dụng để chọn loại blaster của họ trước khi tham gia hoặc tham gia lại một vòng. Trò chơi laser tag mẫu cung cấp hai loại blaster: một loại tạo ra nhiều tia với độ lan tỏa ngang rộng, và một loại tạo ra một tia đơn. Loại blaster mà người chơi chọn ảnh hưởng đến chiến lược của họ trong vòng, làm cho thành phần UI này trở thành một quy trình làm việc thiết yếu cho toàn bộ trò chơi.

Các bước sau đây chi tiết cách tạo nhiều bộ chứa cho các nhóm phần tử UI khác nhau, một tiêu đề với một nhắc, các nút điều hướng và chọn, và một prefab nút blaster. Logic lập trình cho thành phần tổng thể sẽ đưa vào các đặc điểm hình ảnh khác nhau vào prefab nút blaster theo các thể hiện Configuration đại diện cho mỗi loại blaster.

Cài đặt này cho phép bạn tạo thêm các thể hiện Configuration cho nhiều loại blaster hơn mà tự động hiển thị đúng trong bộ chọn blaster mà không cần tạo các nút riêng lẻ trong StarterGui.PickABlasterGui.

Để tái tạo chính xác bộ chọn blaster trong trò chơi mẫu Laser Tag:

Tạo một bộ chứa cho toàn bộ thành phần.
1. Chèn một Frame vào đối tượng PickABlaster ScreenGui.
  1. Trong cửa sổ Explorer, điều hướng đến dịch vụ StarterGui.
  2. Di chuột qua đối tượng con PickABlaster của nó, sau đó nhấp vào biểu tượng ⊕. Một menu ngữ cảnh hiển thị.
  3. Từ menu ngữ cảnh, chèn một Frame.
2. Chọn khung mới, sau đó trong cửa sổ Properties,
  1. Đặt AnchorPoint thành 0.5, 1 để đặt điểm gốc của khung ở giữa dưới của nó (50% từ trái sang phải của khung, và 100% từ trên xuống dưới của khung).
  2. Đặt BackgroundTransparency thành 1 để làm cho nền của khung hoàn toàn trong suốt.
  3. Đặt Position thành {0.5, 0},{0.9, 0} để đặt khung gần giữa dưới của màn hình (50% từ trái sang phải của màn hình, và 92.4% từ trên xuống dưới của màn hình).
  4. Đặt Size thành {0.8, 0},{0.25, 0} để các thành phần UI của bộ chọn blaster chiếm một phần lớn của màn hình để thu hút sự chú ý của người chơi (80% theo chiều ngang, và 25% theo chiều dọc).
  5. Đặt Name thành Component.
3. TÙY CHỌN
  Chèn một UIAspectRatioConstraint vào Component để đảm bảo tỷ lệ khung hình của khung và các phần tử UI con của nó vẫn giữ nguyên bất kể kích thước màn hình của người chơi. Mẫu đặt thuộc tính UIAspectRatioConstraint.AspectRatio của nó thành 5.
Tạo một bộ chứa để giữ các nhóm phần tử UI.
1. Chèn một Frame vào Component.
2. Chọn khung mới, sau đó trong cửa sổ Properties,
  1. Đặt AnchorPoint thành 0.5, 0.5 để đặt điểm gốc của khung ở giữa của nó (50% từ trái sang phải của khung, và 50% từ trên xuống dưới của khung).
  2. Đặt BackgroundTransparency thành 1 để làm cho nền của khung hoàn toàn trong suốt.
  3. Đặt Position thành {0.5, 0},{0.375, 0} để đặt khung gần giữa trên của bộ chứa (50% từ trái sang phải của khung cha, và 37.5% từ trên xuống dưới của khung cha).
  4. Đặt Size thành {1, 0},{0.75, 0} để các thành phần UI lựa chọn chiếm 3/4 bộ chứa (100% theo chiều ngang và 75% theo chiều dọc của khung cha).
  5. Đặt Name thành SelectionFrame.
Tạo một nhắc cho bộ chọn blaster.
1. Chèn một ImageLabel vào SelectionFrame.
2. Chọn nhãn mới, sau đó trong cửa sổ Properties,
  1. Đặt AnchorPoint thành 0.5, 1 để đặt điểm gốc của nhãn ở giữa dưới của nó (50% từ trái sang phải của nhãn, và 100% từ trên xuống dưới của nhãn).
  2. Đặt BackgroundTransparency thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
  3. Đặt LayoutOrder thành -1.
  4. Đặt Position thành {0.5, 0},{0.22, 0} để đặt nhãn gần giữa trên của khung (50% từ trái sang phải của khung cha, và 22% từ trên xuống dưới của khung cha).
  5. Đặt Size thành {0.45, 0},{0.22, 0} để mở rộng khu vực nhắc lên gần như một nửa khung (45% theo chiều ngang và 22% theo chiều dọc của khung cha).
  6. Đặt Name thành Header.
  7. Đặt Image thành rbxassetid://14304828123 để hiển thị một hình thang.
  8. Đặt ImageTransparency thành 0.15 để làm cho tiêu đề bán trong suốt.
3. TÙY CHỌN
  Chèn một UIAspectRatioConstraint vào nhãn để đảm bảo tỷ lệ khung hình của nhãn vẫn giữ nguyên bất kể kích thước màn hình của người chơi. Mẫu đặt thuộc tính UIAspectRatioConstraint.AspectRatio của nó thành 13.78.
4. Chèn một TextLabel vào Header để hiển thị một nhắc.
5. Chọn nhãn mới, sau đó trong cửa sổ Properties,
  1. Đặt AnchorPoint thành 0.5, 0.5 để đặt điểm gốc của nhãn mới ở giữa của nó (50% từ trái sang phải của nhãn, và 50% từ trên xuống dưới của nhãn).
  2. Đặt BackgroundTransparency thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
  3. Đặt Position thành {0.5, 0},{0.5, 0} để di chuyển nhãn đến giữa nhãn cha của nó (50% từ trái sang phải của nhãn cha, và 50% từ trên xuống dưới của nhãn cha).
  4. Đặt Size thành {0.6, 0},{0.55, 0} để mở rộng không gian văn bản lên hơn một nửa nhãn cha (60% theo chiều ngang và 55% theo chiều dọc của nhãn cha).
  5. Đặt Name thành HeaderTextLabel.
  6. Đặt FontFace thành Montserrat để phù hợp với thẩm mỹ tương lai.
  7. Đặt Weight thành Medium để làm dày phông chữ.
  8. Đặt Text thành CHỌN MỘT BLASTER.
  9. Kích hoạt TextScaled.
Tạo bộ chứa cho bộ nút blaster và các mũi tên chọn.
1. Chèn một ImageLabel vào SelectionFrame.
2. Chọn nhãn mới, sau đó trong cửa sổ Properties,
  1. Xóa giá trị Image mặc định.
  2. Đặt AnchorPoint thành 0.5, 1 để đặt điểm gốc của nhãn ở giữa dưới của nó (50% từ trái sang phải của nhãn, và 100% từ trên xuống dưới của nhãn).
  3. Đặt BackgroundColor thành 0, 0, 0 để làm cho nhãn màu đen.
  4. Đặt BackgroundTransparency thành 0.3 để giảm độ trong suốt của nhãn xuống 30%, và phù hợp với tất cả các phần tử UI màu đen trong trò chơi.
  5. Đặt Position thành {0.5, 0},{1, 0} để đặt nhãn ở giữa dưới của khung (50% từ trái sang phải của khung cha, và 100% từ trên xuống dưới của khung cha).
  6. Đặt Size thành {1, 0},{0.77, 0} để mở rộng khu vực nhãn đến không gian bên dưới nhắc (100% theo chiều ngang và 77% theo chiều dọc của khung cha).
3. Bo tròn các góc của bộ chứa.
  1. Chèn một đối tượng UICorner vào nhãn.
  2. Chọn đối tượng góc mới, sau đó trong cửa sổ Properties, đặt CornerRadius thành 0.075, 0 để bo tròn các góc.
Tạo bộ chứa cho các nút blaster của bạn.
1. Chèn một Frame vào nhãn từ bước 4.
2. Chọn khung mới, sau đó trong cửa sổ Properties,1. Đặt AnchorPoint thành 0.5, 0.5 để đặt điểm gốc của khung mới ở giữa chính nó (50% từ trái sang phải của khung, và 50% từ trên xuống dưới của khung).
Đặt BackgroundTransparency thành 1 để làm cho nền của khung hoàn toàn trong suốt.
Đặt Position thành {0.5, 0},{0.5, 0} để đặt khung ở giữa nhãn cha của nó (50% từ trái sang phải của khung cha, và 50% từ trên xuống dưới của khung cha).
Đặt Size thành {0.85, 0},{0.77, 0} để mở rộng khu vực khung đến hầu hết nhãn (85% theo chiều ngang và 77% theo chiều dọc của nhãn cha).
Đặt Name thành Container.

Tạo khoảng cách cho tất cả các nút blaster trong tương lai.
1. Chèn một đối tượng UIListLayout vào khung từ bước 5.
2. Chọn đối tượng bố cục mới, sau đó trong cửa sổ Properties,
  1. Đặt Padding thành 0.035, 0 để cung cấp không gian giữa tất cả các nút trong tương lai.
  2. Đặt FillDirection thành Horizontal để mỗi nút hiển thị cạnh nhau.
  3. Đặt cả HorizontalAlignment và VerticalAlignment thành Center để mỗi nút căn giữa với nhau.
Tạo nút điều hướng bên trái.
1. Chèn một đối tượng ImageButton vào ImageLabel từ bước 4.
2. Chọn nút mới, sau đó trong cửa sổ Properties,
  1. Xóa giá trị Image mặc định.
  2. Đặt AnchorPoint thành 0, 0.5 để đặt điểm gốc của nút mới ở giữa bên trái của nó (0% từ trái sang phải của nút, và 50% từ trên xuống dưới của nút).
  3. Đặt BackgroundTransparency thành 0.15 để cung cấp phản hồi trực quan khi di chuột qua rằng nút có thể chọn được.
  4. Đặt Position thành {0.02, 0},{0.5, 0} để cung cấp khoảng cách bên trái của nút từ khung cha của nó (2% từ trái sang phải của nhãn cha, và 50% từ trên xuống dưới của nhãn cha).
  5. Đặt Size thành {0.04, 0},{0.33, 0} để làm cho nút chọn nhỏ hơn nhiều so với các nút blaster (4% theo chiều ngang và 33% theo chiều dọc của khung cha).
  6. Đặt Name thành NavigationButtonLeft.
3. Bo tròn các góc của nút.
  1. Chèn một đối tượng UICorner vào nút.
  2. Chọn đối tượng góc mới, sau đó trong cửa sổ Properties, đặt CornerRadius thành 0.1, 0 để bo tròn các góc.
4. Chèn một đối tượng ImageLabel vào nút.
5. Chọn nhãn mới, sau đó trong cửa sổ Properties,
  1. Đặt AnchorPoint thành 0.5, 0.5 để đặt điểm gốc của nhãn mới ở giữa chính nó (50% từ trái sang phải của nhãn, và 50% từ trên xuống dưới của nhãn).
  2. Đặt Position thành {0.45, 0},{0.5, 0} để đặt nhãn gần giữa nút cha của nó (45% từ trái sang phải của nút cha, và 50% từ trên xuống dưới của nút cha). Giá trị này không ở giữa vì một mũi tên không trực quan trông giống như nó ở giữa nút tại {0.5, 0},{0.5, 0}.
  3. Đặt Size thành {0.8, 0},{0.8, 0} để mở rộng khu vực nhãn đến không gian bên dưới lời nhắc (80% theo chiều ngang và 80% theo chiều dọc của khung cha).
  4. Đặt BackgroundTransparency thành 1 để làm cho nền của hình ảnh hoàn toàn trong suốt.
  5. Đặt Image thành rbxassetid://14309187238.
  6. Đặt ScaleType thành Fit.
Tạo nút điều hướng bên phải.
1. Nhân bản NavigationButtonLeft.
2. Chọn nút nhân bản, sau đó trong cửa sổ Properties,
  1. Đặt AnchorPoint thành 1, 0.5 để đặt điểm gốc của nút mới ở giữa bên phải của nó (100% từ trái sang phải của nút, và 50% từ trên xuống dưới của nút).
  2. Đặt Position thành {0.98, 0},{0.5, 0} để cung cấp khoảng cách bên phải của nút từ khung cha của nó (98% từ trái sang phải của nhãn cha, và 50% từ trên xuống dưới của nhãn cha).
  3. Đặt Name thành NavigationButtonRight.
3. Chọn đối tượng ImageLabel con của nó.
  1. Đặt Rotation thành 180 để lật hình ảnh.
  2. Đặt Position thành {0.55, 0},{0.5, 0} để đặt nhãn gần giữa nút cha của nó (55% từ trái sang phải của nút cha, và 50% từ trên xuống dưới của nút cha). Giá trị này không ở giữa vì một mũi tên không trực quan trông giống như nó ở giữa nút tại {0.5, 0},{0.5, 0}.
Tạo nút CHỌN.
1. Chèn một ImageButton vào Component. Lưu ý rằng quy trình này giữ cho nút chọn tách biệt khỏi SelectionFrame để bạn có thể thêm khoảng cách giữa phần chính của thành phần và nút chọn.
2. Chọn nút mới, sau đó trong cửa sổ Properties,
  1. Xóa giá trị Image mặc định.
  2. Đặt AnchorPoint thành 0.5, 1 để đặt điểm gốc của nút mới ở giữa dưới của nó (50% từ trái sang phải của nút, và 100% từ trên xuống dưới của nút).
  3. Đặt BackgroundTransparency thành 0.15 để cung cấp phản hồi trực quan khi di chuột qua rằng nút có thể chọn được.
  4. Đặt Position thành {0.5, 0},{0.99, 0} để đặt nút gần giữa dưới của khung chứa của nó (50% từ trái sang phải của khung cha, và 99% từ trên xuống dưới của khung cha).
  5. Đặt Size thành {0.17, 0},{0.18, 0} để kéo dài nút bên dưới các nút blaster (17% theo chiều ngang và 18% theo chiều dọc của khung cha).
  6. Đặt Name thành SelectButton.
3. Bo tròn các góc của nút.
  1. Chèn một đối tượng UICorner vào nút.
  2. Chọn đối tượng góc mới, sau đó trong cửa sổ Properties, đặt CornerRadius thành 0.2, 0 để bo tròn các góc.
4. Chèn một đối tượng TextLabel vào nút để bạn có thể hiển thị một lời kêu gọi hành động.
5. Chọn nhãn mới, sau đó trong cửa sổ Properties,
  1. Đặt AnchorPoint thành 0.5, 0.5 để đặt điểm gốc của nhãn mới ở giữa chính nó (50% từ trái sang phải của nhãn, và 50% từ trên xuống dưới của nhãn).
  2. Đặt BackgroundTransparency thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
  3. Đặt Position thành {0.5, 0},{0.5, 0} để di chuyển nhãn đến giữa nút (50% từ trái sang phải của nút cha, và 50% từ trên xuống dưới của nút cha).
  4. Đặt Size thành {0.9, 0},{0.55, 0} để mở rộng không gian văn bản đến gần như toàn bộ chiều rộng của nhãn cha (90% theo chiều ngang và 55% theo chiều dọc của nhãn cha).
  5. Đặt Name thành SelectTextLabel.
  6. Đặt FontFace thành Montserrat để phù hợp với thẩm mỹ tương lai.
  7. Đặt Weight thành Medium để làm dày phông chữ.
  8. Đặt Text thành CHỌN.
  9. Bật TextScaled.
Tạo một prefab nút blaster.
1. Trong dịch vụ ReplicatedStorage, tạo một cấu trúc thư mục để tổ chức các đối tượng UI của bạn. Mẫu sử dụng một thư mục Instances với một thư mục con Guis.
2. Chèn một đối tượng ImageButton vào thư mục Guis.
3. Chọn nút mới, sau đó trong cửa sổ Properties,
  1. Xóa giá trị Image mặc định.
  2. Đặt AnchorPoint thành 0.5, 0.5 để đặt điểm gốc của nút mới ở giữa chính nó (50% từ trái sang phải của nút, và 50% từ trên xuống dưới của nút).
  3. Đặt BackgroundTransparency thành 0.65 để cung cấp phản hồi trực quan rằng nút không đang được tập trung. Các kịch bản trong bước 12 cung cấp phản hồi trực quan lập trình khi nút đang được tập trung.
  4. Đặt LayoutOrder thành 2.
  5. Đặt Name thành BlasterButtonPrefab.
  6. Đặt Size thành {0.8, 0},{0.8, 0}.
  7. Đặt ImageTransparency thành 1 để làm cho hình ảnh hoàn toàn trong suốt.
4. Chèn một UIAspectRatioConstraint vào BlasterButtonPrefab để đảm bảo tỷ lệ khung hình của nút vẫn giữ nguyên trong thành phần bất kể kích thước màn hình của người chơi.
5. Bo tròn các góc của nút.
  1. Chèn một đối tượng UICorner vào BlasterButtonPrefab.
  2. Chọn UICorner, sau đó trong cửa sổ Properties, đặt CornerRadius thành 0.05, 0 để bo tròn các góc.
6. Chèn một ImageLabel vào BlasterButtonPrefab.
7. Chọn nhãn mới, sau đó trong cửa sổ Properties,
  1. Xóa giá trị Image mặc định.
  2. Đặt AnchorPoint thành 0.5, 0.5 để đặt điểm gốc của nhãn mới ở giữa chính nó (50% từ trái sang phải của nhãn, và 50% từ trên xuống dưới của nhãn).
  3. Đặt BackgroundTransparency thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
  4. Đặt Position thành {0.52, 0},{0.497, 0} để đặt nhãn gần giữa nút cha của nó (52% từ trái sang phải của nút cha, và 49.7% từ trên xuống dưới của nút cha). Giá trị này không ở giữa vì blaster không trực quan trông giống như nó ở giữa nút tại {0.5, 0},{0.5, 0}.
  5. Đặt Size thành {1.20, 0},{0.9, 0} để mở rộng khu vực nhãn ra ngoài nút (120% theo chiều ngang và 90% theo chiều dọc của nút cha).
  6. Đặt ScaleType thành Fit.
Tham khảo các kịch bản ReplicatedStorage sau trong mẫu Laser Tag để lập trình hiển thị các nút cho mỗi blaster, thay đổi kích thước các nút khi người chơi chọn một nút không đang được tập trung, và gán lựa chọn blaster của người chơi cho hình đại diện của họ.

Kịch bản sau yêu cầu một tập hợp các kịch bản hoạt động cùng nhau để tạo ra bộ chọn blaster. Khi một người chơi tham gia trò chơi hoặc hồi sinh trở lại vào một vòng sau khi sức khỏe của họ đạt đến không, kịch bản này kích hoạt tất cả các phần tử UI của bộ chọn blaster cho đến khi người chơi thực hiện lựa chọn của họ.

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local GuiAttribute = require(ReplicatedStorage.GuiAttribute)
local setupBlasterButtons = require(script.setupBlasterButtons)
local connectResetSelectionOnEnabled = require(script.connectResetSelectionOnEnabled)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("PickABlasterGui")

setupBlasterButtons(gui)
connectResetSelectionOnEnabled(gui)
gui:SetAttribute(GuiAttribute.selectedIndex, 1)

Bây giờ, bất cứ khi nào một người chơi tham gia trò chơi hoặc hồi sinh trở lại vào một vòng sau khi sức khỏe của họ đạt đến không, UI bộ chọn blaster hiển thị, họ có thể thực hiện một lựa chọn, và mỗi nút hoạt động như mong đợi.

Nút bắn

Nút bắn là một thành phần UI mà người chơi sử dụng để bắn blaster của họ nếu họ đang truy cập trò chơi thông qua thiết bị di động hoặc máy tính bảng. Trò chơi laser tag mẫu sử dụng một nút bắn với một biểu tượng mô tả cả một điểm ngắm và một vụ nổ để truyền đạt chức năng của nút mà không cần văn bản.

Để tái tạo chính xác nút bắn trong mẫu Laser Tag:

Chèn một ImageButton vào đối tượng HUDGui ScreenGui.
1. Trong cửa sổ Explorer, điều hướng đến dịch vụ StarterGui.
2. Di chuột qua đối tượng con HUDGui của nó, sau đó nhấp vào biểu tượng ⊕. Một menu ngữ cảnh hiển thị.
3. Từ menu ngữ cảnh, chèn một ImageButton.
Trong viewport, di chuyển nút đến nơi ngón tay của người chơi tự nhiên nghỉ ngơi để bạn có thể có một cảm nhận trực quan về những gì nút sẽ trông như thế nào trên thiết bị của người chơi, sau đó trong cửa sổ Properties,
1. Đặt Image thành rbxassetid://18308375035 để hiển thị biểu tượng nút bắn.
2. Đặt PressedImage thành rbxassetid://18308372558 để hiển thị một phiên bản đảo ngược của biểu tượng nút bắn khi người chơi nhấn nút.
3. Đặt BackgroundTransparency thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
4. Đặt Name thành BlastButton.
5. Đặt ScaleType thành Fit để hình ảnh vừa vặn trong container của nó và không bị kéo dài trên các kích thước màn hình khác nhau.
6. Đặt ImageTransparency thành 0.3 để giảm độ trong suốt của nhãn sao cho nó phù hợp với tất cả các yếu tố UI màu đen trong trò chơi.
Chèn một UIAspectRatioConstraint vào BlastButton để đảm bảo tỷ lệ khung hình của nút vẫn giữ nguyên bất kể kích thước màn hình của người chơi.
Tham khảo các kịch bản ReplicatedStorage sau trong mẫu Laser Tag để lập trình hiển thị nút bắn khi người chơi đang sử dụng đầu vào cảm ứng trên một thiết bị hỗ trợ điều khiển cảm ứng.

Kịch bản sau yêu cầu một tập hợp các mô-đun kịch bản hoạt động cùng nhau để thiết lập màn hình hiển thị chính (HUD), bao gồm setupTouchButtonAsync. Sau khi một người chơi tham gia một vòng và chọn blaster của họ, kịch bản này đảm bảo tất cả các phần tử UI HUD hiển thị đúng cách cho trạng thái, thiết bị và tình trạng đội của người chơi.

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

Bây giờ, khi một người chơi tham gia trò chơi và sử dụng đầu vào cảm ứng trên một thiết bị hỗ trợ điều khiển cảm ứng, nút bắn hiển thị ở phía trên bên phải của nút nhảy.

UI Người Chơi

Theo các thực tiễn tốt nhất về thứ bậc hình ảnh từ Wireframe Your Layouts, phần này dạy bạn cách triển khai tất cả các phần tử UI trên màn hình liên quan đến trạng thái của người chơi. Nhóm các phần tử UI này gần các cạnh của màn hình vì người chơi có thể hiểu thông tin ngoại vi này mà không cần chuyển sự chú ý của họ khỏi gameplay.

Chỉ báo người chơi

Chỉ báo người chơi là một thành phần UI mà người chơi tham khảo để nhanh chóng hiểu đội nào họ thuộc về ngay khi họ xuất hiện trong khu vực xuất hiện của đội mình. Trò chơi laser tag mẫu cung cấp hai phiên bản của chỉ báo người chơi tùy thuộc vào việc người chơi ở đội xanh hay hồng.

Theo hướng dẫn từ Chọn Một Chủ Đề Màu Sắc, cả hai phiên bản của chỉ báo người chơi kết hợp màu đội với một biểu tượng đơn giản, độc đáo với chi tiết tối thiểu để chúng vẫn dễ đọc trên các màn hình nhỏ. Cung cấp hai hình thức phản hồi hình ảnh là quan trọng vì nó giúp giữ cho thiết kế dễ tiếp cận cho những người chơi bị mù màu.

Để tái tạo chính xác thành phần chỉ báo người chơi trong mẫu Laser Tag:

Chèn một Frame vào đối tượng HUDGui ScreenGui.
1. Trong cửa sổ Explorer, điều hướng đến dịch vụ StarterGui.
2. Di chuột qua đối tượng con HUDGui của nó, sau đó nhấp vào biểu tượng ⊕. Một menu ngữ cảnh hiển thị.
3. Từ menu ngữ cảnh, chèn một Frame.
Chọn Frame mới, sau đó trong cửa sổ Properties,
1. Đặt AnchorPoint thành 0, 1 để đặt điểm gốc của khung ở giữa dưới của chính nó (0% từ trái sang phải của khung, và 100% từ trên xuống dưới của khung).
2. Đặt BackgroundTransparency thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
3. Đặt Name thành PlayerDisplay.
4. Đặt Position thành {0.02, 0},{0.97, 0} để đặt khung gần góc dưới bên trái của màn hình.
5. Đặt Size thành {0.23, 0},{0.08, 0} để vừa ngắn lại vừa rộng ra khung.
6. Bật ClipsDescendants để cắt các GuiObjects con vượt ra ngoài khung.
Tạo hình dạng đa giác.
1. Chèn một ImageLabel vào PlayerDisplay.
2. Chọn nhãn mới, sau đó trong cửa sổ Properties,
  1. Đặt Image thành rbxassetid://14304828123 để hiển thị biểu tượng hình thang.
  2. Đặt AnchorPoint thành 1, 1 để đặt điểm gốc của nhãn ở dưới cùng bên phải của chính nó (100% từ trái sang phải của nhãn, và 100% từ trên xuống dưới của nhãn).
  3. Đặt BackgroundTransparency thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
  4. Đặt Name thành Block.
  5. Đặt Position thành {1,0},{1,0} để đặt nhãn ở bên phải của khung.
  6. Đặt Size thành {1.858, 0},{0.581, 0} để mở rộng nhãn ra ngoài khung, và rút ngắn nó xuống một chút hơn một nửa chiều dài của khung.
  7. Đặt ImageTransparency thành 0.15 để làm cho nhãn hơi trong suốt.
  8. Đặt ScaleType thành Fit để hình ảnh vừa vặn trong container của nó và không bị kéo dài trên các kích thước màn hình khác nhau.
  1. Chèn một UIAspectRatioConstraint vào Block để đảm bảo tỷ lệ khung hình của nhãn và các phần tử UI con của nó vẫn giữ nguyên bất kể kích thước màn hình của người chơi.
  2. Chọn ràng buộc mới, sau đó trong cửa sổ Properties, đặt AspectRatio thành 13.78.
Tạo hộp cho chân dung của người chơi.
1. Chèn một ImageLabel vào PlayerDisplay.
2. Chọn nhãn mới, sau đó trong cửa sổ Properties,
  1. Xóa ID tài sản giữ chỗ trong thuộc tính Image. Các kịch bản trong bước 7 sẽ lập trình chèn chân dung của người chơi vào nhãn hình ảnh.
  2. Đặt AnchorPoint thành 0, 1 để đặt điểm gốc của nhãn ở dưới cùng bên trái của chính nó (0% từ trái sang phải của nhãn, và 100% từ trên xuống dưới của nhãn).
  3. Đặt BackgroundColor3 thành 0, 0, 0 để đặt màu nền của nhãn thành màu đen.
  4. Đặt BackgroundTransparency thành 0.3 để giảm độ trong suốt của nhãn xuống 30%, và phù hợp với tất cả các yếu tố UI màu đen trong trò chơi.
  5. Đặt Name thành PlayerPortrait.
  6. Đặt Position thành {0.11, 0},{1, 0} để đặt nhãn ở bên trái của hình dạng đa giác.
  7. Đặt Size thành {0.23, 0},{1, 0} để thu nhỏ nhãn.
  8. Đặt ImageTransparency thành 0.15 để làm cho nhãn hơi trong suốt.
  9. Đặt ScaleType thành Fit để hình ảnh vừa vặn trong container của nó và không bị kéo dài trên các kích thước màn hình khác nhau.
  1. Chèn một UIAspectRatioConstraint vào PlayerPortrait để đảm bảo tỷ lệ khung hình của nhãn và các phần tử UI con của nó vẫn giữ nguyên bất kể kích thước màn hình của người chơi.
  2. Chèn một UICorner vào PlayerPortrait, sau đó trong cửa sổ Properties, đặt CornerRadius thành 0.05, 0 để bo tròn nhẹ các góc.
Tạo nhãn văn bản cho tên của người chơi.
1. Chèn một đối tượng TextLabel vào PlayerDisplay.
2. Chọn nhãn mới, sau đó trong cửa sổ Properties,
  1. Đặt AnchorPoint thành 0, 0.5 để đặt điểm gốc của nhãn mới ở giữa bên trái của chính nó (0% từ trái sang phải của nhãn, và 50% từ trên xuống dưới của nhãn).
  2. Đặt BackgroundTransparency thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
  3. Đặt Name thành PlayerNameTextLabel.
  4. Đặt Position thành {0.35, 0},{0.72, 0} để đặt nhãn ở bên phải của container của nó (35% từ trái sang phải của nhãn cha, và 72% từ trên xuống dưới của nhãn cha).
  5. Đặt Size thành {0.52, 0},{0.3, 0} để văn bản có thể chiếm hầu hết khu vực hình dạng đa giác (52% theo chiều ngang và 30% theo chiều dọc của khung cha).
  6. Đặt FontFace thành Montserrat để phù hợp với thẩm mỹ tương lai.
  7. Đặt Weight thành Bold để làm dày phông chữ.
  8. Xóa văn bản giữ chỗ trong thuộc tính Text. Các kịch bản trong bước 7 sẽ lập trình chèn tên của người chơi vào nhãn văn bản.
  9. Bật TextScaled.
  10. Đặt TextXAlignment thành Left.
Tạo các biểu tượng và màu sắc đội hiển thị bên trái chân dung của người chơi.
1. Chèn một Folder vào PlayerDisplay, sau đó đổi tên thành TeamIcons.
2. Tạo biểu tượng và màu sắc cho đội xanh.
  1. Chèn một ImageLabel vào TeamIcons.
  2. Chọn nhãn mới, sau đó trong cửa sổ Properties,
    
    Đặt AnchorPoint thành 0, 1 để đặt điểm gốc của nhãn ở dưới cùng bên trái của chính nó (0% từ trái sang phải của nhãn, và 100% từ trên xuống dưới của nhãn).
    
    Đặt BackgroundColor3 thành 88, 218, 171 để đặt màu nền của nhãn thành màu xanh mint.
    
    Đặt Name thành TeamAIcon.
    
    Đặt Position thành {0, 0},{1, 0} để đặt nhãn ở bên trái của khung.
    
    Đặt Size thành {0.135, 0},{0.58, 0} để thu nhỏ nhãn bên trái chân dung người chơi.
    
    Đặt ImageTransparency thành 1 để làm cho nhãn trong suốt.
  1. Cấu hình một thuộc tính tùy chỉnh để theo dõi rằng nhãn này dành cho đội xanh. Bước này rất quan trọng cho các kịch bản trong bước 7.
    
    Trong cửa sổ Properties, điều hướng đến phần Attributes, sau đó nhấp vào biểu tượng cộng. Một hộp thoại pop-up hiển thị.
    
    Trong trường Name, nhập teamColor.
    
    Trong menu thả xuống Type, chọn BrickColor.
    
    Nhấp vào nút Save.
    
    Đặt thuộc tính mới teamColor thành Mint.
  2. Chèn một UIAspectRatioConstraint vào TeamAIcon để đảm bảo tỷ lệ khung hình của nhãn và các phần tử UI con của nó vẫn giữ nguyên bất kể kích thước màn hình của người chơi.
  3. Tạo biểu tượng.
    
    Chèn một ImageLabel vào TeamAIcon.
    
    Chọn nhãn mới, sau đó trong cửa sổ Properties,
    
    Đặt Image thành rbxassetid://14309678670 để hiển thị biểu tượng đội xanh.
    
    Đặt AnchorPoint thành 0.5, 0.5 để đặt điểm gốc của nhãn ở giữa chính nó (50% từ trái sang phải của nhãn, và 50% từ trên xuống dưới của nhãn).
    
    Đặt BackgroundTransparency thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
    
    Đặt Name thành Icon.
    
    Đặt Position thành {0.5, 0},{0.5, 0} để đặt nhãn ở giữa nhãn cha của nó.
    
    Đặt Size thành {0.7, 0},{0.6, 0} để thu nhỏ nhãn.
    
    Đặt ScaleType thành Fit để hình ảnh vừa vặn trong container của nó và không bị kéo dài trên các kích thước màn hình khác nhau.
3. Tạo biểu tượng và màu sắc cho đội hồng.
  1. Nhân bản TeamAIcon và các con của nó.
  2. Chọn TeamAIcon nhân bản, sau đó trong cửa sổ Properties,
    
    Đặt BackgroundColor3 thành 255, 170, 255 để đặt màu nền của nhãn thành màu hồng carnation.
    
    Đặt Name thành TeamBIcon.
    
    Đặt thuộc tính teamColor thành Carnation Pink.
    
    Chọn con Icon nhân bản của TeamBIcon, sau đó trong cửa sổ Properties, đặt Image thành rbxassetid://14309678549 để hiển thị biểu tượng đội hồng.
Tham khảo các kịch bản ReplicatedStorage sau trong mẫu Laser Tag để lập trình hiển thị chỉ báo người chơi với màu sắc và biểu tượng đội phù hợp trong khi một người chơi đang hoạt động trong một vòng.

Kịch bản sau yêu cầu một tập hợp các mô-đun kịch bản hoạt động cùng nhau để thiết lập màn hình hiển thị chính (HUD), bao gồm startSyncingTeamColor, setPlayerName, và setPlayerPortrait. Sau khi một người chơi tham gia một vòng và chọn blaster của họ, kịch bản này đảm bảo tất cả các phần tử UI HUD hiển thị đúng cách cho trạng thái, thiết bị và tình trạng đội của người chơi.

local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

Bây giờ, bất cứ khi nào một người chơi tham gia hoặc tham gia lại vòng sau khi hồi sinh, chỉ báo người chơi sẽ hiển thị ở góc dưới bên trái màn hình của họ.

Màn hình trường lực

Màn hình trường lực là một phần tử UI phủ lên viewport để thông báo cho người chơi rằng họ an toàn khỏi hỏa lực của đội đối thủ trong khi tham gia hoặc tham gia lại một vòng. Theo các hướng dẫn thẩm mỹ cho biểu tượng từ Chọn Một Phong Cách Nghệ Thuật, trò chơi laser tag mẫu sử dụng một mẫu lục giác bán trong suốt để biểu thị một trường lực. Quyết định thiết kế này không chỉ củng cố phong cách nghệ thuật tương lai tổng thể cho tất cả UI trong trò chơi, mà còn truyền đạt trạng thái của người chơi mà không cần văn bản hay hướng dẫn bổ sung.

Để tái tạo chính xác màn hình trường lực trong mẫu Laser Tag:

Chèn một ImageLabel vào đối tượng ForceFieldGui ScreenGui.
1. Trong cửa sổ Explorer, điều hướng đến dịch vụ StarterGui.
2. Di chuột qua đối tượng con ForceFieldGui của nó, sau đó nhấp vào biểu tượng ⊕. Một menu ngữ cảnh hiển thị.
3. Từ menu ngữ cảnh, chèn một ImageLabel.
Chọn nhãn mới, sau đó trong cửa sổ Properties,
1. Đặt Image thành rbxassetid://14462567888.
2. Đặt BackgroundTransparency thành 0.8 để làm cho trường lực bán trong suốt.
3. Đặt Size thành {1, 0},{1, 0} để làm cho hình ảnh lấp đầy toàn bộ màn hình (100% theo chiều ngang và 100% theo chiều dọc của ScreenGui cha).
4. Đặt ScaleType thành Tile để làm cho hình lục giác gạch trên toàn bộ màn hình.
5. Đặt TileSize thành {0, 104},{0, 180}.
Chèn một đối tượng UIGradient vào nhãn.
Chọn đối tượng gradient mới, sau đó trong cửa sổ Properties,
1. Đặt Color thành một chuỗi màu bắt đầu bằng màu xanh, chuyển sang màu trắng, sau đó lại chuyển sang màu xanh.
  1. Đặt Color thành 120, 192, 250 để áp dụng một sắc thái xanh nhạt cho tất cả các hình lục giác.
  2. Nhấp vào thuộc tính Color, sau đó nhấp vào nút ⋯. Một hộp pop-up chuỗi màu hiển thị.
    
    Mỗi tam giác trên trục dưới của chuỗi màu là một điểm khóa xác định giá trị màu của thuộc tính tại điểm đó của hình ảnh từ trái sang phải.
  3. Nhấp và kéo trên chuỗi màu cho đến khi bạn đạt được giá trị Time là 0.05, sau đó nhấp vào hình vuông nhỏ bên cạnh Color để mở cửa sổ pop-up Colors.
  4. Chọn một màu trắng sáng, sau đó đóng cửa sổ pop-up.
  5. Nhấp và kéo trên chuỗi màu cho đến khi bạn đạt được giá trị Time là 0.95, sau đó mở cửa sổ pop-up Colors một lần nữa, và chọn cùng một màu trắng như trước.
2. Đặt Rotation thành 225 để làm cho phần màu xanh của chuỗi màu hiển thị ở các góc trên bên trái và dưới bên phải.
3. Đặt Transparency thành một chuỗi số làm cho trường lực trông như đang lấp lánh.
  1. Nhấp vào thuộc tính Transparency, sau đó nhấp vào nút ⋯. Một hộp pop-up chuỗi số hiển thị. Mỗi hình vuông ở đầu và cuối chuỗi số là một điểm khóa xác định giá trị trong suốt của thuộc tính tại điểm đó của hình ảnh từ trái sang phải.
  2. Đặt các thuộc tính thời gian và giá trị sau trong chuỗi số:
  - Time = 0, Value = 0.25
  - Time = .101, Value = 0.875
  - Time = .183, Value = 0
  - Time = .3, Value = 1
  - Time = .7, Value = 1
  - Time = 1, Value = 0.9
  1. Nhân bản ImageLabel từ bước 2.
Chọn đối tượng UIGradient trong nhãn nhân bản, sau đó trong cửa sổ Properties,
1. Đặt Rotation thành -45 để lật hình ảnh sao cho nó gần như phản chiếu nhau dọc theo trục Y.
2. Chỉnh sửa Transparency để làm cho ánh sáng lấp lánh trông tự nhiên hơn.
  1. Nhấp vào thuộc tính Transparency, sau đó nhấp vào nút ⋯. Một pop-up hiển thị chuỗi số.
  2. Chọn keyframe thứ ba, sau đó nhấp vào nút Delete.
Tham khảo các script ReplicatedStorage sau trong tệp mẫu Laser Tag mà hiển thị chương trình màn hình lực trường trong khi một người chơi tham gia hoặc tham gia lại một vòng.

Script client ReplicatedStorage.ForceFieldClientVisuals sau thay thế hình ảnh mặc định ForceField bằng StarterGui.ForceFieldGui. Khi người chơi vào một trò chơi và xuất hiện tại một SpawnLocation với thuộc tính Duration lớn hơn 0, hành vi mặc định trong mọi trò chơi là cung cấp cho avatar của họ một quả cầu bảo vệ màu xanh lam mà tạm thời ngăn họ mất máu.

Script này bắt đầu bằng cách lắng nghe khi ForceField được thêm vào một nhân vật, vô hiệu hóa hình ảnh lực trường mặc định ở chế độ người thứ nhất, sau đó kích hoạt đối tượng ForceFieldGui ScreenGui. Lưu ý rằng điều này không ảnh hưởng đến hình ảnh ở chế độ người thứ ba khi người chơi nhìn vào những người chơi khác đang tái sinh trở lại trò chơi.

Hình ảnh lực trường ở chế độ người thứ nhất bao gồm một lưới hình lục giác tương lai ở viền màn hình. — Hình ảnh lực trường ở chế độ người thứ nhất

Hình ảnh lực trường ở chế độ người thứ ba bao gồm một quả cầu lấp lánh màu xanh xung quanh người chơi đang tái sinh vào trò chơi. — Hình ảnh lực trường ở chế độ người thứ ba

local Players = game:GetService("Players")

local localPlayer = Players.LocalPlayer

local function onCharacterAddedAsync(character: Model)
	local forceField = character:WaitForChild("ForceField", 3)
	if not forceField then
		-- Nếu người chơi xuất hiện tại một điểm xuất hiện với ForceField bị vô hiệu hóa
		return
	end

	forceField.Visible = false
	localPlayer.PlayerGui:WaitForChild("ForceFieldGui").Enabled = true
	forceField.Destroying:Wait()
	localPlayer.PlayerGui.ForceFieldGui.Enabled = false
end

if localPlayer.Character then
	onCharacterAddedAsync(localPlayer.Character)
end

localPlayer.CharacterAdded:Connect(onCharacterAddedAsync)

Bây giờ, bất cứ khi nào một người chơi tham gia hoặc tham gia lại vòng sau khi tái sinh, giao diện người dùng lực trường mới sẽ hiển thị thay vì hình ảnh lực trường mặc định ở chế độ người thứ nhất ForceField.

Màn hình tái sinh

Màn hình tái sinh là một phần tử UI làm mờ viewport để thông báo cho người chơi rằng họ đã bị loại ra, và rằng máy chủ đang trong quá trình tái sinh họ trở lại khu vực xuất hiện của họ. Phần tử UI này rất quan trọng vì nó cho phép người chơi có thời gian để xử lý rằng họ đã bị loại ra, và lên kế hoạch cho bước đi tiếp theo trước khi họ tham gia lại vòng hoạt động.

Để biết thêm thông tin về hành vi tái sinh tùy chỉnh trong trò chơi laser tag mẫu, xem Tái sinh Nhân vật từ chương trình giảng dạy Lập trình Gameplay.

Để tái tạo chính xác màn hình tái sinh trong trò chơi mẫu Laser Tag:

Tạo banner thông tin ở giữa.
1. Chèn một ImageLabel vào đối tượng OutStateGui ScreenGui.
  1. Trong cửa sổ Explorer, điều hướng đến dịch vụ StarterGui.
  2. Di chuột qua đối tượng con OutStateGui của nó, sau đó nhấp vào biểu tượng ⊕. Một menu ngữ cảnh hiển thị.
  3. Từ menu ngữ cảnh, chèn một ImageLabel.
2. Chọn nhãn mới, sau đó trong cửa sổ Properties,
  1. Đặt AnchorPoint thành 0.5, 0.5 để đặt điểm gốc của nút mới ở giữa của nó (50% từ trái sang phải của nhãn, và 50% từ trên xuống dưới của nhãn).
  2. Đặt BackgroundTransparency thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
  3. Đặt Position thành {0.5, 0},{0.5, 0} để đặt nhãn ở giữa của container của nó (50% từ trái sang phải của ScreenGui cha, và 50% từ trên xuống dưới của ScreenGui cha).
  4. Đặt Size thành {0.48, 0},{0.06, 0} để mở rộng nhãn (48% theo chiều ngang và 6% theo chiều dọc của ScreenGui cha).
  5. Đặt Name thành Block.
  6. Đặt Image thành rbxassetid://14304827265 để làm cho hình ảnh thành một hình thang.
  7. Đặt ImageColor thành 0,0,0 để làm cho hình thang có màu đen.
  8. Đặt ImageTransparency thành 0.3 để giảm độ mờ của nhãn xuống 30%, và phù hợp với tất cả các phần tử UI màu đen trong trò chơi.
3. Chèn một UIAspectRatioConstraint vào Block để đảm bảo tỷ lệ khung hình của nhãn và các phần tử UI con của nó vẫn giữ nguyên bất kể kích thước màn hình của người chơi.
4. Chọn ràng buộc mới, sau đó trong cửa sổ Properties, đặt AspectRatio thành 13.78.
5. Chèn một TextLabel vào Block cho văn bản thông tin.
6. Chọn nhãn mới, sau đó trong cửa sổ Properties,
  1. Đặt AnchorPoint thành 0.5, 0.5 để đặt điểm gốc của nhãn ở giữa của nó (50% từ trái sang phải của nhãn, và 50% từ trên xuống dưới của nhãn).
  2. Đặt BackgroundTransparency thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
  3. Đặt Position thành {0.5, 0},{0.5, 0} để đặt nhãn ở giữa của nhãn cha (50% từ trái sang phải của nhãn cha, và 50% từ trên xuống dưới của nhãn cha).
  4. Đặt Size thành {.85, 0},{0.55, 0} để văn bản có thể chiếm hầu hết khu vực hình thang (85% theo chiều ngang và 55% theo chiều dọc của nhãn cha).
  5. Đặt Name thành BodyTextLabel.
  6. Đặt FontFace thành Montserrat để phù hợp với thẩm mỹ tương lai.
  7. Đặt Weight thành Bold để làm dày phông chữ.
  8. Đặt Text thành Đang tái sinh….
  9. Đặt TextColor3 thành 255, 255, 255 để làm cho văn bản có màu trắng.
  10. Kích hoạt TextScaled.
Tạo tiêu đề.
1. Chèn một ImageLabel vào Block.
2. Chọn nhãn mới, sau đó trong cửa sổ Properties,
  1. Đặt AnchorPoint thành 0.5, 1 để đặt điểm gốc của nhãn ở giữa dưới của nó (50% từ trái sang phải của nhãn, và 100% từ trên xuống dưới của nhãn).
  2. Đặt BackgroundTransparency thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
  3. Đặt Position thành {0.5, 0},{0, 0} để đặt nhãn ở giữa trên của nhãn cha (50% từ trái sang phải của nhãn cha, và 0% từ trên xuống dưới của nhãn cha).
  4. Đặt Size thành {0.46, 0},{0.56, 0} để mở rộng nhãn (46% theo chiều ngang và 56% theo chiều dọc của nhãn cha).
  5. Đặt Name thành Header.
  6. Đặt Image thành rbxassetid://14304826985 để làm cho hình ảnh thành một hiệu ứng mờ đa hướng.
  7. Đặt ImageColor thành 245, 46, 46 để làm cho hiệu ứng mờ có màu đỏ để chỉ ra rằng người chơi tạm thời không hoạt động khi họ bị loại ra khỏi vòng.
3. Chèn một TextLabel vào Header cho văn bản thông tin.
4. Chọn nhãn mới, sau đó trong cửa sổ Properties,
  1. Đặt AnchorPoint thành 0.5, 0.5 để đặt điểm gốc của nhãn ở giữa của nó (50% từ trái sang phải của nhãn, và 50% từ trên xuống dưới của nhãn).
  2. Đặt BackgroundTransparency thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
  3. Đặt Position thành {0.5, 0},{0.5, 0} để đặt nhãn ở giữa của nhãn cha (50% từ trái sang phải của nhãn cha, và 50% từ trên xuống dưới của nhãn cha).
  4. Đặt Size thành {.85, 0},{0.55, 0} để văn bản có thể chiếm hầu hết khu vực mờ (85% theo chiều ngang và 55% theo chiều dọc của nhãn cha).
  5. Đặt Name thành HeaderTextLabel.
  6. Đặt FontFace thành Montserrat để phù hợp với thẩm mỹ tương lai.
  7. Đặt Weight thành Black để làm dày phông chữ.
  8. Đặt Text thành BỊ LOẠI - BẠN ĐÃ RA!
  9. Đặt TextColor3 thành 255, 255, 255 để làm cho văn bản có màu trắng.
  10. Kích hoạt TextScaled.
Tạo hiệu ứng mờ xung quanh các viền của màn hình.
1. Chèn một ImageLabel vào OutStateGui.
2. Chọn nhãn mới, sau đó trong cửa sổ Properties,
  1. Đặt AnchorPoint thành 0.5, 0.5 để đặt điểm gốc của nhãn ở giữa của nó (50% từ trái sang phải của nhãn, và 50% từ trên xuống dưới của nhãn).
  2. Đặt BackgroundColor3 thành 0,0,0 để đặt màu nền của nhãn thành màu đen.
  3. Đặt BackgroundTransparency thành 0.5 để làm cho nền của nhãn trở nên nửa trong suốt.
  4. Đặt Position thành {0.5, 0},{0.5, 0} để đặt nhãn ở giữa của container của nó (50% từ trái sang phải của ScreenGui cha, và 50% từ trên xuống dưới của ScreenGui cha).
  5. Đặt Size thành {1, 0},{1, 0} để mở rộng nhãn ra toàn bộ màn hình (100% theo chiều ngang và 100% theo chiều dọc của ScreenGui cha).
  6. Đặt ZIndex thành -1 để hiển thị hiệu ứng mờ phía sau các phần tử UI khác.
  7. Đặt Name thành Header.
  8. Đặt Image thành rbxassetid://14309518613 để làm cho hình ảnh thành một hiệu ứng mờ viền.
  9. Đặt ImageTransparency thành 0.1 để làm cho hiệu ứng mờ hơi trong suốt.
Để cải thiện hiệu suất, bạn có thể bỏ qua tài sản hình ảnh và thay vào đó sử dụng một đối tượng UIGradient với một chuỗi số độ trong suốt tùy chỉnh. Để tìm hiểu thêm về kỹ thuật mờ này, xem Các Bộ điều chỉnh Giao diện Người dùng - Gradient.
Tham khảo các script ReplicatedStorage sau trong tệp mẫu Laser Tag mà hiển thị chương trình màn hình tái sinh khi sức khỏe của người chơi đạt đến không, và họ đang trong quá trình tái sinh trở lại khu vực xuất hiện của đội họ.

Script client ReplicatedStorage.PlayerStateHandler sau chứa các hàm kích hoạt các loại hành vi khác nhau theo thuộc tính playerState. Tất cả các phản ứng sự kiện được nhóm lại một cách hợp lý trong script này vì chúng yêu cầu hành vi tương tự về việc kích hoạt hoặc vô hiệu hóa điều khiển của người chơi, chuyển động camera, và lớp UI nào là hiển thị.

Khi sức khỏe của một người chơi đạt đến không, playerState của họ trở thành TaggedOut, điều này kích hoạt hàm onTaggedOut(). onTaggedOut() ngay lập tức kích hoạt các hành vi sau:

Người chơi không thể di chuyển trong đấu trường.
Người chơi không thể di chuyển camera của họ.
Người chơi không thể sử dụng súng của họ.
StarterGui.OutStateGui trở nên được kích hoạt độc quyền.

Khi người chơi tái sinh, playerState của họ trở thành SelectingBlaster, điều này kích hoạt hàm onSelectingBlaster(). onSelectingBlaster() sau đó kích hoạt độc quyền StarterGui.PickABlasterGui, điều này tự động vô hiệu hóa màn hình tái sinh. Để biết thêm thông tin về các điều kiện này, xem Xử lý Trạng thái Khách hàng từ chương trình giảng dạy Lập trình Gameplay.

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Players = game:GetService("Players")

local PlayerState = require(ReplicatedStorage.PlayerState)
local PlayerAttribute = require(ReplicatedStorage.PlayerAttribute)
local BlasterState = require(ReplicatedStorage.Blaster.BlasterState)
local togglePlayerMovement = require(script.togglePlayerMovement)
local togglePlayerCamera = require(script.togglePlayerCamera)
local scheduleDestroyForceField = require(ReplicatedStorage.scheduleDestroyForceField)

local localPlayer = Players.LocalPlayer

local playerGui = localPlayer.PlayerGui
local guiLayers = {
	playerGui:WaitForChild("HUDGui"),
	playerGui:WaitForChild("OutStateGui"),
	playerGui:WaitForChild("PickABlasterGui"),
}

-- Vô hiệu hóa tất cả các lớp UI ngoại trừ ngoại lệ đã cho
local function setGuiExclusivelyEnabled(enabledGui: ScreenGui?)
	-- guiLayers chứa danh sách các gui mà nên được đặt độc quyền.
	for _, screenGui in guiLayers do
		screenGui.Enabled = screenGui == enabledGui
	end
end

local function onSelectingBlaster()
	-- Kích hoạt camera để người chơi có thể nhìn xung quanh trong khi chọn súng
	togglePlayerCamera(true)
	togglePlayerMovement(false)
	setGuiExclusivelyEnabled(playerGui.PickABlasterGui)

	-- Vô hiệu hóa súng trong khi chọn súng
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onPlaying()
	-- Kích hoạt di chuyển của người chơi sau khi chọn súng
	togglePlayerMovement(true)
	setGuiExclusivelyEnabled(playerGui.HUDGui)

	-- Kích hoạt súng trong khi chơi
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Ready)

	-- Lên lịch logic phá hủy lực trường khi người chơi bắt đầu chơi
	scheduleDestroyForceField()
end

local function onTaggedOut()
	-- Vô hiệu hóa điều khiển trong khi bị loại ra
	togglePlayerMovement(false)
	togglePlayerCamera(false)
	setGuiExclusivelyEnabled(playerGui.OutStateGui)

	-- Vô hiệu hóa súng trong khi bị loại ra
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onInLobby()
	-- Kích hoạt điều khiển trong khi ở trong sảnh
	togglePlayerMovement(true)
	togglePlayerCamera(true)

	-- Ẩn tất cả HUD trong khi ở trong sảnh
	setGuiExclusivelyEnabled(nil)

	-- Vô hiệu hóa súng trong khi ở trong sảnh
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onPlayerStateChanged(newPlayerState: string)
	if newPlayerState == PlayerState.SelectingBlaster then
		onSelectingBlaster()
	elseif newPlayerState == PlayerState.Playing then
		onPlaying()
	elseif newPlayerState == PlayerState.TaggedOut then
		onTaggedOut()
	elseif newPlayerState == PlayerState.InLobby then
		onInLobby()
	else
		warn(`Trạng thái người chơi không hợp lệ ({newPlayerState})`)
	end
end

-- Xử lý trạng thái người chơi ban đầu nếu được thiết lập
local initialPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
onPlayerStateChanged(initialPlayerState)

local function updateFromPlayerState()
	onPlayerStateChanged(localPlayer:GetAttribute(PlayerAttribute.playerState))
end

-- Xử lý các cập nhật trạng thái người chơi trong tương lai
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(updateFromPlayerState)

-- Đảm bảo rằng các thay đổi vẫn được áp dụng sau khi tái sinh
localPlayer.CharacterAdded:Connect(updateFromPlayerState)

Bây giờ, bất cứ khi nào sức khỏe của một người chơi đạt đến không, màn hình tái sinh sẽ hiển thị cho đến khi người chơi tái sinh trở lại khu vực xuất hiện của họ.

Bây giờ bạn đã quen thuộc với các GuiObjects phổ biến cho giao diện người dùng trên màn hình, hãy thử tái tạo đối tượng RoundResultsGui ScreenGui và tất cả các con của nó cho hiển thị trên màn hình khi người chơi thắng hoặc thua một trận đấu. Bạn có thể sử dụng tệp mẫu trò chơi laser tag Laser Tag .rbxl làm tham khảo, hoặc điều chỉnh các giá trị để đáp ứng yêu cầu gameplay của trò chơi của riêng bạn.

Tạo các đối tượng SurfaceGui

Để hiển thị UI trên bề mặt của một phần trong không gian 3D mà phản ứng với logic lập trình cho mỗi người chơi riêng lẻ, bạn có thể gán một đối tượng SurfaceGui cho phần mà bạn muốn hiển thị UI của bạn trong dịch vụ ReplicatedStorage. Kỹ thuật này đảm bảo rằng UI và logic lập trình của nó có sẵn cho cả máy chủ và mỗi client của người chơi.

Các đối tượng SurfaceGui chứa tất cả các GuiObjects hiển thị trên bề mặt của một phần trong không gian 3D. Trò chơi laser tag mẫu chỉ bao gồm một instance của một đối tượng SurfaceGui: đồng hồ cooldown hiển thị trên mỗi súng của người chơi. Đối tượng này cần logic lập trình cho mỗi người chơi vì nó phản ứng tích cực với đầu vào của từng người chơi riêng lẻ, và cung cấp phản hồi hình ảnh về khi nào họ có thể bắn súng của mình một lần nữa.

Để tạo một đối tượng SurfaceGui:

Trong cửa sổ Explorer, di chuột qua dịch vụ ReplicatedStorage, sau đó nhấp vào biểu tượng ⊕. Một menu ngữ cảnh hiển thị.
Từ menu ngữ cảnh, chèn một đối tượng Part.
Chèn một đối tượng ScreenGui vào phần.
Đổi tên SurfaceGui theo ngữ cảnh của các phần tử UI con của nó.
Lặp lại quy trình này cho mỗi phần tử UI bạn cần hiển thị trên bề mặt của một phần trong không gian 3D.

Đồng hồ cooldown

Một đồng hồ cooldown là một thành phần UI thông báo cho người chơi biết họ phải chờ bao lâu trước khi có thể bắn súng của mình một lần nữa. Sự tạm dừng nhẹ này ngăn người chơi bắn nhanh như họ có thể nhấp chuột hoặc nhấn nút, điều này không thực tế cho gameplay laser tag.

Để tái tạo chính xác đồng hồ cooldown trong trò chơi mẫu Laser Tag:

Tạo một phần để giữ đối tượng SurfaceGui của bạn.
1. Trong cửa sổ Explorer, di chuột qua Workspace, sau đó nhấp vào biểu tượng ⊕. Một menu ngữ cảnh hiển thị.
2. Từ menu ngữ cảnh, chèn một phần block. Đây là một vị trí tạm thời cho phần để bạn có thể hình dung các thay đổi trong mỗi bước của quy trình.
Định vị và định hướng phần xung quanh vị trí mà nhân vật của người chơi sẽ giữ súng của họ, sau đó trong cửa sổ Properties,
1. Đặt Transparency thành 1 để làm cho phần hoàn toàn trong suốt.
2. Đặt Name thành CooldownBarPrefab.
3. Đặt Size thành 0.169, 0.027, 2.537 để điều chỉnh kích thước phần đến kích thước khoảng chiều dài của súng.
4. Vô hiệu hóa CanCollide và CanQuery.
Chèn một SurfaceGui vào CooldownBarPrefab.
Chọn SurfaceGui mới, sau đó trong cửa sổ Properties,
1. Đặt Face thành Top để UI hiển thị hướng lên trên.
2. Đặt LightInfluence và MaxDistance thành 0.
3. Đặt PixelsPerStud thành 200.
Tạo thanh màu đen.
1. Chèn một ImageLabel vào SurfaceGui.
2. Chọn nhãn mới, sau đó trong cửa sổ Properties,
  1. Xóa giá trị Image mặc định.
  2. Đặt AnchorPoint thành 0.5, 0.5 để đặt điểm gốc của nhãn ở giữa của nó (50% từ trái sang phải của nhãn, và 50% từ trên xuống dưới của nhãn).
  3. Đặt BackgroundColor3 thành 0,0,0 để đặt màu nền của nhãn thành màu đen.
  4. Đặt BackgroundTransparency thành 0.4 để làm cho nền của nhãn trở nên nửa trong suốt.
  5. Đặt Position thành {0.5, 0},{0.5, 0} để đặt nhãn ở giữa của container (50% từ trái sang phải của SurfaceGui cha, và 50% từ trên xuống dưới của SurfaceGui cha).
  6. Đặt Size thành {1, 0},{1, 0} để mở rộng nhãn ra toàn bộ phần (100% theo chiều ngang và 100% theo chiều dọc của SurfaceGui cha).
  7. Đặt Name thành Container.
Làm tròn các góc của container.
1. Chèn một đối tượng UICorner vào Container.
2. Chọn UICorner, sau đó trong cửa sổ Properties, đặt CornerRadius thành 0.15, 0 để làm tròn nhẹ các góc.
Tạo thanh màu đỏ.
1. Chèn một ImageLabel vào Container.
2. Chọn nhãn mới, sau đó trong cửa sổ Properties,
  1. Xóa giá trị Image mặc định.
  2. Đặt AnchorPoint thành 1, 0.5 để đặt điểm gốc của nhãn ở giữa bên phải của nó (100% từ trái sang phải của nhãn, và 50% từ trên xuống dưới của nhãn).
  3. Đặt BackgroundColor3 thành 172, 13, 13 để đặt màu nền của nhãn thành màu đỏ đậm.
  4. Đặt BackgroundTransparency thành 0.2 để làm cho nền của nhãn hơi trong suốt.
  5. Đặt Name thành Bar.
  6. Đặt Position thành {1, 0},{0.5, 0} để đặt nhãn ở giữa bên phải của container (100% từ trái sang phải của nhãn cha, và 50% từ trên xuống dưới của nhãn cha).
  7. Đặt Size thành {0, 0},{1, 0} để kéo dài nhãn đến đỉnh của nhãn cha (0% theo chiều ngang và 100% theo chiều dọc của nhãn cha). Bước này cũng có lợi cho hành vi tweening xảy ra trong các script ở bước 8.
Làm tròn các góc của nhãn.
1. Chèn một đối tượng UICorner vào Bar.
2. Chọn UICorner, sau đó trong cửa sổ Properties, đặt CornerRadius thành 0.15, 0 để làm tròn nhẹ các góc.
Di chuyển CooldownBarPrefab vào ReplicatedStorage.
1. Tạo một cấu trúc thư mục để tổ chức các đối tượng UI của bạn. Mẫu sử dụng một thư mục Instances với một thư mục con Guis.
2. Di chuyển CooldownBarPrefab vào Guis.
Tham khảo các script ReplicatedStorage sau trong tệp mẫu Laser Tag mà gán đồng hồ cooldown cho súng của người chơi, sau đó hoạt hình thanh đỏ sau khi người chơi bắn súng của họ.

Script client ReplicatedStorage.FirstPersonBlasterVisuals sau xử lý tất cả logic hình ảnh cho súng của người chơi ở chế độ người thứ nhất. Nó yêu cầu một bộ các module script hoạt động cùng nhau để thiết lập hình ảnh súng cảm giác thực tế hơn cho gameplay laser tag, bao gồm FirstPersonBlasterVisuals.addCooldownBar và FirstPersonBlasterVisuals.runCooldownBarEffect.

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Workspace = game:GetService("Workspace")
local RunService = game:GetService("RunService")

local BlastData = require(ReplicatedStorage.Blaster.BlastData)
local PlayerAttribute = require(ReplicatedStorage.PlayerAttribute)
local PlayerState = require(ReplicatedStorage.PlayerState)
local getBlasterConfig = require(ReplicatedStorage.Blaster.getBlasterConfig)

local runBlastVisuals = require(script.runBlastVisuals)
local setupAnimations = require(script.setupAnimations)
local addCooldownBar = require(script.addCooldownBar)
local runCooldownBarEffect = require(script.runCooldownBarEffect)

local laserBlastedBindableEvent = ReplicatedStorage.Instances.LaserBlastedBindableEvent

local RIG_OFFSET_FROM_CAMERA = CFrame.new(2, -2, -3) * CFrame.Angles(math.rad(0.25), math.rad(95.25), 0)

local localPlayer = Players.LocalPlayer
local currentCamera = Workspace.CurrentCamera

local rigModel = nil
local cooldownBar = nil
local animations = {}

local function addFirstPersonVisuals()
	local blasterConfig = getBlasterConfig()

	-- Thêm rig ở chế độ người thứ nhất
	rigModel = blasterConfig.RigModel:Clone()
	rigModel.Parent = Workspace

	-- Thêm cooldownBar
	cooldownBar = addCooldownBar(rigModel.PrimaryPart.CooldownBarAttachment)

	animations = setupAnimations(blasterConfig, rigModel)
end

local function removeFirstPersonVisuals()
	for _, animation in animations do
		animation:Stop()
		animation:Destroy()
		animation = nil
	end
	if rigModel then
		-- Điều này cũng phá hủy đồng hồ cooldown vì nó được gán cho rig
		rigModel:Destroy()
		rigModel = nil
	end
end

-- Chạy hiệu ứng hình ảnh ở chế độ người thứ nhất khi một vụ nổ xảy ra
laserBlastedBindableEvent.Event:Connect(function(blastData: BlastData.Type)
	runBlastVisuals(rigModel.PrimaryPart.TipAttachment, blastData, animations.blastAnimation)
	runCooldownBarEffect(cooldownBar)
end)

-- Gán rig cho camera nếu nó tồn tại
RunService.RenderStepped:Connect(function()
	if rigModel then
		-- Cập nhật CFrame của rig tương đối với vị trí của camera và RIG_OFFSET_FROM_CAMERA
		rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
	end
end)

-- Xử lý việc thay đổi hình ảnh khi loại súng thay đổi trong khi chơi
localPlayer:GetAttributeChangedSignal(PlayerAttribute.blasterType):Connect(function()
	local playerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	if playerState == PlayerState.Playing then
		removeFirstPersonVisuals()
		addFirstPersonVisuals()
	end
end)

-- Xử lý việc thay đổi hình ảnh khi trạng thái người chơi thay đổi
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()
	local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	-- Xóa hình ảnh khi người chơi đang chọn súng hoặc đang ở trong sảnh
	if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then
		removeFirstPersonVisuals()
	-- Thêm hình ảnh trở lại khi người chơi hoàn thành việc chọn súng.
	elseif newPlayerState == PlayerState.Playing then
		addFirstPersonVisuals()
	end
end)

Bây giờ, bất cứ khi nào một người chơi bắn súng của họ, thanh cooldown sẽ hoạt hình để thông báo khi nào người chơi có thể bắn lại.

Tạo các đối tượng BillboardGui

Để hiển thị các phần tử UI trong không gian 3D mà phản ứng với logic lập trình và luôn hướng về camera của mỗi người chơi bất kể góc nhìn của họ, chẳng hạn như tên người chơi hoặc đánh dấu bản đồ, bạn có thể tạo một đối tượng BillboardGui làm con của một BasePart hoặc Attachment tồn tại trong không gian 3D.

Trò chơi laser tag mẫu bao gồm hai đối tượng BillboardGui riêng biệt trong dịch vụ ReplicatedStorage:

OtherPlayerIndicatorGuiPrefab - Hiển thị một vòng tròn màu hồng hoặc xanh lá cây phía trên đầu mỗi người chơi khi họ đang hoạt động trong một vòng.
TaggedOutIndicatorGuiPrefab - Hiển thị phía trên đầu một người chơi khi họ bị loại ra khỏi vòng.

Sau khi bạn tạo một đối tượng BillboardGui, bạn có thể tạo và tùy chỉnh các GuiObjects con của nó theo mục đích của từng container. Để minh họa, trong các phần ngay sau đây, bạn sẽ học cách triển khai các phần tử UI cho cả hai loại chỉ báo trong trò chơi laser tag mẫu. Bạn có thể điều chỉnh bất kỳ phần nào của quy trình để đáp ứng các thông số kỹ thuật của trò chơi của riêng bạn.

Để tạo một đối tượng BillboardGui:

Trong cửa sổ Explorer, di chuột qua một BasePart hoặc Attachment, sau đó nhấp vào biểu tượng ⊕. Một menu ngữ cảnh hiển thị.
Từ menu ngữ cảnh, chèn một đối tượng BillboardGui.
Đổi tên BillboardGui theo ngữ cảnh của các phần tử UI con của nó.
Lặp lại quy trình này cho mỗi phần tử UI bạn cần hiển thị trên đầu của người chơi.

Chỉ báo đội

Một chỉ báo đội là một phần tử UI thông báo cho người chơi đội nào mà các người chơi khác trong vòng thuộc về để họ có thể dễ dàng phân biệt giữa đồng minh và thành viên đội đối phương. Thông tin này rất quan trọng vì gameplay của một trò chơi bắn súng ở chế độ người thứ nhất yêu cầu người chơi đưa ra quyết định chiến lược nhanh chóng trong khi họ đang ở trong các khu vực chiến đấu để họ không bị loại ra và thua trận.

Để tái tạo chính xác chỉ báo đội trong trò chơi mẫu Laser Tag:

Chèn một đối tượng BillboardGui vào một rig tạm thời.
1. Từ tab Home hoặc Avatar trên thanh công cụ, nhấp vào Character.
2. Chọn từ các tùy chọn có sẵn. Mẫu sử dụng loại rig R15, hình dáng cơ thể nữ, và avatar Rthro. Rig hiển thị cả trong viewport 3D và trong cửa sổ Explorer dưới tên Rig.
3. Trong cửa sổ Explorer, điều hướng đến mesh Head của rig, sau đó nhấp vào biểu tượng ⊕. Một menu ngữ cảnh hiển thị.
4. Từ menu ngữ cảnh, chèn một BillboardGui.
Chọn BillboardGui mới, sau đó trong cửa sổ Properties,
1. Đặt LightInfluence thành 0 để ngăn ánh sáng môi trường ảnh hưởng đến màu sắc của chỉ báo.
2. Đặt Name thành OtherPlayerIndicatorPrefab.
3. Đặt Size thành {0, 10},{0, 10} để làm cho nhãn nhỏ hơn đáng kể.
4. Đặt StudsOffsetWorldSpace thành 0, 4, 0 để định vị nó phía trên đầu của rig.
Chèn một đối tượng Frame vào OtherPlayerIndicatorPrefab.
Chọn khung mới, sau đó trong cửa sổ Properties,
1. Đặt AnchorPoint thành 0.5, 0.5 để đặt điểm gốc của khung ở giữa của nó (50% từ trái sang phải của nhãn, và 50% từ trên xuống dưới của nhãn).
2. Đặt BackgroundColor3 thành 255, 3, 0 để đặt màu nền của khung thành màu đỏ như một màu thay thế.
3. Đặt Position thành {0.5, 0},{0.5, 0} để đặt khung ở giữa của container (50% từ trái sang phải của BillboardGui cha, và 50% từ trên xuống dưới của BillboardGui cha).
4. Đặt Size thành {1, -2},{1, -2} để rút ngắn khung đến diện tích bề mặt của BillboardGui.
Chèn một đối tượng UICorner vào Frame để làm tròn hoàn toàn các góc.
Chèn một đối tượng UIStroke vào Frame để viền vòng tròn của chỉ báo.
Di chuyển OtherPlayerIndicatorPrefab vào ReplicatedStorage.
Tham khảo script ReplicatedStorage sau trong tệp mẫu Laser Tag 1A mà hiển thị chương trình chỉ báo đội cho mỗi người chơi trong một vòng hoạt động trừ khi họ ở đội đối phương và bị che khuất.

Script ReplicatedStorage.OtherPlayerIndicatorGuiSetup sau chạy khi người chơi xuất hiện vào đấu trường cho một vòng hoạt động. Nó gán chỉ báo đội bằng cách gọi hàm addIndicatorToCharacter(), hàm này tìm đối tượng Head của mỗi nhân vật người chơi tham gia vào vòng. Nếu họ chưa có chỉ báo đội, script sau đó sao chép và thêm UI otherPlayerIndicatorPrefab vào Head của nhân vật, và đặt màu chỉ báo đội thành màu đội của họ.

Nếu các người chơi khác ở cùng đội, chỉ báo đội luôn hiển thị, ngay cả khi họ ẩn sau các đối tượng trong không gian 3D; nếu các người chơi khác ở đội đối phương, chỉ báo đội chỉ hiển thị nếu không có đối tượng nào trong không gian 3D che khuất họ.

local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local localPlayer = Players.LocalPlayer
local otherPlayerIndicatorPrefab = ReplicatedStorage.Instances.Guis.OtherPlayerIndicatorPrefab

local characterSpawnConnectionsByPlayer: { [Player]: RBXScriptConnection } = {}
local playerAddedConnection: RBXScriptConnection?

local function removeIndicatorFromPlayer(player: Player)
	if not player.Character then
		return
	end

	local head = player.Character:WaitForChild("Head", 3)
	if not head then
		return
	end

	local gui = head:FindFirstChild(otherPlayerIndicatorPrefab.Name)
	if gui then
		gui:Destroy()
	end
end

local function addIndicatorToCharacter(otherCharacter: Model?)
	local otherPlayer = Players:GetPlayerFromCharacter(otherCharacter)
	if not otherPlayer then
		return
	end

	task.spawn(function()
		local otherHead = otherCharacter:WaitForChild("Head", 3)
		if not otherHead then
			return
		end

		-- Chỉ thêm chỉ báo cho những người chơi tham gia vào vòng
		if not otherPlayer.Team then
			return
		end

		-- Tránh thêm chỉ báo trùng lặp, chỉ tạo một cái mới nếu nó không tồn tại
		local gui = otherHead:FindFirstChild(otherPlayerIndicatorPrefab.Name)
		if not gui then
			gui = otherPlayerIndicatorPrefab:Clone()
			gui.Frame.BackgroundColor3 = otherPlayer.TeamColor.Color
			gui.Parent = otherHead
		end

		-- Chỉ báo luôn ở trên cùng chỉ nếu người chơi là bạn bè

		local isFriendly = otherPlayer.Team == localPlayer.Team
		gui.AlwaysOnTop = isFriendly
	end)
end

local function addIndicatorWhenCharacterSpawns(player: Player)
	if characterSpawnConnectionsByPlayer[player] then
		return
	end
	local connection = player.CharacterAdded:Connect(addIndicatorToCharacter)
	characterSpawnConnectionsByPlayer[player] = connection
end

local function stopSyncingIndicators()
	for _, connection in characterSpawnConnectionsByPlayer do
		connection:Disconnect()
	end
	table.clear(characterSpawnConnectionsByPlayer)

	if playerAddedConnection then
		playerAddedConnection:Disconnect()
		playerAddedConnection = nil
	end

	for _, player in Players:GetPlayers() do
		removeIndicatorFromPlayer(player)
	end
end

local function addIndicatorToPlayer(player: Player)
	if player == localPlayer then
		return
	end

	addIndicatorToCharacter(player.Character)
	addIndicatorWhenCharacterSpawns(player)
end

local function startSyncingIndicators()
	for _, player in Players:GetPlayers() do
		addIndicatorToPlayer(player)
	end

	if not playerAddedConnection then
		playerAddedConnection = Players.PlayerAdded:Connect(addIndicatorToPlayer)
	end
end

local function onLocalTeamChanged()
	local localTeam = localPlayer.Team
	if localTeam then
		startSyncingIndicators()
	else
		stopSyncingIndicators()
	end
end

localPlayer:GetPropertyChangedSignal("Team"):Connect(onLocalTeamChanged)
onLocalTeamChanged()

Bây giờ, bất cứ khi nào một người chơi ở trong một vòng hoạt động, các chỉ báo đội sẽ hiển thị phía trên đầu của các người chơi khác trừ khi họ ở đội đối phương và bị che khuất bởi một đối tượng.

Chỉ báo bị loại ra

Một chỉ báo bị loại ra là một phần tử UI thông báo cho người chơi khi các người chơi khác không còn hoạt động trong vòng và đang trong quá trình tái sinh trở lại khu vực xuất hiện của họ. Thông tin này rất quan trọng vì gameplay của một trò chơi bắn súng ở chế độ người thứ nhất yêu cầu người chơi di chuyển đến mục tiêu tiếp theo ngay khi họ loại ra một người chơi để họ không trở nên dễ bị tổn thương trong đấu trường bằng cách chơi ở cùng một vị trí quá lâu.

Để tái tạo chính xác chỉ báo bị loại ra trong trò chơi mẫu Laser Tag:

Chèn một đối tượng BillboardGui vào một rig tạm thời để bạn có thể hình dung các thay đổi trong mỗi bước của quy trình.
1. Từ tab Home hoặc Avatar trên thanh công cụ, nhấp vào Character.
2. Chọn từ các tùy chọn có sẵn. Mẫu sử dụng loại rig R15, hình dáng cơ thể nam, và avatar Rthro. Rig hiển thị cả trong viewport 3D và trong cửa sổ Explorer dưới tên Rig.
3. Trong cửa sổ Explorer, điều hướng đến mesh Head của rig, sau đó nhấp vào biểu tượng ⊕. Một menu ngữ cảnh hiển thị.
4. Từ menu ngữ cảnh, chèn một BillboardGui.
Chọn BillboardGui mới, sau đó trong cửa sổ Properties,
1. Đặt LightInfluence thành 0 để ngăn ánh sáng môi trường ảnh hưởng đến màu sắc của chỉ báo.
2. Đặt Name thành TaggedOutIndicatorGuiPrefab.
3. Đặt Size thành {3, 0},{0.5, 0} để mở rộng không gian cho một nhãn.
4. Đặt StudsOffset thành 0, 3.25, 0 để định vị nó phía trên đầu của người chơi.
Chèn một đối tượng ImageLabel vào TaggedOutIndicatorGuiPrefab.
Chọn nhãn mới, sau đó trong cửa sổ Properties,
1. Đặt AnchorPoint thành 0.5, 0.5 để đặt điểm gốc của nhãn ở giữa của nó (50% từ trái sang phải của nhãn, và 50% từ trên xuống dưới của nhãn).
2. Đặt BackgroundTransparency thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
3. Đặt Name thành Frame.
4. Đặt Position thành {0.5, 0},{0.5, 0} để đặt nhãn ở giữa của container (50% từ trái sang phải của BillboardGui cha, và 50% từ trên xuống dưới của BillboardGui cha).
5. Đặt Size thành {1, 0},{1, 0} để mở rộng nhãn ra toàn bộ BillboardGui (100% theo chiều ngang và 100% theo chiều dọc của BillboardGui cha).
6. Đặt Image thành rbxassetid://14304826985 để làm cho hình ảnh thành một hiệu ứng mờ đa hướng.
7. Đặt ImageColor thành 245, 46, 46 để nhuộm nhãn thành màu đỏ.
Để cải thiện hiệu suất, bạn có thể bỏ qua tài sản hình ảnh và thay vào đó sử dụng một đối tượng UIGradient với một chuỗi số độ trong suốt tùy chỉnh. Để tìm hiểu thêm về kỹ thuật mờ này, xem Các Bộ điều chỉnh Giao diện Người dùng - Gradient.
Chèn một đối tượng TextLabel vào Frame.
Chọn nhãn mới, sau đó trong cửa sổ Properties,
1. Đặt AnchorPoint thành 0.5, 0.5 để đặt điểm gốc của nhãn ở giữa của nó (50% từ trái sang phải của nhãn, và 50% từ trên xuống dưới của nhãn).
2. Đặt BackgroundTransparency thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
3. Đặt Name thành BodyTextLabel.
4. Đặt Position thành {0.5, 0},{0.5, 0} để đặt nhãn ở giữa của container (50% từ trái sang phải của nhãn cha, và 50% từ trên xuống dưới của nhãn cha).
5. Đặt Size thành {0.85, 0},{0.7, 0} để văn bản có thể chiếm hầu hết khu vực mờ (85% theo chiều ngang và 70% theo chiều dọc của nhãn hình ảnh cha).
6. Đặt FontFace thành Montserrat để phù hợp với thẩm mỹ tương lai.
7. Đặt Weight thành Bold để làm dày phông chữ.
8. Đặt Text thành BỊ LOẠI.
9. Đặt TextColor3 thành 255, 255, 255 để làm cho văn bản có màu trắng.
10. Kích hoạt TextScaled.
Di chuyển TaggedOutIndicatorGuiPrefab vào ReplicatedStorage.
Tham khảo các script ServerScriptService trong tệp mẫu Laser Tag 1A mà hiển thị chương trình chỉ báo bị loại ra trong khi một người chơi đang tái sinh trở lại khu vực xuất hiện của đội họ.

Mã script máy chủ ServerScriptService.SetupHumanoid sau đây sẽ chạy ngay khi một người chơi tải trò chơi. Nó đảm bảo rằng mỗi khi một nhân vật của người chơi được thêm vào mô hình dữ liệu, setupHumanoidAsync sẽ được gọi với Humanoid của họ.

local Players = game:GetService("Players")

local setupHumanoidAsync = require(script.setupHumanoidAsync)

local function onCharacterAdded(player: Player, character: Model)
	local humanoid = character:WaitForChild("Humanoid")
	setupHumanoidAsync(player, humanoid)
end

local function onPlayerAdded(player: Player)
	-- Gọi onCharacterAdded nếu người chơi đã có một nhân vật
	if player.Character then
		onCharacterAdded(player, player.Character)
	end
	-- Gọi onCharacterAdded cho tất cả các lần xuất hiện nhân vật trong tương lai của người chơi này
	player.CharacterAdded:Connect(function(character: Model)
		onCharacterAdded(player, character)
	end)
end

-- Gọi onPlayerAdded cho bất kỳ người chơi nào đã có trong trò chơi
for _, player in Players:GetPlayers() do
	onPlayerAdded(player)
end
-- Gọi onPlayerAdded cho tất cả người chơi trong tương lai
Players.PlayerAdded:Connect(onPlayerAdded)

Bây giờ, bất cứ khi nào sức khỏe của một người chơi đạt đến zero, chỉ báo bị loại ra sẽ hiển thị trên đầu họ cho đến khi họ hồi sinh.

Chúc mừng bạn đã hoàn thành Chương trình Thiết kế Giao diện Người dùng! Bây giờ bạn đã có kinh nghiệm tạo một phong cách nghệ thuật, phác thảo các bố cục của bạn và triển khai thiết kế của bạn trong Studio từ đầu đến cuối, bạn có thể mở rộng dự án của mình với UI và chức năng mới, hoặc theo dõi các chương trình hướng dẫn bổ sung, chẳng hạn như Chương trình Lập trình Gameplay dạy bạn về tổ chức chung và các chi tiết thực hiện chính của trò chơi laser tag mẫu. Chúc bạn sáng tạo vui vẻ!