====== Giao Diện Thanh Máu ======

===== Hướng Dẫn =====
**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ảo[[developer_center:developer_editor:script:ui_event|Lớp Giao Diện]])**\\
- **Các phép tính cơ bản trên Lua** \\

===== Thành Phẩm =====
**Trước khi tiếp tục với hướng dẫn, hãy xem thành quả trước.**
{{ :developer_center:developer_editor:script:hp_bar_present.webm |}}

===== Bước 1: Làm Giao Diện =====
**Đầ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:**
{{ :developer_center:developer_editor:script:thanhhp.png?600&direct |}}\\
  * **Giải thích:** 
  - **Thành phần hình ảnh: Nền của thanh HP (bên dưới thành phần 2)** 
  - **Thành phần hình ảnh: thanh HP** 
  - **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** 
  - **Thành phần hình ảnh: Hình ảnh cho người chơi biết đó là thanh HP**

===== Bước 2: Kịch Bản =====
**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** \\

<code lua>
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)

</code>