How to build an animated score bar like GTA 1?

Unity Engine
1

Hi, I am trying to build a animated score bar like GTA 1 but I have no idea in how to start that and I am not great with animations yet. To exemplify what I am trying to do you can view this video, skip to 5:18 please. (the score bar is on the top right):

if anyone have done that or if you could send me links that will help me build such a thing it would be great.

Thank you in advance.

2

I’m not a programmer so I can’t go further in the explanation ( like, how you could code that guy ), but you can do that with a mask and a sprite with all your numbers disposed vertically.

3

Thank you for the tip, I will look into it and see how far I can get. If you have anything else that could help me please let me know. Cheers.

4

http://unity3d.com/learn/tutorials/modules/beginner/ui/ui-mask
http://docs.unity3d.com/Manual/script-Mask.html

I think it’s better for you to try something and come back when you’re stuck, with precise questions :slight_smile:

5

Based on your info and some research that I made on the internet I was able to make something similar to what I want to do. I have exported my scene so you guys can have a look in what I’ve done so far. To make the score add just press Up Arrow, it will add 2 to the score.

There are two scripts one called Content.cs that is responsible for making the animation of the score bar. Calling the method AddPoint(int point) will call a Coroutine that makes the animation happen by adding a velocity to the scrollRect (ContentScore0, ContentScore1, …), the reason I am calling a coroutine is because this way I can let the animation run for 2 seconds (or more) and then I stop it by setting the anchoredPostion of the scrollRect to the position of the image that represents the score number. Also, before setting the anchoredPosition, after the 2 seconds that I set for the animation I rearrange the images so the number that I want is always on top, here is the code for that:

…

//ImageName is the name of the image that represents number that will be in the score bar 0,1,2,3....9
        Transform child = transform.FindChild(imageName);
        int index = child.GetSiblingIndex ();
        for(int i = 0; i < index; i++)
        {
            transform.GetChild(0).SetSiblingIndex(transform.childCount-1);
        }

…

on the Update method I make sure that I rearrange the images so it seems that it is an infinite scroll:

void Update () {
        if (!checkUpdate)
            return;

        if (_contentRectTransform.anchoredPosition.y > 0.0f)
        {
            transform.GetChild(0).SetSiblingIndex(transform.childCount-1);
            _contentRectTransform.anchoredPosition = new Vector2 (_contentRectTransform.anchoredPosition.x,_contentRectTransform.anchoredPosition.y-imageSize);
        }
    }

It has solved my problem for now but I would like to be able to keep the animation smoother without having to wait 2 seconds and then set the anchorPosition for the scrollRect. I wanted just to start the animation and it would end on the number that I want.

Thanks for your help funshark.

2072781–135259–Score Demo.unitypackage (46.9 KB)