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 yếu tố UI tích hợp sẵn và tùy chỉnh với các tập lệnh 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à lúc bạn có thể thấy tất cả các thiết kế và công việc khó khăn của bạn kết hợp thành một bộ các quy trình làm việc nhất quán hoàn chỉnh và sẵn sàng cho tương tác của người chơi.

Sử dụng kinh nghiệm thử nghiệm laser tag mẫu .rbxl làm tham chiếu, phần này của chương trình thiết kế giao diện người dùng cho bạn biết cách làm sống động kế hoạch UI của bạn, 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 kinh nghiệm 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 người chơi, bề mặt 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ải nghiệm 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 yếu tố UI để đáp ứng các thông số kỹ thuật của trải nghiệm 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 yếu 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 bắn súng, 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 lộn 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 Điểm Trúng
rbxassetid://14401148777

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

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

Để đưa thư viện tài sản từ kho của bạn vào trải nghiệm của bạn:

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 Nhận Mô hình. Thư viện tài sản hiện đã 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 Hộp công cụ. Cửa sổ Hộp công cụ sẽ mở ra.
Trong cửa sổ Hộp công cụ, nhấp vào tab Kho. Sắp xếp Mô hình của Tôi hiển thị.
Nhấp vào menu thả xuống, sau đó chọn sắp xếp 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ổ Khám phá, 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 hiện đã có thể kích hoạt bất kỳ thành phần cuối nào để tham chiếu đến 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 trong quá trình triển khai vì tỷ lệ khung hình của vùng nhì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à UI của bạn phải cả dễ đọc và dễ sử dụng 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 một loạt các 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 phân tích các biểu tượng của bạn, và người chơi với màn hình nhỏ có thể không thấy không gian 3D vì các yếu tố UI của bạn chiếm quá nhiều chỗ 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 Trình mô phỏng thiết bị.
Trong menu thả xuống độ phân giải, chọn Độ phân giải thực. Điều này cho phép bạn thấy độ phân giải thực của các yếu tố UI 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à Máy chơi game.

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

Để hiển thị các yếu 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ọ tham gia vào một trải nghiệm.

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

HUDGui - Hiển thị thông tin quan trọng về lối chơi của trải nghiệm 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 bắn súng khi người chơi bắt đầu hoặc tái gia nhập 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 súng và khi họ tạm thời bất khả xâm phạm.
OutStateGui - Hiển thị một viền tối xung quanh màn hình khi người chơi bị đánh ra ngoài.
RoundResultsGui - Hiển thị một lớp tối trên đầu 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 mỗi 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 yếu tố UI cho ba danh mục thông tin mà người chơi cần biết để thành công trong trải nghiệm 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ải nghiệm của riêng bạn.

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

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

Mục tiêu UI

Theo các thực hành tốt nhất về phân cấp 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 yếu tố UI trên màn hình liên quan đến mục tiêu của trải nghiệm. Nhóm các yếu tố UI này gần đầu màn hình vì mục tiêu và điểm số của mỗi đội có tầm quan trọng lớn nhất đối với cách 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 ra 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 thông báo của đầu đề. Để xem tổng quan cao về tất cả các kịch bản của khách hàng và máy chủ 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 Kịch bản Lối chơi.

Để tái tạo chính xác UI mục tiêu trong mẫu trải nghiệm 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ổ Khám phá, đ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 được 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ổ Thuộc tính,
  1. Đặt AnchorPoint thành 0.5, 0 để thiết lập điểm gốc của frame ở giữa đỉnh của chính nó (50% từ trái sang phải của frame, và 0% từ trên xuống dưới của frame).
  2. Đặt BackgroundTransparency thành 1 để làm cho nền của frame hoàn toàn trong suốt.
  3. Đặt Position thành {0.5, 0},{0.03, 0} để đặt frame 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 frame chiếm một phần lớn ở đầu màn hình nhằm 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 luô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 thông báo mục tiêu.
