Thiết kế các bản thiết kế trong Studio | Tài liệu

Thực hiện các thiết kế của bạn là quá trình tạo ra các khung của bạn trong Studio bằng cách sử dụng các thành phần UI tích hợp và tùy chỉnh với các kịch bản tương tác của người dùng. Bước này hấp dẫn của hướng dẫn là nơi bạn

Sử dụng trình tạo mẫu laser kinh nghiệm việc sử dụng laser tag.rbxl file as a reference, this section of the user interface design curriculum shows you how to bring your UI planning to life, including guidance on:

Lấy ID tài nguyên từ thư viện tài nguyên UI để bạn có thể tái tạo các thành phần UI của trải nghiệm Laser Tag mẫu.
Tiết kiệm thời gian bằng cách sử dụng các thiết bị khác nhau trong Studio để xem UI của bạn hiển thị trên các màn hình và tỷ lệ kích thước khác nhau.
Tạo ScreenGui, SurfaceGui và BillboardGui những thống kê để hiển thị UI của bạn trên màn hình người chơi, bề mặt bên và trong không gian 3D, tương tự như vậy.

Sau khi xem xét các kỹ năng trong mục này, bạn có thể áp dụng chúng cho các dự án của riêng bạn để tạo ra các thành phần UI hấp dẫn giúp người chơi truy cập 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 thấy cách chính xác để tạo lại các thành phần UI bằng cách sử dụng Thư viện tài nguyên thiết kế UI. Quá trình này cho phép bạn điều chỉnh mỗi thành phần UI để đáp ứng các yêu cầu c

Lấy Thư Viện Tài Sản

Thư viện tài sản là những bộ sưu tập tài sản bạn có thể thêm vào kho của bạn để dễ dàng truy cập và tái sử dụng. Thư viện tài sản bạn sẽ sử dụng cho dự án của bạn từ Cửa hàng Creator Store bao gồm chín bộ đồ dùng UI đơn 2D của riê

**MultiBlaster Icon** rbxassetid://14309094777

**SingleBlaster Icon** rbxassetid://14309094641

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

**Biểu Tượng Đội Xanh Lá** rbxassetid://14309678701

**Màu mờ nhiều hướng** rbxassetid://14304827147

**Thẻ ngực phản lực - Mặc định** rbxassetid://18308375067

**Ấn vào nút Blast - Đã nhấn** rbxassetid://18308372597

**Biểu Tượng Crosshair** rbxassetid://14400935532

Ấn định biểu tượng người hit rbxassetid://14401148777

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

**Bỏ mờ ranh giới** rbxassetid://14309518632

Bạn có thể thêm hầu hết các mục thư viện vào kho của bạn trong Studio bằng cách nhấp vào liên kết Thêm vào kho trong mục dưới. Khi tài nguyên ở trong kho của bạn, bạn có thể tái sử dụng chúng trong bất kỳ dự án nào trên nền tảng.

Final Screen UI Components

Reference the completed version of the UI designs with these 2D assets.

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

Ở thanh menu, chọn tab Xem .
Trong phần Hiển thị , hãy nhấp vào Hộp công cụ . Cửa sổ Hộp công cụ hiển thị.
Trong cửa sổ Hộp công cụ , hãy nhấp vào tab Inventory . Hiển thị sort hiển thị.
Nhấp vào menu thả xuống, sau đó chọn loại My Packages .
Nhấp vào thành phần Bộ lọc màn hình cuối cùng trên thẻ Trình duyệt , sau đó trong cửa sổ Explorer , chọn 1> Hoàn thành các thành phần1> , sau đó kéo chúng vào dịch vụ 4> StarterGui4>. Bây giờ bạn có thể bật bất kỳ th

Gắn Điện Thoại

Studio's Device Emulator 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. Đây là công cụ quan trọng trong quá trình thực hiện bởi vì tỷ lệ kích thước của viewport của bạn trong Studio không phả

Ví dụ, nếu bạn không thử nghiệm 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 có màn hình lớn có thể không thể đọ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ể xem không gian 3D vì c

Để tái tạo màn hình của bạn đến kích thước màn hình nhỏ nhất:

Ở thanh menu, chọn tab Thử nghiệm .
Trong phần Giả lập , hãy nhấp vào Thiết bị . Cửa sổ hiển thị thay đổi để phản ánh tỷ lệ màn hình trung bình của một chiếc máy tính xách tay trung bình.
Trong menu chọn độ phân giải, hãy chọn Độ phân giải thực tế . Điều này cho phép bạn xem độ phân giải thực tế của các thành phần UI của bạn trên thiết bị bạn đang sao chép.
Trong menu trượt tuyết của thiết bị, chọn thiết bị có kích thước màn hình nhỏ nhất mà người chơi có thể sử dụng để truy cập trải nghiệm của bạn. Khi tùy chọn tốt nhất thay đổi theo thiết bị mà trải nghiệm của bạn hỗ trợ, thử nghiệm mẫu thẻ laser trên iPhone 4S để xá

Tạo Objet ScreenGUI

Để hiển thị các thành phần UI trên màn hình của mọi người chơi, bạn có thể tạo một ScreenGui đối tượng trong dịch vụ StarterGui . ScreenGui đối t

Bạn có thể tạo nhiều ScreenGui đối tượng để tổ chức và hiển thị nhóm các thành phần UI trong trò trải nghiệm trò chơi. Ví dụ, trải nghiệm laser tag mẫu bao gồm năm đối tượng ScreenGui được kích hoạt một cách nào đó cho

HUDGui - Hiển thị thông tin chìa khóa về trò chơi trong trận 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 số điểm của mỗi đội.
PickABlasterGui - Hiển thị tất cả các lựa chọn của người chơi khi họ bắt đầu hoặc tham gia lại một vòng.
ForceFieldGui - Hiển thị một lướiHexagon khi người chơi chọn một blaster và trong khi chúng tạm thời bất khả kháng.
OutStateGui - Hiển thị một biên giới tối xung quanh màn hình khi người chơi bị nhãn ra.
RoundResultsGui - Hiển thị một lớp bóng tối ở trên màn hình với thông tin về đội nào đã thắng trong trận.

Sau khi bạn tạo một đối tượng ScreenGui , bạn có thể tạo và tùy chỉnh con của nó GuiObjects để phù hợp với mục đích của mỗi container. Để min

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

Trong cửa sổ Explorer , hover over the StarterGui service, then click the ⊕ biểu tượng. A context menu displays.
Thêm một ScreenGUI .
Đổi tên ScreenGUI theo context của các thành phần UI con của nó.
Lặp lại quá trình này cho mỗi nhóm các thành phần UI bạn cần hiển thị trên màn hình của mọi người chơi.

Giao diện người dùng mục tiêu

Theo các thông lệ tốt nhất của ngành thiết kế từ Wireframe Your Layouts, bài này dạy bạn cách thực hiện tất cả các thành phần trên màn hình liên quan đến mục tiêu của trải nghiệm. Việc phân cấp các thành phần trên màn hình này gần với đỉnh của trò chơih

Ví dụ, mẫu cung cấp một thành phần UI mục tiêu mà người chơi tham chiếu để biết những gì họ cần làm để thành công trong một vòng. Khi người chơi gắn nhãn vào thành viên đội địch và kiếm điểm, thành phầ

Để tái tạo chính xác UI mục tiêu trong trải nghiệm Laser Tag :

Tạo một container cho toàn bộ bộ phận.
1. Thêm một Khung vào HUDGui ScreenGui đối tượng.
  1. Trong cửa sổ Explorer , hãy tìm đến dịch vụ StarterGui .
  2. Chuyển trên đối tượng con của nó HUDGui , sau đó nhấp vào biểu tượng ⊕. Một menu ng上下文 được hiển thị.
  3. Từ menu ng上 context, insert a Khung .
2. Chọn Khung mới , sau đó trong cửa sổ Tên sở hữu ,
  1. Đặt AnchorPoint để 0.5, 0 để đặt điểm nguyên mẫu của khung ở trên cùng giữa của nó (50% từ bên trái của khung đến bên phải của khung và 0% từ bên trên của khung đến bên dưới của khung).
  2. Đặt BackgroundTransparency để 1 để làm cho nền màu của khung hoàn toàn trong suốt.
  3. Đặt Vị trí để {0.5, 0},{0.03, 0} để thiết lập khung gần với mặt trung tâm của màn hình (50% từ bên trái sang bên phải của màn hình, và 3% từ trên cùng của màn hình để có một chút bù).
  4. Đặt Kích thước lên {0.5, 0},{0.13, 0} để các thành phần trên khung tạo ra một phần lớn của phía trên của màn hình để thu hút sự chú ý của người chơi (50% ngang, và 13% dọc).
  5. Đặt Tên để Mục tiêu .
3. (Tùy chọn) Thêm một UIAspectRatioLimit vào Mục tiêu để đảm bảo tỷ lệ kích thước ngang 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. Các mẫu đặt
Tạo một container cho các đối tượng người dùng của mục tiêu.
1. Thêm một Khung vào Mục tiêu .
2. Chọn Khung mới , sau đó trong cửa sổ Tên sở hữu ,
  1. Đặt AnchorPoint để 0.5, 0 để đặt điểm nguyên mẫu của khung ở trên cùng giữa của nó (50% từ bên trái của khung đến bên phải của khung và 0% từ bên trên của khung đến bên dưới của khung).
  2. Đặt BackgroundTransparency để 1 để làm cho nền màu của khung hoàn toàn trong suốt.
  3. Đặt Vị trí để {0.5, 0},{0, 0} để thiết lập khung ở giữa thùng (50% từ bên trái đến bên phải của khung cha, và 0% từ trên cùng của khung cha).
  4. Set Kích thước to {1, 0},{0.67, 0} để các thành phần lựa chọn UI chiếm khoảng hơn một nửa khối từ trên đến dưới (100% horizontally và 67% vertically của khung cha).
  5. Đặt Tên vào Mục tiêu hiển thị .
Tạo các thành phần tiêu đề.
1. Thêm một Nhãn hình ảnh vào Màn hình mục tiêu .
2. Chọn ImageLabel , sau đó trong cửa sổ Properties
  1. Set AnchorPoint to 0.5, 1 để thiết lập điểm xuất phát của nhãn ở phía dưới trung tâm của nó (50% từ bên trái sang bên phải của nhãn và 100% từ bên trên trái sang bên dưới của nó).
  2. Đặt Hiển thị màu nền để 1 để làm cho nền màu của nhãn hoàn toàn trong suốt.
  3. Đặt Bố trí trang bị lên -1 .
  4. Đặt Vị trí để {0.5, 0},{0.34, 0} để đặt nhãn gần phía trên cùng của khung (50% từ bên trái đến bên phải của khung cha, và 34% từ bên trên cùng của khung cha).
  5. Set Kích thước to {0.46, 0},{0.34, 0} để rộng khu vực thông báo lên gần một nửa khuôn đo (46% ngang và 34% dọc của khuôn đo cha).
  6. Đặt Tên vào Thẻ.
  7. Đặt Hình ảnh lên rbxassetid://14304828123 để hiển thị một trái tim.
  8. Đặt Bóng suốt hình ảnh lên 0.15 để làm cho trang chủ mờ dần.
3. (Tùy chọn) Thêm một UIAspectRatioLimit vào ImageLabel để đảm bảo tỷ lệ kích thước 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. Các mẫu đặt tính
4. Thêm 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ổ Tên tùy thuộc ,
  1. Đặt AnchorPoint để 0.5, 0.5 để đặt điểm nguồn của nhãn mới ở giữa của nó (50% từ bên trái sang bên phải của nhãn, và 50% từ trên của nó đến dưới của nó).
  2. Đặt Hiển thị màu nền để 1 để làm cho nền màu của nhãn hoàn toàn trong suốt.
  3. Đặt Vị trí để {0.5, 0},{0.5, 0} để di chuyển nhãn đến giữa của nhãn cha (50% từ bên trái đến bên phải của nhãn cha, và 50% từ trên đến dưới của nhãn cha).
  4. Đặt Kích thước lên {0.62, 0},{0.55, 0} để rộng không gian chữ cho hơn một nửa của nhãn cha (62% ngang và 55% dọc của nhãn cha).
  5. Đặt Tên vào NameLabel .
  6. Đặt FontFace để Montserrat để phù hợp với estetica tương lai.
  7. Đặt Cân nặng lên Trung bình để làm dày chữ.
  8. Đặt Văn bản để MỤC TIÊU .
  9. Bật TextScaled .
