유니티 GUI 애니메이션

유니티 심화

유니티 GUI 애니메이션

EasyCastleT 2023. 9. 12. 16:17

유니티 RequireComponent

https://artiper.tistory.com/105

[Unity] RequireComponent란?

Unity - Scripting API: RequireComponent When you add a script which uses RequireComponent to a GameObject, the required component will automatically be added to the GameObject. This is useful to avoid setup errors. For example a script might require that a

artiper.tistory.com

애니메이션 이벤트

마지막 프레임에 이벤트 추가

애니메이션 이벤트 활용

using System.Collections;
using System.Collections.Generic;
using TMPro;
using UnityEngine;
using UnityEngine.UI;

public class Test07Main : MonoBehaviour
{

    [SerializeField] private Button btnStarsPlay;
    [SerializeField] private Button btnRibbonAndStarsPlay;

    [SerializeField] private Animator animRibbon;
    [SerializeField] private Animator animLeftStar;
    [SerializeField] private Animator animMiddleStar;
    [SerializeField] private Animator animRightStar;

    [SerializeField] TMP_Dropdown dropdown;

    [SerializeField] private ParticleSystem[] fxStars;
    [SerializeField] private ParticleSystem fxBurstStars;

    private int starCount=1;
    // Start is called before the first frame update
    void Start()
    {
        this.dropdown.onValueChanged.AddListener((index) => {
            this.starCount = index + 1;
        });

        this.btnRibbonAndStarsPlay.onClick.AddListener(() => {
            this.animRibbon.GetComponent<AnimationReceiver>().onFinished = () => {
                switch (this.starCount)
                {
                    case 1:
                        this.PlayStar1();

                        break;
                    case 2:
                        this.PlayStar2();
                        break;
                    case 3:
                        this.PlayStar3();
                        break;
                }
            };
            this.animRibbon.SetTrigger("Play");
        });
        this.btnStarsPlay.onClick.AddListener(() => {
            Debug.LogFormat("{0} 별 애니메이션 실행", this.starCount);

            switch (this.starCount)
            {
                case 1:
                    this.PlayStar1();
                    break;
                case 2:
                    this.PlayStar2();
                    break;
                case 3:
                    this.PlayStar3();
                    break;
            }
        });
    }

    private void PlayStar1()
    {
        this.animLeftStar.GetComponent<AnimationReceiver>().onFinished = () =>
        {
            var fx = this.fxStars[0];
            fx.gameObject.SetActive(true);
            fx.Play();
        };

        this.animLeftStar.SetTrigger("Play");
    }

    private void PlayStar2()
    {
        this.animLeftStar.GetComponent<AnimationReceiver>().onFinished = () =>
        {
            var fx = this.fxStars[0];
            fx.gameObject.SetActive(true);
            fx.Play();

            this.animMiddleStar.GetComponent<AnimationReceiver>().onFinished = () => {
                var fx1 = this.fxStars[1];
                fx1.gameObject.SetActive(true);
                fx1.Play();
            };
            this.animMiddleStar.SetTrigger("Play");
        };
        this.animLeftStar.SetTrigger("Play");
    }

    private void PlayStar3()
    {
        this.animLeftStar.GetComponent<AnimationReceiver>().onFinished = () =>
        {
            var fx = this.fxStars[0];
            fx.gameObject.SetActive(true);
            fx.Play();
            this.animMiddleStar.GetComponent<AnimationReceiver>().onFinished = () => {
                var fx1 = this.fxStars[1];
                fx1.gameObject.SetActive(true);
                fx1.Play();
                this.animRightStar.GetComponent<AnimationReceiver>().onFinished = () => {
                    var fx2 = this.fxStars[2];
                    fx2.gameObject.SetActive(true);
                    fx2.Play();
                    var burstFx = this.fxBurstStars;
                    burstFx.gameObject.SetActive(true);
                    burstFx.Play();
                };
                this.animRightStar.SetTrigger("Play");
            };
            this.animMiddleStar.SetTrigger("Play");
        };
        this.animLeftStar.SetTrigger("Play");
    }
}

보상 아이템 리스트 애니메이션과 슬라이더 애니메이션 버튼 등장 애니메이션 추가

AnimationReceiver

using System.Collections;
using System.Collections.Generic;
using UnityEngine;


[RequireComponent(typeof(Animator))] //이게 붙어있으면, 해당 요소는 제거하지 못함 

public class AnimationReceiver : MonoBehaviour
{
    public System.Action onFinished;
    public void OnFinished()
    {
        Debug.Log("Animation Finished");
        if(this.onFinished != null)
        {
            this.onFinished();
        }
    }
 
    
}

SetSliderText

using System.Collections;
using System.Collections.Generic;
using TMPro;
using UnityEngine;
using UnityEngine.UI;

public class SetSliderText : MonoBehaviour
{
    [SerializeField] Slider slider;
    [SerializeField] TMP_Text sliderText;