1. Chèn một Frame vào Objective.
2. Chọn Frame mới, sau đó trong cửa sổ Thuộc tính,
  1. Đặt AnchorPoint thành 0.5, 0 để thiết lập điểm gốc của frame ở giữa đỉnh của chính nó (50% từ trái sang phải của frame, và 0% từ trên xuống dưới của frame).
  2. Đặt BackgroundTransparency thành 1 để làm cho nền của frame hoàn toàn trong suốt.
  3. Đặt Position thành {0.5, 0},{0, 0} để đặt frame ở giữa bộ chứa (50% từ trái sang phải của frame cha, và 0% từ trên xuống dưới của frame cha).
  4. Đặt Size thành {1, 0},{0.67, 0} để các thành phần UI chọn chiếm hơn một nửa củ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 frame 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ổ Thuộc tính,
  1. Đặt AnchorPoint thành 0.5, 1 để thiết lập điểm gốc của nhãn ở giữa phía trên của chính 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 phía trên của frame (50% từ trái sang phải của frame cha, và 34% từ trên xuống dưới của frame 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ư nửa nó của frame (46% theo chiều ngang và 34% theo chiều dọc của frame 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 đề nửa 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 luô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ổ Thuộc tính,
  1. Đặt AnchorPoint thành 0.5, 0.5 để thiết lập điểm gốc của nhãn mới ở giữa củ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 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 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 cho phông chữ thêm dày.
  8. Đặt Text thành MỤC TIÊU.
  9. Bật TextScaled.
Tạo các phần tử nhắc nhở.
1. Chèn một ImageLabel vào ObjectiveDisplay.
2. Chọn ImageLabel, sau đó trong cửa sổ Thuộc tính,
  1. Đặt AnchorPoint thành 0.5, 1 để thiết lập điểm gốc của nhãn ở giữa phía trên của chính 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 frame cha (50% từ trái sang phải của frame cha, và 100% từ trên xuống dưới của frame cha).
  4. Đặt Size thành {0.89, 0},{0.66, 0} để mở rộng không gian văn bản gần như toàn bộ chiều rộng của frame cha (89% theo chiều ngang và 66% theo chiều dọc của frame cha).
  5. Đặt Name thành Body.
  6. Đặt Image thành rbxassetid://14304827265 để hiển thị một hình thang lộn ngược.
  7. Đặt ImageColor3 thành 0, 0, 0 để nhuộm màu hình ảnh tối.
  8. Đặt ImageTransparency thành 0.3 để làm cho đầu đề nửa 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 luô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 nhở.
5. Chọn nhãn mới, sau đó trong cửa sổ Thuộc tính,
  1. Đặt AnchorPoint thành 0.5, 0.5 để thiết lập điểm gốc của nhãn mới ở giữa củ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 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 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 cho phông chữ thêm dày.
  8. Đặt TextColor3 thành 255, 255, 255 để làm cho văn bản thành màu trắng trên nền tối.
  9. Đặt Text thành Đánh dấu những người chơi đối thủ để ghi điểm! Đội đầu tiên đến %d điểm thắng..
  10. Bật TextScaled.
Tạo một bộ chứa cho các bộ đếm đội của mục tiêu.
1. Chèn một Frame vào Objective.
2. Chọn Frame mới, sau đó trong cửa sổ Thuộc tính,
  1. Đặt AnchorPoint thành 0.5, 1 để thiết lập điểm gốc của nhãn ở giữa phía trên của chính nó (50% từ trái sang phải của frame, và 100% từ trên xuống dưới của frame).
  2. Đặt BackgroundTransparency thành 1 để làm cho nền của frame hoàn toàn trong suốt.
  3. Đặt Position thành {0.5, 0},{1, 0} để đặt frame ở giữa phía dưới của bộ chứa (50% từ trái sang phải của frame cha, và 100% từ trên xuống dưới của frame cha).
  4. Đặt Size thành {0.44, 0},{0.27, 0} để các thành phần UI chọn chiếm ít hơn một nửa của bộ chứa từ trái sang phải (44% theo chiều ngang và 27% theo chiều dọc của frame cha).
  5. Đặt Name thành TeamPointCounter.
Tạo khoảng cách cho các bộ đếm đội.
1. Chèn một đối tượng UIListLayout vào frame từ bước 5.
2. Chọn đối tượng UIListLayout, sau đó trong cửa sổ Thuộc tính,
  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ị bên cạnh nhau.
  3. Đặt HorizontalAlignment thành Center để mỗi bộ đếm đội căn chỉnh vào giữa nhau.
Tạo các phần tử cho bộ đếm đội xanh.
1. Chèn một ImageLabel vào TeamPointCounter.
2. Chọn ImageLabel, sau đó trong cửa sổ Thuộc tính,
  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 phía dưới của frame cha (50% từ trái sang phải của frame cha, và 100% từ trên xuống dưới của frame cha).
  3. Đặt Size thành {0.5, 0},{1, 0} để mở rộng nhãn đến chiều rộng nửa của frame cha (50% theo chiều ngang và 100% theo chiều dọc của frame cha).
  4. Đặt Name thành TeamACounter.
  5. Đặt Image thành rbxassetid://14304826831 để hiển thị một hiệu ứng mờ hướng.
  6. Đặt ImageColor3 thành 88, 218, 171 để nhuộm màu hình ảnh 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ổ Thuộc tính, đ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 xuất hiện.
  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 mới teamColor thành Mint.
4. Chèn một TextLabel vào TeamACounter để hiển thị một nhắc nhở.
5. Chọn nhãn mới, sau đó trong cửa sổ Thuộc tính,
  1. Đặt AnchorPoint thành 1, 0.5 để thiết lập điểm gốc của nhãn mới ở giữa phải của chính nó (100% từ trái sang phải của nhãn mới, và 50% từ trên xuống dưới của nhãn mới).
  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 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 cho phông chữ thêm dày.
  7. Đặt TextColor3 thành 255, 255, 255 để làm cho văn bản thành màu trắng trên nền tối.
  8. Đặt Text thành -.
  9. Bậ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ổ Thuộc tính, đặt Color thành 8, 78, 52 để làm nổi bật dấu gạch ngang bằng một nét đậm màu xanh lá cây.
Tạo các phần tử cho bộ đếm đội hồng.
1. Nhân bản TeamAICounter và các con của nó.
2. Chọn TeamACounter nhân bản, sau đó trong cửa sổ Thuộc tính,
  1. Đặt Name thành TeamBCounter.
  2. Đặt Image thành rbxassetid://14305849451 để hiển thị một hiệu ứng mờ trong hướng ngược lại.
  3. Đặt ImageColor3 thành 255, 170, 255 để nhuộm màu hình ảnh màu hồng nhạt.
  4. Đặt thuộc tính teamColor thành Carnation Pink.
3. Chọn nhãn TextLabel nhân bản của TeamBCounter, sau đó trong cửa sổ Thuộc tính,
  1. Đặt AnchorPoint thành 0, 0.5 để thiết lập điểm gốc của nhãn mới ở giữa 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 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 nhãn UIStroke nhân bản của TeamBCounter, sau đó trong cửa sổ Thuộc tính, đặt Color thành 158, 18, 94 để làm nổi bật dấu gạch ngang bằng một nét đậm màu hồng tối.
Tham chiếu các kịch bản ReplicatedStorage sau đây trong tệp vị trí mẫu Laser Tag có chức năng cập nhật thông báo mục tiêu và theo dõi điểm của đội.

Kịch bản sau đây 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 giao diện HUD chính, bao gồm setObjective và startSyncingTeamPoints. Sau khi một người chơi tham gia vào một vòng và chọn súng của họ, kịch bản này đảm bảo tất cả các yếu tố UI của HUD hiển thị phù hợp với 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 người chơi chọn súng 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 số của mỗi đội.

UI Bắn Súng

Theo các thực hành tốt nhất về phân cấp 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 yếu tố UI trên màn hình liên quan đến súng của người chơi. Nhóm các yếu tố UI này chiếm phần lớn không gian màn hình gần trung tâm màn hình vì nó hoạt động như một điểm nhấn để thu hút sự chú ý của người chơi đến hành động trong không gian 3D, và nó có tầm quan trọng lớn nhất đối với việc chơi trò chơi.

Nhắm

Một nhắm là một yếu tố UI thông báo cho người chơi nơi họ sẽ tạo ảnh hưởng khi họ bắn súng của mình. Yếu tố UI này là một yêu cầu quan trọng trong trò chơi cho các trải nghiệm 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 súng của họ và đánh ra các thành viên đội đối thủ.

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

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

Chèn một ImageLabel vào đối tượng HUDGui ScreenGui.
1. Trong cửa sổ Khám phá, đ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 được hiển thị.
3. Từ menu ngữ cảnh, chèn một ImageLabel.
Chọn ImageLabel mới, sau đó trong cửa sổ Thuộc tính,
1. Đặt Image thành rbxassetid://14400935446.
2. Đặt AnchorPoint thành 0.5, 0.5 để thiết lập đ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 phù hợp vào trong bộ chứa của nó và không bị kéo căng 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 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.

Điểm Trúng

Một điểm trúng là một yếu tố UI chỉ hiển thị khi một vụ nổ ảnh hưởng đến một người chơi khác trong đội đối thủ. Tương tự như nhắm, yếu tố UI này là một yêu cầu quan trọng trong trò chơi cho các trải nghiệm bắn súng góc nhìn thứ nhất vì nó cung cấp phản hồi trực quan khi người chơi thành công trong việc đánh ra đối thủ.

Để tái tạo chính xác điểm trúng trong mẫu trải nghiệm Laser Tag:

Chèn một ImageLabel vào đối tượng Crosshair ImageLabel.
1. Trong cửa sổ Khám phá, đ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 được hiển thị.
3. Từ menu ngữ cảnh, chèn một ImageLabel.
Chọn ImageLabel mới, sau đó trong cửa sổ Thuộc tính,
1. Đặt Image thành rbxassetid://14401148736 để hiển thị biểu tượng điểm trúng hình chữ nhật.
2. Đặt AnchorPoint thành 0.5, 0.5 để thiết lập đ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 hình chữ nhật xung quanh giữa nhắm.
7. Đặt ImageTransparency thành 1 để làm cho điểm trúng hoàn toàn trong suốt. Các kịch bản trong bước tiếp theo sẽ làm cho độ trong suốt quay trở lại 0 mỗi khi vụ nổ của người chơi tác động đến một người chơi trong đội đối thủ.
Tham chiếu các kịch bản ReplicatedStorage sau đây trong tệp vị trí mẫu Laser Tag có chức năng hiển thị điểm trúng khi một vụ nổ ảnh hưởng đến một người chơi trong đội đối thủ.

Kịch bản sau đây yêu cầu một tập hợp các mô-đuynkịch bản hoạt động cùng nhau để thiết lập giao diện HUD chính, bao gồm setupHitmarker. Sau khi một người chơi tham gia vào một vòng và chọn súng của họ, kịch bản này đảm bảo tất cả các yếu tố UI của HUD hiển thị phù hợp với 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ờ, mỗi khi một người chơi bắn súng của họ và vụ nổ ảnh hưởng đến một người chơi khác, điểm trúng sẽ tạm thời hiển thị.

Bộ chọn Bắn Súng

Một bộ chọn bắn súng là một thành phần UI mà người chơi sử dụng để chọn loại súng trước khi gia nhập hay tái gia nhập vòng. Trải nghiệm laser tag mẫu cung cấp hai loại súng: một cái tạo ra nhiều chùm sáng với sự lan tỏa ngang rộng, và một cái tạo ra một chùm sáng đơn. Loại súng 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 quan trọng cho toàn bộ trải nghiệm.

Các bước sau chi tiết cách tạo một số bộ chứa cho các nhóm yếu tố UI khác nhau, một tiêu đề với nhắc nhở, các nút điều hướng và chọn, và một prefab nút bắn súng. 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 bắn súng theo các thể hiện Configuration đại diện cho mỗi loại súng.

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 súng hơn mà tự động hiển thị đúng trong bộ chọn bắn súng mà không cần phải tạo các nút riêng lẻ trong StarterGui.PickABlasterGui.

Để tái tạo chính xác bộ chọn bắn súng trong mẫu trải nghiệm 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ổ Khám phá, đ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 được 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ổ Thuộc tính,
  1. Đặt AnchorPoint thành 0.5, 1 để thiết lập điểm gốc của frame ở giữa phía dưới của chính nó (50% từ trái sang phải của frame, và 100% từ trên xuống dưới của frame).
  2. Đặt BackgroundTransparency thành 1 để làm cho nền của frame hoàn toàn trong suốt.
  3. Đặt Position thành {0.5, 0},{0.9, 0} để đặt frame 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 bắn súng chiếm một phần lớn màn hình nhằm 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 frame và các yếu tố UI con của 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 yếu tố UI.
1. Chèn một Frame vào Component.
2. Chọn Frame mới, sau đó trong cửa sổ Thuộc tính,
  1. Đặt AnchorPoint thành 0.5, 0.5 để thiết lập điểm gốc của frame trong giữa của chính nó (50% từ trái sang phải của frame, và 50% từ trên xuống dưới của frame).
  2. Đặt BackgroundTransparency thành 1 để làm cho nền của frame hoàn toàn trong suốt.
  3. Đặt Position thành {0.5, 0},{0.375, 0} để đặt frame gần giữa phía trên của bộ chứa (50% từ trái sang phải của frame cha, và 37.5% từ trên xuống dưới của frame cha).
  4. Đặt Size thành {1, 0},{0.75, 0} để các thành phần UI chọn chiếm 3/4 của bộ chứa (100% theo chiều ngang và 75% theo chiều dọc của frame cha).
  5. Đặt Name thành SelectionFrame.
Tạo một nhắc nhở cho bộ chọn bắn súng.
1. Chèn một ImageLabel vào SelectionFrame.
2. Chọn ImageLabel mới, sau đó trong cửa sổ Thuộc tính,
  1. Đặt AnchorPoint thành 0.5, 1 để thiết lập điểm gốc của nhãn ở giữa phía dưới của chính 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 phía trên của frame (50% từ trái sang phải của frame cha, và 22% từ trên xuống dưới của frame 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ư nửa của frame (45% theo chiều ngang và 22% theo chiều dọc của frame 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 đề nửa 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 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 nhở.
5. Chọn nhãn mới, sau đó trong cửa sổ Thuộc tính,
  1. Đặt AnchorPoint thành 0.5, 0.5 để thiết lập điểm gốc của nhãn mới ở giữa củ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 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 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 cho phông chữ thêm dày.
  8. Đặt Text thành CHỌN MỘT BẮN SÚNG.
  9. Bật TextScaled.
Tạo bộ chứa cho nút bắn của bạn và 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ổ Thuộc tính,
  1. Xóa giá trị mặc định của Image.
  2. Đặt AnchorPoint thành 0.5, 1 để thiết lập điểm gốc của nhãn ở giữa phía dưới của chính 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 đi 30%, và phù hợp với tất cả các yếu tố UI màu đen trong trải nghiệm.
  5. Đặt Position thành {0.5, 0},{1, 0} để đặt nhãn ở giữa phía dưới của frame (50% từ trái sang phải của frame cha, và 100% từ trên xuống dưới của frame cha).
  6. Đặt Size thành {1, 0},{0.77, 0} để mở rộng diện tích nhãn đến không gian bên dưới nhắc nhở (100% theo chiều ngang và 77% theo chiều dọc của frame cha).
3. Làm 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ổ Thuộc tính, đặt CornerRadius thành 0.075, 0 để làm tròn các góc.
Tạo bộ chứa cho các nút bắn của bạn.
1. Chèn một Frame vào nhãn từ bước 4.
2. Chọn Frame mới, sau đó trong cửa sổ Thuộc tính,
  1. Đặt AnchorPoint thành 0.5, 0.5 để thiết lập điểm gốc của frame mới ở giữa của chính nó (50% từ trái sang phải của frame, và 50% từ trên xuống dưới của frame).
  2. Đặt BackgroundTransparency thành 1 để làm cho nền của frame hoàn toàn trong suốt.1. Đặt Vị trí 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 Kích thước 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 Tên thành Container.

Tạo khoảng đệm 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ố trí mới, sau đó trong cửa sổ Thuộc tính,
  1. Đặt Khoảng đệm thành 0.035, 0 để tạo khoảng trống giữa tất cả các nút tương lai.
  2. Đặt Hướng lấp đầy thành Ngang để mỗi nút hiển thị bên cạnh nhau.
  3. Đặt cả Căn chỉnh Ngang và Căn chỉnh Dọc thành Giữa để mỗi nút căn chỉnh ở 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ổ Thuộc tính,
  1. Xóa giá trị Hình ảnh mặc định.
  2. Đặt Điểm Neo 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 Độ trong suốt của Nền thành 0.15 để cung cấp phản hồi trực quan khi di chuột rằng nút có thể được chọn.
  4. Đặt Vị trí thành {0.02, 0},{0.5, 0} để tạo khoảng đệm bên trái của nút từ container 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 Kích thước 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 Tên thành NavigationButtonLeft.
3. Làm 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ổ Thuộc tính, đặt Bán kính góc thành 0.1, 0 để làm 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ổ Thuộc tính,
  1. Đặt Điểm Neo 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 Vị trí 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 giống như nó ở giữa của nút tại {0.5, 0},{0.5, 0}.
  3. Đặt Kích thước thành {0.8, 0},{0.8, 0} để mở rộng khu vực nhãn đến không gian bên dưới thông báo (80% theo chiều ngang và 80% theo chiều dọc của khung cha).
  4. Đặt Độ trong suốt của Nền thành 1 để làm cho nền của hình ảnh hoàn toàn trong suốt.
  5. Đặt Hình ảnh thành rbxassetid://14309187238.
  6. Đặt Loại tỷ lệ thành Vừa.
Tạo nút điều hướng bên phải.
1. Nhân bản NavigationButtonLeft.
2. Chọn nút bản sao, sau đó trong cửa sổ Thuộc tính,
  1. Đặt Điểm Neo 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 Vị trí thành {0.98, 0},{0.5, 0} để tạo khoảng đệm bên phải của nút từ container 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 Tên thành NavigationButtonRight.
3. Chọn đối tượng ImageLabel con của nó.
  1. Đặt Xoay thành 180 để lật hình ảnh.
  2. Đặt Vị trí 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 giống như nó ở giữa củ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 ý cách quy trình này giữ nút chọn tách biệt khỏi SelectionFrame để bạn có thể thêm khoảng đệm giữa phần chính của thành phần này với nút chọn.
2. Chọn nút mới, sau đó trong cửa sổ Thuộc tính,
  1. Xóa giá trị Hình ảnh mặc định.
  2. Đặt Điểm Neo thành 0.5, 1 để đặt điểm gốc của nút mới ở giữa bên 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 Độ trong suốt của Nền thành 0.15 để cung cấp phản hồi trực quan khi di chuột rằng nút có thể được chọn.
  4. Đặt Vị trí thành {0.5, 0},{0.99, 0} để đặt nút gần giữa dưới của container 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 Kích thước 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 Tên thành SelectButton.
3. Làm 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ổ Thuộc tính, đặt Bán kính góc thành 0.2, 0 để làm 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 thông báo gọi hành động.
5. Chọn nhãn mới, sau đó trong cửa sổ Thuộc tính,
  1. Đặt Điểm Neo 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 Độ trong suốt của Nền thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
  3. Đặt Vị trí thành {0.5, 0},{0.5, 0} để di chuyển nhãn đến giữa củ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 Kích thước thành {0.9, 0},{0.55, 0} để mở rộng không gian văn bả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 Tên thành SelectTextLabel.
  6. Đặt FontFace thành Montserrat để phù hợp với thẩm mỹ tương lai.
  7. Đặt Cân nặng thành Trung bình để làm cho phông chữ dày hơn.
  8. Đặt Văn bản thành CHỌN.
  9. Kích hoạ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. Ví dụ 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ổ Thuộc tính,
  1. Xóa giá trị Hình ảnh mặc định.
  2. Đặt Điểm Neo 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 nút, và 50% từ trên xuống dưới của nút).
  3. Đặt Độ trong suốt của Nền thành 0.65 để cung cấp phản hồi trực quan rằng nút không được chú ý. Các script trong bước 12 cung cấp phản hồi trực quan lập trình khi nút được chú ý.
  4. Đặt Thứ tự Bố trí thành 2.
  5. Đặt Tên thành BlasterButtonPrefab.
  6. Đặt Kích thước thành {0.8, 0},{0.8, 0}.
  7. Đặt Độ trong suốt của Hình ảnh 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 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. Làm 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ổ Thuộc tính, đặt Bán kính góc thành 0.05, 0 để làm 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ổ Thuộc tính,
  1. Xóa giá trị Hình ảnh mặc định.
  2. Đặt Điểm Neo 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).
  3. Đặt Độ trong suốt của Nền thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
  4. Đặt Vị trí 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 giống như nó ở giữa của nút tại {0.5, 0},{0.5, 0}.
  5. Đặt Kích thước 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 Loại tỷ lệ thành Vừa.
Tham khảo các script ReplicatedStorage sau trong tệp mẫu Laser Tag để lập trình hiển thị các nút cho mỗi blaster, thay đổi tỷ lệ các nút khi một người chơi chọn một nút không được chú ý, và gán sự chọn blaster của người chơi cho nhân vật của họ.

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


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ải nghiệm hoặc hồi sinh trở lại một vòng sau khi sức khỏe của họ đạt 0, UI của trình 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

Một 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ải nghiệm qua một thiết bị di động hoặc máy tính bảng. Trải nghiệm laser tag mẫu sử dụng một nút bắn với biểu tượng mô tả cả điểm ngắm và một vụ nổ để giao tiếp 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 trải nghiệm 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 sẽ hiển thị.
3. Từ menu ngữ cảnh, chèn một ImageButton.
Trong viewport, di chuyển nút đến vị trí mà 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ổ Thuộc tính,
1. Đặt Hình ảnh thành rbxassetid://18308375035 để hiển thị biểu tượng nút bắn.
2. Đặt Hình ảnh Bị Nhấn 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 một người chơi nhấn nút.
3. Đặt Độ trong suốt của Nền thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
4. Đặt Tên thành BlastButton.
5. Đặt Loại tỷ lệ thành Vừa để hình ảnh vừa vặn trong container của nó và không bị kéo dãn trên các kích thước màn hình khác nhau.
6. Đặt Độ trong suốt của Hình ảnh thành 0.3 để giảm độ mờ của nhãn để nó phù hợp với tất cả các yếu tố UI màu đen trong trải nghiệm.
Chèn một UIAspectRatioConstraint vào BlastButton để đảm bảo tỷ lệ khung 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 script ReplicatedStorage sau trong tệp mẫu Laser Tag để lập trình hiển thị nút bắn khi một 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.

Script sau yêu cầu một tập hợp các module script làm việc cùng nhau để thiết lập 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ọ, script này đảm bảo rằng tất cả các phần tử UI của HUD hiển thị phù hợp với trạng thái, thiết bị và trạng thái độ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ải nghiệm 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ề cấu trúc trực quan từ Wireframe Your Layouts, phần này dạy bạn cách triển khai tất cả các yếu 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 yếu tố UI này gần các cạnh của màn hình vì người chơi có thể tiếp thu thông tin ngoại vi này mà không phân tâm sự chú ý từ lối chơi.

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 xác định đội của họ ngay khi họ xuất hiện trong khu vực sinh spawn của đội mình. Trải nghiệm 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 mà không có chi tiết để đảm bảo 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 trực quan là quan trọng vì nó giúp giữ thiết kế dễ tiếp cận cho 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 trải nghiệm 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 sẽ hiển thị.
3. Từ menu ngữ cảnh, chèn một Frame.
Chọn Frame mới, sau đó trong cửa sổ Thuộc tính,
1. Đặt Điểm Neo thành 0, 1 để đặt điểm gốc của khung ở giữa dưới của 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 Độ trong suốt của Nền thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
3. Đặt Tên thành PlayerDisplay.
4. Đặt Vị trí 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 Kích thước thành {0.23, 0},{0.08, 0} để cả hai rút ngắn và mở rộng khung.
6. Kích hoạt ClipsDescendants để cắt những 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ổ Thuộc tính,
  1. Đặt Hình ảnh thành rbxassetid://14304828123 để hiển thị biểu tượng hình thang.
  2. Đặt Điểm Neo thành 1, 1 để đặt điểm gốc của nhãn ở dưới cùng bên phải của 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 Độ trong suốt của Nền thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
  4. Đặt Tên thành Block.
  5. Đặt Vị trí thành {1,0},{1,0} để đặt nhãn vào phía bên phải của khung.
  6. Đặt Kích thước thành {1.858, 0},{0.581, 0} để mở rộng nhãn ra ngoài khung, và rút ngắn nó một chút hơn nửa chiều dài của khung.
  7. Đặt Độ trong suốt của Hình ảnh thành 0.15 để làm cho nhãn hơi trong suốt.
  8. Đặt Loại tỷ lệ thành Vừa để hình ảnh vừa vặn trong container của nó và không bị kéo dãn 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 của nhãn và các thành phần 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ổ Thuộc tính, đặt Tỷ lệ khung 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ổ Thuộc tính,
  1. Xóa ID tài sản chứa trong thuộc tính Hình ảnh. Các script trong bước 7 sẽ lập trình chèn chân dung của người chơi vào trong nhãn hình ảnh.
  2. Đặt Điểm Neo thành 0, 1 để đặt điểm gốc của nhãn ở dưới cùng bên trái của 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 Màu Nền thành 0, 0, 0 để đặt màu nền của nhãn thành màu đen.
  4. Đặt Độ trong suốt của Nền thành 0.3 để giảm độ mờ của nhãn đi 30%, và phù hợp với tất cả các yếu tố UI màu đen trong trải nghiệm.
  5. Đặt Tên thành PlayerPortrait.
  6. Đặt Vị trí thành {0.11, 0},{1, 0} để đặt nhãn sang bên trái của hình dạng đa giác.
  7. Đặt Kích thước thành {0.23, 0},{1, 0} để thu hẹp nhãn.
  8. Đặt Độ trong suốt của Hình ảnh thành 0.15 để làm cho nhãn hơi trong suốt.
  9. Đặt Loại tỷ lệ thành Vừa để hình ảnh vừa vặn trong container của nó và không bị kéo dãn 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 của nhãn và các thành phần 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ổ Thuộc tính, đặt Bán kính góc thành 0.05, 0 để làm 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ổ Thuộc tính,
  1. Đặt Điểm Neo 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 Độ trong suốt của Nền thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
  3. Đặt Tên thành PlayerNameTextLabel.
  4. Đặt Vị trí thành {0.35, 0},{0.72, 0} để đặt nhãn ở phía 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 Kích thước thành {0.52, 0},{0.3, 0} để văn bản có thể chiếm phần lớn 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 Cân nặng thành Đậm để làm cho phông chữ dày hơn.
  8. Xóa văn bản chứa trong thuộc tính Văn bản. Các script 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. Kích hoạt TextScaled.
  10. Đặt Căn chỉnh Văn bản X thành Trái.
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 Thư mục vào PlayerDisplay, sau đó đổi tên thành TeamIcons.
2. Tạo biểu tượng và màu sắc của đội xanh.
  1. Chèn một ImageLabel vào TeamIcons.
  2. Chọn nhãn mới, sau đó trong cửa sổ Thuộc tính,
    
    Đặt Điểm Neo thành 0, 1 để đặt điểm gốc của nhãn ở dưới cùng bên trái của 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 Màu Nền thành 88, 218, 171 để đặt màu nền của nhãn thành màu xanh mint.
    
    Đặt Tên thành TeamAIcon.
    
    Đặt Vị trí thành {0, 0},{1, 0} để đặt nhãn bên trái của khung.
    
    Đặt Kích thước thành {0.135, 0},{0.58, 0} để thu hẹp nhãn bên trái chân dung người chơi.
    
    Đặt Độ trong suốt của Hình ảnh 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 script trong bước 7.
    
    Trong cửa sổ Thuộc tính, điều hướng đến phần Thuộc tính , sau đó nhấp vào biểu tượng cộng. Một hộp thoại sẽ hiển thị.
    
    Trong trường Tên, nhập teamColor.
    
    Trong menu déroulant Loại, chọn BrickColor.
    
    Nhấp vào nút Lưu.
    
    Đặt thuộc tính teamColor mới thành Mint.
  2. Chèn một UIAspectRatioConstraint vào TeamAIcon để đảm bảo tỷ lệ khung của nhãn và các thành phần 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ổ Thuộc tính,
    
    Đặt Hình ảnh thành rbxassetid://14309678670 để hiển thị biểu tượng đội xanh.
    
    Đặt Điểm Neo 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).
    
    Đặt Độ trong suốt của Nền thành 1 để làm cho nền của nhãn hoàn toàn trong suốt.
    
    Đặt Tên thành Icon.
    
    Đặt Vị trí thành {0.5, 0},{0.5, 0} để đặt nhãn ở giữa nhãn cha của nó.
    
    Đặt Kích thước thành {0.7, 0},{0.6, 0} để thu hẹp nhãn.
    
    Đặt Loại tỷ lệ thành Vừa để hình ảnh vừa vặn trong container của nó và không bị kéo dãn 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 của đội hồng.
  1. Nhân bản TeamAIcon và các con của nó.
  2. Chọn bản sao TeamAIcon, sau đó trong cửa sổ Thuộc tính,
    
    Đặt Màu Nền thành 255, 170, 255 để đặt màu nền của nhãn thành màu hồng.
    
    Đặt Tên thành TeamBIcon.
    
    Đặt thuộc tính teamColor thành Carnation Pink.
    
    Chọn đối tượng con Icon bản sao của TeamBIcon, sau đó trong cửa sổ Thuộc tính, đặt Hình ảnh thành rbxassetid://14309678549 để hiển thị biểu tượng đội hồng.
Tham khảo các script ReplicatedStorage sau trong tệp 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.

Script sau yêu cầu một tập hợp các module script làm việc cùng nhau để thiết lập hiển thị chính (HUD), bao gồm startSyncingTeamColor, setPlayerName, và setPlayerPortrait. Sau khi người chơi tham gia một vòng và chọn blaster của họ, script này đảm bảo rằng tất cả các phần tử UI của HUD hiển thị phù hợp với trạng thái, thiết bị, và trạng thái độ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 gia nhập lại vòng sau khi hồi sinh, chỉ báo người chơi sẽ hiển thị ở dưới góc trái màn hình của họ.

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

Màn hình lực trường là một yếu tố UI bao phủ 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 gia nhập lại một vòng. Theo hướng dẫn về thẩm mỹ cho biểu tượng từ Chọn Một Phong Cách Nghệ Thuật, trải nghiệm laser tag mẫu sử dụng một mẫu lục giác hơi trong suốt để biểu thị một lực trường. 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ải nghiệm, mà còn thông báo về trạng thái của người chơi mà không cần văn bản hoặc hướng dẫn thêm.

Để tái tạo chính xác màn hình lực trường trong trải nghiệm 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 sẽ 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ổ Thuộc tính,
1. Đặt Hình ảnh thành rbxassetid://14462567888.
2. Đặt Độ trong suốt của Nền thành 0.8 để làm cho lực trường trong suốt.
3. Đặt Kích thước 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 Loại tỷ lệ thành Gạch để làm cho lục giác lặp lại trên toàn bộ màn hình.
5. Đặt Kích thước Gạch 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ổ Thuộc tính,
1. Đặt Màu 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 Màu thành 120, 192, 250 để áp dụng một sắc thái xanh nhạt cho tất cả các lục giác.
  2. Nhấp vào thuộc tính Màu, sau đó nhấp vào nút ⋯. Một hộp thoại chuỗi màu sẽ hiển thị.
    
    Mỗi tam giác trên trục dưới cùng của chuỗi màu là một điểm chính 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ị Thời gian là 0.05, sau đó nhấp vào hình vuông nhỏ bên cạnh Màu để mở cửa sổ bật lên Màu.
  4. Chọn một màu trắng sáng, sau đó đóng cửa sổ bật lên.
  5. Nhấp và kéo trên chuỗi màu cho đến khi bạn đạt được giá trị Thời gian là 0.95, sau đó mở cửa sổ bật lên Màu một lần nữa và chọn cùng một màu trắng như trước.
2. Đặt Xoay thành 225 để làm cho phần màu xanh trong chuỗi màu của bạn hiển thị ở góc trên bên trái và góc dưới bên phải.
3. Đặt Độ trong suốt thành một chuỗi số làm cho lực trường trông giống như nó đang lung linh.
  1. Nhấp vào thuộc tính Độ trong suốt, sau đó nhấp vào nút ⋯. Một hộp thoại chuỗi số sẽ hiển thị. Mỗi hình vuông ở đầu và cuối của chuỗi số là điểm chính 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 ở khắp chuỗi số:
  - Thời gian = 0, Giá trị = 0.25
  - Thời gian = .101, Giá trị = 0.875
  - Thời gian = .183, Giá trị = 0
  - Thời gian = .3, Giá trị = 1
  - Thời gian = .7, Giá trị = 1
  - Thời gian = 1, Giá trị = 0.9
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ổ Thuộc tính,
1. Đặt Xoay thành -45 để lật hình ảnh để nó gần như phản chiếu lẫn nhau trên trục Y.
2. Chỉnh sửa Độ trong suốt để làm cho hiệu ứng lấp lánh trông tự nhiên hơn.
  1. Nhấn vào thuộc tính Độ trong suốt, sau đó nhấn vào nút ⋯. Một pop-up với chuỗi số sẽ hiển thị.
  2. Chọn keyframe thứ ba, sau đó nhấn nút Xóa.
Tham khảo các script ReplicatedStorage sau đây trong tệp mẫu Laser Tag mà lập trình hiển thị màn hình trường lực trong khi một người chơi tham gia hoặc tham gia lại vào vòng chơi.

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

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 trường lực 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ề phía những người chơi khác đang tái xuất hiện vào trải nghiệm.

Hình ảnh trường lực ở chế độ người thứ nhất bao gồm một lưới lục giác hiện đại ở xung quanh màn hình. — Hình ảnh trường lực ở chế độ người thứ nhất

Hình ảnh trường lực ở chế độ người thứ ba bao gồm một quả cầu lấp lánh màu xanh nằm quanh người chơi tái xuất hiện vào trải nghiệm. — Hình ảnh trường lực ở 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 tái xuất hiện tại một điểm xuất hiện có trường lực được 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ào vòng chơi sau khi tái xuất hiện, giao diện người dùng màn hình trường lực mới hiển thị thay vì hình ảnh trường lực ở chế độ người thứ nhất mặc định ForceField.

Màn hình tái xuất hiện

Màn hình tái xuất là một yếu tố giao diện người dùng làm mờ viewport để thông báo cho người chơi rằng họ đã bị đánh ra, và rằng máy chủ đang trong quá trình tái xuất họ trở lại khu vực xuất hiện của họ. Yếu tố giao diện người dùng này rất quan trọng vì nó cho người chơi thời gian để tiếp nhận rằng họ đã bị đánh ra, và lên kế hoạch cho bước đi tiếp theo của họ trước khi họ tham gia lại vào vòng chơi đang hoạt động.

Để biết thêm thông tin về hành vi tái xuất tùy chỉnh trong trải nghiệm laser tag mẫu, xem Tái xuất 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 xuất trong trải nghiệm mẫu Laser Tag:

Tạo banner thông tin trung tâm.
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, sau đó nhấn vào biểu tượng ⊕. Một menu ngữ cảnh sẽ 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 bản thâ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 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} để là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 là 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 để làm giảm độ mờ của nhãn 30%, và phù hợp với tất cả các yếu tố giao diện người dùng màu đen trong trải nghiệm.
3. Chèn một UIAspectRatioConstraint vào Block để đảm bảo tỷ lệ khía cạnh của nhãn và các yếu tố giao diện người dùng con của nó giữ nguyên kích thước 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 bản thâ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 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 {.85, 0},{0.55, 0} để văn bản có thể chiếm hầu hết diện tích 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ỹ hiện đại.
  7. Đặt Weight thành Bold để làm dày phông chữ.
  8. Đặt Text thành ĐANG TÁI XUẤT….
  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. Select the new label, then in the Properties window,
  1. Set AnchorPoint to 0.5, 1 to set the label's origin point in the bottom-middle of itself (50% from the left to the right of the label, and 100% from the top to the bottom of the label).
  2. Set BackgroundTransparency to 1 to make the label's background completely transparent.
  3. Set Position to {0.5, 0},{0, 0} to set the label at the top-middle of its parent label (50% from the left to the right of the parent label, and 0% from the top to the bottom of the parent label).
  4. Set Size to {0.46, 0},{0.56, 0} to widen the label (46% horizontally and 56% vertically of the parent label).
  5. Set Name to Header.
  6. Set Image to rbxassetid://14304826985 to make the image a multi-directional fade.
  7. Set ImageColor to 245, 46, 46 to make the fade red to signify that the player is temporarily inactive while they're tagged out of the round.