Tạo các thành phần thông báo.
1. Thêm một Nhãn hình ảnh vào Màn hình mục tiêu .
2. Chọn ImageLabel , sau đó trong cửa sổ Properties
  1. Set AnchorPoint to 0.5, 1 để thiết lập điểm xuất phát của nhãn ở phía dưới trung tâm của nó (50% từ bên trái sang bên phải của nhãn và 100% từ bên trên trái sang bên dưới của nó).
  2. Đặt Hiển thị màu nền để 1 để làm cho nền màu của nhãn hoàn toàn trong suốt.
  3. Đặt Vị trí để {0.5, 0},{1, 0} để di chuyển nhãn đến dưới-giữa của khung cha (50% từ bên trái đến bên phải của khung cha, và 100% từ bên trên đến bên dưới của khung cha).
  4. Đặt Kích thước lên {0.89, 0},{0.66, 0} để rộng không gian chữ đến gần một phần lớn của khung cha (89% hướng tây và 66% hướng đông của khung cha).
  5. Đặt Tên vào Thân hình .
  6. Đặt Hình ảnh để rbxassetid://14304827265 để hiển thị một trái tim trái ngược.
  7. Đặt Màu sắc hình ảnh3 để 0, 0, 0 để nâng cao màu sắc của hình ảnh.
  8. Đặt Bóng suốt hình ảnh lên 0.3 để làm cho đầu mục semi-透明.
3. (Tùy chọn) Thêm một UIAspectRatioLimit vào ImageLabel để đảm bảo tỷ lệ kích thước hình ả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. Các mẫu đ
4. Thêm một TextLabel vào Body để hiển thị một hộp thoại.
5. Chọn nhãn mới, sau đó trong cửa sổ Tên tùy thuộc ,
  1. Đặt AnchorPoint để 0.5, 0.5 để đặt điểm nguồn của nhãn mới ở giữa của nó (50% từ bên trái sang bên phải của nhãn, và 50% từ trên của nó đến dưới của nó).
  2. Đặt Hiển thị màu nền để 1 để làm cho nền màu của nhãn hoàn toàn trong suốt.
  3. Đặt Vị trí để {0.5, 0},{0.5, 0} để di chuyển nhãn đến giữa của nhãn cha (50% từ bên trái đến bên phải của nhãn cha, và 50% từ trên đến dưới của nhãn cha).
  4. Đặt Kích thước lên {0.85, 0},{0.39, 0} để rộng không gian chữ cho hơn một nửa của nhãn cha (85% bằng phẳng và 39% bằng dọc của nhãn cha).
  5. Đặt Tên vào BodyTextLabel .
  6. Đặt FontFace để Montserrat để phù hợp với estetica tương lai.
  7. Đặt Cân nặng lên Trung bình để làm dày chữ.
  8. Đặt TextColor3 để 255, 255, 255 để làm cho văn bản trắng chống lại nền màu đen.
  9. Set Văn bản to Thẻ người chơi để ghi điểm! Đội đầu tiên đạt đến %d điểm thắng. .
  10. Bật TextScaled .
Tạo một container cho đội của mục tiêu.
1. Thêm một Khung vào Mục tiêu .
2. Chọn Khung mới , sau đó trong cửa sổ Tên sở hữu ,
  1. Đặt AnchorPoint để 0.5, 1 để xác định điểm xuất phát của nhãn ở phía dưới trung tâm của nó (50% từ bên trái sang bên phải của khung, và 100% từ bên trên trái sang bên phải của khung).
  2. Đặt BackgroundTransparency để 1 để làm cho nền màu của khung hoàn toàn trong suốt.
  3. Đặt Vị trí để {0.5, 0},{1, 0} để thiết lập khung ở phía dưới của container (50% từ bên trái đến bên phải của khung cha, và 100% từ bên trên của khung cha).
  4. Set Kích thước to {0.44, 0},{0.27, 0} để các thành phần lựa chọn UI chiếm khoảng một nửa khỏi bên trái sang bên phải (44% ngang và 27% dọc của khung cha).
  5. Đặt Tên vào TeamPointCounter .
Tạo bản đệm cho bộ đếm đội.
1. Lập một UIListLayout đối tượng vào khung từ bước 5.
2. Chọn đối tượng UIListLayout , sau đó trong cửa sổ Thông tin đặt hàng ,
  1. Đặt Pad lên 0.025, 0 để cung cấp không gian giữa các đếm futur.
  2. Set FillDirection to Horizontal so each team counter displays next to each other.
  3. Đặt HorizontalAlignment để Center để mỗi đội đều đặn hàng đầu.
Tạo các thành phần trên bảng điều khiển nhóm xanh.
1. Thêm một ImageLabel vào TeamPointCounter .
2. Chọn ImageLabel , sau đó trong cửa sổ Properties
  1. Đặt Hiển thị màu nền để 1 để làm cho nền màu của nhãn hoàn toàn trong suốt.
  2. Đặt Vị trí để {0.5, 0},{1, 0} để di chuyển nhãn đến dưới-giữa của khung cha (50% từ bên trái đến bên phải của khung cha, và 100% từ bên trên đến bên dưới của khung cha).
  3. Đặt Kích thước lên {0.5, 0},{1, 0} để rộng nhãn lên một nửa chiều rộng của khung cha (50% ngang và 100% dọc của khung cha).
  4. Đặt Tên vào TeamACount .
  5. Đặt Hình ảnh lên rbxassetid://14304826831 để hiển thị một màn hướng dẫn.
  6. Đặt Màu sắc hình ảnh3 để 88, 218, 171 để nâng cao màu xanh lá cây.
3. Tùy chỉ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 lá.
  1. Trong cửa sổ Tính chất , hãy di chuyển đến phần Thuộc tính rồi nhấp vào biểu tượng plus. Một hộp thoại pop-up được hiển thị.
  2. Trong trường Tên , nhập màu nhóm .
  3. Trong menu Type dưới đây, chọn BrickColor .
  4. Nhấp vào nút Lưu .
  5. Đặt đặt màu sắc đội mới cho Mint .
4. Thêm một TextLabel vào TeamACount器 để hiển thị một hộp thoại.
5. Chọn nhãn mới, sau đó trong cửa sổ Tên tùy thuộc ,
  1. Đặt AnchorPoint để 1, 0.5 để đặt điểm nguồn của nhãn mới ở giữa trung tâm (100% từ bên trái đến bên phải của nhãn, và 50% từ trên cùng đến dưới cùng của nhãn).
  2. Đặt Hiển thị màu nền để 1 để làm cho nền màu của nhãn hoàn toàn trong suốt.
  3. Đặt Vị trí để {0.95, 0},{0.5, 0} để di chuyển nhãn đến phải của nhãn cha (95% từ bên trái đến bên phải của nhãn cha, và 50% từ trên đến dưới của nhãn cha).
  4. Đặt Kích thước lên {0.85, 0},{0.39, 0} để rộng không gian chữ cho hơn một nửa của nhãn cha (85% bằng phẳng và 39% bằng dọc của nhãn cha).
  5. Đặt FontFace để Montserrat để phù hợp với estetica tương lai.
  6. Đặt Cân nặng lên Dũa vững chắc để làm dày chữ.
  7. Đặt TextColor3 để 255, 255, 255 để làm cho văn bản trắng chống lại nền màu đen.
  8. Đặt Văn bản để - .
  9. Bật TextScaled .
  10. Đặt TextXAlignment để Phải .
6. Lấy một UIStroke đối tượng vào TextLabel , sau đó trong cửa sổ Properties , hãy thiết lập 1> Màu sắc1> để 4> 8, 78, 524> để vẽ dấu hiệu với một đòn màu xanh lá cây tối.
Tạo các thành phần trên bảng điều khiển màu hồng.
1. Duplicate TeamAICounter and its children.
2. Chọn đồ duplique TeamACount , sau đó trong cửa sổ Properties ,
  1. Đặt Tên vào TeamBCount .
  2. Đặt Hình ảnh để rbxassetid://14305849451 để hiển thị một màn hướng trong hướng ngược lại.
  3. Đặt Color3 hình ảnh để 255, 170, 255 để nâng cao màu hồng của hình ảnh.
  4. Đặt thuộc tính teamColor lên Carnation Pink .
3. Chọn con dấu lại TextLabel , con dấu lại của TeamBCounter , sau đó trong cửa sổ Properties ,
  1. Đặt AnchorPoint để 0, 0.5 để xác định điểm xuất phát của nhãn mới ở giữa trái của nó (0% từ bên trái của nó đến bên phải của nó và 50% từ trên cùng của nó đến dưới cùng của nó).
  2. Đặt Vị trí để {0.05, 0},{0.5, 0} để di chuyển nhãn đến bên trái của nhãn cha (5% từ bên trái đến bên phải của nhãn cha, và 50% từ trên đến dưới của nhãn cha).
  3. Đặt TextXAlignment để bên trái .
4. Chọn con con đoạn UIStroke của TeamBCounter , sau đó trong cửa sổ Properties , hãy thiết lập 1> Màu1> lên 4> 158, 18, 944> để vẽ dấu hiệu với một nét vẽ màu hồng đậm.
Tham khảo các ReplicatedStorage skripts trong mẫu Laser Tag nơi file địa điểm được cập nhật chương trình cho phép nâng cấp mục tiêu và điểm dừng đội.

Các thẻ đầu được cấu hình để tạo ra một màn hình chính Heads Up Display (HUD) bao gồm setObjective và startSyncingTeamPoints . Sau khi một người tham gia một vòng và chọn người chơisử dụng blaster của họ, thẻ này đảm bả


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ọn blaster của họ, UI mục tiêu hiển thị ở trên cùng của màn hình của họ, và theo dõi mọi điểm của mỗi đội.

Giao diện Blaster

Theo các lưu tốt nhất từ Wireframe Your Layouts, bài này dạy bạn cách thực hiện tất cả các thành phần trên màn hình liên quan đến blaster của người trò chơi. Việc phân cấp các thành phần trên màn hình này chiếm phần lớn diện tích

Tấm che

Một crosshair là một thành phần UI cho phép người chơi biết họ sẽ đạt được tác động nào khi họ phóng tên lửa của họ. This UI element is a vital gameplay requirement for first-person shooter experiences because players need to be able to chính xác ngắm bắn và nhắn nhở đồng đội.

Giống như hầu hết các trải nghiệm khác trong thể loại người lái xe thứ nhất, trải nghiệm laser tag mẫu thử cho thấy các cánh tay của crosshair ở trung tâm của màn hình để người chơi có thể tập trung vào khi avatar của họ di chuyển qua không môi trường3D

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

Thêm một ImageLabel vào HUDGui ScreenGui đối tượng.
1. Trong cửa sổ Explorer , hãy tìm đến dịch vụ StarterGui .
2. Đặt chuột trên đối tượng con của nó HUDGui , sau đó nhấp vào biểu tượng ⊕ . Một menu上下文显示。
3. Từ menu context, insert an ImageLabel .
Chọn ImageLabel mới, sau đó trong cửa sổ Thông tin cơ sở ,
1. Đặt Hình ảnh lên rbxassetid://14400935446 .
2. Đặt AnchorPoint để 0.5, 0.5 để xác định điểm xuất phát của nhãn ở giữa của nhãn (50% từ bên trái đến bên phải của nhãn, và 50% từ trên cùng của nhãn).
3. Đặt Hiển thị màu nền để 1 để làm cho nền màu của nhãn hoàn toàn trong suốt.
4. Đặt Tên để Crosshair .
5. Đặt Vị trí để {0.5,0},{0.5,0} để thiết lập nhãn ở giữa màn hình.
6. Đặt ScaleType để Vừa kích thước để hình ảnh có thể chứa trong container của nó và không bị mở rộng trên các kích thước màn hình khác nhau.
(Tùy chọn) Thêm một UIAspectRatioLimit vào Crosshair để đảm bảo tỷ lệ kích thước của nhãn luôn giữa các kích thước màn hình của người chơi. Các mẫu đặt 0> Class.UI

