欢迎来到我的博客小站。  交流请加我微信好友: studyjava。  也欢迎关注同名公众号:Java学习之道

lol手游之任务进度条精准计算

  |   0 评论   |   0 浏览

最近lol手游持续火热中,最近又上线了一个新活动,完成任务,免费送小法。当然。老司机已经成功获得小法一个。
在这里插入图片描述
恰巧,最近工作上也在做一個活動,和lol上面这个任务有类似功能——进度条。注意看,上面进度条的位置等间距,但是相邻两个差值却不一样。今天就带大家来实现这种功能,话不多说,赶紧开始吧!

前言

游戏中,经常会使用进度条的方式,显示玩家当前到目标的进度。进度条的显示方式,更加直观的体现了距离,但是如何在准确的体现进度,就显得尤为重要了。如果只有单纯的一个目标点,显示进度的方式就特别简单,只需要用目标值/当前值获得。如果目标点的个数不固定,且每相邻两个目标点需要达到的差值也不固定,这时候该如何的显示进度呢?

搭建UI

首先创建一个空物体,作为整个进度信息的父节点,命名為prog
在这里插入图片描述
为了更加准确的让玩家知道当前进度值,通常我们会用一个Text组件显示玩家当前完成数。创建记录完成数量的游戏对象,吗,命名为Total,num显示具体的完成数量。
在这里插入图片描述
接下来,创建一个Slider对象,用来显示进度条。
在这里插入图片描述
最后,创建5个宝箱,作为单个目标点。
在这里插入图片描述

思路分析

由于进度条上面的宝箱数量不固定,所以两个宝箱之间的距离和进度值也不固定,都随宝箱数量变化。
首先,我们需要知道宝箱进度条总长度,可以通过移动记录空物体在起始位置(x=232)和终点位(x=232)置的值,做差得到。
232-(-239.1) = 471.1
现在,我们先来研究下怎么计算两宝箱之间的距离。设宝箱数量为n(n=5)用总长度(x= 471.1)除以宝箱分割数量得到,
471.1/n = 471.1/5 = 94.22
有了距离和起始位置,可以算出第一个宝箱以及第n个宝箱的位置。
第1个宝箱位置:-239.1 + 94.221 = -144.88
第2个宝箱位置:-239.1 + 94.22
2 = -50.66
第n(n=5)个宝箱位置:-239.1 + 94.22n = -239.1 + 94.225 = 232

获得数据

新建一个空物体,帮助查看进度条的起始位置信息
在这里插入图片描述
用同样的方式,获得终点位置信息
在这里插入图片描述

等间距生成宝箱

等间距生成宝箱代码如下:

local startPosX = -407.9 --进度条起始位置
local progLength = 523.7 --进度条总长度
local tasknumber = {8,20,45,50,58} --每个包厢需要达到的数量,长度即宝箱数

--初始化,获取组件
local function Init()
    self.normalButton = {}
    self.normalImage = {}
    self.normalText = {}
    for i = 1, 5 do
        self.normalButton[i] = transform:Find(string.format("prog/box/normal%s", i)):GetComponent("Button")
        self.behaviour:AddClick(self.normalButton[i], OnClick)
        self.normalImage[i] = self.normalButton[i].transform:GetComponent("Image")
        self.normalText[i] = transform:Find(string.format("prog/box/normal%s/num", i)):GetComponent("Text")
    end
end

--动态生成宝箱位置
local function RefreshBoxPos()
    local len = #tasknumber
    local stepLength = progLength/len
    for i=1,len do
        self.normalButton[i].gameObject.transform.localPosition = Vector2.New(startPosX+i*stepLength,8)
    end
    for i=1,5 do
        self.normalButton[i].gameObject:SetActive(i <= len)
    end
end

接下来就是计算进度了,如果单纯用百分比来计算,就会出现如下情况:进度条和实际进度对不上。
在这里插入图片描述

精准计算进度值

为了避免这个情况发生,还是得单独间隔计算进度。即根据任务数量完成来判断某段进度的完成情况。

local perProgVlaue = 1/#tasknumber -- 两个宝箱之间的进度值0-1
local completedNum -- 已经完成的数量

--初始化:获取组件
local function Init()
    self.normalImageProgress = transform:Find("prog/slider"):GetComponent("Slider")
end

--显示进度值
local function RefreshTopProg()
    for i = 1, #tasknumber do
        if completedNum >= tasknumber[i] then
            self.normalImageProgress.value = self.normalImageProgress.value + perProgVlaue
        else
            local lastNum = tasknumber[i-1] or 0 --1
            local currStepValue = perProgVlaue*((completedNum-lastNum)/(tasknumber[i]-lastNum))
            self.normalImageProgress.value = self.normalImageProgress.value + currStepValue
            break
        end
    end
end

标题:lol手游之任务进度条精准计算
作者:shirlnGame
地址:https://mmzsblog.cn/articles/2021/10/27/1635298182516.html
-----------------------------
如未加特殊说明,此网站文章均为原创。
网站转载须在文章起始位置标注作者及原文连接,否则保留追究法律责任的权利。
公众号转载请联系网站首页的微信号申请白名单!

个人微信公众号 ↓↓↓                 

微信搜一搜爱上游戏开发