How to set a random sprite at the start of the animation?


I’m setting up a simple card flip animation. Card itself is a button, which when pressed rotates on x axis 180 degrees. There are 2 different sides of the card and during the flipping animation at 90 degrees the card sprite should change.

At the start random sprite gets assigned to a card like this.

     public GameObject CardL;
     Image cardBackL;

     public Sprite sportSprite;
     public Sprite natureSprite;
     public Sprite historySprite;
     public Sprite artSprite;

     public void Start()
     private void AssignCardL() 
         cardBackL = CardL.GetComponent<Image>();
         if (topicL == "sport")
             cardBackL.sprite = sportSprite;
         else if (topicL == "nature")
             cardBackL.sprite = natureSprite;
         else if (topicL == "history")
             cardBackL.sprite = historySprite;
         else if (topicL == "art")
             cardBackL.sprite = artSprite;

But I don’t know how to set up the animation so keyframe at 0:00 has this randomly assigned sprite and for example at 0:15, when the x rotation is at 90, the sprite changes to another one based on the assigned card at the start.

Here’s an example: It’s a quiz game. It selects a random topic from the database. It’s sport. Sport has 2 specific sprites, front and back of the card. At start the card’s sprite is set to front, during the flip it’s set to back variation of it.

My problem is rather the switch between the sprites. I apologize if I’m a bit slow and missing something, but when the two sides of the card are selected, I don’t know how to set it up in the animation so it switches those exactly when the rotation on x axis is 90 degrees. I can’t just drag the two sprites to the animation, because I don’t know what they are yet. I rather need to reference them somehow, when the button is pressed. I have the animation set up like shown in the picture below. So “sprite1” should be the back of the card in 0:00 and at 0:15 it should switch to “sprite2”. Or I’m thinking of it the wrong way?

EDIT: the actual question was how to set a sprite when the animation reaches 90 degrees of rotation. One way to solve this is to use animation events: create the sprite switching function on a script, then add an event when the animation reaches 90 degrees, and assign the game object that has the script to the event, and enter the name of the function that you just created. Just be careful to not name your function the same way as another function on this game object.

Old answer:
Take the advice from Unity tutorials about Resources folder: don’t use it.

Instead, create a resource manager script attached to a game object (probably make it a prefab as well), that has references to each card face sprites and only one reference for the back (all cards should have the same back, shouldn’t they? :wink: ). Then you can ask this manager class for the sprites, for example:

public class CardSpriteManager : MonoBehaviour {
    [SerializeField] private Sprite cardBackSprite = null;
    [SerializeField] private List<Sprite> cardFaceSprites = new List<Sprite>();

    public Sprite GetBackSprite () { return cardBackSprite; }
    public Sprite GetFaceSprite(int index) {
        if (index < cardFaceSprites.Count && index >= 0) {
            return cardFaceSprites[index]; 
        return null;

You will need a reference to this manager component, so probably you should make it a singleton. Then when you have that reference, just call GetBackSprite() when you want to show the backside of the card, and GetFaceSprite(cardIndex)when you want to show its face (each card should know its own card index). Of course, you should also handle when for some reason the returned sprite is null.

One thing you can do is to store all your sprites in to Resources folder with the following name structure,
sportsSprite,sportsSpriteFront,natureSprite,natureSpriteFront etc.Once you get the random initial sprite you can switch to it’s front using the following code.

		if (condition) //Use your condition check here
            cardBackL = CardL.GetComponent<Image>();
			Sprite currentSprite =  cardBackL.sprite;
			Sprite frontSprite = Resources.Load("Front",typeof(Sprite)) as Sprite;
			cardBackl.sprite = frontSprite;