如何使用变量将 draw.RoundedBox 添加到 x 位置？

Question

我目前正在尝试创建一个 XP 系统，让您可以通过杀死 NPC 来获得经验和升级。我能够设置实际的 XP 栏并将宽度设置为我的变量“xp”。当我将“xp”设置为 100 之类的值时，它会显示一个宽度为 100 的条形图。但是，当我添加一个函数钩子时，该函数钩子会在玩家杀死 NPC 时激活以向变量“xp”添加 +1，它确实不影响栏的宽度。是否有另一种方法可以解决这个问题，以便 XP 栏使用变量“xp”进行更新。

--init.lua file--

AddCSLuaFile("cl_init.lua")

levels = 0
xp = 0

hook.Add("OnNPCKilled", "npcreward", function()

    xp = xp + 1
    print(xp)

end)

--cl_init.lua file--

hook.Add("HUDPaint", "DrawMyHud", function()
    --XP Bar Background
    draw.RoundedBox(0,1598,8,300+4 , 30 + 4,Color(12, 120, 150))
    --XP Bar Progress Bar
    draw.RoundedBox(0,1600,10,xp,30,Color(28, 174, 214))
end)

Answer 1

这里有几处你有问题，以及你的问题的几个解决方案。

作为基础层： 您已经发布了 2 个文件示例。 init.lua（这是服务器） cl_init.lua（只有客户端可以看到）

这里的第一个问题是你在服务器端增加了一个全局变量（XP），它没有发送到客户端。 这个变量必须分配给播放器，并联网（从服务器发送到客户端），否则客户端将永远无法看到正在发生的事情。

您可以像这样分配变量： https://wiki.facepunch.com/gmod/GM:OnNPCKilled

-- init.lua--

util.AddNetworkString("npcreward:givexp")
hook.Add("OnNPCKilled", "NPCReward", function(npc,killer,weapon) -- NPC is the npc you are wanting to kill, killer is you, weapon is what was used to kill the NPC

net.Start("npcreward:givexp")
net.WriteInt(1,8)
net.Send(killer)
 -- What this will do is send the amount of xp you want to give to the client (in this case, you), to the client, so they can print it somewhere, in this case, a hud / progress bar.

end)

-- cl_init.lua -- 在这里，您将像以前一样绘制框/圆框，但您错过的一件事是定义 xp 的最大数量是多少。不这样做将不允许您制作动态 XP 条，该条会根据您拥有的 XP 数量而变化。

您应该考虑的其他一些事情是按屏幕宽度/屏幕高度（ScrW（），ScrH（））缩放，因为您现在正在制作的东西在您的屏幕上可能看起来不错，但如果我不是我的运行不同的分辨率。如果您希望这对其他人有用，请务必考虑这一点。

为了这篇文章的目的，我将举例说明这个进度条是如何工作的，以及来自 init.lua 的代码。

--[[
    Everything that happens here, in the client realm, is only shared with the client.
    Unless you network something to the server, it will be unknown to the server, until you have told it whatever you want to send.
]]

local xp = 0
local maxExperience = 100
--[[
    If you look at the example in init.lua, you can see that this is the opposite of sending. We are now receiving the data that the server has sent to us.
]]
net.Receive("npcreward:givexp", function()
    local xpReward = net.ReadInt(8)

    --[[
        Printing xpReward should now give us (1), for the first NPC we kill.
        It will keep printing 1, because that's the amount of XP we receive.
    
        Using the variable "xp", that we have defined above, allows us to keep track of it, for this session, or until the code is refrehsed.
    
    The below code does this:
    I want xp to be the value of xp + the xp reward that I got from the server
    You can do the opposite if you want to remove XP, just make the "+" a "-"
    ]]
    xp = xp + xpReward

    --[[
        What we have now acheived is that the client now knows how much XP we have.
        We can now move on to painting this on our screen
    ]]
end)

hook.Add("HUDPaint", "npcreward:prog", function()

    -- Draw a background box

    draw.RoundedBox(8, ScrW()*.5, ScrH()*.7, ScrW()*.3, ScrH()*.1, Color(33,33,33,255))

   
    --[[
        Draw the same box, but this one will show how much progress you have made, so it will receive a lighter shade of gray.
         To explain in short what we are doing here.
        We are placing the box on the middle of our screen
        The box will be placed at 70% of screen height (near bottom)
        It will be 30% of the screen width wide
        And 10% of the screen height tall

        In basic terms what we are going to do, we are going to make the width change based on how much XP you have, and how much XP you need to achieve for the bar to be full
        
        So basic math:
        (maxExperience is 100xp)
            xp / maxExperience = 0 (Currently)

            if we receive 1 xp
            xp / maxExperience = 0.01
            What this means is that if we have 1 xp, 1% of the bar will draw.
            If you get 50 xp 50% of the bar will draw.
        ]]
    draw.RoundedBox(8, ScrW()*.5, ScrH()*.7, ScrW()*.3 * math.Clamp((xp / maxExperience),0,1), ScrH()*.1, Color(66,66,66,255))

end)

从这里开始，我建议学习net库的使用，了解服务器和客户端的区别，不要犹豫，问任何问题。

您也可以查看 SetNWInt、GetNWInt，但我制作这个示例是为了向您展示联网的方式。 https://wiki.facepunch.com/gmod/Entity:SetNWInt https://wiki.facepunch.com/gmod/Entity:GetNWInt

我还必须让你知道，这里给出的所有代码都未经测试，并且可能包含错误，但我希望它能让你基本了解为什么你的代码不起作用，以及你必须做些什么它工作。

祝你在未来的编码工作中好运！