[Unity UI] 스킬버튼 구현하기

1. 영역을 잡아줘요.

 

 

2. 백그라운드 이미지를 넣어줘요.

3. 프레임을 넣어줘요.

4. 스킬 아이콘을 넣어줘요

5. 스킬 쿨타임을 표시해줄때 어두운 이미지를 연출할 그림자를 넣어줘요.

6. 스킬 쿨타임을 연출할 텍스트를 넣어줘요.

7. 처음 영역을 잡은 오브젝트에 작성한 스크립트와 Image, Button컴포넌트를 추가해줘요.

Image는 Raycast Target을 이용해 클릭이벤트를 가져오기위해서 넣는것이기 때문에 컬러 알파값을0으로 빼줘요.

 

UISkillBtn.cs

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

namespace UISkillBtnExam
{
    public class UISkillBtn : MonoBehaviour
    {
        public Button btn;
        public float coolTime = 10f;
        public TMP_Text textCoolTime;

        private Coroutine coolTimeRoutine;

        public Image imgFill;

        public void Init()
        {
            this.textCoolTime.gameObject.SetActive(false);
            this.imgFill.fillAmount = 0;
        }
        // Start is called before the first frame update
        void Start()
        {
            this.btn = this.GetComponent<Button>();
            this.btn.onClick.AddListener(() =>
            {
                if (this.coolTimeRoutine != null)
                {
                    Debug.Log("쿨타임 중입니다...");
                }
                else
                {
                    this.coolTimeRoutine = this.StartCoroutine(this.CoolTimeRoutine());
                }
            });

            Init();
        }

        private IEnumerator CoolTimeRoutine()
        {
            Debug.Log(textCoolTime);
            this.textCoolTime.gameObject.SetActive(true);
            var time = this.coolTime;

            while (true)
            {
                time -= Time.deltaTime;
                this.textCoolTime.text = time.ToString("F1");

                var per = time / this.coolTime;
                //Debug.Log(per);
                this.imgFill.fillAmount = per;

                if (time <= 0)
                {
                    this.textCoolTime.gameObject.SetActive(false);
                    break;
                }
                yield return null;
            }

            this.coolTimeRoutine = null;
        }
    }
}