Hight Marker Bar

How do I…

A bar on the side of the screen that shows how high the player is.

What is the expected result

Is the player has to travel 10,000 distance up, the arrow on the bar will move accordingly to how far the player has felt to go.

Related screenshots

You’ll want to update the Y position of the slider every frame, I just cooked this expression up but it works pretty well:

(maxDistance - Variable(playerDistance))/ratio

Where the ratio is the max distance divided by the height of the screen.
For example let’s say the max vertical distance a player can go is 10000, and the height of the screen is 720. So maxDistance = 10000, and the ratio (10000/720) = 13.89, then the formula for the Y position of the slider would be (10000 - Variable(playerDistance))/13.89.

One thing you need to keep in mind is that the player distance and the Y position of the slider are basically inverse. When the player is at a vertical distance of 0, the slider is at a Y position of 720. When the player’s vertical distance is 7500, the slider is at a Y position of 155.

Another thing, I noticed that your slider is obviously not the entire screen height so you can use the clamp() function so the slider doesn’t leave the range of the slider bar. You could also use the slider bar’s height instead of the screen height in the formula (this might cause problems I’m not entirely sure).

Thank you! I am having a few problems with it however. The arrow does move from its original starting place but then does not move after that. Basically it starts in the red and when I launch the game it is in the purple at the top even if I am on the ground.

Also, is this the correct way to do it? It is a vertical mobile game with the screen dimensions of 720 width by 1280 height.

You mixed up the last two clamp values. It should be clamp(“expression”, min, max).

Thank you! It now starts at the bottom of the bar like it should. However, I still cant get it to move.

What is the method you use to measure the player’s vertical distance?

Using the assumption that the bar’s origin is the top left, I would use the formula bar.Y() + bar.Height() * (1 - (playerDistance/maxDistance)) to get the Y position of the marker.

That way if the bar is stretched or squished, the marker’s position remains relative.

I typically use the player origin y point to get its hight.

That could be why as I have stretched the bar, I will attempt to use it without stretching it.

EDIT: It is way to small not stretched. I might use a bigger texture for it instead.

Yeah you should use MrMen’s formula it is better, and make sure that the bar is not stretched as the height() will not change when stretched. As for measuring with the player’s y coordinates, you should use the BoundingBoxBottom() method, as well as a measuring system like this:

if (player.BoundingBoxBottom() >= 0)
     distance = screenHeight() - player.BoundingBoxBottom()
if (player.BoundingBoxBottom() < 0)
     distance = screenHeight() + (-player.BoundingBoxBottom())

This has to do with how coordinates are measured on GDevelop (x and y start at 0,0 and x increases as go further right, y increases as you go further down). Thus if your player starts at the bottom of the screen and you’re using the y coordinate for distance, its distance will be at 720, when you actually want it to be 0. Furthermore, when the player reaches a distance that should be 720, its actual y coordinate will be 0. These factors are solved with the system above.

If the player object’s bottom bounding box does not start exactly at the bottom of the screen (y:720) then instead of screenHeight() in the formula, use the y coordinate of the bottom bounding box (the y coordinate where the player object first starts).

Sorry, I have a hard time with words, is there a way you could show a demonstration of this with a picture?

Untitled-video-Made-with-Clipcha

I’m a little confused on how to use this for the bar.

object.Height() changes with stretched or scaled objects.


Like this:

1 Like

Whoops! Yes you are right, I must have done something wrong when I tested this a while ago.

When I run the game, the arrow disappears.

Did you implement my movement/coordinate system?

Can you screen shot the events that place the marker?

And where do you set the values for maxDistance and playerDistance?