Người đánh dấu

Một thẻ đánh là một yếu tố UI chỉ được hiển thị khi một vụ nổ tác động với một người chơi khác trên đội kẻ thù. Giống như crosshair, thẻ này là một yêu cầu gameplay quan trọng đối với các trải nghiệm người chơi đầu tiên vì nó cung cấp cho người chơi biết k

Để tái tạo chính xác dấu hiệu đánh trong trải nghiệm Laser Tag :

Thêm một ImageLabel vào Crosshair ImageLabel đối tượng.
1. Trong cửa sổ Explorer , hãy tìm đến dịch vụ StarterGui .
2. Bỏ chuột vào đối tượng con của nó Crosshair , sau đó nhấp vào đối tượng ⊕ . Một menu ng上下文 được hiển thị.
3. Từ menu context, insert an ImageLabel .
Chọn ImageLabel mới, sau đó trong cửa sổ Thông tin cơ sở ,
1. Đặt Hình ảnh lên rbxassetid://14401148736 để hiển thị biểu tượng hộp trò chuyển hình chữ nhật.
2. Đặt AnchorPoint để 0.5, 0.5 để thiết lập điểm xuất phát của nhãn ở giữa thẻ.
3. Đặt Hiển thị màu nền để 1 để làm cho nền màu của nhãn hoàn toàn trong suốt.
4. Đặt Vị trí để {0.5,0},{0.5,0} để thiết lập nhãn ở giữa màn hình.
5. Đặt Tên để Hitmarker .
6. Đặt Kích thước để {0.6, 0},{0.06, 0} để giảm kích thước của các hình chữ nhật xung quanh trung tâm của crosshair.
7. Đặt Hiển thị hình ảnh lên 1 để làm cho dấu hiệu trúng đích hoàn toàn trong suốt. Các tập lệnh trong bước tiếp theo đổi trong suốt lại thành 0 mỗi lần một người chơi tác động với một người chơi khác trên đội kẻ thù.
Tham khảo các ReplicatedStorage script trong mẫu Laser Tag nơi tập tin file được hiển thị chương trình khi một vụ nổ tác động với một người chơi trên đội kẻ thù.

Các câu lệnh sau đều yêu cầu một loạt các script modul làm việc cùng nhau để cài đặt màn hình Heads Up chính (HUD), bao gồm setupHitmarker . Sau khi một người tham gia một vòng và chọn người chơisử dụng của họ blaster, script này đảm bảo tất cả các thành phầ


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 phóng hơn 2000 và nổ tung gây ảnh hưởng đến người chơi khác, thì thời gian hiển thị hitmarker tạm thời.

Lựa chọn Blaster

Một lựa chọn blaster là một thành phần UI mà người chơi sử dụng để lựa chọn loại blaster của họ trước khi tham gia hoặc tham gia lại một vòng. Các mẫu thẻ laser trình bày cung cấp hai loại blaster: một sản xuất nhiều tia với chiếu rộng, v

Các bước tiếp theo chi tiết cách tạo một số container cho các nhóm thành phần UI khác nhau, một trang chủ với một hộp thoại, một thanh điều hướng và nhấn nút, và một nút blaster prefab. Logic scripting cho toàn bộ thành phần component dânh hiệu đại diện cho mỗi loại blaster đánh máy.

Cấu hình này cho phép bạn tạo thêm Configuration instances cho nhiều loại blaster để hiển thị đúng cách trong lựa chọn blaster mà không cần phải tạo các nút riêng trong StarterGui.PickABlasterGui .

Để chính xác tạo lại người lựa chọn blaster trong trải nghiệm Laser Tag :

Tạo một container cho toàn bộ bộ phận.
1. Thêm một Khung vào PickABlaster ScreenGui đối tượng.
  1. Trong cửa sổ Explorer , hãy tìm đến dịch vụ StarterGui .
  2. Bỏ chuột vào đối tượng con của nó PickABlaster , sau đó nhấp vào biểu tượng ⊕ . Một menu ng上下文显示。
  3. Từ menu ng上 context, insert a Khung .
2. Chọn khung mới, sau đó trong cửa sổ Tính chất ,
  1. Đặt AnchorPoint để 0.5, 1 để thiết lập điểm xuất phát của khung ở phía dưới trung tâm của nó (50% từ bên trái của khung đến bên phải của nó và 100% từ bên trên của khung đến bên dưới của nó).
  2. Đặt BackgroundTransparency để 1 để làm cho nền màu của khung hoàn toàn trong suốt.
  3. Đặt Vị trí để {0.5, 0},{0.9, 0} để thiết lập khung gần phía dưới của màn hình (50% từ bên trái sang bên phải của màn hình và 92.4% từ bên trên đến bên dưới của màn hình).
  4. Set Kích thước to {0.8, 0},{0.25, 0} để các thành phần UI của blaster selector chiếm tỉ lệ lớn trên màn hình để thu hút sự chú ý của người chơi (80% ngang, và 25% dọc).
  5. Đặt Tên vào Phần mềm bên trong .
3. (Tùy chọn) Thêm một UIAspectRatioLimit vào Component để đảm bảo tỷ lệ kích thước hình ảnh và con cái của UI không bị thay đổi ngay cả khi kích thước màn hình của người chơi thay đổi. Cá
Tạo một container để chứa nhóm các thành phần UI.
1. Làm điều đó Thành phần vào Frame .
2. Chọn khung mới, sau đó trong cửa sổ Tính chất ,
  1. Đặt AnchorPoint để 0.5, 0.5 để xác định điểm xuất phát của khung ở giữa chính mình (50% từ bên trái đến bên phải của khung, và 50% từ trên của khung đến dưới của khung).
  2. Đặt BackgroundTransparency để 1 để làm cho nền màu của khung hoàn toàn trong suốt.
  3. Đặt Vị trí để {0.5, 0},{0.375, 0} để thiết lập khung gần với trung tâm của container (50% từ bên trái sang bên phải của khung cha, và 37.5% từ trên dưới của khung cha).
  4. Set Kích thước to {1, 0},{0.75, 0} so the selection UI components take up 3/4th of the container (100% horizontally and 75% vertically of the parent frame).
  5. Đặt Tên vào Khung chọn .
Tạo một hộp thoại cho người dùng lựa chọn blaster.
1. Thêm một Label Hình Ảnh vào Khung Lựa Chọn .
2. Chọn nhãn mới, sau đó trong cửa sổ Tên tùy thuộc ,
  1. Set AnchorPoint to 0.5, 1 để thiết lập điểm xuất phát của nhãn ở phía dưới trung tâm của nó (50% từ bên trái sang bên phải của nhãn và 100% từ bên trên trái sang bên dưới của nó).
  2. Đặt Hiển thị màu nền để 1 để làm cho nền màu của nhãn hoàn toàn trong suốt.
  3. Đặt Bố trí trang bị lên -1 .
  4. Đặt Vị trí để {0.5, 0},{0.22, 0} để thiết lập nhãn gần phía trên của khung (50% từ bên trái đến bên phải của khung cha, và 22% từ bên trên đến dưới của khung cha).
  5. Set Kích thước to {0.45, 0},{0.22, 0} để rộng khu vực thông báo lên gần một nửa khuôn khổ (45% bên trên và 22% bên dưới của khuôn khổ cha).
  6. Đặt Tên vào Thẻ trước đầu .
  7. Đặt Hình ảnh lên rbxassetid://14304828123 để hiển thị một trái tim.
  8. Đặt Bóng suốt hình ảnh lên 0.15 để làm cho trang chủ mờ dần.
3. (Tùy chọn) Thêm một UIAspectRatioLimit vào nhãn để đảm bảo tỷ lệ kích thước 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. Các mẫu đặt một Class.UIAspectRatioLimit.AspectRatio
4. Thêm một TextLabel vào Header để hiển thị một hộp thoại.
5. Chọn nhãn mới, sau đó trong cửa sổ Tên tùy thuộc ,
  1. Đặt AnchorPoint để 0.5, 0.5 để đặt điểm nguồn của nhãn mới ở giữa của nó (50% từ bên trái sang bên phải của nhãn, và 50% từ trên của nó đến dưới của nó).
  2. Đặt Hiển thị màu nền để 1 để làm cho nền màu của nhãn hoàn toàn trong suốt.
  3. Đặt Vị trí để {0.5, 0},{0.5, 0} để di chuyển nhãn đến giữa của nhãn cha (50% từ bên trái đến bên phải của nhãn cha, và 50% từ trên đến dưới của nhãn cha).
  4. Đặt Kích thước lên {0.6, 0},{0.55, 0} để rộng không gian chữ cho hơn một nửa của nhãn cha (60% dọc và 55% ngang của nhãn cha).
  5. Đặt Tên vào NameLabel .
  6. Đặt FontFace để Montserrat để phù hợp với estetica tương lai.
  7. Đặt Cân nặng lên Trung bình để làm dày chữ.
  8. Set Văn bản to CHỌN MỘT BLASTER .
  9. Bật TextScaled .
Tạo một container cho nút blaster của bạn và mũi tên lựa chọn.
1. Thêm một Label Hình Ảnh vào Khung Lựa Chọn .
2. Chọn nhãn mới, sau đó trong cửa sổ Tên tùy thuộc ,
  1. Loại bỏ giá trị mặc định Hình ảnh .
  2. Set AnchorPoint to 0.5, 1 để thiết lập điểm xuất phát của nhãn ở phía dưới trung tâm của nó (50% từ bên trái sang bên phải của nhãn và 100% từ bên trên trái sang bên dưới của nó).
  3. Đặt Màu nền lên 0, 0, 0 để làm cho nhãn là đen.
  4. Đặt BackgroundTransparency để 0.3 để giảm 30% sự mờ dầu nhãn, và kết hợp tất cả các thành phần UI màu đen trong trải nghiệm.
  5. Đặt Vị trí để {0.5, 0},{1, 0} để thiết lập nhãn vào dưới-giữa khung (50% từ bên trái đến bên phải của khung cha, và 100% từ bên trên đến dưới của khung cha).
  6. Đặt Kích thước lên {1, 0},{0.77, 0} để rộng khu vực nhãn ra không gian dưới cái nhắc nhở (100% ngang và 77% dọc của khung cha).
3. Xoay các góc của container.
  1. Thêm một Góc UICorner đối tượng vào nhãn.
  2. Chọn đối tượng góc mới, sau đó trong cửa sổ 속성 , đặt CornerRadius để 0.075, 0 để xung quanh các góc.
Tạo một container cho các nút blaster của bạn.
1. Làm thành Khung vào nhãn từ bước 4.
2. Chọn khung mới, sau đó trong cửa sổ Tính chất ,
  1. Đặt AnchorPoint để 0.5, 0.5 để thiết lập điểm xuất phát của khung mới ở giữa của nó (50% từ bên trái của khung đến bên phải của khung, và 50% từ trên của khung đến dưới của khung).
  2. Đặt BackgroundTransparency để 1 để làm cho nền màu của khung hoàn toàn trong suốt.
  3. Đặt Vị trí để {0.5, 0},{0.5, 0} để thiết lập khung ở giữa nhãn cha của nó (50% từ bên trái đến bên phải của nhãn cha, và 50% từ trên cùng của nhãn cha).
  4. Đặt Kích thước lên {0.85, 0},{0.77, 0} để rộng khu vực khung lên phần lớn nhất của nhãn (85% trên mặt dọc và 77% trên mặt bằng).
  5. Đặt Tên vào Thùng chứa .
