Trong bài viết này, bạn sẽ tìm hiểu cách tạo thanh máu và sẽ được tìm hiểu về:
- Học cách sử dụng giao diện (Tham khảoLớp Giao Diện)
- Các phép tính cơ bản trên Lua

Trước khi tiếp tục với hướng dẫn, hãy xem thành quả trước.

Đầu tiên chúng ta cần tạo giao diện UI cơ bản cho nội dung tiếp theo.
Tạo nội dung của thành phần UI như trong hình bên dưới:

• Giải thích:

1. Thành phần hình ảnh: Nền của thanh HP (bên dưới thành phần 2)
2. Thành phần hình ảnh: thanh HP
3. Thành phần văn bản: Hiển thị HP hiện tại và HP tối đa bằng văn bản
4. Thành phần hình ảnh: Hình ảnh cho người chơi biết đó là thanh HP

Bạn không cần thực hiện bất kỳ thiết lập biến và kích hoạt nào. Làm theo hướng dẫn trong phần bình luận kịch bản

local HP_bar_width, HP_bar_height = 300, 30 -- THAY ĐỔI giá trị này thành chiều rộng và chiều cao của thành phần của bạn (component 2)
local uiid = [[7165403411129705077]] -- THAY ĐỔI giá trị này thành ID của giao diện UI của bạn
local elementid = {7, 8} -- THAY ĐỔI hai giá trị này thành ID văn bản thanh máu và ID thanh máu (component 3, component 2)
 
-- Các đoạn mã dưới đây không cần phải sửa đổi
local function gr(e)
    local _,n,as = World:getAllPlayers(-1) -- Lấy tất cả người chơi trong trò chơi
    for n = 1, #as do
        local result,currhp = Player:getAttr(as[n],2) -- Lấy máu hiện tại của người chơi
        local result,maxhp = Player:getAttr(as[n],1) -- Lấy máu tối đa của người chơi
        local ratio = (HP_bar_width / maxhp) * currhp -- Tính độ dài của thanh máu
        -- (Độ dài UI thanh máu / giá trị HP tối đa) * giá trị HP hiện tại
        Player:openUIView(as[n],uiid) -- Mở giao diện UI
        Customui:setSize(as[n],uiid,uiid .. "_"..elementid[1],ratio,HP_bar_height) -- Đặt chiều rộng của thanh máu (Từ trái sang phải)
        Customui:setText(as[n],uiid,uiid .. "_"..elementid[2],currhp .. '/'..maxhp) -- Đặt nội dung văn bản của thanh máu
    end
end
 
-- Thêm sự kiện lắng nghe khi trò chơi đang chạy
ScriptSupportEvent:registerEvent('Game.RunTime',gr)