멋쟁이사자처럼 부트캠프 유니티 게임개발 7기 0414 Part2

이연준·2026년 4월 14일

개요

  • 스킬 아이콘을 만들어봅니다.

쿨타임

UI

  • Canvas 하위에 SkillIcon 오브젝트를 생성합니다.
  • SkillIcon 오브젝트에 이미지(아이콘), 쿨다운 이미지, 쿨다운 텍스트, 스킬 데이터 텍스트를 자식으로 구성합니다.
  • CoolDownIcon 이미지의 Image Type을 Filled로 설정합니다.

TextMeshPro의 레이캐스트타겟 꺼주기

  • TextMeshPro는 레거시 Text와 달리 Extra Settings 항목 안에 Raycast Target 옵션이 있습니다.
  • 불필요한 레이캐스트 연산을 줄이기 위해 Raycast Target을 꺼줍니다.

스킬 스크립트

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

public class Skill : MonoBehaviour
{
    [SerializeField]
    private string skillName;

    [SerializeField]
    private float maxCooldownTime;

    [SerializeField]
    private TextMeshProUGUI textSkillData;

    [SerializeField]
    private TextMeshProUGUI textCooldownTime;

    [SerializeField]
    private Image imageCooldownTime;

    private float currentCooldownTime;
    private bool isCooldown;

    private void Awake()
    {
        SetCooldownIs(false);
    }

    // 외부에서 스킬을 사용할 때 호출하는 메소드
    public void UseSkill()
    {
        // 이미 스킬을 사용해서 재사용 대기 시간이 남아있으면 종료
        if (isCooldown == true)
        {
            textSkillData.text = $"[{skillName}] Cooldown Time : {currentCooldownTime:F1}";
            return;
        }

        textSkillData.text = $"Use Skill : {skillName}";
        StartCoroutine(nameof(OnCooldownTime), maxCooldownTime);
    }

    // 실제 스킬의 재사용 대기 시간을 제어하는 코루틴 메소드
    private IEnumerator OnCooldownTime(float maxCooldownTime)
    {
        // 스킬 재사용 대기 시간 저장
        currentCooldownTime = maxCooldownTime;
        SetCooldownIs(true);

        while (currentCooldownTime > 0)
        {
            currentCooldownTime -= Time.deltaTime;

            // Image UI의 fillAmount를 조절해 채워지는 이미지 모양 설정
            imageCooldownTime.fillAmount = currentCooldownTime / maxCooldownTime;

            // Text UI에 쿨다운 시간 표시
            textCooldownTime.text = currentCooldownTime.ToString("F1");

            yield return null;
        }

        SetCooldownIs(false);
    }

    private void SetCooldownIs(bool boolean)
    {
        isCooldown = boolean;
        textCooldownTime.enabled = boolean;
        imageCooldownTime.enabled = boolean;
    }
}

적용

  • SkillIcon_FireDragon 오브젝트에 Skill 스크립트를 컴포넌트로 추가합니다.
  • 인스펙터에서 각 항목을 다음과 같이 설정합니다.
    • Skill Name : FireDragon
    • Max Cooldown Time : 10
    • Text Skill Data : SkillData (Text Mesh Pro UGUI)
    • Text Cooldown Time : CooldownTime (Text Mesh Pro UGUI)
    • Image Cooldown Time : CoolDownIcon (Image)

스킬시스템

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

public class SkillSystem : MonoBehaviour
{
    [SerializeField]
    private GraphicRaycaster graphicRaycaster;

    [SerializeField]
    private Skill[] skills;

    private List<RaycastResult> raycastResults;
    private PointerEventData pointerEventData;

    private void Awake()
    {
        raycastResults = new List<RaycastResult>();
        pointerEventData = new PointerEventData(null);
    }

    private void Update()
    {
        if (!Input.anyKeyDown) return;

        // 1 ~ skills.Length 숫자키를 눌러 스킬 시전
        if (int.TryParse(Input.inputString, out int key) && (key >= 1 && key <= skills.Length))
        {
            skills[key - 1].UseSkill();
        }

        // 스킬 아이콘을 마우스로 클릭해서 스킬 시전
        if (Input.GetMouseButtonDown(0))
        {
            raycastResults.Clear();
            pointerEventData.position = Input.mousePosition;
            graphicRaycaster.Raycast(pointerEventData, raycastResults);

            if (raycastResults.Count > 0)
            {
                // 마우스로 클릭한 오브젝트에 "Skill" 컴포넌트가 있는지 확인
                // Skill 컴포넌트가 없으면 실행 X
                // Skill 컴포넌트가 있으면 skill 변수에 저장 후 조건문 내부에서 메소드 실행
                if (raycastResults[0].gameObject.TryGetComponent<Skill>(out var skill))
                {
                    skill.UseSkill();
                }
            }
        }
    }
}
  • SkillSystem 오브젝트에 SkillSystem 스크립트를 추가합니다.
  • 인스펙터에서 각 항목을 다음과 같이 설정합니다.
    • Graphic Raycaster : Canvas (Graphic Raycaster)
    • Skills : Element 0 ~ 2에 각 스킬 아이콘 오브젝트를 할당합니다.

결과

  • 숫자키(1, 2, 3) 또는 마우스 클릭으로 스킬 아이콘을 선택하면 스킬이 사용됩니다.
  • 스킬 사용 후 지정된 쿨다운 시간 동안 아이콘 위에 쿨다운 이미지와 남은 시간이 표시됩니다.
  • 쿨다운이 종료되면 다시 스킬을 사용할 수 있습니다.

0개의 댓글