Tạo dòng chỉ dẫn cho tất cả các nút người dùng tương lai.
1. Lập một UIListLayout đối tượng vào khung từ bước 5.
2. Chọn đối tượng bố trí mới, sau đó trong cửa sổ Tùy chỉnh ,
  1. Đặt Phân cách lên 0.035, 0 để cung cấp không gian giữa tất cả các nút tương lai.
  2. Đặt FillDirection để Horizontal để mỗi nút hiển thị bên cạnh nhau.
  3. Set both HorizontalAlignment and VerticalAlignment to Center so each button alg to the middle of one another.
Tạo nút bên trái.
1. Lấy một ImageButton đối tượng vào ImageLabel từ bước 4.
2. Chọn nút mới, sau đó trong cửa sổ Tùy chỉnh ,
  1. Loại bỏ giá trị mặc định Hình ảnh .
  2. Đặt AnchorPoint để 0, 0.5 để xác định điểm xuất phát của nút mới ở giữa trái (0% từ bên trái sang bên phải của nút, và 50% từ trên cùng đến dưới cùng của nút).
  3. Đặt BackgroundTransparency để 0.15 để cung cấp phản hồi visuel về việc nhấp chuột rằng nút được chọn.
  4. Đặt Vị trí để {0.02, 0},{0.5, 0} để cung cấp đệm cho bên trái của nút từ contêiner cha (2% từ bên trái sang bên phải của nhãn cha, và 50% từ trên cùng của nhãn cha).
  5. Đặt Kích thước lên {0.04, 0},{0.33, 0} để làm cho nút lựa chọn nhỏ hơn nhiều so với nút blaster (4% trên trục ngang và 33% trên trục dọc của khung cha).
  6. Đặt Tên vào NavigationButtonLeft .
3. Xoay các góc của nút.
  1. Thêm một Góc UICorner đối tượng vào nút.
  2. Chọn đối tượng góc mới, sau đó trong cửa sổ Tính năng , hãy đặt CornerRadius để 0.1, 0 để xung quanh các góc.
