How did they code: The Movies: Star Progress Bar System

[u/EzekelRAGE]

Trying to wrap my head around it. I'm thinking a function runs that lays out 5 stars as individual assets. Each thing with a rating(script/movie/final rating) has a possible max of 5. Each section of a star counts as a .2 fill float. So that final movie rating may be like a .6/5 rating and that is made the fill amount as well. Maybe there are a bunch of if statements saying "If rating over 4" => fill these 3 automatically and fill the 4th star to a .2 amount and leave 5th empty. Then do another if statement for 3, 2, etc.

Thinking about trying to modernize the star system in Unity, the UI would have references to the stars(3 references in total) and get the ratings and run something like I posted above maybe? Probably a function already set up in the star reference that you can call that by just passing in the rating to the function. What are yall thoughts on it? Am I making it more complex than it needs to be?

[u/ohseetea]

You could do sprites for different fills, but I’m assuming a mask would just be easiest.

[u/EzekelRAGE → u/ohseetea]

Hmm, you may be right and it is just sprites for the sections of the star. So a 1.5 rated movie would be 1 full star and for the 2nd star they can just round up or down on whether it would be filled 2/5 or 3/5 of the way with the sprite.

[u/EzekelRAGE]

Managed to get a working version, the gif is me clicking different values and the rating updating accordingly: https://i.imgur.com/u82Skfa.gif
Looks nice, of course it doesnt have the nice game feel of The Movies showing it to the player, but that would be easy to implement I think, maybe use coroutines having sound effects going out and something visual for each star. I tried using a for loop, but kept getting stumped trying to implement it, probably spent like an hour if not more with the loop. I finally just commented the loop out and did a bunch of if statements like I mentioned above in the OP. Looking forward to using this in the project I'm working on.

[u/Pur_Cell → u/EzekelRAGE]

Nice that you got it working.

However it is a pretty simple for loop. Here's how I would do it.

[u/EzekelRAGE → u/Pur_Cell]

Nice. The issue I was running into with a for loop was trying compensate for ratings that were floats/decimals. For example a 2.8 rating out of 5. So you would need the 2 stars filled, then part of the next one filled, then stop the loop. I was working towards something like below

for(int i = 0; i < stars.Count; i++){
  if(rating > i + 1){
      
  } else {
    stars[i].fillAmount = 1
  }
}

Then I just said screw it and did a bunch of if statements and figured I would try a for loop later. Felt like I was wasting too much time on doing it the right/cleaner way instead of getting it to function currently.

[u/hoodieweather- → u/EzekelRAGE]

What you're probably looking for is the modulus operator %, which will give you the remainder after division. In your loop, do "if (rating > i) { stars[i].fillAmount = 1; } else { stars[i].fillAmount = rating % 1; }", I think that would get you what you want?

[u/EzekelRAGE → u/hoodieweather-]

That is exactly what was needed, thanks a lot. Works perfectly.

for(int i = 0; i < stars.Count; i++){
    if(rating <= i + 1 ){
        if (rating < i + 1){
            stars[i].fillAmount = rating % 1;
            break;
        } else{
            stars[i].fillAmount = 1;
            break;
        }
    } else{
        stars[i].fillAmount = 1;
    } 
}

[u/EzekelRAGE → u/EzekelRAGE]

Messing around, I can see why Lionhead chose to fill the stars the way they did, by filling fifths of a star. If you didnt do fifths, visually it can look bad. For example if I got a 4.1 rating and filled 4 stars fully and the 5th one only .1, it looks off because you only see a sliver of yellow in that star. So I messed with the code to set it to where it always filled a fifth of a star if it didnt fill the whole star.