3. Insert a TextLabel into Header for the informational text.
4. Select the new label, then in the Properties window,
  1. Set AnchorPoint to 0.5, 0.5 to set the label's origin point in the middle of itself (50% from the left to the right of the label, and 50% from the top to the bottom of the label).
  2. Set BackgroundTransparency to 1 to make the label's background completely transparent.
  3. Set Position to {0.5, 0},{0.5, 0} to set the label in the middle of its parent label (50% from the left to the right of the parent label, and 50% from the top to the bottom of the parent label).
  4. Set Size to {.85, 0},{0.55, 0} so the text can take up most of the fade area (85% horizontally and 55% vertically of the parent label).
  5. Set Name to HeaderTextLabel.
  6. Set FontFace to Montserrat to fit the futuristic aesthetic.
  7. Set Weight to Black to thicken the font.
  8. Set Text to ĐÃ BỊ TAG - BẠN ĐÃ RA!
  9. Set TextColor3 to 255, 255, 255 to make the text white.
  10. Enable TextScaled.
Tạo hiệu ứng mờ xung quanh các cạnh 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 bản thâ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 đen.
  3. Đặt BackgroundTransparency thành 0.5 để làm cho nền của nhãn trong suốt một nửa.
  4. Đặt Position thành {0.5, 0},{0.5, 0} để đặt nhãn ở giữ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} để là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 yếu tố giao diện người dùng khác.
  7. Đặt Name thành Header.
  8. Đặt Image thành rbxassetid://14309518613 để làm cho hình ảnh trở thành một hiệu ứng mờ biê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 đối tượng UIGradient với một chuỗi số tùy chỉnh về độ trong suốt. Để tìm hiểu thêm về kỹ thuật mờ này, hãy xem Bộ điều chỉnh giao diện người dùng - Gradient.
