Một HUD hoặc Màn hình hiển thị thông báo là một bộ các thành phần UI luôn hiển thị hoặc truy cập được trong suốt quá trình trải nghiệm trò chơi, chẳng hạn như màn hình hiển thị điểm số, đồng hồ đo sức khỏe và nút menu.Bao gồm một HUD là rất quan trọng đối với hầu hết các trải nghiệm bởi vì nó hiển thị thông tin giúp người chơi thành công trong các mục tiêu chơi game của họ.
Một thành phần HUD phổ biến là một bộ đếm sức khỏe với một biểu tượng ở bên trái có thể được chuyển đổi thành thanh thời gian, thanh tiến trình hoặc tương tự.
Sử dụng Trạm Vũ Trụ Nguy Hiểm như một nơi bắt đầu và UI Fundamentals - HUD Meter như một địa điểmtham khảo đã kết thúc, hướng dẫn này minh họa:
- Cài đặt và sử dụng Mô phỏng thiết bị để kiểm tra thiết kế của bạn trên nhiều màn hình giả lập.
- Sử dụng StarterGui như cả một thùng chứa thiết kế và lưu trữ.
- Cách đặt/kích cỡ các thành phần UI xung quanh các điều khiển và thiết bị của Roblox tích hợp, chẳng hạn như khe máy ảnh trên các điện thoại hiện đại.
- Cách thay thế bộ đo sức khỏe mặc định của Roblox bằng bộ đo sức khỏe riêng của bạn và kết nối nó với cấpđộ sức khỏe của nhân vật.
- Cách hoạt hình phần trung tâm của máy đo sức khỏe và đặt màu của nó giữa năm điểm cao độ màu (màu đỏ, màu cam, màu vàng, màu lime, màu xanh lá).
Bật khởi chạy trình giả lập thiết bị
Roblox bản chất là nền tảng chéo nền tảng, vì người chơi có thể khám phá và tham gia kinh nghiệm trên PC hoặc bảng điều khiển, sau đó lấy lên điện thoại của họ và tiếp tục nơi họ rời tắt.Các thiết bị di động (điện thoại và máy tính bảng) có lượng không gian màn hình thấp nhất, do đó rất quan trọng là các thành phần UI của bạn phù hợp với các màn hình nhỏ hơn và chúng có thể nhìn thấy rõ ràng cho người chơi.
Cách tốt nhất để kiểm tra thiết kế UI trên các nền tảng là Trình giả lập thiết bị của Studio.Công cụ này cung cấp một lựa chọn trước của các thiết bị và cho phép bạn thêm các cấu hình tùy chỉnh riêng của mình.
Mở mẫu Trạm Vũ Trụ Nguy Hiểm trong Studio.
Từ tab Kiểm tra , bật công cụ Thiết bị lên.
Từ thanh trên cùng của cửa sổ xem chính, hãy chọn một giả lập điện thoại như iPhone X hoặc Samsung Galaxy A51 .Sau đó, đặt kích thước xem thành Phù hợp với cửa sổ để sử dụng tối đa không gian trong Studio.
Tạo một thùng chứa màn hình
Một thùng chứa ScreenGui chứa các đối tượng UI ( GuiObjects ) để hiển thị trên màn hình của người chơi (trong hướng dẫn này, toàn bộ của đồng hồ sức khỏe).Để hiển thị một ScreenGui và các đối tượng con của nó cho mọi người chơi tham gia trải nghiệm, đặt nó bên trong thùng chứa StarterGui.Khi một người chơi tham gia và nhân vật của họ xuất hiện lần đầu tiên, ScreenGui và nội dung của nó sao chép vào thùng chứa PlayerGui cho người chơi đó, nằm trong thùng chứa Players .
Để chèn một trống ScreenGui :
Trong cửa sổ Explorer , tìm kiếm thùng chứa StarterGui.
Vượt qua thùng chứa, nhấp vào nút ⊕ và chèn ScreenGui .
Đổi tên container mới HUDContainer để phản ánh mục đích của nó.
Sử dụng các khu vực an toàn
Các điện thoại hiện đại tận dụng toàn bộ màn hình nhưng thường bao gồm các khuyết, cắt và các yếu tố khác chiếm không gian màn hình.Mỗi trải nghiệm Roblox cũng bao gồm các điều khiển thanh trên cùng cho truy cập nhanh vào menu chính, trò chuyện , bảng xếp hạng , và nhiều hơn nữa.
Để đảm bảo người chơi có thể nhìn thấy và truy cập tất cả các giao diện người dùng mà không có sự cản trở, Roblox cung cấp thuộc tính ScreenInsets kiểm soát khu vực an toàn cho nội dung của một ScreenGui .Mọi đối tượng UI bạn đặt bên trong một ScreenGui là tương đối với giới hạn inset.
Trong khi mặc định của CoreUISafeInsets đảm bảo tất cả các đối tượng UI vẫn rõ ràng khỏi Roblox UI và phần cắt thiết bị, DeviceSafeInsets có thể là lựa chọn tốt hơn để sử dụng không gian màn hình giới hạn, như minh họa dưới đây.
CoreUISafeInsets giữ cho đồng hồ rõ khỏi tất cả các chướng ngại vật, nhưng nó thêm một khoảng trống lớn giữa đồng hồ và cạnh trên cùng vật lý của màn hình.
Trong cửa sổ Explorer , hãy chọn HUDContainer .
Trong cửa sổ Tính năng, hãy đặt thuộc tính ScreenInsets thành DeviceSafeInsets.
Đặt đệm cạnh
Với ScreenInsets được đặt thành DeviceSafeInsets , nội dung bây giờ có thể mở rộng trực tiếp lên cạnh trên cùng vật lý của màn hình.Tuy nhiên, một lượng nhỏ padding có thể giúp đẩy bộ đo sức khỏe (và các đối tượng khác bên trong thùng chứa) ra khỏi các cạnh màn hình để có vẻ sạch sẽ hơn và ngăn chặn chúng không bị cắt.
Một cách để áp dụng đệm cho một thùng chứa UI là thông qua việc chèn một UIPadding chỉnh sửa:
Thêm một UIPadding chỉnh sửa vào HUDContainer .
Với đối tượng mới UIPadding được chọn, hãy nhập một giá trị của 0, 16 cho tất cả các cạnh của thùng chứa ( PaddingBottom , PaddingLeft , PaddingRight , PaddingTop ).Điều này áp dụng đệm 16 пикселей xung quanh thùng chứa, bất kể độ phân giải của màn hình.
Xây dựng máy đo sức khỏe
Với thùng chứa màn hình được cấu hình, bạn có thể bắt đầu xây dựng bộ đo sức khỏe bằng các đối tượng UI Roblox như khung và một nhãn hình ảnh .
Tạo khung cha
Tương tự như thiết kế ứng dụng như Figma và Photoshop, một Frame trong Roblox phục vụ như một thùng chứa cho các đối tượng UI khác.Trong hướng dẫn này, toàn bộ đồng hồ sức khỏe sẽ được chứa trong một khung cha duy nhất, làm cho nó dễ dàng di chuyển qua các bố trí HUD khác nhau.
Chèn một Frame vào HUDContainer . Khung mới xuất hiện ở góc trên cùng bên trái như một khối trắng trống.
Nếu khung mới không xuất hiện trong cửa sổ xem, hãy chắc chắn rằng bạn đã bật GUI overlay từ widget Tùy chọn hiển thị ở góc trên bên phải của cửa sổ xem 3D, hoặc bật Tầm nhìn UI từ tab Xem ».
Đổi tên instane khung mới thành MeterBar .
Vị trí khung
Trong Roblox, vị trí của một đối tượng UI được đại diện bởi một bộ phối hợp UDim2 điểm có chứa Scale và Offset giá trị cho cả trục X và Y :
Để đặt một đối tượng UI ở góc trên cùng bên phải của thùng chứa màn hình, Scale là phương pháp tốt nhất bởi vì một giá trị X của 1 (100%) đại diện cho cạnh bên phải của thùng chứa, bất kể kích thước pixel vật lý của màn hình.Tương tự, một giá trị Y thước đo của 0 (0%) đại diện cho cạnh trên cùng của thùng.
Ngoài ra, bạn cần phải đặt một điểm neo bên phải trên cùng cho khung cha để xác định điểm gốc của nó.Các giá trị chấp nhận được nằm giữa 0 và 1 , theo kích thước của đối tượng, vì vậy một giá trị neo của 1, 0 đặt điểm neo của khung ở góc trên cùng bên phải.
Trong cửa sổ Explorer , chọn khung MeterBar mà bạn đã chèn trước đó.
Nhập 1, 0 cho thuộc tính AnchorPoint.Khung nên bây giờ được đặt ở góc trên cùng bên phải của khu vực an toàn thiết bị , hơi lõm vào mép do kết quả của đệm .
Thay đổi kích cỡ khung
Giống như vị trí, Size của một đối tượng UI được đại diện bởi một bộ phối hợp UDim2 chứa các giá trị Scale và Offset cho cả trục X và Y .
Mặc định, kích thước của khung mới là {0, 100},{0, 100} , có nghĩa là 100 pixel ở cả chiều rộng ( X ) và chiều cao ( Y ).Trong khi một giá trị pixel nghiêm ngặt hữu ích trong một số trường hợp, nhiều yếu tố giao diện người dùng tăng độ phản ứng hơn trên nhiều màn hình khi đặt sang một tỷ lệ phần trăm của tổng kích thước khối màn hình.
Với khung MeterBar được chọn, truy cập vào cửa sổ Tính năng và di chuyển đến tính năng Size.
Nhập giá trị của 0.35, 0, 0.05, 0 để đặt kích thước phần trăm rộng 35% và cao 5% mà không có sự chênh lệch pixel nào.
Phong cách khung
Mặc định, Frames được lấp đầy bằng trắng rắn chắc.Máy đo sức khỏe cuối cùng nên có một lớp lấp lánh tối hơn và một chút mờ nhạt, cũng như một đường viền tối, để nó nổi bật hơn trên cả hai nền sáng và tối.
Với khung MeterBar được chọn, hãy nhập 0 cho thuộc tính BackgroundColor3.Studio sẽ tự động chuyển nó thành giá trị RGB của .
Nhập 0.75 cho tính năng BackgroundTransparency.Trong Roblox, độ trong suốt dao động từ 0 đối với hoàn toàn mờ đến 1 đối với hoàn toàn minh bạch, vì vậy 0.75 bằng 25% độ mờ trong các ứng dụng khác như Figma hoặc Photoshop.
Chèn một đối tượng UIStroke , một trình chỉnh sửa UI mạnh mẽ thêm một đường viền có thể tùy chỉnh vào khung.
Để hoàn thành kiểu dáng của khung hiển thị, bạn có thể làm tròn các góc để tạo hình dạng "pill" thay vì một hình chữ nhật sắc nét.
Chèn một ví dụ UICorner vào khung MeterBar .
Với lựa chọn mới UICorner được chọn, hãy đặt CornerRadius đến 0.5, 0 .Sử dụng một giá trị thước đo (50%) thay vì giá trị pixel là đặc biệt thuận tiện cho thanh đo bởi vì nó đảm bảo một đường cong hoàn toàn tròn không phụ thuộc vào kích thước hoặc chiều rộng của thùng chứa.
Tạo lớp lấp đầy bên trong
Bây giờ khi mà khung chứa của máy đo sức khỏe đã hoàn thành, bạn có thể thêm một phần lấp đầy bên trong để đại diện cho sức khỏe biến của nhân vật.Bởi vì nó chỉ cần phải là một khu vực được lấp đầy, một con trai thứ cấp Frame bên trong khung cha là phù hợp.
Chèn một đứa con Frame vào khung MeterBar .
Đổi tên instane khung mới thành InnerFill .
Với InnerFill được chọn, hãy đặt các thuộc tính sau:
- AnchorPoint = 0, 0.5 (cạnh trái và trung tâm dọc)
- Position = 0, 0, 0.5, 0
- Size = 1, 0, 1, 0
Vì con trai của khung được xếp và kích thước so với cha của chúng, việc sử dụng thước đo làm cho khung bên trong lấp đầy chiều rộng và chiều cao của cha của chúng, bắt đầu từ cạnh trái của cha.
Để phù hợp với hình dạng "pill" của khung cha, hãy chèn thêm UICorner vào InnerFill .
Với người thay đổi mới UICorner được chọn, đặt tính chất CornerRadius của nó thành 0.5, 0 để phù hợp với hình dạng "pill" của khung cha MeterBar .
Để đại diện tốt hơn rằng một đồng hồ đầy đủ cho thấy sức khỏe tốt, hãy chọn InnerFill và đặt tính năng của nó thành (trong một nhiệm vụ sau, bạn sẽ lập trình màu này để thay đổi dựa trên sức khỏe thực tế).
Thêm biểu tượng
Để chỉ rõ hơn mục đích của đồng hồ, bạn có thể thêm một nhãn hình ảnh vào bên trái, trong trường hợp này là một trái tim đỏ thường biểu tượng cho sức khỏe hoặc cuộc sống.
Chèn một ImageLabel vào khung MeterBar . Đối tượng này cho phép bạn áp dụng một tài sản hình ảnh 2D đã được tải lên như một nhãn dán lên Roblox.
Đổi tên instance nhãn mới thành Biểu tượng .
Với Biểu tượng được chọn, thiết lập thuộc tính ZIndex thành 2.Trong khi các đối tượng UI được chèn mới luôn luôn xếp trước các đối tượng đã được chèn trước đó, thay đổi này đảm bảo biểu tượng luôn hiển thị trước các yếu tố khung của bộ đếm.
Để đảm bảo biểu tượng luôn luôn ở tỷ lệ khác biệt 1:1, hãy chèn .Mặc dù hạn chế này có thể tùy chỉnh các thuộc tính để kiểm soát tỷ lệ khía cạnh, bạn có thể giữ nguyên các giá trị mặc định của nó.
Với Biểu tượng được chọn, hoàn thành cái nhìn và vị trí bằng cách thay đổi các thuộc tính sau:
- AnchorPoint = 0.5, 0.5 (trung tâm neo)
- BackgroundTransparency = 1 (100% minh bạch)
- Position = 0, 0, 0.5, 0 (bên trái của đồng hồ và trung tâm ngang)
- Size = 2, 0, 2, 0 (200% tổng kích thước của khung MeterBar , bị giới hạn bởi 1:1 bởi UIAspectRatioConstraint )
Giới hạn kích thước
Trong khi một chiều cao thước đo (5%) của điện thoại hiện đại và màn hình chơi game có tỷ lệ khác biệt 16:9 hoặc rộng hơn có vẻ tốt trên màn hình máy tính bảng và điện thoại cũ hơn, đồng hồ có thể trông hơi cao trên màn hình máy tính bảng và điện thoại cũ hơn.Bạn có thể kiểm tra điều này bằng cách giả lập một máy tính bảng như iPad thế hệ thứ 7 từ Trình giả lập thiết bị .
Để giữ chiều cao của thanh hiển thị cân đối hơn với các màn hình rộng hơn, bạn có thể áp dụng một UISizeConstraint để giới hạn chiều cao pixel tối đa.
Chèn một UISizeConstraint vào khung MeterBar .
Với hạn chế mới được chọn, thiết lập tính chất của nó thành để giới hạn chiều cao của nó lên 20 pixel trong khi không áp dụng hạn chế chiều rộng.
Bây giờ, thanh hiển thị giữ một chiều cao nhất quán hơn giữa các màn hình rộng và cao hơn.
Thay thế bộ đo sức khỏe mặc định
Các trải nghiệm Roblox bao gồm một bộ đếm sức khỏe mặc định trở nên hiển thị khi các nhân vật nhận sát thương.Nếu bạn giữ cho đồng hồ mặc định hiển thị, nó sẽ sao chép và có thể chồng lấp đồng hồ tùy chỉnh.
Vô hiệu hóa công tơ mặc định
Để vô hiệu hóa máy đo sức khỏe mặc định, bạn sẽ sử dụng một kịch bản khách hàng ( LocalScript ) trong StarterPlayerScripts mà gọi StarterGui:SetCoreGuiEnabled() .
Trong cửa sổ Explorer , mở rộng thùng chứa StarterPlayer và tìm thùng chứa StarterPlayerScripts bên trong nó.
Thêm một mới LocalScript vào thùng chứa và đổi tên thành HideDefaultHealthMeter để mô tả mục đích của nó.Các kịch bản trong StarterPlayerScripts tự động chạy khi người chơi địa phương tham gia vào một trải nghiệm, làm cho nó trở thành một thùng chứa lý tưởng để chạy một kịch bản làm ẩn vĩnh viễn đồng hồ mặc định
Khi bạn chèn một kịch bản mới, nó sẽ tự động mở trong một tab trình soạn thảo kịch bản mới (nếu không, hãy nhấp đúp vào kịch bản trong cửa sổ Explorer ).
Sao chép mã sau đây vào trong HideDefaultHealthMeter script:
Ẩn Máy đo sức khỏe mặc địnhlocal StarterGui = game:GetService("StarterGui")-- Ẩn bộ đếm sức khỏe mặc địnhStarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)Giải thích mãDòng Mục đích 1 Nhận được một tham chiếu đến một dịch vụ lõi , , đại diện cho cùng một thùng chứa mà bạn tạo bộ đo sức khỏe tùy chỉnh và nội dung của nó sao chép vào thùng chứa cho mỗi người chơi tham gia vào trải nghiệm. 4 Gọi phương pháp SetCoreGuiEnabled() của dịch vụ và hướng dẫn bộ đếm sức khỏe mặc định bị vô hiệu hóa (false).
Nếu bạn thử nghiệm trải nghiệm ngay bây giờ và nhận sát thương, bạn sẽ nhận thấy rằng công tơ mặc định đã bị vô hiệu hóa và ẩn (bạn sẽ lập trình công tơ tùy chỉnh để phản ánh các thay đổi về sức khỏe trong phần tiếp theo).
Lắng nghe thay đổi sức khỏe
Tất cả các mô hình nhân vật Roblox mặc định bao gồm một lớp Humanoid đặc biệt cung cấp các hành vi và chức năng đặc biệt cho nhân vật, chẳng hạn như đặt tốc độ đi/chạy của nó và quản lý sức khỏe của nó. Health thay đổi trên máy chủ sao lưu cho máy khách của mỗi người chơi và bạn có thể phát hiện những thay đổi này để cập nhật cả kích thước và màu sắc của đồng hồ sức khỏe tùy chỉnh.
Trong cửa sổ Explorer , tìm kiếm thùng chứa StarterCharacterScripts bên trong StarterPlayer .
Thêm một mới LocalScript vào thùng chứa và đổi tên thành UpdateCustomMeter để mô tả mục đích của nó.Các tập lệnh trong StarterCharacterScripts tự động chạy mỗi khi nhân vật của người chơi xuất hiện, làm cho nó trở thành một thùng chứa lý tưởng để chạy một tập lệnh làm mới hoàn toàn đồng hồ sức khỏe mỗi lần tái sinh.
Trong cửa sổ trình soạn thảo cho kịch bản UpdateCustomMeter , hãy dán mã sau:
Cập nhật CustomMeterlocal Players = game:GetService("Players")-- Tham chiếu đến người chơi địa phương, nhân vật và hình người nhân tạolocal player = Players.LocalPlayerlocal character = player.Characterlocal humanoid = character:WaitForChild("Humanoid")-- Tham chiếu đến khung nội bên của thanh đolocal playerGui = player:WaitForChild("PlayerGui")local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill-- Màu thứ tự tuyến tính (màu đỏ, cam, vàng, lime, xanh lá)local gradient = {Color3.fromRGB(225, 50, 0),Color3.fromRGB(255, 100, 0),Color3.fromRGB(255, 200, 0),Color3.fromRGB(150, 225, 0),Color3.fromRGB(0, 225, 50)}-- Chức năng để lấy màu trong chuỗi độ dốc từ điểm phân sốlocal function getColorFromSequence(fraction: number): Color3-- Mỗi màu trong đồ thị xác định điểm bắt đầu và/hoặc kết thúc của một phầnlocal numSections = #gradient - 1-- Mỗi phần đại diện cho một phần của 1local sectionSize = 1 / numSections-- Xác định phần nào mà phần trăm yêu cầu rơi vàolocal sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize-- Nhận màu tại đầu và cuối phầnlocal sectionColorStart = gradient[sectionStartIndex]local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart-- Bình thường hóa phần số để là một số từ 0 đến 1 trong phầnlocal fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize-- Lerp giữa khởi đầu và kết thúc dựa trên phần số bình thường hóareturn sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)endlocal function onHealthChanged()-- Tính sức khỏe mới như phần trăm của tối đalocal healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)-- Đặt thanh sang mục tiêu kích thước/màu mớimeterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)end-- Lắng nghe các thay đổi về sức khỏe của humanoidhumanoid.HealthChanged:Connect(onHealthChanged)-- Lúc đầu đặt (hoặc trả về mặc định) kích thước/màu của thanh lên sức khỏe hiện tạionHealthChanged()Giải thích mãCác dòng Mục đích 4 ‑ 6 Nhận được tham chiếu đến địa phương Player , mô hình Character của họ, và lớp Humanoid bên trong nó. 9 ‑ 10 Nhận được một tham chiếu đến đối tượng InnerFill của đồng hồ mà phải được thay đổi kích cỡ và thay đổi màu như sức khỏe của nhân vật thay đổi. 13 ‑ 19 Thông báo một mảng gồm năm màu (màu đỏ, màu cam, màu vàng, màu lime và màu xanh lá) để làm mới đồng hồ ở các điểm khác nhau; ví dụ, xanh lá cây 100% sức khỏe, vàng 50%, đỏ 0%, hoặc một sự kết hợp tại bất kỳ phần trăm nào giữa các điểm chính. 22 ‑ 41 Chức năng trợ giúp trả về sự kết hợp màu giữa bất kỳ điểm màu độ dốc nào. 43 ‑ 50 Chức năng xử lý bất kỳ thay đổi nào về sức khỏe.Ở đây, nó tính toán sức khỏe mới như một phần trăm của nhân vật MaxHealth , thay đổi kích thước InnerFill đến phần trăm đó, và thay đổi màu sắc thành màu được trả về từ chức năng getColorFromSequence(). 53 Kết nối chính sự kiện chính phát hiện Health được sao chép từ máy chủ và gọi chức năng onHealthChanged(). 56 Vào ban đầu (trên character spawn hoặc respawn) gọi chức năng onHealthChanged() để thay đổi kích thước và màu sắc InnerFill đến tỷ lệ chính xác.Thông thường, đây sẽ là chiều rộng đầy đủ và xanh.
Nếu bạn thử nghiệm trải nghiệm ngay bây giờ, bạn sẽ nhận thấy rằng đồng hồ đo tùy chỉnh được cập nhật chính xác cả kích thước và màu sắc khi nhân vật nhận sát thương:
Mặc định, hệ thống đo lường sức khỏe Roblox bao gồm một hiệu ứng chữa lành từ từ cho phép các nhân vật từ từ hồi phục sức khỏe.Nếu bạn muốn vô hiệu hóa hiệu ứng này, hãy chèn một đối tượng trống Script có tên Sức khỏe vào thùng chứa StarterCharacterScripts.Điều này sẽ ngăn chặn kịch bản nội bộ mặc định không tải cho mỗi nhân vật người chơi, hiệu quả loại bỏ hiệu ứng tái sinh.
Hoạt hình thanh hiển thị
Để thêm một cấp độ tiếng Ba Lan bổ sung vào đồng hồ tùy chỉnh, bạn có thể hoạt hình thay đổi sức khỏe qua tweening , dần dần thay đổi kích cỡ và màu của thanh đồng hồ trong vòng hơn ½ giây.
Truy cập vào tab trình soạn thảo kịch bản cho UpdateCustomMeter kịch bản bạn đã chỉnh sửa trước đó.
Chọn tất cả các dòng ( CtrlA hoặc ⌘A ) và sau đó dán chúng ( CtrlV hoặc ⌘V ) với mã sau:
Cập nhật CustomMeterlocal Players = game:GetService("Players")local TweenService = game:GetService("TweenService")-- Tham chiếu đến người chơi địa phương, nhân vật và hình người nhân tạolocal player = Players.LocalPlayerlocal character = player.Characterlocal humanoid = character:WaitForChild("Humanoid")-- Thuộc tính Tweenlocal tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)-- Tham chiếu đến khung nội bên của thanh đolocal playerGui = player:WaitForChild("PlayerGui")local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill-- Màu thứ tự tuyến tính (màu đỏ, cam, vàng, lime, xanh lá)local gradient = {Color3.fromRGB(225, 50, 0),Color3.fromRGB(255, 100, 0),Color3.fromRGB(255, 200, 0),Color3.fromRGB(150, 225, 0),Color3.fromRGB(0, 225, 50)}-- Chức năng để lấy màu trong chuỗi độ dốc từ điểm phân sốlocal function getColorFromSequence(fraction: number): Color3-- Mỗi màu trong đồ thị xác định điểm bắt đầu và/hoặc kết thúc của một phầnlocal numSections = #gradient - 1-- Mỗi phần đại diện cho một phần của 1local sectionSize = 1 / numSections-- Xác định phần nào mà phần trăm yêu cầu rơi vàolocal sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize-- Nhận màu tại đầu và cuối phầnlocal sectionColorStart = gradient[sectionStartIndex]local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart-- Bình thường hóa phần số để là một số từ 0 đến 1 trong phầnlocal fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize-- Lerp giữa khởi đầu và kết thúc dựa trên phần số bình thường hóareturn sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)endlocal function onHealthChanged()-- Tính sức khỏe mới như phần trăm của tối đalocal healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)-- Chuyển thanh sang mục tiêu kích thước/màu mớilocal tweenGoal = {Size = UDim2.new(healthFraction, 0, 1, 0),BackgroundColor3 = getColorFromSequence(healthFraction)}local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)meterBarTween:Play()end-- Lắng nghe các thay đổi về sức khỏe của humanoidhumanoid.HealthChanged:Connect(onHealthChanged)-- Lúc đầu đặt (hoặc trả về mặc định) kích thước/màu của thanh lên sức khỏe hiện tạionHealthChanged()Thêm/Thay đổi chìa khóa >Các dòng Mục đích 2 Nhận được một tham chiếu đến TweenService để thực hiện chức năng tweening trong kịch bản. 10 Tạo một constructor TweenInfo định nghĩa thời lượng của tween mong muốn, kiểu dễ dàng và hướng dẫn dễ dàng . 52 ‑ 57 Thay vì chỉ đặt kích thước và màu của thanh như trong phiên bản trước , tuyên bố một bảng với kích thước/màu mục tiêu, tạo một tween mới bằng các tham số và , và chơi tween mới.
Nếu bạn thử nghiệm trải nghiệm ngay bây giờ, bạn sẽ nhận thấy rằng các thiếu niên mét tùy chỉnh giữa mỗi thay đổi về sức khỏe:
Thêm một hiệu ứng thiệt hại
Hệ thống hiển thị sức khỏe mặc định bao gồm một màu đỏ nhẹ, tinh tế trên các cạnh màn hình khi nhân vật bị hư hại.Bằng cách vô hiệu hóa máy đo mặc định, hiệu ứng này được loại bỏ, nhưng bạn có thể thay thế nó bằng triển khai của riêng bạn.
Truy cập vào tab trình soạn thảo kịch bản cho UpdateCustomMeter kịch bản bạn đã chỉnh sửa trước đó.
Chọn tất cả các dòng và dán chúng vào chúng với mã sau:
Cập nhật CustomMeterlocal Workspace = game:GetService("Workspace")local Players = game:GetService("Players")local TweenService = game:GetService("TweenService")-- Tham chiếu đến người chơi địa phương, nhân vật và hình người nhân tạolocal player = Players.LocalPlayerlocal character = player.Characterlocal humanoid = character:WaitForChild("Humanoid")-- Thuộc tính Tweenlocal tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)-- Biến để lưu trữ/lưu trữ sức khỏe nhân vậtlocal cachedHealth = humanoid.Health / humanoid.MaxHealth-- Nhận (hoặc tạo mới) hiệu ứng chỉnh màu bên trong máy ảnh người chơilocal colorCorrection = Workspace.CurrentCamera:FindFirstChildWhichIsA("ColorCorrectionEffect") or Instance.new("ColorCorrectionEffect", Workspace.CurrentCamera)colorCorrection.Name = "DamageColorEffect"-- Tham chiếu đến khung nội bên của thanh đolocal playerGui = player:WaitForChild("PlayerGui")local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill-- Màu thứ tự tuyến tính (màu đỏ, cam, vàng, lime, xanh lá)local gradient = {Color3.fromRGB(225, 50, 0),Color3.fromRGB(255, 100, 0),Color3.fromRGB(255, 200, 0),Color3.fromRGB(150, 225, 0),Color3.fromRGB(0, 225, 50)}-- Chức năng để lấy màu trong chuỗi độ dốc từ điểm phân sốlocal function getColorFromSequence(fraction: number): Color3-- Mỗi màu trong đồ thị xác định điểm bắt đầu và/hoặc kết thúc của một phầnlocal numSections = #gradient - 1-- Mỗi phần đại diện cho một phần của 1local sectionSize = 1 / numSections-- Xác định phần nào mà phần trăm yêu cầu rơi vàolocal sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize-- Nhận màu tại đầu và cuối phầnlocal sectionColorStart = gradient[sectionStartIndex]local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart-- Bình thường hóa phần số để là một số từ 0 đến 1 trong phầnlocal fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize-- Lerp giữa khởi đầu và kết thúc dựa trên phần số bình thường hóareturn sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)endlocal function onHealthChanged()-- Tính sức khỏe mới như phần trăm của tối đalocal healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)-- Chuyển thanh sang mục tiêu kích thước/màu mớilocal tweenGoal = {Size = UDim2.new(healthFraction, 0, 1, 0),BackgroundColor3 = getColorFromSequence(healthFraction)}local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)meterBarTween:Play()-- Hiển thị hiệu ứng sát thương nếu sức khỏe mới thấp hơn sức khỏe lưu trữif healthFraction < cachedHealth then-- Lưu giá trị sức khỏe mớicachedHealth = healthFraction-- Chỉnh sửa màu thành màu đỏ như màu sắc ban đầu trước khi tweeningcolorCorrection.TintColor = Color3.fromRGB(255, 25, 25)colorCorrection.Saturation = 2.5-- Chuyển màu trở lại trắng (trung lập và không có sự thay đổi màu từ bình thường)local colorCorrectionTweenGoal = {TintColor = Color3.fromRGB(255, 255, 255),Saturation = 0}local colorCorrectionTween = TweenService:Create(colorCorrection, tweenInfo, colorCorrectionTweenGoal)colorCorrectionTween:Play()endend-- Lắng nghe các thay đổi về sức khỏe của humanoidhumanoid.HealthChanged:Connect(onHealthChanged)-- Lúc đầu đặt (hoặc trả về mặc định) kích thước/màu của thanh lên sức khỏe hiện tạionHealthChanged()Thêm/thay đổi chìa khóa >Các dòng Mục đích 14 Đặt một tham chiếu placeholder ( cachedHealth ) để theo dõi lượng sức khỏe của nhân vật giữa các thay đổi, để bạn có thể so sánh xem có thay đổi nào thấp hơn (thiệt hại) không. 17 ‑ 18 Trong lần xuất hiện nhân vật ban đầu, tạo một đối tượng mới ColorCorrectionEffect bên trong đối tượng hiện tại của người chơi Camera hoặc nhận được một tham chiếu đến cùng một đối tượng trong các lần tái sinh sau.Bằng cách cha mẹ hóa hiệu ứng xử lý hình ảnh này sau khi đăng bài lên máy ảnh của người chơi, nó chỉ áp dụng cho màn hình địa phương của họ, không phải cho màn hình của mọi người chơi trên máy chủ. 68 ‑ 83 Đầu tiên thực hiện kiểm tra điều kiện để xác nhận rằng thay đổi sức khỏe thấp hơn giá trị cachedHealth , cho thấy sự hư hại; nếu vậy, nó đặt cachedHealth đến giá trị mới.Tiếp theo, nó đặt tông màu ColorCorrectionEffect sang [255, 25, 25] (màu đỏ) với độ bão hòa cao hơn, sau đó điều chỉnh lại tông màu về mặc định của trắng trung tính ( [255, 255, 255] ) không có độ bão hòa.
Nếu bạn thử nghiệm trải nghiệm ngay bây giờ, bạn sẽ nhận thấy rằng màn hình sẽ nhấp nháy màu đỏ ngắn khi nhân vật nhận sát thương:
Nếu bạn quyết định chỉnh sửa thanh đo tùy chỉnh cho mục đích khác, chẳng hạn như một thanh đo mana hoặc thanh đo độc hại, bạn có thể thay đổi TintColor trên dòng 73 thành một cái gì đó phù hợp hơn với sự kiện, chẳng hạn như màu xanh lam nhạt ( [200, 225, 255] ) hoặc màu xanh lá cây độc hại ( [0, 255, 75] ) .
Nếu đồng hồ sức khỏe của bạn không phù hợp với cái nhìn hoặc hành vi được hiển thị trong hướng dẫn này, hãy nhớ rằng bạn có thể kiểm tra Nền tảng UI - Đồng hồ HUD như một mẫu tham khảo hoàn thành.