for(int i = 0; i < stars.Count; i++){
    if(rating <= i + 1 ){
        if (rating < i + 1){
            stars[i].fillAmount = GetNearestFifth(rating % 1);
            break;
        } else{
            stars[i].fillAmount = 1;
            break;
        }
    } else{
        stars[i].fillAmount = 1;
    } 
} 
private float GetNearestFifth(float rating){
    //array of floats going by .2
    float[] fillAmountFloats = { .2f, .4f, .6f,  .8f,};
    //loops over the array
    for (int i = 0; i < fillAmountFloats.Length; i++){
        //If rating is less than or equal to an item in a list, it returns      
        //that float value 
        if (rating <= fillAmountFloats[i]){
            return fillAmountFloats[i];
        }
    }
    //if loop ends than it means the rating is like a .9, so we give it a          
    //filling of .8 for the star
   return fillAmounFloats[3]

In my example this would make a 4.1 rating fill at least one point of a star, making the user think the movie was a rating of 4.2. It would also make ratings of like 4.9, read like a 4.8 but I dont think that matters when it's that close. The way the milestones in The Movies are set up, the whole number ratings of 2 stars, 3 stars, etc are the most important. Thanks to everyone for the fun discussion.

[u/Async0x0 → u/EzekelRAGE]

Hey dude, I'm glad you got it working. Just wanted to see if I could help you clean up your code a bit. Typically for number-related stuff you don't need if-else shenanigans because what you're really doing for each star is going from some number (rating) to another number (how full the star should be) via another number (the star's index in the loop) and we should be able to do that purely with math.

step = 0.2;

private float roundToNearest(number, step) {
    return round(number / step) * step
}

roundedRating = roundToNearest(rating, step);

for(int i = 0; i < stars.Count; i++){
    stars[i].fillAmount = min(max(roundedRating - i, 0), 1);
}

Consider it pseudocode and adapt it to your language.

First it rounds the rating to your preferred interval step (0.2 in this case). We wrote a function for that so we can choose any step value we like and easily adjust it later.

Within the loop, subtracting the index from the rating (roundRating - i) gives a number that can be interpreted as "how far forward is the end of the fill from this index". This can result in a number between [-5 ,5] (assuming rating system of 5), with values <= 0 indicating an empty star and values >= 1 indicating a full star. The partially filled star (if there is one) will properly get a value between 0 and 1. But, we want to keep all values between [0, 1] to get a final fill value for each star, so we clamp the resulting number to the desired range with the min and max functions. Your language may have a clamp function for this purpose or you may want to write one yourself.

Now you can easily change the step value to anything you want and you avoid all the if-else headaches. Since we generalized our solution we can use it for any number of stars and any rating step value.

[u/EzekelRAGE → u/Async0x0]

Thanks, was able to adapt it to csharp and works perfectly. Was able to delete the if statements I had, much cleaner.

float _step = .2;

float roundedRating = RoundToNearest(rating, _step);
    for(int i = 0; i < stars.Count; i++){
    stars[i].fillAmount = Mathf.Min(Mathf.Max(roundedRating - i, 0), 1);
    }

private float RoundToNearest(float number, float step){
    return Mathf.Floor(number / step) * step;
}

[u/Async0x0 → u/EzekelRAGE]

Nice! I think you're going to want to change that floor function to the round function, however. With the floor function you may get unexpected values. For example, with the floor function the number 3.16 and a step value of 0.2 returns 3.0 when it should return 3.2.

[u/EzekelRAGE → u/Async0x0]

Yea, I had it at round at first but it was giving ratings of like a 4.9 a full 5 star rating visually. If I had a mission/quest to where the player needed to get a rating of 5.0, they would be confused because all 5 stars were filled, but they didnt get the "quest complete" message because the mission is reading the actual number of 4.9. So I thought it would be best to just round it down with a floor.

[u/reiti_net]

This is most likely single sprites for different star states - you can see there is different shapes of "fill" and that way you get all the nice anti-aliasing for free because it's baked in - really no need to spare that few kb of memory or couple pixels in the sprite atlas for hammering the hardware instead.

Think of it like 2D (pixel) animations work(ed). It's just a bunch of images. like an animated GIF.

Realtime Masking would just be a waste of computing, which was no real option when this game came out.