4. Đặt một ImageLabel đối tượng vào nút.
5. Chọn nhãn mới, sau đó trong cửa sổ Tên tùy thuộc ,
  1. Đặt AnchorPoint để 0.5, 0.5 để đặt điểm nguồn của nhãn mới ở giữa của nó (50% từ bên trái sang bên phải của nhãn, và 50% từ trên của nó đến dưới của nó).
  2. Đặt vị trí để {0.45, 0},{0.5, 0} để thiết lập nhãn ở giữa của nút cha (45% từ bên trái đến bên phải của nút cha, v
  3. Đặt Kích thước lên {0.8, 0},{0.8, 0} để rộng khu vực nhãn để không gian dưới cùng của khung cha (80% ngang và 80% đứng của khung cha).
  4. Đặt Bóng chuyền độ trong suốt để 1 để làm cho nền của hình ảnh hoàn toàn trong suốt.
  5. Đặt Hình ảnh lên rbxassetid://14309187238 .
  6. Đặt ScaleType để Vừa với .
Tạo nút điều hướng phải.
1. Duplicate NavigationButtonLeft .
2. Chọn nút tương tự, sau đó trong cửa sổ Tùy chỉnh ,
  1. Đặt AnchorPoint để 1, 0.5 để xác định điểm xuất phát của nút mới ở giữa trung tâm (100% từ bên trái đến bên phải của nút, và 50% từ trên cùng đến dưới cùng của nút).
  2. Đặt Vị trí để {0.98, 0},{0.5, 0} để cung cấp đệm cho phải của nút từ conteneiner cha (98% từ bên trái đến bên phải của nhãn cha, và 50% từ trên đến dưới của nhãn cha).
  3. Đặt Tên để NavigationButtonRight .
3. Chọn đối tượng con ImageLabel của nó.
  1. Đặt Rotation để 180 để lật hình ảnh.
  2. Đặt vị trí để {0.55, 0},{0.5, 0} để thiết lập nhãn ở giữa của nút cha (55% từ bên trái đến bên phải của nút cha, v
Tạo nút CHỌN .
1. Làm một ButtonImage vào Components . Thông báo cách hệ thống này giữ nút chọn riêng biệt khỏi SelectionFrame để bạn có thể thêm đệm giữa phần chính của component từ nút chọn.
2. Chọn nút mới, sau đó trong cửa sổ Tùy chỉnh ,
  1. Loại bỏ giá trị mặc định Hình ảnh .
  2. Set AnchorPoint to 0.5, 1 để thiết lập điểm xuất phát của nút mới ở phía dưới trung tâm của nó (50% từ bên trái sang bên phải của nút, và 100% từ bên trên trung tâm của nó).
  3. Đặt BackgroundTransparency để 0.15 để cung cấp phản hồi visuel về việc nhấp chuột rằng nút được chọn.
  4. Đặt Vị trí để {0.5, 0},{0.99, 0} để thiết lập nút gần trung tâm dưới của container (50% từ bên trái sang bên phải của khung cha, và 99% từ bên trên xuống dưới của khung cha).
  5. Đặt Kích thước lên {0.17, 0},{0.18, 0} để dài nút bên dưới nút bên trên (17% theo chiều ngang và 18% theo chiều dọc của khung cha).
  6. Đặt Tên vào SelectButton .
3. Xoay các góc của nút.
  1. Thêm một Góc UICorner đối tượng vào nút.
  2. Chọn đối tượng góc mới, sau đó trong cửa sổ Tính năng , hãy đặt CornerRadius để 0.2, 0 để xung quanh các góc.
4. Thêm một TextLabel đối tượng vào nút để bạn có thể hiển thị một cuộc gọi hành động.
5. Chọn nhãn mới, sau đó trong cửa sổ Tên tùy thuộc ,
  1. Đặt AnchorPoint để 0.5, 0.5 để đặt điểm nguồn của nhãn mới ở giữa của nó (50% từ bên trái sang bên phải của nhãn, và 50% từ trên của nó đến dưới của nó).
  2. Đặt Hiển thị màu nền để 1 để làm cho nền màu của nhãn hoàn toàn trong suốt.
  3. Đặt Vị trí để {0.5, 0},{0.5, 0} để di chuyển nhãn đến giữa nút (50% từ bên trái đến bên phải của nút cha, và 50% từ trên đến dưới của nút cha).
  4. Đặt Kích thước lên {0.9, 0},{0.55, 0} để rộng không gian chữ đến gần như tất cả chiều rộng của nhãn cha (90% hướng tây và 55% hướng đông của nhãn cha).
  5. Đặt Tên để SelectTextLabel .
  6. Đặt FontFace để Montserrat để phù hợp với estetica tương lai.
  7. Đặt Cân nặng lên Trung bình để làm dày chữ.
  8. Set Văn bản to CHỌN .
  9. Bật TextScaled .
Tạo một cấu hình 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 thành phần 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. Đặt một ảnh nội quả cầu ố vào thư mục Guis .
3. Chọn nút mới, sau đó trong cửa sổ Tùy chỉnh ,
  1. Loại bỏ giá trị mặc định Hình ảnh .
  2. Đặt AnchorPoint để 0.5, 0.5 để thiết lập điểm xuất phát của nút mới ở giữa chính mình (50% từ bên trái đến bên phải của nút, và 50% từ trên đến dưới của nút).
  3. Đặt TransparencyHintergrund để 0.65 để cung cấp phản hồi visuel rằng nút không nằm trong khu vực tập trung. Scripts ở bước 12 cung cấp phản hồi visuel chương trình khi nút ở khu vực tập trung.
  4. Đặt Bố trí trật tự lên 2 .
  5. Đặt Tên để BlasterButtonPrefab .
  6. Đặt Kích thước lên {0.8, 0},{0.8, 0} .
  7. Đặt HiểnThịHìnhẢnh lên 1 để làm cho hình ảnh hoàn toàn trong suốt.
4. Thêm một UIAspectRatioConstraint vào BlasterButtonPrefab để đảm bảo tỷ lệ kích thước của nút luôn giữ nguyên trong component, bất kể kích thước màn hình của người chơi.
5. Xoay các góc của nút.
  1. Lập một đối tượng UICorner vào BlasterButtonPrefab .
  2. Chọn Góc UICorner , sau đó trong cửa sổ Thuộc tính , đặt CornerRadius lên 1> 0.05, 01> để xung quanh các góc.
6. Insert an ImageLabel into BlasterButtonPrefab .
7. Chọn nhãn mới, sau đó trong cửa sổ Tên tùy thuộc ,
  1. Loại bỏ giá trị mặc định Hình ảnh .
  2. Đặt AnchorPoint để 0.5, 0.5 để đặt điểm nguồn của nhãn mới ở giữa của nó (50% từ bên trái sang bên phải của nhãn, và 50% từ trên của nó đến dưới của nó).
  3. Đặt Hiển thị màu nền để 1 để làm cho nền màu của nhãn hoàn toàn trong suốt.
  4. Set Position to {0.52, 0},{0.497, 0} để thiết lập nhãn ở giữa của nút cha (52% từ bên trái đến bên phải của nú
  5. Đặt Kích thước lên {1.20, 0},{0.9, 0} để rộng khu vực nhãn bên ngoài nút (120% dọc và 90% ngang của nút cha).
  6. Đặt ScaleType để Vừa với .
Tham khảo các ReplicatedStorage script trong mẫu Laser Tag địa điểm tập tin có chứa các nút cho mỗi blaster, thiết lập các nút khi một người chọn một nút mà không ở trong khu vực tập trung, và kết hợp lựa chọn blaster của người chơi với avatar của

Các bước sau đây yêu cầu một loạt các script làm việc cùng nhau để tạo ra blaster selector. Khi một người chơi tham gia vào trải nghiệm hoặc respawns back into a round after their health reach zero, this script kích hoạt tất cả các UI elements của blaster selector cho đến khi người chơi đưa ra 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ờ, mỗi khi một người chơi tham gia vào trải nghiệm hoặc respawns back into a round sau khi sức khỏe của họ đạt đến zero, UI blaster selector hiển thị, họ có thể làm một lựa chọn, và mỗi nút hoạt động như mong đợi.

Nút Rะเบิด

Một nút nổ là một thành phần UI mà người chơi sử dụng để nổ tung khẩu súng 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. Các mẫu trải nghiệm laser nổ sử dụng nút nổ tung với một biểu tượng thể hiện cả một crosshair và một ngọn

Để chính xác tái tạo nút nổ trong trải nghiệm Laser Tag :

Thêm một ImageButton vào HUDGui ScreenGui đối tượng.
1. Trong cửa sổ Explorer , hãy tìm đến dịch vụ StarterGui .
2. Đặt chuột trên đối tượng con của nó HUDGui , sau đó nhấp vào biểu tượng ⊕ . Một menu上下文显示。
3. Từ menu context, insert an ImageButton .
Trong viewport, di chuyển nút để đến nơi các ngón tay của một người chơi tự nhiên nghỉ ngơi, so you can get a visual sense of what the button will look like on a player's thiết bị, then in the Properties window,
1. Đặt Hình ảnh để rbxassetid://18308375035 để hiển thị biểu tượngngười nổ tung.
2. Đặt PressedImage để rbxassetid://18308372558 để hiển thị một phiên bản ngược của nút nổ khi một người chơi nhấn nút.
3. Đặt Hiển thị màu nền để 1 để làm cho nền màu của nhãn hoàn toàn trong suốt.
4. Đặt Tên để BlastButton .
5. Đặt ScaleType để Vừa kích thước để hình ảnh có thể chứa trong container của nó và không bị mở rộng trên các kích thước màn hình khác nhau.
6. Đặt HiểnThịHìnhẢnh lên 0.3 để giảm bóng tối của nhãn để tất cả các thành phần trong trải nghiệm đều màu đen.
Thêm một UIAspectRatioConstraint vào BlastButton để đảm bảo tỷ lệ kích thước của nút luôn giữ nguyên với kích thước màn hình của người chơi.
Tham khảo các ReplicatedStorage script trong mẫu Laser Tag địa điểm tập tin có chương trình để hiển thị nút ngắn khi một người sử dụng cảm ứng trên thiết bị chấp nhận cảm điều khiển.

Các thẻ mô-đun sau đây yêu cầu một loạt các script mô-đun làm việc cùng nhau để cài đặt màn hình chính Heads Up Display (HUD) chính, bao gồm setupTouchButtonAsync . Sau khi một người tham gia một vòng và chọn blaster của họ, thẻ mô-đun này đảm bảo


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 cảm ứng trên thiết bị mà hỗ trợ cảm điều khiển, nút blaster được hiển thị ở phía trên cùng bên phải của nút nhảy.

Giao diện người dùng

Theo các thông lệ tốt nhất của ngành công nghiệp thiết kế từ Wireframe Your Layouts, bài này dạy bạn cách thực hiện tất cả các thành phần trên màn hình liên quan đến trạng thái của người chơi. Việc phân tách các thành phần trên màn hình này gần với các bên c

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

Một thành phần UI là thành phần của một UI mà người chơi tham chiếu để nhanh chóng giải mã nhóm mà họ thuộc về ngay cả khi họ xuất hiện trong khu vực sinh sản của đội của họ. Các trải nghiệm Laser Tag mẫu cho các phiên bản của thành phần UI tùy thuộc vào nế

Theo hướng dẫn từ Chọn một chủ đề màu, cả hai phiên bản của người chỉ trích người chơi kết hợp màu nhóm với một biểu tượng đơn giản, tối giản với độ chi tiết tối thiểu để giữ cho chúng đọc được trên các màn hình nhỏ. Cung cấp hai h

Để chính xác tái tạo thành phần dấu hiệu người chơi trong trải nghiệm Laser Tag :

Thêm một Khung vào HUDGui ScreenGui đối tượng.
1. Trong cửa sổ Explorer , hãy tìm đến dịch vụ StarterGui .
2. Chuyển trên đối tượng con của nó HUDGui , sau đó nhấp vào biểu tượng ⊕. Một menu ng上下文 được hiển thị.
3. Từ menu ng上 context, insert a Khung .
Chọn Khung mới , sau đó trong cửa sổ Tên sở hữu ,
1. Đặt AnchorPoint để 0, 1 để xác định điểm nguyên mẫu của khung ở phía dưới trung tâm của nó (0% từ bên trái của khung đến bên phải của nó và 100% từ trên của khung đến dưới của nó).
2. Đặt Hiển thị màu nền để 1 để làm cho nền màu của nhãn hoàn toàn trong suốt.
3. Đặt Tên vào PlayerDisplay .
4. Đặt Vị trí để {0.02, 0},{0.97, 0} để đặt khung gần bên trái dưới của màn hình.
5. Đặt Kích thước lại {0.23, 0},{0.08, 0} để thu nhỏ và rộng khung.
6. Mở ClipsDescendants để cắt bỏ GuiObjects con cái kéo dài xa hơn khuôn khổ.
Tạo hình dạng polygonal.
1. Thêm một Nhãn Hình Ảnh vào PlayerDisplay .
2. Chọn nhãn mới, sau đó trong cửa sổ Tên tùy thuộc ,
  1. Đặt Hình ảnh lên rbxassetid://14304828123 để hiển thị biểu tượng trapezoid.
  2. Đặt AnchorPoint để 1, 1 để xác định điểm xuất phát của nhãn ở phía dưới bên phải của nó (100% từ bên trái đến bên phải của nhãn, và 100% từ bên trên đến bên dưới của nó).
  3. Đặt Hiển thị màu nền để 1 để làm cho nền màu của nhãn hoàn toàn trong suốt.
  4. Đặt Tên lên Cục khối .
  5. Đặt Vị trí để {1,0},{1,0} để đặt nhãn vào bên phải của khung.
  6. Đặt Kích thước lên {1.858, 0},{0.581, 0} để rộng nhãn bên ngoài khung, và thu nhỏ nó một chút so với chiều dài của khung.
  7. Đặt Độ trong suốt hình ảnh lên 0.15 để làm cho nhãn bị mờ nhẹ.
  8. Đặt ScaleType để Vừa kích thước để hình ảnh có thể chứa trong container của nó và không bị mở rộng trên các kích thước màn hình khác nhau.
  1. Thêm một UIAspectRatioConstraint vào Block để đảm bảo rằng kích thước nội quyển của nhãn và các con cái UI của nó vẫn giữ nguyên mức thu nhỏ trong khi kích thước màn hình của người chơi không thay đổi.
  2. Chọn hạn chế mới, sau đó trong cửa sổ Thuộc tính , đặt AspectRatio lên 13.78 .
Tạo khung cho bức vẽ của người chơi.
1. Thêm một Nhãn Hình Ảnh vào PlayerDisplay .
2. Chọn nhãn mới, sau đó trong cửa sổ Tên tùy thuộc ,
  1. Loại bỏ giả dối assetID trong thuộc tính Hình ảnh . Các script trong bước 7 tạo ra một cái nhìn giả dối vào nhãn hình ảnh.
  2. Đặt AnchorPoint để 0, 1 để xác định điểm xuất phát của nhãn ở phía dưới cùng bên trái của nó (0% từ bên trái sang phải của nhãn và 100% từ bên trên cùng sang phải của nó).
  3. Đặt Màu nền3 để 0, 0, 0 để thiết lập màu nền nhãn cho đen.
  4. Đặt BackgroundTransparency để 0.3 để giảm 30% sự mờ dầu nhãn, và kết hợp tất cả các thành phần UI màu đen trong trải nghiệm.
  5. Đặt Tên để Hồ sơ người chơi .
  6. Đặt Vị trí để {0.11, 0},{1, 0} để thiết lập nhãn bên trái của hình dạng hình chữ nhật.
  7. Đặt Kích thước lên {0.23, 0},{1, 0} để thu nhỏ nhãn.
  8. Đặt Độ trong suốt hình ảnh lên 0.15 để làm cho nhãn bị mờ nhẹ.
  9. Đặt ScaleType để Vừa kích thước để hình ảnh có thể chứa trong container của nó và không bị mở rộng trên các kích thước màn hình khác nhau.
  1. Thêm một UIAspectRatioConstraint vào PlayerPortrait để đảm bảo tỷ lệ thành phần nhãn và con cái của nó giữ nguyên tỷ lệ thành phần của nhãn và con cái của nó, ngay cả khi kích thước màn hình của người chơi thay đổi.
  2. Làm thế nào để thêm một Góc Vào vào PlayerPortrait , sau đó trong cửa sổ Thuộc tính , hãy thiết lập 1> CornerRadius1> lên 4> 0.05, 04> để hơi vòng tròn các góc.
Tạo nhãn chữ cho tên người chơi.
1. Làm điều đó vào PlayerDisplay .
2. Chọn nhãn mới, sau đó trong cửa sổ Tên tùy thuộc ,
  1. Đặt AnchorPoint để 0, 0.5 để xác định điểm xuất phát của nút mới ở giữa trái (0% từ bên trái sang bên phải của nút, và 50% từ trên cùng đến dưới cùng của nút).
  2. Đặt Hiển thị màu nền để 1 để làm cho nền màu của nhãn hoàn toàn trong suốt.
  3. Đặt Tên để PlayerNameTextLabel .
  4. Đặt Vị trí để {0.35, 0},{0.72, 0} để đặt nhãn vào bên phải của container (35% từ bên trái đến bên phải của nhãn cha, và 72% từ trên đến dưới của nhãn cha).
  5. Đặt Kích thước lên {0.52, 0},{0.3, 0} để cho phép văn bản chiếm phần lớn nhất của khu vực hình chữ nhật (52% trên mặt trục ngang và 30% trên mặt trục dọc của khu vực cha).
  6. Đặt FontFace để Montserrat để phù hợp với estetica tương lai.
  7. Đặt Cân nặng lên Dũa vững chắc để làm dày chữ.
  8. Loại bỏ văn bản dự phòng trong thuộc tính Văn bản . Các script trong bước 7 tạo ra một cái nhãn văn bản trong lớp Nhãn văn bản.
  9. Bật TextScaled .
  10. Đặt TextXAlignment để bên trái .
Tạo các biểu tượng và màu mắt đội để hiển thị bên trái của bức tranh người chơi.
1. Làm điều đó vào PlayerDisplay , sau đó đổi tên nó thành TeamIcons .
2. Tạo biểu tượng nhóm màu xanh lá cây và màu.
  1. Thêm một Nhãn Hình Ảnh vào TeamIcons .
  2. Chọn nhãn mới, sau đó trong cửa sổ Tên tùy thuộc ,
    
    Đặt AnchorPoint để 0, 1 để xác định điểm xuất phát của nhãn ở phía dưới cùng bên trái của nó (0% từ bên trái sang phải của nhãn và 100% từ bên trên cùng sang phải của nó).
    
    Đặt Màu nền3 để 88, 218, 171 để thiết lập màu nền nhãn là màu xanh lá cây.
    
    Đặt Tên để TeamAIcon .
    
    Đặt Vị trí để {0, 0},{1, 0} để thiết lập nhãn bên trái của khung.
    
    Đặt Kích thước lên {0.135, 0},{0.58, 0} để thu nhỏ nhãn bên trái của hình ảnh người chơi.
    
    Đặt HiểnThịHìnhẢnh lên 1 để làm cho nhãn hiển thị trong suốt.
  1. Tùy chỉ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 đối với các kịch bản trong bước 7.
    
    Trong cửa sổ Tính chất , hãy di chuyển đến phần Thuộc tính rồi nhấp vào biểu tượng plus. Một hộp thoại pop-up được hiển thị.
    
    Trong trường Tên , nhập màu nhóm .
    
    Trong menu Type dưới đây, chọn BrickColor .
    
    Nhấp vào nút Lưu .
    
    Đặt đặt màu sắc đội mới cho Mint .
  2. Thêm một UIAspectRatioConstraint vào TeamAIcon để đảm bảo tỷ lệ thành phần của nhãn và con cái nó không thay đổi bất kể kích thước màn hình của người chơi.
  3. Tạo biểu tượng.
    
    Thêm một ImageLabel vào TeamAIcon .
    
    Chọn nhãn mới, sau đó trong cửa sổ Tên tùy thuộc ,
    
    Đặt Hình ảnh lên rbxassetid://14309678670 để hiển thị biểu tượng đội xanh.
    
    Đặt AnchorPoint để 0.5, 0.5 để xác định điểm xuất phát của nhãn ở giữa của nó (50% từ bên trái của nó đến bên phải của nó và 50% từ trên của nó đến dưới của nó).
    
    Đặt Hiển thị màu nền để 1 để làm cho nền màu của nhãn hoàn toàn trong suốt.
    
    Đặt Tên để Hình tượng .
    
    Đặt Vị trí để {0.5, 0},{0.5, 0} để đặt nhãn vào giữa nhãn cha của nó.
    
    Đặt Kích thước lên {0.7, 0},{0.6, 0} để thu nhỏ nhãn.
    
    Đặt ScaleType để Vừa kích thước để hình ảnh có thể chứa trong container của nó và không bị mở rộng trên các kích thước màn hình khác nhau.
3. Tạo biểu tượng nhóm màu hồng và màu.
  1. Duplicate TeamAIcon and its children.
  2. Chọn đồ duplique TeamAIcon , sau đó trong cửa sổ Properties ,
    
    Đặt Màu nền3 để 255, 170, 255 để thiết lập màu nền nhãn là màu hồng carnation.
    
    Đặt Tên để NameTeamBIcon .
    
    Đặt thuộc tính teamColor lên Carnation Pink .
    
    Chọn con cháu Icon dư du của TeamBIcon , sau đó trong cửa sổ Properties , hãy thiết lập 1> Image1> lên 4> rbxassetid://143096785494> để hiển thị biểu tượnghội nhóm màu hồng.
Tham khảo các ReplicatedStorage script trong mẫu Laser Tag nơi tập tin lưu trữ được hiển thị chính xác màu và biểu tượng người chơi khi một người chơi đang hoạt động trong một hiệp đấu.

Các thẻ này yêu cầu một loạt các script modul làm việc cùng nhau để cài đặt màn hình chính Heads Up Display (HUD), bao gồm startSyncingTeamColor , setPlayerName và setPlayerPortrait . Sau khi một người th


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 tham gia hoặc tham gia lại vòng sau khi respawn, thì người chơi indicator được hiển thị ở phía dưới cùng bên trái của màn hình.

Màn Hình Trường Lực

Một màn hình trượt tuyết là một thành phần UI để che phủ toàn bộ viewport để cho người chơi biết rằng họ đang an toàn khỏi đội kẻ thù trong khi tham gia hoặc tham gia lại một hiệp đấu. Theo n

Để tái tạo chính xác màn hình force field trong trải nghiệm Laser Tag :

Thêm một ImageLabel vào ForceFieldGui ScreenGui đối tượng.
1. Trong cửa sổ Explorer , hãy tìm đến dịch vụ StarterGui .
2. Giới thiệu Hover over its child ForceFieldGui object, then click the ⊕ biểu tượng. A contextual menu displays.
3. Từ menu context, insert an ImageLabel .
Chọn nhãn mới, sau đó trong cửa sổ Tên tùy thuộc ,
1. Đặt Hình ảnh lên rbxassetid://14462567888 .
2. Đặt BackgroundTransparency để 0.8 để làm cho trường lực trong suốt.
3. Đặt Kích thước lên {1, 0},{1, 0} để làm cho hình ảnh chiếm toàn màn hình (100% theo chiều ngang và 100% theo chiều dọc của cha ScreenGUI).
4. Đặt ScaleType để Gạch để làm cho gạch hexagon trên toàn bộ màn hình.
5. Đặt Kích thước hạt liệu lên {0, 104},{0, 180} .
Thêm một UIGradient đối tượng vào nhãn.
Chọn đối tượng chuẩn độ mới, sau đó trong cửa sổ Tùy chỉnh ,
1. Đặt Màu vào một chuỗi màu bắt đầu là xanh, chuyển trắng và sau đó chuyển màu xanh lại.
  1. Đặt Màu lên 120, 192, 250 để áp dụng một màu xanh lá cây cho tất cả các hình thể.
  2. Nhấp vào thuộc tính Màu , sau đó nhấp vào nút ⋯ . Một hộp thoại màu xuất hiện.
    
    Mỗi hình tam giác ở dưới trục chính của màu họa là một điểm chìa khóa xác định giá trị màu của thuộc tính ở điểm đó của hình ảnh từ bên trái sang bên phải.
  3. Nhấp và kéo màu đến khi bạn đạt đến giá trị màu Thời gian là 0.05 , sau đó nhấp vào hộp nhỏ bên cạnh Màu để mở cửa sổ 1> Màu sắc1> pop-up.
  4. Chọn một trắng sáng, sau đó đóng cái cửa sổ pop-up.
  5. Nhấp và kéo màu đến khi bạn đạt được giá trị màu 0.95 , sau đó mở cửa sổ 0.95 lại và chọn cùng một màu trắng như trước.
2. Đặt Rotation để 225 để làm cho phần màu xanh của bạn được hiển thị ở góc trên bên trái và dưới bên phải.
3. Đặt Độ trong suốt vào một chuỗi số mà khiến trường lực trông giống như nó đang lấp lánh.
  1. Nhấp vào thuộc tính Độ trong suốt , sau đó nhấp vào nút ⋯ . Một loạt bảng pop-up hiển thị. Mỗi hàng ở đầu và cuối của loạt bảng là một keypoint xác định giá trị trong suốt của thuộc tính ở điểm đó của hình ảnh từ bên trái
  2. Cài đặt các giá trị thời gian và giá trị trong suốt chuỗi số:
  - Thời gian = 0 , Giá trị = 0> 0.250>
  - Thời gian = .101 , Giá trị = 0> 0.8750>
  - Thời gian = .183 , Giá trị = 0> 00>
  - Thời gian = .3 , Giá trị = 0> 10>
  - Thời gian = .7 , Giá trị = 0> 10>
  - Thời gian = 1 , Giá trị = 0> 0.90>
Tạo một Nhãn hình ảnh từ bước 2.
Chọn đối tượng UIGradient trong nhãn dupl, sau đó trong cửa sổ Tính chất ,
1. Đặt Rotation để -45 để lật hình ảnh để gần nhau trên trục Y.
2. Điều chỉnh Độ trong suốt để làm cho vết nhòa nhìn thông thường hơn.
  1. Nhấp vào thuộc tính Độ trong suốt , sau đó nhấp vào nút ⋯ . Một loạt các hộp thoại hiện ra.
  2. Chọn cái khung chì thứ ba, sau đó nhấp vào nút Xóa .
Tham khảo các ReplicatedStorage script trong mẫu Laser Tag nơi tập tin tập tin nơi tập tin mà chương trình khiến màn hình hiển thị trong khi một người chơi tham gia hoặc tham gia lại một vòng.

Các điều sau đây ReplicatedStorage.ForceFieldClientVisuals script khách hàng thay thế mô hình đồ thị đoạn ForceField mặc định với StarterGui.ForceFieldGui . K

Cuộn văn 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 các hình ảnh trượt mắt thứ nhất của các cầu thủ khi họ nhìn vào những hình ả

First-person force field visuals include a futuristic hexagonal grid on the perimeter of the screen. — Các hình ảnh trường lực thứ nhất

Third-person force field visuals include a blue sparkling orb around the player spawning into the experience. — Các hình ảnh của trường lực 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 ở một điểm đẻ trứng với ForceField bị tắt
		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ờ, mỗi khi một người chơi tham gia hoặc tham gia lại vòng sau khi respawn, UI màn hình force field mới hiển thị thay vì các hình ảnh đầu tiên người chơi ForceField .

Màn Hình Respawn

Một màn hình respawn là một thành phần UI để thu nhỏ cảnh để thông báo cho người chơi rằng họ đã bị thẻ ra, và máy chủ đang trong quá trình respawn chúng trở về khu vực chơi của chúng. This UI element is important bởi vì nó cho phép người chơi thời gian để xử lý những gì đã b

Để biết thêm thông tin về hành vi phục hồi tự động trong trải nghiệm laser tag mẫu, xem Respawn Characters từ chương trình giảng dạy Gameplay Scripting.

Để tái tạo chính xác màn hình respawn trong trải nghiệm Laser Tag :

Tạo banner thông tin trung tâm.
1. Thêm một ImageLabel vào OutStateGui ScreenGui đối tượng.
  1. Trong cửa sổ Explorer , hãy tìm đến dịch vụ StarterGui .
  2. Đặt chuột vào cái con của nó OutStateGui object, then click the ⊕ biểu tượng. A context menu displays.
  3. Từ menu context, insert an ImageLabel .
2. Chọn nhãn mới, sau đó trong cửa sổ Tên tùy thuộc ,
  1. Đặt AnchorPoint để 0.5, 0.5 để thiết lập điểm xuất phát của nút mới ở giữa các thành phần (50% từ bên trái đến bên phải của nhãn, và 50% từ trên cùng đến dưới cùng của nhãn).
  2. Đặt Hiển thị màu nền để 1 để làm cho nền màu của nhãn hoàn toàn trong suốt.
  3. Đặt Vị trí để {0.5, 0},{0.5, 0} để thiết lập nhãn ở giữa thân hàng rào (50% từ bên trái đến bên phải của thân hàng rào, và 50% từ trên cùng đến dưới cùng của thân hàng rào).
  4. Đặt Kích thước lên {0.48, 0},{0.06, 0} để rộng nhãn (48% theo chiều ngang và 6% theo chiều dọc của ScreenGUI cha).
  5. Đặt Tên lên Cục khối .
  6. Đặt Hình ảnh lên rbxassetid://14304827265 để làm cho hình ảnh trở thành một trái tim.
  7. Đặt Màu hình ảnh lên 0,0,0 để làm cho trapezoid đen.
  8. Đặt Hiển thị trong suốt để 0.3 để giảm 30% sự nhòa nhập của nhãn, và kết hợp tất cả các thành phần trong suốt trong trải nghiệm.
3. Thêm một UIAspectRatioConstraint vào Block để đảm bảo rằng kích thước nội quyển của nhãn và các con cái UI của nó vẫn giữ nguyên mức thu nhỏ trong khi kích thước màn hình của người chơi không thay đổi.
4. Chọn hạn chế mới, sau đó trong cửa sổ Thuộc tính , đặt AspectRatio lên 13.78 .
5. Làm điều đó Nhập một TextLabel vào Block cho mục thông tin.
6. Chọn nhãn mới, sau đó trong cửa sổ Tên tùy thuộc ,
  1. Đặt AnchorPoint để 0.5, 0.5 để xác định điểm xuất phát của nhãn ở giữa của nó (50% từ bên trái của nó đến bên phải của nó và 50% từ trên của nó đến dưới của nó).
  2. Đặt Hiển thị màu nền để 1 để làm cho nền màu của nhãn hoàn toàn trong suốt.
  3. Đặt Vị trí để {0.5, 0},{0.5, 0} để thiết lập nhãn ở giữa nhãn cha (50% từ bên trái đến bên phải của nhãn cha, và 50% từ trên cùng của nhãn cha) .
  4. Đặt Kích thước lên {.85, 0},{0.55, 0} để cho phép văn bản chiếm phần lớn nhất của khu vực trapezoid (85% horizontally và 55% vertically của nhãn cha).
  5. Đặt Tên vào BodyTextLabel .
  6. Đặt FontFace để Montserrat để phù hợp với estetica tương lai.
  7. Đặt Cân nặng lên Dũa vững chắc để làm dày chữ.
  8. Đặt Văn bản để Respawning… .
  9. Đặt Màu Văn Bản3 để 255, 255, 255 để làm cho văn bản trắng.
  10. Bật TextScaled .
Tạo thẻ.
1. Thêm một ImageLabel vào Block .
2. Chọn nhãn mới, sau đó trong cửa sổ Tên tùy thuộc ,
  1. Set AnchorPoint to 0.5, 1 để thiết lập điểm xuất phát của nhãn ở phía dưới trung tâm của nó (50% từ bên trái sang bên phải của nhãn và 100% từ bên trên trái sang bên dưới của nó).
  2. Đặt Hiển thị màu nền để 1 để làm cho nền màu của nhãn hoàn toàn trong suốt.
  3. Đặt Vị trí để {0.5, 0},{0, 0} để đặt nhãn ở vị trí trên cùng của nhãn cha (50% từ bên trái đến bên phải của nhãn cha, và 0% từ bên trên đến bên dưới của nhãn cha).
  4. Đặt Kích thước lên {0.46, 0},{0.56, 0} để rộng nhãn (46% theo chiều ngang và 56% theo chiều dọc của nhãn cha).
  5. Đặt Tên vào Thẻ trước đầu .
  6. Đặt Hình ảnh lên rbxassetid://14304826985 để làm cho hình ảnh một màu mời hướng.
  7. Đặt ColorHình Ảnh lên 245, 46, 46 để làm cho màu đỏ mờ dần để cho người chơi đang tạm thời ngoài hành trình khi họ bị loại bỏ khỏi vòng.
3. Thêm một TextLabel vào Header cho text thông tin.
4. Chọn nhãn mới, sau đó trong cửa sổ Tên tùy thuộc ,
  1. Đặt AnchorPoint để 0.5, 0.5 để xác định điểm xuất phát của nhãn ở giữa của nó (50% từ bên trái của nó đến bên phải của nó và 50% từ trên của nó đến dưới của nó).
  2. Đặt Hiển thị màu nền để 1 để làm cho nền màu của nhãn hoàn toàn trong suốt.
  3. Đặt Vị trí để {0.5, 0},{0.5, 0} để thiết lập nhãn ở giữa nhãn cha (50% từ bên trái đến bên phải của nhãn cha, và 50% từ trên cùng của nhãn cha) .
  4. Đặt Kích thước lên {.85, 0},{0.55, 0} để cho phép văn bản chiếm phần lớn nhất của khu vực mời (85% trên mặt đất và 55% trên mặt đất của nhãn cha).
  5. Đặt Tên vào NameLabel .
  6. Đặt FontFace để Montserrat để phù hợp với estetica tương lai.
  7. Đặt Cân nặng lên Đen để làm dày chữ.
  8. Set Văn bản to TAGGED - YOU'RE OUT! 9. Đặt Màu Văn Bản3 để 255, 255, 255 để làm cho văn bản trắng.
  9. Bật TextScaled .
Tạo ra mờ dần xung quanh các biên giới của màn hình.
1. Thêm một Nhãn hình ảnh vào OutstateGui .
2. Chọn nhãn mới, sau đó trong cửa sổ Tên tùy thuộc ,
  1. Đặt AnchorPoint để 0.5, 0.5 để xác định điểm xuất phát của nhãn ở giữa của nó (50% từ bên trái của nó đến bên phải của nó và 50% từ trên của nó đến dưới của nó).
  2. Đặt Màu nền3 để 0,0,0 để thiết lập màu nền nhãn cho đen.
  3. Đặt Hiển thị màu nền lên 0.5 để làm cho nền màu nền của nhãn hiện nửa trong suốt.
  4. Đặt Vị trí để {0.5, 0},{0.5, 0} để thiết lập nhãn ở giữa thân hàng rào (50% từ bên trái đến bên phải của thân hàng rào, và 50% từ trên cùng đến dưới cùng của thân hàng rào).
  5. Đặt Kích thước lên {1, 0},{1, 0} để rộng nhãn ra toàn màn hình (100% ngang và 100% dọc của phụ huynh ScreenGUI).
  6. Đặt ZIndex để -1 để hiển thị nhạt nhẽo sau các thành phần UI khác.
  7. Đặt Tên vào Thẻ trước đầu .
  8. Đặt Hình ảnh lên rbxassetid://14309518613 để làm cho hình ảnh mờ dần
  9. Đặt Độ trong suốt hình ảnh lên 0.1 để làm cho nó mờ nhẹ.
Để cải thiện hiệu lực, bạn có thể bỏ qua tài nguyên hình ảnh và thay vào đó sử dụng một UIGradient đối tượng với một chuỗi số màu chỉnh sửa tùy chỉnh. Để biết thêm về kỹ thuật này mờ dần, hãy xem UI Appearance Modifiers - Gradient.
Tham khảo ReplicatedStorage script trong mẫu Laser Tag nơi file địa chỉ tập tin được lập trình để hiển thị màn hình respawn khi sức khỏe của một người chơi đạt đến zero, và họ đang trong quá trình respawn back to their team's spawn zone.

Các chức năng sau đây ReplicatedStorage.PlayerStateHandler tập lệnh client chứa các hàm có thể 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 hàm trả lời sự kiện đều được grouped logically với nhau trong script này bởi vì chúng yêu cầu

Khi sức khỏe của một người chơi đạt đến zero, họ playerState đã trở thành TaggedOut , which triggers the onTaggedOut() function. 1> onTaggedOut()1> ngay lập tức triggers the following behavior:

Người chơi không thể di chuyển trong đấu trường.
Người chơi không thể di chuyển máy ảnh của họ.
Người chơi không thể sử dụng súng của họ.
The StarterGui.OutStateGui becomes exclusively enabled.

Khi người chơi respawns, their playerState becomes SelectingBlaster, which triggers the onSelectingBlaster() function. 1> onSelectingBlaster1> then exclusively enables the 4> StarterGui.PickABlasterGui


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ừ lỗi đã được chỉ định
local function setGuiExclusivelyEnabled(enabledGui: ScreenGui?)
	-- guilayers có một danh sách các guis mà nên được cài đặt riêng.
	for _, screenGui in guiLayers do
		screenGui.Enabled = screenGui == enabledGui
	end
end

local function onSelectingBlaster()
	-- Kích hoạt máy ảnh để người chơi có thể nhìn xung quanh khi chọn một blaster
	togglePlayerCamera(true)
	togglePlayerMovement(false)
	setGuiExclusivelyEnabled(playerGui.PickABlasterGui)

	-- Vô hiệu hóa blaster khi chọn một blaster
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onPlaying()
	-- Mở chuyển động người chơi sau khi chọn một blaster
	togglePlayerMovement(true)
	setGuiExclusivelyEnabled(playerGui.HUDGui)

	-- Mở khóa blaster trong lúc chơi
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Ready)

	-- Lập trình độ hủy diệt 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 khi bị nhãn
	togglePlayerMovement(false)
	togglePlayerCamera(false)
	setGuiExclusivelyEnabled(playerGui.OutStateGui)

	-- Vô hiệu hóa blaster khi bị thẻ ra
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onInLobby()
	-- Mở các nút điều khiển trong sảnh đợi
	togglePlayerMovement(true)
	togglePlayerCamera(true)

	-- Ẩn tất cả HUD trong sảnh đợi
	setGuiExclusivelyEnabled(nil)

	-- Vô hiệu hóa blaster 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(`Invalid player state ({newPlayerState})`)
	end
end

-- Xử lý tình trạng người chơi đầu tiên nếu được cài đặt
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 tương lai
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(updateFromPlayerState)

-- Đảm bạo những thay đổi vẫn được áp dụng sau khi respawn
localPlayer.CharacterAdded:Connect(updateFromPlayerState)

Bây giờ, mỗi khi sức khỏe của một người chơi đạt đến 0, màn hình respawn sẽ hiển thị cho đến khi người chơi respawn back vào khu vực respawn của họ.

Bây giờ bạn quen với các thông báo thông thường GuiObjects cho UI trên màn hình, hãy cố gắng tái tạo các thống kê RoundResultsGui ScreenGui

Tạo Objet Bề Mặt

Để hiển thị UI trên bề mặt của một phần trong không gian 3D phản hồi cho logic scripting cho mỗi người chơi individual , bạn có thể làm cha một đối tượng SurfaceGui đến bề mặt bạn muốn hiển thị UI của bạ

SurfaceGui đối tượng chứa tất cả GuiObjects được hiển thị trên bề mặt của một phần trong không gian 3D. Thử nghiệm laser tag experience chỉ bao gồm một inst

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

Trong cửa sổ Explorer , hover over the service ReplicatedStorage , then click the ⊕ biểu tượng. A menu context display.
Từ menu ng上 context, insert a Part object.
Thêm một ScreenGUI đối tượng vào phần.
Đổi tên SurfaceGui theo context của các thành phần UI con của nó.
Lặp lại quá trình này cho mọi thành phần 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ồ bấm giờ

Một thiết bị đếm thời gian nóng là một thành phần UI cho phép người chơi biết bao lâu họ có thể chờ đợi trước khi họ có thể nổ tung lại cái khẩu súng của họ. Điều này tạm dừng một cách nhẹ nhàng người chơi không thể nổ tung nhanh như họ có thể nhấp hoặc nhấn một nú

Để chính xác tái tạo thời gian thử nghiệm máy định vị laser trong trải nghiệm Laser Tag :

Tạo một phần để giữ đối tượng SurfaceGui của bạn.
1. Trong cửa sổ Explorer , hover over the Workspace , then click the ⊕ biểu tượng. Một menu ng上下文 hiển thị.
2. Từ menu ng上 context, insert a khối part. Đây là một vị trí tạm thời cho part để bạn có thể xem các thay đổi trong mỗi bước của quá trình.
Định vị và xếp hướng phần tùy theo vị trí mà người chơi sẽ đặt vũ khí của họ, sau đó trong cửa sổ Tùy chỉnh ,
1. Đặt Độ trong suốt để 1 để làm cho bộ phận hoàn toàn trong suốt.
2. Đặt Tên để CooldownBarPrefab .
3. Đặt Kích thước lên 0.169, 0.027, 2.537 để thu nhỏ bộ phận đến kích thước về chiều dài của máy phun.
4. Vô hiệu hóa CanCollide và CanQuery .
Làm điều đó SurfaceGui vào CooldownBarPrefab .
Chọn mới SurfaceGui , sau đó trong cửa sổ Thông tin cấu hình ,
1. Đặt Mặt để Trên để UI hiển thị hướng lên.
2. Đặt LightInfluence và MaxDistance lên 0 .
3. Đặt PixelsPerStud lên 200 .
Tạo thanh màu đen.
1. Thêm một Nhãn Hình Ảnh vào Bề mặt GUI .
2. Chọn nhãn mới, sau đó trong cửa sổ Tên tùy thuộc ,
  1. Loại bỏ giá trị mặc định Hình ảnh .
  2. Đặt AnchorPoint để 0.5, 0.5 để xác định điểm xuất phát của nhãn ở giữa của nó (50% từ bên trái của nó đến bên phải của nó và 50% từ trên của nó đến dưới của nó).
  3. Đặt Màu nền3 để 0,0,0 để thiết lập màu nền nhãn cho đen.
  4. Đặt BackgroundTransparency để 0.4 để làm cho nền của nhãn semi-透明.
  5. Đặt Vị trí để {0.5, 0},{0.5, 0} để thiết lập nhãn ở giữa thân hàng rào (50% từ bên trái đến bên phải của SurfaceGui cha, và 50% từ trên cùng đến dưới cùng của SurfaceGui cha).
  6. Đặt Kích thước lên {1, 0},{1, 0} để rộng nhãn ra khắp bộ phận (100% ngang và 100% dọc của SurfaceGui của cha).
  7. Đặt Tên vào Thùng chứa .
Xoay các góc của container.
1. Lập một đối tượng UICorner vào Container .
2. Chọn Góc , sau đó trong cửa sổ Thuộc tính , hãy đặt CornerRadius để 1> 0.15, 01> để hơi tròn các góc.
Tạo dòng màu đỏ.
1. Làm điều đó Insert an ImageLabel into Container .
2. Chọn nhãn mới, sau đó trong cửa sổ Tên tùy thuộc ,
  1. Loại bỏ giá trị mặc định Hình ảnh .
  2. Đặt AnchorPoint để 1, 0.5 để xác định điểm xuất phát của nhãn ở giữa trung tâm (100% từ bên trái đến bên phải của nhãn, và 50% từ trên cùng đến dưới cùng của nhãn).
  3. Đặt Màu nền3 để 172, 13, 13 để thiết lập màu nền nhãn vào một màu đỏ đen.
  4. Đặt Hiệu suất chuyển tiếp hình ảnh để 0.2 để làm cho nền của nhãn hơi trong suốt.
  5. Đặt Tên để Bar .
  6. Đặt Vị trí để {1, 0},{0.5, 0} để thiết lập nhãn ở giữa trung tâm của container (100% từ bên trái đến bên phải của nhãn cha, và 50% từ trên đến dưới của nhãn cha).
  7. Set Kích thước to {0, 0},{1, 0} để kéo dài nhãn đến đỉnh của nhãn cha (0% horizontally và 100% vertically của nhãn cha). This step cũng có lợi cho hành vi tăng trưởng mà xảy ra trong các bước 8.
Xoay các góc của nhãn.
1. Lập một đối tượng UICorner vào Bar .
2. Chọn Góc , sau đó trong cửa sổ Thuộc tính , hãy đặt CornerRadius để 1> 0.15, 01> để hơi tròn các góc.
Di chuyển CooldownBarPrefab đến ReplicatedStorage .
1. Tạo một cấu trúc thư mục để tổ chức các thành phần 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 với một thư mục con 2> Cấu hình2>.
2. Di chuyển CooldownBarPrefab vào Guis .
Tham khảo các ReplicatedStorage script trong mẫu Laser Tag địa điểm file thực hiện chương trình kỹ thuật số kết nối máy đếm nhiệt độ cho người người chơisau đó làm hoạt động dòng chữ sau khi người dùng thổi vào máy đếm nhiệt độ.

Các thẻ ReplicatedStorage.FirstPersonBlasterVisuals client script xử lý tất cả các hệ thống hình ảnh cho người chơi. Nó yêu cầu một loạt các script modul làm việc cùng nhau để cài đặt hình ảnh blaster cho cảm giác thự


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 thiết bị người đầu tiên
	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á huỷ dòng chờ đã được gắn với giàn khoan
		rigModel:Destroy()
		rigModel = nil
	end
end

-- Chạy hiệu ứng thị giác thứ nhất khi xảy ra vụ nổ
laserBlastedBindableEvent.Event:Connect(function(blastData: BlastData.Type)
	runBlastVisuals(rigModel.PrimaryPart.TipAttachment, blastData, animations.blastAnimation)
	runCooldownBarEffect(cooldownBar)
end)

-- Kết nối thiết bị đến máy ảnh nếu tồn tại
RunService.RenderStepped:Connect(function()
	if rigModel then
		-- Cập nhật CFrame của thiết bị đến vị trí của máy ảnh và RIG_OFFSET_FROM_CAMERA
		rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
	end
end)

-- Các tay cầm thay đổi thị giác khi blasterType 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)

-- Làm cho tay xử lý khi thay đổi trạng thái người chơi
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()
	local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	-- Loại bỏ các hình ảnh khi người chơi chọn một blaster hoặc đang ở trong sảnh
	if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then
		removeFirstPersonVisuals()
	-- Thêm các thành phần trên màn hình khi người chơi hoàn thành việc chọn blaster.
	elseif newPlayerState == PlayerState.Playing then
		addFirstPersonVisuals()
	end
end)

