[UGUI 연습] UI 연출2

아틀라스 생성

-영역을 잡고, content 밑에 cell 이 자식으로 들어갈 수 있도록 content와 cell오브젝트를 생성한다.

-content에는 contentSizeFitter와 Horizontal Layout Group 컴포넌트가 있다.

 

main 수정

-코루틴을 사용해 애니메이션이 바로 실행되는 것이 아니라 순차적으로 대기했다가 실행하도록 코드를 작성했다.

-처음에는 onChanged를 쓰려고했는데 헷갈려서 ㅋㅋ 그냥 코루틴 썼다. 그래도 이제 코루틴이라도 좀 쓰는게 어디야..?

-json으로 데이터를 가져와도 되지만 여기서는 정해진 값이니 그냥 넣어주었다.

cell.cs

구현 결과

-버튼을 누르면 순차적으로 애니메이션이 실행되면서 생성된다.

 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using TMPro;
public class Test07RewardCell : MonoBehaviour
{
    public Image frameImage;
    public Image iconImage;
    public TextMeshProUGUI TextMeshPro;
    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}

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

public class Test07Main : MonoBehaviour
{
    [SerializeField] private Button btnPlay;
    [SerializeField] private Animator animRibbon;
    [SerializeField] private Button btnStarsPlay;
    [SerializeField] private Button rewardButton;
    [SerializeField] private TMP_Dropdown dropdown;
    [SerializeField] private Animator animLeftStar;
    [SerializeField] private Animator animMiddleStar;
    [SerializeField] private Animator animRightStar;
    
    [SerializeField] private ParticleSystem[] fxStars;
    [SerializeField] private GameObject cellGo;
    [SerializeField] private GameObject contentGo;
    private int starCount = 1;
    private List<Test07RewardCell> cellList = new List<Test07RewardCell>();
    private List<GameObject> cells = new List<GameObject>();

    private Animator rewardAnim;
    void Start()
    {
        AtlasManager.instance.LoadAtlases();
        this.btnPlay.onClick.AddListener(() => {
            this.animRibbon.SetTrigger("Play");
        });

        this.dropdown.onValueChanged.AddListener((index) =>
        {
            Debug.LogFormat("onValueChanged: {0}", index);
            this.starCount = index + 1;
        });
        this.rewardButton.onClick.AddListener(() =>
        {
            Debug.Log("보상 아이템 출력");

            StartCoroutine(this.coRewardItem());
        });


        this.btnStarsPlay.onClick.AddListener(() =>
        {
            Debug.LogFormat("{0} 별 애니메이션 실행", this.starCount);

            switch (this.starCount)
            {
                case 1:
                    this.animLeftStar.GetComponent<AnimationReceiver>().onFinished = () =>
                    {
                        var fx = this.fxStars[0];
                        fx.gameObject.SetActive(true);
                        fx.Play();
                    };
                    this.animLeftStar.SetTrigger("Play");
                    break;

                case 2:
                    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");

                    break;

                case 3:
                    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();
                            };

                            this.animRightStar.SetTrigger("Play");
                        };
                        this.animMiddleStar.SetTrigger("Play");
                    };
                    this.animLeftStar.SetTrigger("Play");
                    break;
            
        }
        });
        }
    private IEnumerator coRewardItem()
    {      
        for (int i = 0; i < 5; i++)
        {
            yield return new WaitForSeconds(0.3f);
            GameObject go = Instantiate<GameObject>(this.cellGo, this.contentGo.transform);
            this.cellList.Insert(i, go.GetComponent<Test07RewardCell>());
            this.cells.Insert(i, go);
            
            Animator anim = this.cellList[i].GetComponent<Animator>();        
            anim.SetTrigger("Play");

            var atlas = AtlasManager.instance.GetAtlas("reward");
                   
            this.cellList[0].frameImage.sprite = atlas.GetSprite("frame_itemframe_01_frame_green1");
            this.cellList[0].iconImage.sprite = atlas.GetSprite("equip_icon_potion_green_0");
            this.cellList[0].TextMeshPro.text = "1";
            if (i == 1)
            {
                this.cellList[1].frameImage.sprite = atlas.GetSprite("frame_itemframe_01_frame_blue1");
                this.cellList[1].iconImage.sprite = atlas.GetSprite("icon_gem_1_blue");
                this.cellList[1].TextMeshPro.text = "3";
            }
            else if (i == 2)
            {
                this.cellList[2].frameImage.sprite = atlas.GetSprite("frame_itemframe_01_frame_brown1");
                this.cellList[2].iconImage.sprite = atlas.GetSprite("icon_coins");
                this.cellList[2].TextMeshPro.text = "1500";
            }
            else if (i == 3)
            {
                this.cellList[3].frameImage.sprite = atlas.GetSprite("frame_itemframe_01_frame_purple1");
                this.cellList[3].iconImage.sprite = atlas.GetSprite("icon_book_1");
                this.cellList[3].TextMeshPro.text = "1";
            }
            else if (i == 4)
            {
                this.cellList[4].frameImage.sprite = atlas.GetSprite("frame_itemframe_01_frame_red1");
                this.cellList[4].iconImage.sprite = atlas.GetSprite("icon_gift_0_red");
                this.cellList[4].TextMeshPro.text = "1";
            }
        }
    }

}