前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【虚幻引擎】实现类LOL缓慢扣血血条

【虚幻引擎】实现类LOL缓慢扣血血条

作者头像
六月丶
发布2022-12-26 18:08:36
6310
发布2022-12-26 18:08:36
举报
文章被收录于专栏:六月-游戏开发六月-游戏开发

实现效果

思路

分两个进度条重叠放, 一个在前面显示深红的真血条,但是背景条完全透明; 一个在背后显示淡红的跟随血条,背景条不透明。

如果 真血条减少: ----跟随血条等待一会后,循环减到真血条百分比。 如果 真血条增加: ----跟随血条直接跳到真血条位置。

实现

我习惯用Lua,所以用Lua演示,思路是一样的。 首先创建一个UserWidget,主要需要两个血条,hp在前,hpBack在后:

image.png
image.png

hp的背景条透明:

image.png
image.png

hpBack的进度条半透明:

image.png
image.png

核心代码

代码语言:javascript
复制
local cls = {
    hpPercent = 1, 
    hpBackPercent = 1,

    --每秒变化量
    hpBackAdd = 0.3,
    HPBackLoopFunc = nil,

    -- 缓存变量
    hpBackLastChangeTime = 0,
}

--循环让跟随血条过渡到真血条
function cls:OnHPBackLoop()
    local again = true
    if self.hpBackPercent > self.hpPercent then
        self.hpBackPercent = self.hpBackPercent - self.hpBackAdd * (GF:Now() - self.hpBackLastChangeTime)
        self.hpBackLastChangeTime = GF:Now()
    end

    if self.hpBackPercent <= self.hpPercent then
        again = false
        self.HPBackLoopFunc = nil
        self.hpBackPercent = self.hpPercent
    end
    self.hpBack:SetPercent(self.hpBackPercent)

    return again
end

-- 根据dataModel更新widget显示
function cls:Update(model)
    self.hp:SetPercent(model.hpPercent)
    self.endurance:SetPercent(model.endurancePercent)
    self.hpPercent = model.hpPercent

    if self.hpBackPercent <= self.hpPercent then
        self.hpBackPercent = self.hpPercent
        self.hpBack:SetPercent(self.hpBackPercent)
    else
        self:DelayCall(0.3, function()  --延迟调用
            if self.HPBackLoopFunc == nil then
                self.hpBackLastChangeTime = GF:Now()
                self.HPBackLoopFunc = self:LoopCall(0.01, false, function()     --循环调用
                    return self:OnHPBackLoop()
                end)
            end
        end)
    end
end

 --[[
 DelayCall、LoopCall函数定义
]]--

return cls
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022 年 09 月,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 实现效果
  • 思路
  • 实现
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档