Accurate calculation of task progress bar of lol mobile game

lately lol Mobile games continue to be hot , A new activity has been launched recently , To complete the task , Free gift to Xiao fa . Of course . The old driver has successfully won a small law .

Happen to happen , Recently, I was doing an activity at work , and lol The above task has similar functions —— Progress bar . Look for the , The position of the progress bar above is equidistant , But the difference between adjacent two is different . Today I will bring you to realize this function , Don't talk much , Let's get started ！

Preface

In the game , Progress bars are often used , Displays the current progress of the player to the target . How the progress bar is displayed , More intuitively reflects the distance , But how to accurately reflect the progress , This is particularly important . If there is only one target point , The way to show progress is particularly simple , Just use the target value / Current value acquisition . If the number of target points is not fixed , And the difference between two adjacent target points is not fixed , At this time, how to display the progress ？

build UI

First create an empty object , As the parent node of the whole progress information , Named prog

In order to let players know the current progress value more accurately , Usually we use one Text The component displays the current number of players completed . Create game objects that record the number of completed games , Do you , Name it Total,num Display the specific completed quantity .

Next , Create a Slider object , Used to display progress bar .

Last , establish 5 A treasure chest , As a single target point .

Thought analysis

Because the number of treasure boxes on the progress bar is not fixed , Therefore, the distance and progress value between the two treasure boxes are not fixed , All change with the number of treasure boxes .
First , We need to know the total length of the treasure box progress bar , You can record an empty object at its starting position by moving it （x=232） And the destination （x=232） Set value , Do a bad job and get .
232-(-239.1) = 471.1
Now? , Let's first study how to calculate the distance between the two treasure boxes . Set the number of treasure boxes as n(n=5) Use the total length (x= 471.1) Divide by the number of treasure chest partitions to get ,
471.1/n = 471.1/5 = 94.22
With distance and starting position , You can calculate the first treasure chest and the n The location of the treasure chest .
The first 1 Treasure chest position :-239.1 + 94.221 = -144.88
The first 2 Treasure chest position :-239.1 + 94.222 = -50.66
The first n(n=5) Treasure chest position :-239.1 + 94.22n = -239.1 + 94.225 = 232

Get data

Create a new empty object , Help view the start position information of the progress bar

In the same way , Get the end position information

Generate treasure chest at equal intervals

The code of equally spaced treasure chest is as follows ：

local startPosX = -407.9 -- Start position of progress bar local progLength = 523.7 -- Total length of progress bar local tasknumber = {8,20,45,50,58} -- The number of boxes to be reached , Length is the number of treasure boxes -- initialization , Get components 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")    endend-- Dynamically generate treasure chest position 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)    endend

The next step is to calculate the progress , If you simply use percentages , The following will happen ： The progress bar does not match the actual progress .

Accurately calculate the progress value

To avoid this happening , You still have to calculate the progress at separate intervals . That is to judge the completion of a certain period of progress according to the completion of the task quantity .

local perProgVlaue = 1/#tasknumber --  Progress value between two treasure boxes 0-1local completedNum --  Quantity completed -- initialization ： Get components local function Init()    self.normalImageProgress = transform:Find("prog/slider"):GetComponent("Slider")end-- Show progress values 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    endend