What is the best solution to create an infinite UI ladder which represents altitude or speed for aeroplane HUD ?
Like the ones at the left and at the right on this picture (forget about the fancy number wheels):
I was thinking about a long image made of vertical bars and numbers, and only select a section inside a image UI object. But I was not able to find how crop the image by a script.
Thanks a lot for your help guys. I am looking for info everywhere but I found nothing. I think it’s because I don’t have the good vocabulary to describe it.
No need for infinite, since there are only 360 degrees in a circle. You can prepare a set of lines to represent up to -180 and +180 degrees then, turn the indicator upside down when user gets -181 or +181 degrees.
Yep @npatch, with your suggestion and also this ressource: youtube video I can do something good, but not infinite as it is obviously impossible this way. Here is the deal in detail for those who need:
Create the ladder image and import it as a Sprite (2D and UI)
Add an UI Image to the canvas (there will never be a Source Image to this object, let’s call it “the mask”)
Add two composent to this object: an UI>Mask, and an UI>Scroll Rect
Add an UI Image as a child to this object, and set the ladder sprite as the Source Image
Expend the ladder sprite image so it’s bigger than the mask object
drag’n drop the ladder sprite image to the Scroll Rect Content variable (the scroll rect content need a variable !!)
find a way to have the handle on the ScrollRect object
the member variable “verticalNormalizedPosition” is between 0 and 1, so do the math for set up the correct ladder position according to the current value of the associated variable (altitude in my case)
You could try using a UI Image which all it does is crop the renderable area of an image and use it in conjunction with a vertical slidebar or scrollrect or sth , effectively moving the content around using the normalized vertical position. So if you set the normalized vertical position to 0 you move the huge image down so that the viewable portion starts from 0 (top).
To wrap around from top to bottom then span from 0 to 1 in the normalized vertical position and respectively to wrap around from bottom to top , snap the value of normalized vertical position from 1 to 0.
There might be a visible snap motion but there’s no smooth infinite scrolling solution right now. There is one but that uses lots of instantiations, not exactly ideal for your case of one whole image.
You could use a RawImage for the Ladder and keep moving the UV to make a scrolling, repeating pattern without having to make a super tall texture. For the numbers you could have 4 Text that you place within a Mask (or Crop or whatever its called). You can position them with Mathf.Repeat etc to make them wrap/repeat when they exit Mask area.
