Timer Bar

[Kieran_S]

Hi all,

Does anyone know how to make a timer bar in the corner of the screen with a countdown? I am trying to make a timer for an indication of when the cops will get to where you are. 

 

Any help would be great.

 

Thanks.

[ConnorFTW]

I think you can use the Native UI API. I believe it has a Timer Bar Function 

Edited February 28, 2021 by ConnorFTW

[Kieran_S]

10 minutes ago, ConnorFTW said:

I think you can use the Native UI API. I believe it has a Timer Bar Function 

Yeah, I was trying to use that but I wasn't showing. I did as it said in the guide, perhaps I missed something. Not sure about NativeUI.

[LeeC22]

13 hours ago, Kieran_S said:

Yeah, I was trying to use that but I wasn't showing. I did as it said in the guide, perhaps I missed something. Not sure about NativeUI.

 

Here's what I always do.

 

First decide on how wide you want the timer bar to be, let's say 200 pixels for this example. Create a UIContainer to hold everything. Add a UIRectangle that is 8 pixels wider than the timer bar and 8 pixels taller, make the colour white. Add a second UIRectangle that is 4 pixels wider and 4 pixels taller and make that black. Set the position of the second UIRectangle to x +2 & y + 2 from the first one. That creates a white outline round a black rectangle.

 

Now add a third UIRectangle, this is the moving bar, position this at the same place as the second black UIRectangle.

 

To determine the width of the bar, you need a point of reference, so for this example let's use distance. When the cops are first detected, that distance is your reference point and that = the maximum bar width. For this example, let's say that's 3000m.

 

As the police get closer, divide the current distance by the reference distance and that will give you a percentage value. So the police are now 700m away, so 700f / 3000f = .23333f. To get the width of your bar, multiply the maximum width by that percentage, so 200f * .23333f = 46.6f pixels. Now draw your third bar in its current position but set the width to the calculated width... or the integer of it anyway.

 

You obviously need to be careful if the police move further away, so just use Math.Min(current distance / reference point, 1f) and that will ensure you never get more than 1f as the end result. You can wrap that in a Math.Max(value, 0) as well to make sure it never goes below 0;

 

I use this as a general purpose clamp function to keep values confined into a preset range:

float clampedValue = Math.Max(Math.Min(currentValue, maxValue), minValue);

 

I apologise if the coding aspect to generate the width is something you already know about, I just wanted to include all that for the benefit of anyone who needed to know the whole process.

Edited March 1, 2021 by LeeC22

[Kieran_S]

18 minutes ago, LeeC22 said:

 

Here's what I always do.

 

First decide on how wide you want the timer bar to be, let's say 200 pixels for this example. Create a UIContainer to hold everything. Add a UIRectangle that is 8 pixels wider than the timer bar and 8 pixels taller, make the colour white. Add a second UIRectangle that is 4 pixels wider and 4 pixels taller and make that black. Set the position of the second UIRectangle to x +2 & y + 2 from the first one. That creates a white outline round a black rectangle.

 

Now add a third UIRectangle, this is the moving bar, position this at the same place as the second black UIRectangle.

 

To determine the width of the bar, you need a point of reference, so for this example let's use distance. When the cops are first detected, that distance is your reference point and that = the maximum bar width. For this example, let's say that's 3000m.

 

As the police get closer, divide the current distance by the reference distance and that will give you a percentage value. So the police are now 700m away, so 700f / 3000f = .23333f. To get the width of your bar, multiply the maximum width by that percentage, so 200f * .23333f = 46.6f pixels. Now draw your third bar in its current position but set the width to the calculated width... or the integer of it anyway.

 

You obviously need to be careful if the police move further away, so just use Math.Min(current distance / reference point, 1f) and that will ensure you never get more than 1f as the end result. You can wrap that in a Math.Max(value, 0) as well to make sure it never goes below 0;

 

I use this as a general purpose clamp function to keep values confined into a preset range:

float clampedValue = Math.Max(Math.Min(currentValue, maxValue), minValue);

 

I apologise if the coding aspect to generate the width is something you already know about, I just wanted to include all that for the benefit of anyone who needed to know the whole process.

OK, thanks for the help. I will try and figure it out now.