koobas.hobune.stream
Button back not clickable after rotation animation
I'm creating a 2D app in Unity. I have a main canvas object, inside that there's a panel object, and inside that there's a UI Button object. I've created an animation that Flips the Button 180 degrees at 60 frames per second. I also have 2 animation triggers on the animation at 30 frames per second and at 60 frames per second, which call different functions in my script. When the animation is at 90 degrees (30 frames per second / the side of the button), the Sprite image on the button changes to a new image. Now, after the animation completes the 60 frames, the complete new sprite image is shown on the button. This gives the illusion that the button has 2 faces, similar to a card. However, after the animation is completed, the back of the button is not able to be highlighted or clicked. I want to be able to click the back of the button and play the rotate animation it to show the original image and the front of the button. How can I make the back of the button clickable in order to do this?
Here's my C# script code:
using System.Collections;
using UnityEngine;
using UnityEngine.UI;
public class CardFlip : MonoBehaviour
{
//animator reference
private Animator anim;
private AnimatorClipInfo[] animationClip;
// public variables
public GameObject gameObject;
public Button startButton;
public Sprite newImage;
// Use this for initialization
void Start()
{
//unpause the game on start
Time.timeScale = 1;
//get the animator component
anim = gameObject.GetComponent<Animator>();
//disable it on start to stop it from playing the default animation
anim.enabled = false;
animationClip = anim.GetCurrentAnimatorClipInfo(0);
}
public void StartCardFlipAnimation()
{
anim = gameObject.GetComponent<Animator>();
// enable the animator component
anim.enabled = true;
// freeze the timescale
Time.timeScale = 0;
// print the start animation message
Debug.Log("About to start the animation");
// play the animation
anim.Play("FlipCard");
}
public void EndCardFlipAnimation()
{
anim = gameObject.GetComponent<Animator>();
Debug.Log("The animation is now over!");
startButton.interactable = true;
anim.enabled = false;
Time.timeScale = 1;
}
public void ChangeCardImage()
{
startButton.GetComponent<Image>().sprite = newImage;
}
}
Try separating animator gameobject and button gameobject.
Animator gameobject is your card image animation. Make this as child of your button gameobject.
Button gameobject simply just your button, use sprite that match your card image size and set its alpha to zero.
This way you have a clear structure, easily animate the card without disrupting the button function.