Tham khảo các script ReplicatedStorage sau đây trong tệp mẫu Laser Tag mà lập trình hiển thị màn hình tái xuất khi sức khỏe của người chơi đạt đến không, và họ đang trong quá trình tái xuất trở lại khu vực xuất hiện của đội họ.

Script khách hàng ReplicatedStorage.PlayerStateHandler sau đây 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 hợp lý lại với nhau 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 người chơi, chuyển động camera, và lớp giao diện người dùng nào được 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 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 laser của họ.
StarterGui.OutStateGui trở thành được bật độc quyền.

Khi người chơi tái xuất hiện, 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 xuất. Để biết thêm thông tin về các điều kiện này, hã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 giao diện người dùng 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 thiết lập độ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 laser
	togglePlayerCamera(true)
	togglePlayerMovement(false)
	setGuiExclusivelyEnabled(playerGui.PickABlasterGui)

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

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

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

	-- Lập lịch logic hủy bỏ trường lực 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ị đánh ra
	togglePlayerMovement(false)
	togglePlayerCamera(false)
	setGuiExclusivelyEnabled(playerGui.OutStateGui)

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

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

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

	-- Vô hiệu hóa súng laser trong khi ở 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 đã 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 thay đổi vẫn được áp dụng sau khi tái xuất hiện