Bây giờ, mỗi khi một người chơi phóng hơi cương của họ, bar đếm ngược để thông báo khi người chơi có thể phóng hơi cương nữa.

Tạo Objeto BillboardGui

Để hiển thị các thành phần UI trong không gian 3D phản hồi cho logic script và luôn luôn mặt trước máy ảnh của mỗi người chơi, ngay cả khi họ có góc nhìn tốt, như tên người chơi hoặc dấu hiệu bản đồ, bạn có thể

Trải nghiệm laser tag mẫu bao gồm hai đối tượng riêng biệt BillboardGui 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 trên đầu của mỗi người chơi khi họ đang hoạt động trong một trận.
TaggedOutIndicatorGuiPrefab - Hiển thị trên đầu một người chơi khi họ bị loại bỏ 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 con của nó GuiObjects để phù hợp với mục đích của mỗi container. Để minh họa, trong những phần ngay lậ

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

Trong cái Explorer window, hover over a BasePart or Attachment, then click the 1> ⊕1> biểu tượng. A contextual menu displays.
Từ menu contextual, insert a BillboardGui object.
Đổi tên BillboardGui theo context của các thành phần UI con của nó.
Lặp lại quá trình này cho mọi thành phần UI bạn cần phải hiển thị trên đầu của người chơi.