    // Update is called once per frame
    void Update()
    {
        this.sliderText.text = string.Format("{0} / 400", (int)(slider.value*400));
    }
}

Main

using System.Collections;
using System.Collections.Generic;
using TMPro;
using UnityEngine;
using UnityEngine.U2D;
using UnityEngine.UI;

public class Test07Main : MonoBehaviour
{

    [SerializeField] private Button btnWholeStart;

    [SerializeField] private Animator animRibbon;
    [SerializeField] private Animator animLeftStar;
    [SerializeField] private Animator animMiddleStar;
    [SerializeField] private Animator animRightStar;

    [SerializeField] private Animator animBtnClaim;
    [SerializeField] private Animator animBtnDoubleClaim;

    [SerializeField] private Animator animRewardItemTitle;
    [SerializeField] private Animator[] animRewardItems;

    [SerializeField] private Animator animSlider;

    [SerializeField] TMP_Dropdown starDropdown;
    [SerializeField] TMP_Dropdown itemDropdown;

    [SerializeField] private ParticleSystem[] fxStars;
    [SerializeField] private ParticleSystem fxBurstStars;

    private int starCount = 1;
    private int itemCount = 1;
    // Start is called before the first frame update
    void Start()
    {
        this.starDropdown.onValueChanged.AddListener((index) =>
        {
            this.starCount = index + 1;
        });

        this.itemDropdown.onValueChanged.AddListener((index) =>
        {
            this.itemCount = index + 1;
        });

        this.btnWholeStart.onClick.AddListener(() =>
        {
            this.animRibbon.GetComponent<AnimationReceiver>().onFinished = () =>
            {
                switch (this.starCount)
                {
                    case 1:
                        this.PlayStar1();

                        break;
                    case 2:
                        this.PlayStar2();
                        break;
                    case 3:
                        this.PlayStar3();
                        break;
                }
            };
            this.animRibbon.SetTrigger("Play");
        });
    }

    private void PlayStar1()
    {
        this.animLeftStar.GetComponent<AnimationReceiver>().onFinished = () =>
        {
            var fx = this.fxStars[0];
            fx.gameObject.SetActive(true);
            fx.Play();

            PlayRewardItemListAnim();
        };

        this.animLeftStar.SetTrigger("Play");
    }

    private void PlayStar2()
    {
        this.animLeftStar.GetComponent<AnimationReceiver>().onFinished = () =>
        {
            var fx = this.fxStars[0];
            fx.gameObject.SetActive(true);
            fx.Play();

            this.animMiddleStar.GetComponent<AnimationReceiver>().onFinished = () =>
            {
                var fx1 = this.fxStars[1];
                fx1.gameObject.SetActive(true);
                fx1.Play();

                PlayRewardItemListAnim();

            };
            this.animMiddleStar.SetTrigger("Play");
        };
        this.animLeftStar.SetTrigger("Play");
    }

    private void PlayStar3()
    {
        this.animLeftStar.GetComponent<AnimationReceiver>().onFinished = () =>
        {
            var fx = this.fxStars[0];
            fx.gameObject.SetActive(true);
            fx.Play();
            this.animMiddleStar.GetComponent<AnimationReceiver>().onFinished = () =>
            {
                var fx1 = this.fxStars[1];
                fx1.gameObject.SetActive(true);
                fx1.Play();
                this.animRightStar.GetComponent<AnimationReceiver>().onFinished = () =>
                {
                    var fx2 = this.fxStars[2];
                    fx2.gameObject.SetActive(true);
                    fx2.Play();

                    var burstFx = this.fxBurstStars;
                    burstFx.gameObject.SetActive(true);
                    burstFx.Play();

                    PlayRewardItemListAnim();
                    //this.PlayButtonAnim();


                };
                this.animRightStar.SetTrigger("Play");
            };
            this.animMiddleStar.SetTrigger("Play");
        };
        this.animLeftStar.SetTrigger("Play");
    }

    private void PlayRewardItemListAnim()
    {
        this.StartCoroutine(this.CoPlayRewardItemList());
        
    }

    private IEnumerator CoPlayRewardItemList()
    {
        for (int i = 0; i < this.itemCount; i++)
        {
            this.animRewardItems[i].SetTrigger("Play");
            yield return new WaitForSeconds(0.3f);
        }
        this.PlaySlider();
    }

    private void PlaySlider()
    {
        this.animSlider.GetComponent<AnimationReceiver>().onFinished = () =>
        {
            this.PlayButtonAnim();
        };
        this.animSlider.SetTrigger("Play");
    }
    private void PlayButtonAnim()
    {
        this.animBtnClaim.SetTrigger("Play");
        this.animBtnDoubleClaim.SetTrigger("Play");
    }
}

시연 결과

지금은 프로젝트에 박은 상태로 Item을 구현하였지만, 아틀라스와 프리팹을 응용하여 만들어보는 방법도 있다