localPlayer.CharacterAdded:Connect(updateFromPlayerState)

Bây giờ, bất cứ khi nào sức khỏe của người chơi đạt đến không, màn hình tái xuất sẽ hiển thị cho đến khi người chơi tái xuất lại vào 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 cố gắng 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 trải nghiệm laser tag mẫu .rbxl làm tham chiếu, hoặc điều chỉnh các giá trị để đáp ứng các yêu cầu gameplay của trải nghiệm của riêng bạn.

Tạo đối tượng SurfaceGui

Để hiển thị giao diện người dùng 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 cá nhân, bạn có thể làm cha một đối tượng SurfaceGui vào phần mà bạn muốn hiển thị giao diện người dùng trong dịch vụ ReplicatedStorage. Kỹ thuật này đảm bảo rằng giao diện người dùng của bạn và logic lập trình của nó có sẵn cho cả máy chủ và mỗi khách hàng 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ải nghiệm laser tag mẫu chỉ bao gồm một trường hợp của một đối tượng SurfaceGui: thanh đếm thời gian hồi chiếu hiển thị trên mỗi súng laser 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 từng đầu vào của người chơi cá nhân và cung cấp phản hồi hình ảnh về khi họ có thể bắn súng laser của mình 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ấn vào biểu tượng ⊕. Một menu ngữ cảnh sẽ 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 sao cho phù hợp với bối cảnh của các yếu tố giao diện người dùng con của nó.
Lặp lại quy trình này cho mọi yếu tố giao diện người dùng bạn cần hiển thị trên bề mặt của một phần trong không gian 3D.

