How do I you images as a score into my game?

Question

I have been trying to make a game that's a parody off of minesweeper in unity. I have gotten most of the stuff done including the timer. One problem I have been having is the score count. The score count consists of 3 images. What I am looking is a way so that I can change each image based on how many mines have been caught. Here's the code for it:

public int scorecount = 0;
int i = 0;
int a;
public int amountOfMines;
public Image faceImage;
public Sprite sprite;
private Timer timer;
public ItemDrag itemDrag;
public List<Image> scoreCountImages;
public Sprite[] digitSprites;
void Start()
{
    timer = GetComponent<Timer>();
}
void Update()
{
    if(scorecount >= i)
    {
        if(scorecount == amountOfMines) //If the score equals the amount of mines, stop timer, change face sprite.
        {
            Debug.Log("All the Mines have been cleared");
            faceImage.sprite = sprite;
            timer.isStop = true;
            itemDrag.thereAreStillMines = false;
        }
    }
}

WQYeo · Answer 1 · 2022-05-23T09:45:46.020

TLDR; Your mistake was rendering 3-digits as a whole thing; You should have 3-sprite renderer, each displaying a single digit.

Set in the inspector, an array of Sprites for the digits, ordered properly.
You will use the array as a Dictionary to easily access any digit-sprite by a corresponding number:

[SerializeField, Tooltip("Your number 0-9 sprites should be here, ordered correctly.")]
private Sprite[] numberSprites;

// ......

numberSprites[4] // will output '4' sprite;

Next, rather than have 1 big whole renderer to represent all 3 digits, we can split it into 3 renderer, and expose it to the inspector as an array:

[SerializeField]
private SpriteRenderer[] scoreSpriteRenderers;

Each of this renderer should only render 1 single-digit, something like this:

Now we can easily set-up a loop, to loop through each number in the score, and change the sprite based on the number.

The full result:


[SerializeField, ToolTip("Your number 0-9 sprites should be here, ordered correctly.")]
private Sprite[] numberSprites;

[SerializeField]
private SpriteRenderer[] scoreSpriteRenderers;

private int scoreCount;

// Converts the '123' into a {1, 2, 3}
// See: https://stackoverflow.com/questions/829174/is-there-an-easy-way-to-turn-an-int-into-an-array-of-ints-of-each-digit
public int[] NumbersIn(int value) {
    var numbers = new Stack<int>();

    for(; value > 0; value /= 10)
        numbers.Push(value % 10);

    return numbers.ToArray();
}

// Call this whenever score is updated
private void UpdateScoreUI() {
    int[] arrScore = NumbersIn(scoreCount);

    for (int i = 2; i > 0; --i) {
        
        // If the number was say, 11, the list will only be { 1, 1 }
        // So we will need to handle the last digit that is out-of-index.
        if (arrScore.Length - 1 <= i){
            int currNumber = arrScore[i];
            scoreSpriteRenderers[i].sprite = scoreSpriteRenderers[currNumber];
        } else {
            scoreSpriteRenderers[i].sprite = scoreSpriteRenderers[0];
        }
    }
}

Edit

Yes, this method works with Image objects as well, since they have a sprite property, and we are only interacting with that property.

They aren't sprite renderers, they're UI Images, and what even is ToolTip what does it do. — I have a problem, May 22 '22 at 17:29
@Ihaveaproblem they operate the same way with sprites anyway, replacing every spriteRenderer with Image will work; Unity tooltip allows you to 'comment' on inspector, check https://docs.unity3d.com/ScriptReference/TooltipAttribute.html — WQYeo, May 22 '22 at 18:05
Ok one problem is I don't know how to get it to get it to function, every time I try to use UpdateScoreUI(), it keeps saying index out of reach. — I have a problem, May 22 '22 at 22:02
@Ihaveaproblem my bad, it was `--i` instead; There *may* be more mistakes as I have written this script off the top of my head, but you can debug them out. Seriously though, don't just blindly copy-paste any code off the internet. Understand the concept behind it so you can change if issues occur. — WQYeo, May 23 '22 at 09:47

score 0 · Answer 2 · answered May 22 '22 at 07:55

Your question has a simple solution. Easily use multiple if, In the following code, there is a Sprite coordinator with points that you can match the desired Sprites with the desired conditions.

public void SyncSprite()
{
    if (score >= amountOfMines) faceImage.sprite = faceSprites[2]; // total mines
    
    else if (score >= 7) faceImage.sprite = faceSprites[1]; // for e.g after 7 score change to second sprite
    
    else if (score >= 0) faceImage.sprite = faceSprites[0]; // default sprite
}

For Example, at the bottom, then click on a box and there is no mine there. The score goes higher and the sync code is executed at the end of the score calculation and syncs the sprite with the score.

public void OnClickedBox()
{
    // do something...
    if (noMineWasHere) score++;

    SyncSprite();
}

How do I you images as a score into my game?

2 Answers2

The full result:

Edit