Chỉ báo đội

Một thành phần trên UI cho phép người chơi biết đội nào mà họ đang ở trong vòng đấu để họ có thể dễ dàng phân biệt giữa các đồng minh và đồng minh của họ trong khi họ ở khu vực chiến đấu để họ không bị thẻ ra và mất tương thích. Thông tin này quan trọ

Để tái tạo chính xác dấu hiệu nhóm trong trải nghiệm Laser Tag :

Thêm một BillboardGui đối tượng vào một giàn khoan tạm thời.
1. Ở thanh menu, chuyển đến trang Avatar và nhấp vào Rig Builder .
2. Chọn từ các lựa chọn có sẵn. Mẫu sử dụng một R15 đánh máygiải pháp, một hình dạng cơ thể nữ tính và một 2> Rthro 2> avatar. Rig hiển thị cả hai trong các cửa sổ 3D và trong các <
3. Trong cửa sổ Explorer , di chuyển đến mô hình con của thẻ Head Mesh, sau đó nhấp vào biểu tượng ⊕ . Một menu ng上下文 hiện ra.
4. Từ menu context, insert a BillboardGui .
Chọn new BillboardGui , then in the Properties window,
1. Đặt LightInfluence để 0 để ngăn ánh sáng môi trường ảnh hưởng đến màu của thẻ.
2. Đặt Tên để OtherPlayerIndicatorPrefab .
3. Đặt Kích thước lại {0, 10},{0, 10} để làm cho nhãn nhỏ hơn đáng kể.
4. Đặt StudsOffsetWorldSpace để 0, 4, 0 để kéo nó lên trên đầu của giàn khoan.
Đặt một Khung đối tượng vào OtherPlayerIndicatorPrefab .
Chọn khung mới, sau đó trong cửa sổ Tính chất ,
1. Đặt AnchorPoint để 0.5, 0.5 để thiết lập điểm nguyên mẫu khung ở giữa (50% từ bên trái đến bên phải của nhãn, và 50% từ trên cùng của nhãn).
2. Đặt Màu nền3 để 255, 3, 0 để thiết lập màu nền cho khung hình như một màu thay thế.
3. Đặt Vị trí để {0.5, 0},{0.5, 0} để thiết lập khung vào giữa của nó (50% từ bên trái đến bên phải của BillboardGui cha, và 50% từ trên cùng đến dưới cùng của BillboardGui cha).
4. Đặt Kích thước lên {1, -2},{1, -2} để thu nhỏ khung lên khu vực bề mặt của BillboardGui.
Lập một UICorner object vào Frame để hoàn toàn xung quanh các góc.
Thêm một UIStroke đối tượng vào Khung để vẽ vòng tròn của thẻ.
Di chuyển OtherPlayerIndicatorPrefab đến ReplicatedStorage .
Tham khảo ReplicatedStorage script trong mẫu Laser Tag 1A địa chỉ tập tin có thể hiển thị dấu hiệu của đội cho mọi người chơi trong một trận đấu chủ động trừ khi họ đang ở trên đội kẻ thù và bị che giấu.