Thanh đếm thời gian hồi

Thanh đếm thời gian hồi là một thành phần giao diện người dùng thông báo cho người chơi biết thời gian họ cần chờ trước khi có thể bắn súng laser của mình lần nữa. Sự tạm dừng nhẹ này ngăn cản người chơi có thể bắn nhanh như họ có thể nhấp 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 thanh đếm thời gian hồi trong trải nghiệm 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ấn vào biểu tượng ⊕. Một menu ngữ cảnh sẽ hiển thị.
2. Từ menu ngữ cảnh, chèn một đối tượng 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.
Đặt vị trí 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 laser 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 để thay đổi kích thước phần theo kích thước khoảng cách của súng laser.
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 để giao diện người dùng 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 đ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 bản thâ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 đen.
  4. Đặt BackgroundTransparency thành 0.4 để làm cho nền của nhãn hơi trong suốt.
  5. Đặt Position thành {0.5, 0},{0.5, 0} để đặt nhãn ở giữa container của nó (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} để là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 các góc một cách nhẹ nhàng.
Tạo thanh đỏ.
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 bản thâ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 đỏ sẫ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 lê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 trong 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 các góc một cách nhẹ nhàng.
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 giao diện người dùng 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 đây trong tệp mẫu Laser Tag để lập trình gắn thanh đếm thời gian hồi vào súng của người chơi, sau đó hoạt hình thanh đỏ sau khi một người chơi bắn súng laser của họ.

Script khách hàng ReplicatedStorage.FirstPersonBlasterVisuals sau đây xử lý tất cả logic hình ảnh cho súng laser chế độ người thứ nhất của người chơi. Nó yêu cầu một tập hợp các module script hoạt động cùng nhau để thiết lập hình ảnh súng laser có 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 thanh đếm thời gian hồi
	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 sẽ xóa thanh đếm thời gian hồi vì nó được làm cha đến 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 vào camera nếu nó tồn tại
RunService.RenderStepped:Connect(function()
	if rigModel then
		-- Cập nhật CFrame của rig liên quan đến 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 laser 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 laser 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 tất việc chọn súng laser.
	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 laser của họ, thanh đếm thời gian hồi sẽ hoạt hình để thông báo khi người chơi có thể bắn lại.

Tạo đối tượng BillboardGui

Để hiển thị các yếu tố giao diện người dùng trong không gian 3D phản ứng với logic lập trình và luôn đối diện với 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 dấu hiệ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ải nghiệm 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 hồng hoặc xanh trên đỉnh đầu mỗi người chơi khi họ đang hoạt động trong một vòng đấu.
TaggedOutIndicatorGuiPrefab - Hiển thị trên đầu một người chơi khi họ bị đánh ra khỏi vòng đấu.

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 yếu tố giao diện người dùng cho cả hai loại chỉ báo trong trải nghiệm 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ải nghiệm 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ấn vào biểu tượng ⊕. Một menu ngữ cảnh sẽ hiển thị.
Từ menu ngữ cảnh, chèn một đối tượng BillboardGui.
Đổi tên BillboardGui sao cho phù hợp với bối cảnh của các yếu tố giao diện người dùng con của nó.
Lặp lại quy trình này cho mọi yếu tố giao diện người dùng bạn cần hiển thị ở trên đầu người chơi.

Chỉ báo đội

Chỉ báo đội là một yếu tố giao diện người dùng thông báo cho người chơi đội nào mà những người chơi khác trong vòng đấu thuộc về để họ có thể dễ dàng phân biệt giữa đồng minh và thành viên của đội đối phương. Thông tin này rất quan trọng vì gameplay của một trải nghiệm bắn súng góc nhìn 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ị đánh ra và thua trận đấu.

Để tái tạo chính xác chỉ báo đội trong trải nghiệm 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 của thanh công cụ, nhấn 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 lưới Head của rig, sau đó nhấn vào biểu tượng ⊕. Một menu ngữ cảnh sẽ 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 nhiều.
4. Đặt StudsOffsetWorldSpace thành 0, 4, 0 để đặt nó ở 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 bản thâ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 giả lập.
3. Đặt Position thành {0.5, 0},{0.5, 0} để đặt khung ở giữa container của nó (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} để thu hẹp khung lại bằng 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 để bao quanh vòng tròn của chỉ báo.
Di chuyển OtherPlayerIndicatorPrefab vào ReplicatedStorage.
Tham khảo script ReplicatedStorage sau đây trong tệp mẫu Laser Tag 1A mà lập trình hiển thị chỉ báo đội cho mỗi người chơi trong vòng đấu hoạt động trừ khi họ ở đội đối phương và bị che khuất.

Script ReplicatedStorage.OtherPlayerIndicatorGuiSetup sau đây 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 xác định đối tượng Head của mỗi nhân vật người chơi tham gia vòng đấu. Nếu họ chưa có một chỉ báo đội, script sau đó sao chép và thêm giao diện người dùng otherPlayerIndicatorPrefab vào Head của nhân vật, và thiết lập màu chỉ báo đội theo 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 vật thể 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ó vật thể nào trong không gian 3D làm 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, tạo một cái mới chỉ khi 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 ở phía trên chỉ nếu người chơi là bạn

		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 vòng đấu hoạt động, chỉ báo đội sẽ hiển thị ở 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 phía sau một vật thể.

Chỉ báo bị đánh ra

Chỉ báo bị đánh ra là một yếu tố giao diện người dùng thông báo cho người chơi khi những người chơi khác không còn hoạt động trong vòng và đang trong quá trình tái xuất 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ải nghiệm bắn súng góc nhìn thứ nhất yêu cầu người chơi phải chuyển sang mục tiêu tiếp theo của họ ngay khi họ đánh 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ị đánh ra trong trải nghiệm 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ừ thanh công cụ Home hoặc Avatar, nhấn 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à một 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 lưới Head của rig, sau đó nhấn vào biểu tượng ⊕. Một menu ngữ cảnh sẽ 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} để làm rộng không gian cho một nhãn.
4. Đặt StudsOffset thành 0, 3.25, 0 để đặt nó ở 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 bản thâ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 container của nó (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 trở 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ố tùy chỉnh về độ trong suốt. Để tìm hiểu thêm về kỹ thuật mờ này, hãy xem 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 bản thâ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 container 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).
5. Đặt Size thành {0.85, 0},{0.7, 0} để văn bản có thể chiếm hầu hết diện tích 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ỹ hiện đại.
7. Đặt Weight thành Bold để làm dày phông chữ.
8. Đặt Text thành BỊ TAG.
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à lập trình hiển thị chỉ báo bị đánh ra trong khi một người chơi đang tái xuất trở lại khu vực xuất hiện của đội họ.

Kịch bản máy chủ ServerScriptService.SetupHumanoid sau đây chạy ngay khi một người chơi tải trải nghiệm. Nó đảm bảo rằng bất cứ khi nào một nhân vật của người chơi được thêm vào mô hình dữ liệu, setupHumanoidAsync đượ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 cho 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 giảm xuống zero, chỉ báo bị loại 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 Đào tạo 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 mình và thực hiện các 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 các chương trình hướng dẫn bổ sung, chẳng hạn như Chương trình Đào tạo Lập trình Gameplay mà dạy bạn về tổ chức tổng thể và các chi tiết thực hiện chính của trải nghiệm trò chơi bắn laser mẫu. Chúc bạn sáng tạo!