Cuộc điều tra ReplicatedStorage.OtherPlayerIndicatorGuiSetup này được thực hiện khi người chơi xuất hiện trên đấu trường cho một vòng đấu chủ

Nếu các người chơi khác nằm trong cùng một đội, thì trình tìm kiếm đội luôn hiển thị, ngay cả khi chúng ẩn đằng sau các đối tượng trong không gian 3D; nếu các người chơi khác nằm trong đội kẻ thù, thì trình tìm kiếm đội chỉ hiển thị khi không có đối tượng nà


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ỉ được thêm các chỉ số cho người chơi tham gia vòng
		if not otherPlayer.Team then
			return
		end

		-- Tránh thêm các thông số duplicate, tạo một thông số 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 thân thiệ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ờ, mỗi khi một người chơi ở trong một hiệp đấu chủ động, các thành phần trên đầu của các người chơi khác không được hiển thị trên màn hình của họ trừ khi họ đang ở trên đội kẻ thù và đằng sau một vật.

Thẻ bên trên của màn hình

Một thẻ được gắn là một thành phần UI cho phép người chơi biết khi nào người chơi khác không còn hoạt động trong trò chơi và đang trong quá trình respawning back to their spawn zone. Thông tin này quan trọng vì gameplay của một trò chơi bắn người thứ nhấ

Để chính xác tái tạo nhãn hiện đang có màu trong trải nghiệm Laser Tag :

Lập một BillboardGui đối tượng vào một giàn khoan tạm thời để bạn có thể xem các thay đổi trong mỗi bước của quá trình.
1. Ở thanh menu, chuyển đến trang Avatar và nhấp vào Rig Builder .
2. Chọn từ các lựa chọn có sẵn. Mẫu sử dụng một R15 đánh máygiàn khoan, một hình dạng cơ thể nam tính và một Rthro avatar. Giàn khoan hiển thị cả trong các cửa sổ 3D và trong các 2> Expl
3. Trong cửa sổ Explorer , di chuyển đến mô hình con của thẻ Head Mesh, sau đó nhấp vào biểu tượng ⊕ . Một menu ng上下文 hiện ra.
4. Từ menu context, insert a BillboardGui .
Chọn new BillboardGui , then in the Properties window,
1. Đặt LightInfluence để 0 để ngăn ánh sáng môi trường ảnh hưởng đến màu của thẻ.
2. Đặt Tên để TaggedOutIndicatorGuiPrefab .
3. Đặt Kích thước lên {3, 0},{0.5, 0} để rộng không gian cho một nhãn.
4. Đặt StudsOffset để 0, 3.25, 0 để đặt vị trí trên đầu của một người chơi.
Làm ImageLabel một đối tượng vào TaggedOutIndicatorGuiPrefab .
Chọn nhãn mới, sau đó trong cửa sổ Tên tùy thuộc ,
1. Đặt AnchorPoint để 0.5, 0.5 để xác định điểm xuất phát của nhãn ở giữa của nó (50% từ bên trái của nó đến bên phải của nó và 50% từ trên của nó đến dưới của nó).
2. Đặt Hiển thị màu nền để 1 để làm cho nền màu của nhãn hoàn toàn trong suốt.
3. Đặt Tên vào Khung .
4. Đặt Vị trí để {0.5, 0},{0.5, 0} để thiết lập nhãn vào giữa của nó (50% từ bên trái đến bên phải của BillboardGui cha, và 50% từ trên cùng đến dưới cùng của cha BillboardGui).
5. Đặt Kích thước lên {1, 0},{1, 0} để rộng nhãn ra toàn bộ BillboardGui (100% ngang và 100% dọc của cha mẹ BillboardGui).
6. Đặt Hình ảnh lên rbxassetid://14304826985 để làm cho hình ảnh một màu mời hướng.
7. Đặt Màu sắc hình ảnh để 245, 46, 46 để nhuộm màu nhãn.
Để cải thiện hiệu lực, bạn có thể bỏ qua tài nguyên hình ảnh và thay vào đó sử dụng một UIGradient đối tượng với một chuỗi số màu chỉnh sửa tùy chỉnh. Để biết thêm về kỹ thuật này mờ dần, hãy xem UI Appearance Modifiers - Gradient.
Làm điều đó vào Khung .
Chọn nhãn mới, sau đó trong cửa sổ Tên tùy thuộc ,
1. Đặt AnchorPoint để 0.5, 0.5 để xác định điểm xuất phát của nhãn ở giữa của nó (50% từ bên trái của nó đến bên phải của nó và 50% từ trên của nó đến dưới của nó).
2. Đặt Hiển thị màu nền để 1 để làm cho nền màu của nhãn hoàn toàn trong suốt.
3. Đặt Tên vào BodyTextLabel .
4. Đặt Vị trí để {0.5, 0},{0.5, 0} để đặt nhãn vào giữa của thùng (50% từ bên trái đến bên phải của nhãn cha, và 50% từ trên cùng của nhãn cha) .
5. Đặt Kích thước lên {0.85, 0},{0.7, 0} để cho phép văn bản chiếm phần lớn nhất của khu vực mời (85% trên mặt đất và 70% trên mặt đất của nhãn hình cha).
6. Đặt FontFace để Montserrat để phù hợp với estetica tương lai.
7. Đặt Cân nặng lên Dũa vững chắc để làm dày chữ.
8. Set Văn bản to Đã gắn nhãn .
9. Đặt Màu Văn Bản3 để 255, 255, 255 để làm cho văn bản trắng.
10. Bật TextScaled .
Di chuyển TaggedOutIndicatorGuiPrefab đến ReplicatedStorage .
Tham khảo các ServerScriptService script trong mẫu Laser Tag 1A nơi tập tin file tham khảo đó làm cho nhãn hiện ra trong khi một người chơi đang được phục hồi trở về khu vực phát triển của đội họ.

Các ServerScriptService.SetupHumanoid script máy chủ chạy ngay sau khi một người chơi tải trải nghiệm. Nó đảm bảo rằng mỗi khi một người chơi nhân vật của họ thêm vào mô hình dữ liệu, setupHumanoidAsync được gọi với giới tính Class.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ả những lần phát triển nhân vật 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ả các người chơi trong tương lai
Players.PlayerAdded:Connect(onPlayerAdded)

Bây giờ, mỗi khi sức khỏe của một người chơi đạt đến 0, thì một thẻ bị rơi xuống trên đầu của họ cho đến khi họ quay trở lại.

Xin chúc mừng bạn đã hoàn thành khóa học Thiết kế Bố trí Người dùng! Bây giờ bạn có kinh nghiệm tạo một lối kiến trúc nghệ thuật, kết cấu trang bị và thực hiện thiết kế của bạn trong Studio từ đầu đến cuố