YUNARANG
メニュー
Blog に戻る
コンテスト・成果物

[CT] 04. 3週目 — サイバーパンクスタイル HUD リメイクとスキル・死亡演出を実装する （GAMMARU２０２６夏コンテスト）

HUDデザインのリメイク

  • GAMMARU 2026 SUMMER CONTEST
  • DevLog
  • Programming
  • Development

개발 기간: 2026.07.20 ~ 2026.07.26
담당 역할: HP·Heat·Core 인터페이스 리메이크 및 Skill UI 추가


2주차에는 기존 Heat·Core HUD에 HP UI를 추가하고, HP 감소 파티클과 Low HP 경고를 구현했다. 또한 HP·Heat·Core UI를 하나의 HUD 프리팹으로 정리하면서, 실제 게임에서 재사용할 수 있는 기본적인 인터페이스 구조를 만들었다.

3주차에는 여기서 한 단계 더 나아가, 기능 위주로 구성되어 있던 HUD를 『ERROR-CODE-H』의 사이버펑크 분위기에 어울리는 디자인으로 발전시키는 작업 을 맡았다.


이번 주의 주요 목표는 다음과 같았다.

  • Heat 게이지 디자인 리메이크
  • High Heat 및 OverHeat 상태 연출 추가
  • Heat 게이지 전용 Shader Graph 제작
  • HP 배경 이미지 가독성 개선
  • HUD 폰트를 픽셀 스타일로 변경
  • Core 옆에 Skill 아이콘 추가
  • Skill 사용 시 UI 피드백 추가
  • 2주차에 미뤄두었던 사망 연출 구현
  • HUD 프리팹 구조 정리

다만 모든 UI를 한 번에 완전히 리메이크하기에는 작업량이 많았다.

따라서 이번 주에는 Heat UI, Skill UI, 사망 연출 을 중심으로 작업하고, HP와 Core UI는 기존 기능 구조를 유지하면서 일부 디자인만 개선했다. 전체적인 리메이크는 이후 작업으로 남겨두었다.

기능 중심 HUD에서 사이버펑크 HUD로

1~2주차의 가장 중요한 목표는 Heat, Core, HP 정보가 실제 게임 시스템과 정상적으로 연결되는지를 확인하는 것이었다.

덕분에 HUD는 필요한 정보를 표시하는 기능 자체는 갖추고 있었지만, 아직 『ERROR-CODE-H』의 어두운 SF 세계관이나 사이버펑크 분위기를 충분히 보여주지는 못하고 있었다.


3주차에는 기존 기능 구조를 유지하면서 시각적인 방향을 다음과 같이 변경했다.

  • 직선적이고 기계적인 프레임 사용
  • 어두운 배경에서 눈에 띄는 높은 색상 대비
  • 일반 상태와 위험 상태의 명확한 색상 구분
  • 숫자와 상태 정보가 시스템 메시지처럼 보이는 형태
  • 기본 폰트를 픽셀 스타일 폰트로 교체
  • HP, Heat, Core, Skill UI의 시각적 언어 통일

즉, 기존 코드를 전부 새로 만드는 것이 아니라 이미 구현되어 있는 데이터 연결 구조는 유지하고, 그 위의 이미지·폰트·색상·상태 연출을 교체하는 방식 으로 작업했다.


[캡처 1 삽입 — 2주차 HUD와 3주차 HUD 비교]


기능 중심으로 구성했던 기존 HUD를 사이버펑크 분위기에 맞게 리메이크했다. Heat 프레임과 Fill, 픽셀 폰트, Skill UI 등을 추가해 게임 전체의 분위기와 HUD의 시각적 방향을 맞추었다.

Heat 게이지 디자인 리메이크

이번 주 작업에서 가장 많은 비중을 차지한 것은 Heat 게이지의 리메이크였다.

Heat는 플레이어의 공격과 Core 전환에 영향을 받는 핵심 전투 자원이다.

따라서 단순히 현재 수치를 보여주는 것뿐 아니라, Heat가 위험한 수준까지 올라갔을 때 플레이어가 숫자를 직접 읽지 않아도 이를 바로 알아차릴 수 있어야 했다.


이를 위해 Heat UI는 크게 세 가지 상태를 구분하도록 구성했다.

  • 일반 Heat 상태
  • High Heat 상태
  • OverHeat 상태

각 상태를 판단하기 위한 기본 기준값은 UIManager에서 설정했다.

[Header("UI Conditions")]
[SerializeField] private float lowHPThreshold = 0.2f;
[SerializeField] private float highHeatThreshold = 0.8f;
[SerializeField] private float overHeatThreshold = 0.999f;

현재 Heat가 최대 Heat의 80% 이상이면 High Heat, 거의 100%에 도달하면 OverHeat 상태로 판단한다.


Heat 값이 변경될 때마다 현재 비율을 계산하고, 그 결과를 HeatDrawer에 전달하도록 했다.

private void HandleHeatChanged(float currentHeat, float maxHeat)
{
    bool isHighHeat = currentHeat / maxHeat >= highHeatThreshold;
    bool isOverHeat = currentHeat / maxHeat >= overHeatThreshold;

    _heatDrawer.SetHeat(currentHeat, isHighHeat);
    _heatDrawer.SetOverHeat(isOverHeat);
}

현재 Heat 수치와 High Heat 여부, OverHeat 여부를 각각 전달함으로써, 게이지의 채움 정도와 위험 상태의 시각 연출을 서로 분리해서 처리 할 수 있도록 구성했다.


[캡처 2 삽입 — Normal, High Heat, OverHeat 상태 비교]


Heat 상태에 따라 HUD의 색상과 연출이 달라진다. 기본 상태에서는 일반 색상을 사용하고, Heat가 80% 이상이면 경고 색상으로 전환된다. OverHeat 상태에서는 점멸 효과를 추가해 위험 상태를 더욱 강조했다.

Heat 게이지 전용 Shader Graph 제작

기존 Heat 게이지는 Unity UI 이미지의 fillAmount를 이용해 단순하게 채움 정도를 표현했다.

하지만 새롭게 디자인한 Heat 게이지는 기울어진 프레임과 Fill 이미지를 사용했기 때문에, 기존의 단순한 이미지 채움 방식으로는 원하는 형태를 만들기 어려웠다.


그래서 Heat 게이지 전용 HeatBarShader.shadergraph와 HeatBarMaterial을 새롭게 제작했다.

전용 셰이더에서는 다음과 같은 값을 사용했다.

  • _MainTex: Heat Fill 이미지
  • _Fill: 현재 Heat의 채움 비율
  • _Skew: 게이지의 기울기 조정
  • _Softness: Fill 경계의 부드러움 조정

Heat UI에서 사용하는 머티리얼은 각 UI 인스턴스가 독립적인 값을 사용할 수 있도록 복제해서 사용했다.

private Material materialInstance;

private void Awake()
{
    if (heatFill == null)
        return;

    materialInstance = Instantiate(heatFill.material);
    heatFill.material = materialInstance;
}

공유 머티리얼의 _Fill 값을 직접 수정하면 같은 머티리얼을 사용하는 다른 UI까지 동시에 영향을 받을 수 있다.

이를 방지하기 위해 Instantiate()를 이용해 별도의 머티리얼 인스턴스를 생성하고, 현재 Heat UI에서만 해당 값을 변경하도록 했다.


현재 Heat 값은 셰이더의 _Fill 속성으로 전달했다.

public void SetHeat(float current, bool isHighHeat)
{
    current = Mathf.Clamp(current, 0f, 100f);

    if (materialInstance != null)
        materialInstance.SetFloat("_Fill", current / 100f);

    if (!isOverHeat)
        heatFill.color = isHighHeat ? warningColor : normalColor;

    if (heatText != null)
        heatText.text = $"HEAT_{current:0}%";
}

Heat 값은 0~100 사이로 제한한 뒤, 100으로 나누어 셰이더에서 사용할 수 있는 0~1 범위의 값으로 변환했다.

텍스트도 기존의 단순한 50% 표기에서 HEAT_50% 형식으로 변경했다.

이는 HUD가 일반적인 상태창보다는 게임 세계 안의 시스템 인터페이스처럼 보이도록 하기 위한 디자인 선택 이었다.


High Heat 상태에서는 Fill의 색상을 일반 색상에서 경고 색상으로 바꾸었다.

다만 OverHeat 상태에서는 별도의 점멸 코루틴이 색상을 제어하기 때문에, SetHeat()에서 해당 색상을 다시 덮어쓰지 않도록 isOverHeat 조건을 추가했다.


[캡처 3 삽입 — HeatBar Shader Graph와 실제 적용 화면]


기울어진 Heat 게이지 디자인에 맞춰 전용 Shader Graph를 제작했다. 코드에서 현재 Heat 비율을 _Fill 값으로 전달해 게이지가 실시간으로 채워지도록 구성했다.

High Heat와 OverHeat 시각 효과

High Heat 상태에서는 게이지가 경고 색상으로 변화하고, OverHeat 상태에서는 Heat Fill이 반복적으로 점멸하도록 만들었다.

public void SetOverHeat(bool active)
{
    if (isOverHeat == active)
        return;

    isOverHeat = active;

    if (active)
    {
        blinkRoutine = StartCoroutine(OverHeatBlink());
    }
    else
    {
        if (blinkRoutine != null)
        {
            StopCoroutine(blinkRoutine);
            blinkRoutine = null;
        }

        heatFill.color = normalColor;
    }
}

이미 OverHeat 상태라면 동일한 코루틴이 다시 실행되지 않도록 현재 상태를 먼저 비교했다.

OverHeat 상태에서 벗어나면 실행 중인 점멸 코루틴을 중지하고, Heat Fill의 색상을 다시 기본 상태로 돌려놓았다.


점멸 패턴은 2주차에 구현했던 Low HP 경고와 비슷하게, 짧은 점멸과 대기 시간을 조합하는 형태로 만들었다.

IEnumerator OverHeatBlink()
{
    while (true)
    {
        yield return Blink(0.16f);
        yield return new WaitForSeconds(0.6f);

        yield return Blink(0.16f);
        yield return new WaitForSeconds(0.16f);
    }
}

이렇게 일반 Heat, High Heat, OverHeat를 각각 시각적으로 구분함으로써, 플레이어가 Heat 숫자를 계속 확인하지 않아도 현재 위험도가 어느 정도인지 색상과 점멸만으로 파악할 수 있도록 만들었다.

HP 배경 이미지와 폰트 개선

HP UI는 전체 구조를 새롭게 만드는 대신, 2주차에 구현해둔 HP Bar와 HP 감소 파티클 구조를 유지하면서 가독성을 개선하는 방향으로 작업했다.

기존 HP 배경 이미지를 수정해 HP Fill과 텍스트가 보다 잘 보이도록 만들었고, 기본 폰트를 픽셀 스타일의 PixelOperatorSC-Bold로 교체했다.


폰트 변경은 HP UI만을 위한 작업이 아니라, HUD 전체의 시각적인 인상을 통일하기 위한 작업이었다.

  • HP 수치
  • Heat 수치
  • Core 이름
  • Skill 키 표시
  • 사망 화면 텍스트

이러한 텍스트 요소에 동일한 픽셀 스타일을 적용하여, HUD가 게임 화면 위에 별도로 얹힌 일반적인 UI처럼 보이지 않고 『ERROR-CODE-H』 세계관 속의 기계식 인터페이스처럼 느껴지도록 했다.

다만 HP와 Core UI 전체를 완전히 새로 디자인하는 작업은 예상보다 작업량이 많았다.

따라서 이번 주에는 배경과 폰트, 전체 HUD 배치를 먼저 개선하고, 세부적인 리메이크는 이후 작업으로 남겨두었다.


[캡처 4 삽입 — HP 배경과 픽셀 폰트 적용 전후]


HP 바의 배경 이미지를 수정하고 HUD 폰트를 픽셀 스타일로 교체했다. 어두운 인게임 배경에서도 HP 수치와 게이지가 잘 구분되도록 가독성을 보완했다.

Core 옆에 Skill UI 추가

이번 주에는 기존 Core UI 옆에 현재 사용할 수 있는 Skill을 표시하는 기능도 추가했다.

HUD 프리팹 안에 Skill_UI 그룹을 만들고, 세 개의 Skill 슬롯을 배치했다.


각 슬롯은 다음 요소를 가지고 있다.

  • Skill 키 또는 이름을 표시하는 텍스트
  • Skill 아이콘 이미지

초기 SkillDrawer에는 세 개의 슬롯을 표시하기 위한 참조만 준비했다.

[System.Serializable]
public class SkillSlotUI
{
    public TMP_Text skillText;
    public Image skillImage;
}

[SerializeField] private SkillSlotUI[] skillSlots;

처음 Skill UI를 추가했을 당시에는 실제 스킬 관련 플레이어 코드가 아직 완성되지 않은 상태였기 때문에, 실제 사용 이벤트와 바로 연결할 수는 없었다.


당시 작업 기록에도 다음과 같이 남겼다.

스킬 아이콘과 스킬 관련 베이스 코드를 추가했습니다. 아직 작동하지 않으며, 스킬 관련 플레이어 코드가 완성되면 그 후에 연결하겠습니다.


따라서 7월 23일의 첫 구현에서는 아이콘, 슬롯, 기본적인 UI 구조부터 먼저 제작했다.

이후 Skill 시스템에서 사용할 수 있는 데이터와 이벤트가 준비되면 실제 동작을 연결하는 방식으로 작업을 나눈 것이다.

Sword Core Skill과 UI 연결

7월 23일 오후에는 팀원이 Sword Core의 두 가지 Skill을 추가했다.

  • UpperSlash
  • DashSlash

이제 실제 Skill 사용을 UI에 전달할 수 있었기 때문에, SwordCoreSkill에 Skill 종류와 이벤트를 추가했다.

public enum SkillType
{
    UpperSlash,
    DashSlash
}

public event Action<SkillType> OnSkillUsed;

각 Skill이 실제로 시작되는 시점에 OnSkillUsed 이벤트가 발생하도록 구성했다.

public void TryStartUpperSlash()
{
    if (CanStartUpperSlash())
    {
        upperSlashReadyTime = Time.time + upperSlashCooldown;
        heatManager?.AddHeat(upperSlashHeat);
        OnSkillUsed?.Invoke(SkillType.UpperSlash);
        StartCoroutine(UpperSlashRoutine());
    }
}

DashSlash에도 동일한 방식으로 이벤트를 추가했다.


여기서 중요한 점은 Skill 키가 단순히 입력되었을 때 이벤트가 발생하는 것이 아니라, 쿨타임 등의 실행 조건을 통과하고 실제 Skill이 시작되는 시점에 이벤트가 발생한다는 점 이었다.

따라서 Skill이 실제로 실행되지 않았다면 UI 효과 역시 발생하지 않는다.

팀원이 담당하던 Skill 스크립트를 수정한 부분에는 UI 연결을 위해 추가한 코드라는 주석을 남겼고, 디스코드에도 어떤 파일을 수정했는지 따로 공유했다.

SkillRefManager로 게임 로직과 UI 사이 연결하기

Sword Core의 SkillType을 UI에서 그대로 사용하면, UI가 특정 Core의 내부 구현 구조에 직접 의존하게 된다.

이를 조금이라도 줄이기 위해 SkillRefManager라는 중간 연결 클래스를 만들었다.

public enum SkillType
{
    Skill1,
    Skill2,
    Skill3
}

public event Action<SkillType> OnSkillUsed;

SkillRefManager는 Sword Core에서 발생한 Skill 이벤트를 받아, HUD가 사용하는 공통 Skill 슬롯 번호로 변환한다.

private void HandleSkillUsed(SwordCoreSkill.SkillType skill)
{
    switch (skill)
    {
        case SwordCoreSkill.SkillType.UpperSlash:
            OnSkillUsed?.Invoke(SkillType.Skill1);
            break;

        case SwordCoreSkill.SkillType.DashSlash:
            OnSkillUsed?.Invoke(SkillType.Skill2);
            break;
    }
}

게임 로직의 UpperSlash는 UI의 첫 번째 슬롯으로, DashSlash는 두 번째 슬롯으로 변환했다.


전체 흐름을 정리하면 다음과 같다.

Sword Core Skill 실행
→ SwordCoreSkill.OnSkillUsed 발생
→ SkillRefManager가 Skill 종류 수신
→ UI용 Skill1 또는 Skill2로 변환
→ SkillRefManager.OnSkillUsed 발생
→ UIManager가 이벤트 수신
→ SkillDrawer에서 해당 아이콘 애니메이션 실행


UIManager는 SkillRefManager의 이벤트를 구독하도록 했다.

private void OnEnable()
{
    if (_skillRefManager != null)
        _skillRefManager.OnSkillUsed += HandleSkillUsed;
}

private void OnDisable()
{
    if (_skillRefManager != null)
        _skillRefManager.OnSkillUsed -= HandleSkillUsed;
}

Skill 이벤트를 받으면 해당 슬롯 정보를 SkillDrawer로 전달한다.

private void HandleSkillUsed(SkillRefManager.SkillType skill)
{
    _skillDrawer.SetSkill(skill);
}

이를 통해 실제 공격 로직과 UI 애니메이션을 직접 연결하지 않고, 중간 계층을 통해 서로 분리할 수 있었다.

Skill 사용 시 아이콘 확대 효과

Skill 입력이 실제로 처리되었는지를 플레이어가 즉시 확인할 수 있도록, Skill을 사용하면 해당 아이콘이 잠시 커졌다가 원래 크기로 돌아오는 효과를 추가했다.

[SerializeField] private float popScale = 1.2f;
[SerializeField] private float popDuration = 0.1f;

기본 설정에서는 Skill 아이콘이 원래 크기의 1.2배까지 확대되고, 0.1초 동안 커진 뒤 다시 0.1초 동안 원래 크기로 돌아온다.


Skill 종류를 배열 인덱스로 변환한 뒤, 해당하는 아이콘을 찾아 애니메이션을 실행했다.

public void SetSkill(SkillRefManager.SkillType skill)
{
    int index = (int)skill;
    Image image = skillSlots[index].skillImage;

    if (image == null)
        return;

    StartCoroutine(PopSkillIcon(image));
}

실제 확대와 축소는 코루틴과 Vector3.Lerp()를 이용했다.

private IEnumerator PopSkillIcon(Image image)
{
    RectTransform rect = image.rectTransform;

    Vector3 originalScale = rect.localScale;
    Vector3 targetScale = originalScale * popScale;

    float time = 0f;

    while (time < popDuration)
    {
        time += Time.deltaTime;
        rect.localScale = Vector3.Lerp(originalScale, targetScale, time / popDuration);
        yield return null;
    }

    time = 0f;

    while (time < popDuration)
    {
        time += Time.deltaTime;
        rect.localScale = Vector3.Lerp(targetScale, originalScale, time / popDuration);
        yield return null;
    }

    rect.localScale = originalScale;
}

Skill을 사용하면 해당 아이콘이 빠르게 확대되었다가 다시 원래 크기로 돌아온다.

이를 통해 별도의 텍스트 메시지를 띄우지 않더라도, Skill 입력이 실제로 처리되었다는 사실을 HUD에서 바로 확인할 수 있게 했다.


[캡처 5 삽입 — Skill 사용 전과 아이콘 확대 순간 비교]


Sword Core Skill을 사용하면 해당 Skill 아이콘이 잠시 1.2배로 확대된 뒤 원래 크기로 돌아온다. Skill 입력이 실제로 처리되었다는 사실을 HUD에서 확인할 수 있도록 시각적 피드백을 추가했다.


이 기능을 정상적으로 확인하려면 Test_PlayerController 씬에서 Canvas - SkillRefManager의 Sword Core Skill 참조를 연결해야 했다.

당시 디스코드에도 다음과 같이 공유했다.

Skill 사용 시 해당하는 Skill 아이콘이 잠시 커졌다 작아지는 효과를 구현했습니다. 작동 확인을 위해서는 Test_PlayerController Scene에서 Canvas - SkillRefManager에 Sword Core Skill을 연결해 줘야 합니다.

아직 연결하지 못한 Skill 기능

3주차에 구현한 Skill UI는 Sword Core의 Skill 사용 이벤트를 HUD에 표시하는 단계 까지 완성했다.

하지만 당시의 시스템 구조에서는 아직 필요한 데이터나 이벤트를 가져올 수 없었던 기능들이 있었다.

  • Skill 쿨타임 표시
  • Skill 아이콘 자동 로딩
  • Skill 사용 가능 여부 표시
  • 다른 Core의 Skill 이벤트 연결
  • 현재 Core에 따른 Skill 슬롯 교체
  • 세 번째 Skill의 실제 연결

당시 기록에도 다음과 같이 남겼다.

쿨타임이나 Skill 아이콘 자체는 현재 코드에서 불러오는 방법이 없어서 약간의 수정이 더 필요할 수도 있을 것 같습니다. 해당 부분은 다른 Core 쪽 스크립트가 완성되면 진행하겠습니다.


SkillRefManager 역시 Sword Core의 참조만 실제로 구현되어 있었고, Core 2와 Core 3의 참조 영역은 주석 상태로 남아 있었다.

[Header("Core 1 Skill References")]
[SerializeField] private SwordCoreSkill _swordCoreSkill;

//[Header("Core 2 Skill References")]
//[Header("Core 3 Skill References")]

따라서 3주차의 결과를 “전체 Core의 Skill UI를 완성했다”고 표현하는 것은 정확하지 않다.


이번 주에 완료한 범위는 다음과 같다.

완료

  • Skill UI 슬롯 및 아이콘 배치
  • Sword Core Skill 이벤트 연결
  • UpperSlash와 첫 번째 Skill 슬롯 연결
  • DashSlash와 두 번째 Skill 슬롯 연결
  • Skill 사용 시 해당 아이콘 확대 효과

후속 작업

  • 다른 Core의 Skill UI 연결
  • Skill 쿨타임 표시
  • Core별 Skill 아이콘 자동 교체
  • 세 번째 Skill 연결

현재 시스템에서 사용할 수 있는 부분까지만 구현하고, 아직 데이터가 준비되지 않은 기능은 임의로 가정하지 않고 남겨두었다.

플레이어 사망 연출 구현

2주차에는 사망 UI에 사용할 에셋이 아직 제작 중이었기 때문에 사망 연출을 후속 작업으로 남겨두었다.

3주차에는 DeathDrawer를 새롭게 추가하고, 플레이어가 사망했을 때 기존 HUD를 숨긴 뒤 별도의 사망 화면을 보여주는 연출을 구현했다.


HP 변경 이벤트를 처리하면서 PlayerHealth.IsDead를 확인하고, 사망 상태라면 사망 UI를 실행하도록 했다.

private void HandleHPChanged(int currentHP, int maxHP)
{
    _hpDrawer.SetHP(currentHP, maxHP);

    bool isLowHP = (float)currentHP / maxHP <= lowHPThreshold;
    _hpDrawer.SetLowHP(isLowHP);

    if (_playerHealth.IsDead && _deathDrawer != null)
        _deathDrawer.ShowDeathUI();
}

사망 UI가 시작되면 기존 HUD를 먼저 숨기고, 반투명한 배경을 활성화한다.

public void ShowDeathUI()
{
    if (_hud != null)
        _hud.SetActive(false);

    if (_deathBackground != null)
    {
        _background.color = new Color(69 / 255f, 69 / 255f, 69 / 255f, 0f);

        _deathBackground.SetActive(true);
        StartCoroutine(FadeIn());
    }
}

처음에는 배경의 알파값을 0으로 두고, 0.5초 동안 점차 불투명해지도록 만들었다.

private IEnumerator FadeIn()
{
    Color start = new Color(69 / 255f, 69 / 255f, 69 / 255f, 0f);
    Color end = new Color(69 / 255f, 69 / 255f, 69 / 255f, 186 / 255f);

    float duration = 0.5f;
    float t = 0f;

    while (t < duration)
    {
        t += Time.deltaTime;
        _background.color = Color.Lerp(start, end, t / duration);
        yield return null;
    }

    _background.color = end;
    _deathTextGroup.SetActive(true);

    yield return StartCoroutine(ErrorCodeAnimation());
}

배경이 나타난 뒤에는 ERROR CODE 뒤에 붙는 알파벳이 빠르게 바뀌는 글리치 연출을 재생한다.

for (int i = 0; i < 20; i++)
{
    char c = (char)Random.Range('A', 'Z' + 1);

    _deathMainText.text = $"ERROR CODE: {c}";

    yield return new WaitForSeconds(0.03f);
}

yield return new WaitForSeconds(0.5f);

_deathMainText.color = Color.red;
_deathMainText.text = "ERROR CODE: H";

무작위 알파벳을 20번 빠르게 표시한 뒤, 마지막에는 붉은색 ERROR CODE: H가 나타나도록 했다.

그 아래에는 미리 준비한 다섯 문장 가운데 하나를 무작위로 표시하도록 구성해, 플레이어가 사망할 때마다 완전히 같은 문장만 반복해서 보이지 않도록 했다.


전체적인 사망 연출의 흐름은 다음과 같다.

플레이어 HP가 0이 됨
→ PlayerHealth.IsDead 확인
→ 기존 HUD 숨김
→ 어두운 배경 Fade In
→ ERROR CODE 알파벳 글리치
→ 붉은색 ERROR CODE: H 표시
→ 무작위 서브 텍스트 표시


[캡처 6 삽입 — 사망 연출 진행 단계]


플레이어가 사망하면 기존 HUD가 사라지고 어두운 배경이 나타난다. 무작위 알파벳이 빠르게 바뀐 뒤 최종적으로 붉은색 ERROR CODE: H와 서브 텍스트가 표시된다.


단순한 GAME OVER 문구를 띄우기보다, 프로젝트 이름인 『ERROR-CODE-H』 자체를 사망 연출의 일부로 사용해 게임의 분위기와 연결하고자 했다.

HUD 프리팹 위치 정리

3주차에는 다른 팀원이 UI 프리팹을 보다 쉽게 찾아 사용할 수 있도록 HUD 프리팹의 위치도 정리했다.


기존 경로는 다음과 같았다.

Assets/jhkim/UITest/HUD.prefab

이를 다음 경로로 이동했다.

Assets/jhkim/HUD.prefab


테스트용 폴더 안에 있던 프리팹을 Assets/jhkim 폴더 바로 아래로 옮겨, 필요한 씬에서 비교적 쉽게 찾아 사용할 수 있도록 했다.

당시 디스코드에도 다음과 같이 공유했다.

UI용 Prefab을 Assets/jhkim 폴더 바로 안에 넣어두었습니다. 필요한 경우 바로 사용 가능합니다.


초기 UI 테스트를 위한 임시 구조와 실제 프로젝트에서 재사용할 HUD 프리팹의 위치를 구분하고, 팀원이 찾기 쉬운 경로로 정리한 작업이다.


[캡처 7 삽입 — Project 창의 HUD.prefab 위치와 HUD Hierarchy]


테스트 폴더 안에 있던 HUD 프리팹을 Assets/jhkim 폴더 바로 아래로 이동했다. 팀원이 다른 씬에서도 HUD를 쉽게 찾아 사용할 수 있도록 경로를 정리했다.

GitHub 작업 기록

3주차에 내가 작업한 주요 커밋은 다음과 같다.

ad61f4d — Skill Icon 추가, Death 연출 추가, Heat 게이지 및 상태 연출 리메이크

작업일: 2026.07.23 오전 6시 09분

  • Heat 게이지 디자인 리메이크
  • Heat Frame 및 Fill 이미지 추가
  • Heat 전용 Shader Graph 제작
  • Heat 전용 Material 제작
  • High Heat 색상 변화 추가
  • OverHeat 점멸 효과 추가
  • 픽셀 스타일 폰트 추가
  • HP 배경 이미지 가독성 개선
  • Skill UI와 세 개의 Skill 슬롯 추가
  • SkillDrawer 기본 구조 추가
  • DeathDrawer 추가
  • 플레이어 사망 시 HUD 숨김
  • 사망 화면 Fade In 구현
  • ERROR CODE: H 글리치 연출 구현
  • HUD 프리팹 구조 수정

스킬 시스템 관련 팀 커밋

작업일: 2026.07.23 오후

다른 팀원이 Sword Core의 두 가지 Skill을 구현했다.

  • d34d345 — 코어1 스킬 2개 생성
  • d9622a2 — Sword Core Skill 작업 병합

해당 기능이 프로젝트에 추가된 뒤 Skill UI 이벤트를 실제 스킬 사용과 연결할 수 있었다.

8bbd827 — Refactor UI system

작업일: 2026.07.24 오전 1시 25분

  • SkillDrawer 구조 개선
  • SkillRefManager 추가
  • Sword Core Skill 이벤트 연결
  • Skill 사용 시 해당 아이콘 확대 효과 구현
  • UIManager와 Skill 이벤트 연결
  • SwordCoreSkill에 UI용 이벤트 추가
  • HUD 프리팹 구조 정리
  • HUD 프리팹을 Assets/jhkim/HUD.prefab으로 이동
  • Death UI 일부 구조 정리

15ab621 — UI 시스템 작업 병합

작업일: 2026.07.24 오전 1시 27분

  • UI 리팩터링 브랜치를 메인 작업 흐름에 병합

3주차 작업 흐름 정리

이번 주의 작업 흐름을 정리하면 다음과 같다.

  1. 기존 HP·Heat·Core HUD의 디자인 방향을 다시 검토했다.
  2. 사이버펑크 분위기에 맞는 Heat Frame과 Fill 이미지를 제작했다.
  3. Heat 게이지 전용 Shader Graph와 Material을 만들었다.
  4. Heat 수치를 Shader의 _Fill 값과 연결했다.
  5. High Heat와 OverHeat의 시각적인 상태를 분리했다.
  6. OverHeat 상태에 점멸 효과를 추가했다.
  7. HP 배경 이미지의 가독성을 보완했다.
  8. HUD 전체에 사용할 픽셀 스타일 폰트를 추가했다.
  9. Core 옆에 세 개의 Skill 슬롯을 배치했다.
  10. Skill 시스템이 완성되기 전에 UI의 기본 구조부터 먼저 제작했다.
  11. Sword Core Skill이 추가된 뒤 Skill 사용 이벤트를 연결했다.
  12. Skill 사용 시 해당 아이콘이 확대되었다가 복귀하도록 했다.
  13. 플레이어 사망 시 실행되는 Fade In 및 글리치 연출을 구현했다.
  14. HUD 프리팹을 팀원이 찾기 쉬운 경로로 이동했다.
  15. 아직 구현하지 못한 Skill 쿨타임과 다른 Core 연동 항목을 팀에 공유했다.

이번 주에도 모든 시스템이 완성된 뒤 UI를 만드는 방식으로 진행하지는 않았다.

먼저 독립적으로 만들 수 있는 UI와 연출을 제작하고, 다른 시스템이 추가되면 이벤트를 연결하는 방식 으로 개발을 이어갔다.

3주차 결과

3주차에는 기능 위주였던 HUD를 『ERROR-CODE-H』의 분위기에 어울리는 인터페이스로 발전시켰다.


완료한 항목은 다음과 같다.

  • Heat 게이지 사이버펑크 디자인 리메이크
  • Heat Frame 및 Fill 리소스 제작
  • Heat 게이지 전용 Shader Graph 적용
  • Heat 비율과 Shader _Fill 값 연동
  • High Heat 경고 색상
  • OverHeat 점멸 효과
  • HP 배경 이미지 가독성 개선
  • HUD 픽셀 폰트 적용
  • Core 옆 Skill 슬롯과 아이콘 추가
  • Sword Core의 두 Skill과 UI 연결
  • Skill 사용 시 아이콘 확대·축소 효과
  • 플레이어 사망 시 기존 HUD 숨김
  • 사망 화면 Fade In
  • ERROR CODE: H 글리치 연출
  • 사망 화면 무작위 서브 텍스트
  • HUD 프리팹 위치 및 구조 정리

반면 이번 주에 부분적으로만 진행했거나, 후속 작업으로 남긴 항목은 다음과 같다.

  • HP UI 전체 디자인 리메이크
  • Core UI 전체 디자인 리메이크
  • 다른 Core의 Skill 이벤트 연결
  • Core별 Skill 아이콘 자동 변경
  • Skill 쿨타임 표시
  • 세 번째 Skill 연결

3주차를 마치며

3주차에는 이전 주차보다 UI의 기능뿐 아니라 게임의 분위기와 플레이어가 느끼는 피드백까지 함께 고려하는 작업 이 많았다.

Heat 게이지에는 전용 Shader Graph를 적용하고, Heat 상태를 일반·High Heat·OverHeat로 나누었다.

플레이어가 숫자를 계속 확인하지 않아도, 색상과 점멸만으로 현재 Heat가 위험한 수준에 도달했는지를 인식할 수 있도록 만들고자 했다.


Skill UI 역시 처음부터 완성된 시스템에 연결한 것은 아니었다.

먼저 아이콘과 슬롯을 제작한 뒤, 팀원이 Sword Core Skill을 구현하자 이벤트를 추가해 실제 Skill 사용과 연결했다. 아직 모든 Core와 쿨타임 정보를 표시할 수 있는 단계는 아니었지만, 적어도 Skill을 실제로 사용했을 때 HUD가 반응하는 기본 구조 는 만들 수 있었다.


2주차에 미뤄두었던 사망 연출도 이번 주에 구현했다.

기존 HUD를 숨기고 화면을 어둡게 만든 뒤, 무작위 알파벳이 빠르게 바뀌다가 최종적으로 ERROR CODE: H로 수렴하는 글리치 연출을 추가했다.

단순히 게임오버 문구 하나를 띄우는 것이 아니라, 프로젝트 제목과 세계관을 사망 화면에도 녹여내고 싶었다.


또한 이번 주에는 다른 시스템의 개발 상황에 맞춰 UI 작업의 순서를 조정하는 과정도 계속 이어졌다.

Skill 시스템이 아직 구현되지 않았을 때에는 UI 슬롯과 디자인부터 먼저 준비하고, 이후 시스템이 추가된 뒤 이벤트를 연결했다. 한편 쿨타임이나 다른 Core의 Skill처럼 필요한 데이터가 아직 제공되지 않은 부분은 임의로 가정해 구현하지 않고 후속 작업으로 남겨두었다.


1주차에는 시스템의 정보를 화면에 표시하는 구조를 만들었고, 2주차에는 피해와 위험 상태에 대한 피드백을 추가했다.

그리고 3주차에는 그 위에 『ERROR-CODE-H』만의 분위기와 연출을 조금씩 입히기 시작했다.

기능과 디자인, 애니메이션, 그리고 다른 팀원이 만든 시스템과의 연결을 함께 다루면서, HUD는 단순한 정보 표시창이 아니라 게임의 분위기와 조작 피드백을 전달하는 또 하나의 게임 요소 라는 점을 조금씩 체감할 수 있었다.

開発期間: 2026.07.20 ~ 2026.07.26
担当役割: HP・Heat・CoreインターフェースのリメイクおよびSkill UIの追加


2週目には、既存のHeat・Core HUDにHP UIを追加し、HP減少パーティクルとLow HP警告を実装した。また、HP・Heat・Core UIを一つのHUDプレハブとして整理し、実際のゲームで再利用できる基本的なインターフェース構造を作った。

3週目にはそこからさらに一歩進み、機能を中心に構成されていたHUDを 『ERROR-CODE-H』のサイバーパンクな雰囲気に合うデザインへ発展させる作業 を担当した。


今週の主な目標は以下の通りであった。

  • Heatゲージのデザインリメイク
  • High HeatおよびOverHeat状態の演出追加
  • Heatゲージ専用Shader Graphの制作
  • HP背景画像の視認性改善
  • HUDフォントをピクセルスタイルへ変更
  • Coreの横にSkillアイコンを追加
  • Skill使用時のUIフィードバックを追加
  • 2週目に先送りしていた死亡演出の実装
  • HUDプレハブ構造の整理

ただし、すべてのUIを一度に完全にリメイクするには作業量が多かった。

そのため今週は Heat UI、Skill UI、死亡演出 を中心に作業し、HPとCore UIについては既存の機能構造を維持しながら、一部のデザインのみを改善した。全体的なリメイクは後続作業として残した。

機能中心のHUDからサイバーパンクHUDへ

1〜2週目における最も重要な目標は、Heat、Core、HPの情報が実際のゲームシステムと正常に接続されているかを確認することであった。

その結果、HUDは必要な情報を表示する機能自体は備えていたものの、まだ『ERROR-CODE-H』の暗いSF世界観やサイバーパンクな雰囲気を十分に表現できてはいなかった。


3週目には既存の機能構造を維持しながら、視覚的な方向性を以下のように変更した。

  • 直線的で機械的なフレームを使用
  • 暗い背景でも目立つ高い色彩コントラスト
  • 通常状態と危険状態を明確に色分け
  • 数値や状態情報がシステムメッセージのように見える形式
  • 基本フォントをピクセルスタイルのフォントへ変更
  • HP、Heat、Core、Skill UIの視覚的な表現を統一

つまり、既存コードをすべて作り直すのではなく、すでに実装されているデータ接続構造は維持し、その上にある画像・フォント・色・状態演出を入れ替える方式 で作業した。


[キャプチャ1を挿入 — 2週目HUDと3週目HUDの比較]


機能を中心に構成していた既存HUDを、サイバーパンクな雰囲気に合わせてリメイクした。HeatフレームとFill、ピクセルフォント、Skill UIなどを追加し、ゲーム全体の雰囲気とHUDの視覚的な方向性を合わせた。

Heatゲージのデザインリメイク

今週の作業で最も大きな割合を占めたのは、Heatゲージのリメイクであった。

Heatは、プレイヤーの攻撃やCore切り替えによって変化する重要な戦闘リソースである。

そのため、単純に現在値を表示するだけでなく、Heatが危険な水準まで上昇した際には、プレイヤーが数字を直接読まなくてもすぐに気づける必要があった。


そこでHeat UIでは、大きく三つの状態を区別するよう構成した。

  • 通常Heat状態
  • High Heat状態
  • OverHeat状態

それぞれの状態を判定する基本的な閾値はUIManagerで設定した。

[Header("UI Conditions")]
[SerializeField] private float lowHPThreshold = 0.2f;
[SerializeField] private float highHeatThreshold = 0.8f;
[SerializeField] private float overHeatThreshold = 0.999f;

現在のHeatが最大Heatの80%以上であればHigh Heat、ほぼ100%に達した場合はOverHeat状態であると判定する。


Heat値が変更されるたびに現在の割合を計算し、その結果をHeatDrawerへ渡すようにした。

private void HandleHeatChanged(float currentHeat, float maxHeat)
{
    bool isHighHeat = currentHeat / maxHeat >= highHeatThreshold;
    bool isOverHeat = currentHeat / maxHeat >= overHeatThreshold;

    _heatDrawer.SetHeat(currentHeat, isHighHeat);
    _heatDrawer.SetOverHeat(isOverHeat);
}

現在のHeat値、High Heatであるかどうか、OverHeatであるかどうかをそれぞれ渡すことで、ゲージのFill量と危険状態の視覚演出を分離して処理 できるよう構成した。


[キャプチャ2を挿入 — Normal、High Heat、OverHeat状態の比較]


Heatの状態によってHUDの色と演出が変化する。通常状態では通常色を使用し、Heatが80%以上になると警告色へ切り替わる。OverHeat状態では点滅エフェクトを追加し、危険状態をさらに強調した。

Heatゲージ専用Shader Graphの制作

既存のHeatゲージでは、Unity UI ImageのfillAmountを利用して単純にFill量を表現していた。

しかし、新しくデザインしたHeatゲージでは傾いたフレームとFill画像を使用したため、従来の単純なImage Fill方式では意図した形を作ることが難しかった。


そこで、Heatゲージ専用のHeatBarShader.shadergraphとHeatBarMaterialを新たに制作した。

専用Shaderでは、以下の値を使用した。

  • _MainTex: Heat Fill画像
  • _Fill: 現在のHeatのFill割合
  • _Skew: ゲージの傾きを調整
  • _Softness: Fill境界の滑らかさを調整

Heat UIで使用するMaterialは、それぞれのUIインスタンスが独立した値を持てるよう複製して使用した。

private Material materialInstance;

private void Awake()
{
    if (heatFill == null)
        return;

    materialInstance = Instantiate(heatFill.material);
    heatFill.material = materialInstance;
}

共有Materialの_Fill値を直接変更すると、同じMaterialを使用しているほかのUIまで同時に影響を受ける可能性がある。

これを防ぐため、Instantiate()を利用して別のMaterialインスタンスを生成し、現在のHeat UIだけでその値を変更するようにした。


現在のHeat値は、Shaderの_Fillプロパティへ渡した。

public void SetHeat(float current, bool isHighHeat)
{
    current = Mathf.Clamp(current, 0f, 100f);

    if (materialInstance != null)
        materialInstance.SetFloat("_Fill", current / 100f);

    if (!isOverHeat)
        heatFill.color = isHighHeat ? warningColor : normalColor;

    if (heatText != null)
        heatText.text = $"HEAT_{current:0}%";
}

Heat値を0~100の範囲に制限した後、100で割ることでShaderで使用できる0~1の範囲へ変換した。

テキストも、従来の単純な50%という表記からHEAT_50%という形式へ変更した。

これはHUDを一般的なステータス画面ではなく、ゲーム世界内のシステムインターフェースのように見せるためのデザイン上の選択 であった。


High Heat状態では、Fillの色を通常色から警告色へ変更した。

ただしOverHeat状態では別の点滅コルーチンが色を制御するため、SetHeat()からその色を再度上書きしないようisOverHeat条件を追加した。


[キャプチャ3を挿入 — HeatBar Shader Graphと実際の適用画面]


傾いたHeatゲージのデザインに合わせて専用Shader Graphを制作した。コードから現在のHeat割合を_Fill値として渡し、ゲージがリアルタイムで満たされるよう構成した。

High HeatとOverHeatの視覚エフェクト

High Heat状態ではゲージが警告色へ変化し、OverHeat状態ではHeat Fillが繰り返し点滅するようにした。

public void SetOverHeat(bool active)
{
    if (isOverHeat == active)
        return;

    isOverHeat = active;

    if (active)
    {
        blinkRoutine = StartCoroutine(OverHeatBlink());
    }
    else
    {
        if (blinkRoutine != null)
        {
            StopCoroutine(blinkRoutine);
            blinkRoutine = null;
        }

        heatFill.color = normalColor;
    }
}

すでにOverHeat状態であれば、同じコルーチンが再度実行されないよう現在の状態を先に比較した。

OverHeat状態から抜けると、実行中の点滅コルーチンを停止し、Heat Fillの色を通常状態へ戻した。


点滅パターンは、2週目に実装したLow HP警告と同じように、短い点滅と待機時間を組み合わせる形で作った。

IEnumerator OverHeatBlink()
{
    while (true)
    {
        yield return Blink(0.16f);
        yield return new WaitForSeconds(0.6f);

        yield return Blink(0.16f);
        yield return new WaitForSeconds(0.16f);
    }
}

このように通常Heat、High Heat、OverHeatをそれぞれ視覚的に区別することで、プレイヤーがHeatの数字を常に確認しなくても、現在の危険度を色と点滅だけで把握できるように した。

HP背景画像とフォントの改善

HP UIについては構造全体を作り直すのではなく、2週目に実装していたHP BarとHP減少パーティクルの構造を維持しつつ、視認性を改善する方向で作業した。

既存のHP背景画像を修正し、HP Fillとテキストがより見やすくなるようにした。また、基本フォントをピクセルスタイルのPixelOperatorSC-Boldへ変更した。


フォントの変更はHP UIだけのためではなく、HUD全体の視覚的な印象を統一するための作業でもあった。

  • HP数値
  • Heat数値
  • Core名
  • Skillキー表示
  • 死亡画面のテキスト

これらのテキスト要素に同じピクセルスタイルを適用することで、HUDがゲーム画面上に別途重ねられた一般的なUIではなく、『ERROR-CODE-H』の世界観に存在する機械的なインターフェースのように感じられるようにした。

ただし、HPとCore UI全体を完全に新しくデザインする作業は、想定していたよりも作業量が多かった。

そのため今週は、背景やフォント、HUD全体の配置を先に改善し、細かなリメイクについては後続作業として残した。


[キャプチャ4を挿入 — HP背景とピクセルフォント適用前後]


HPバーの背景画像を修正し、HUDフォントをピクセルスタイルへ変更した。暗いゲーム内背景でもHP数値とゲージを明確に区別できるよう、視認性を補った。

Coreの横にSkill UIを追加

今週は、既存のCore UIの横に現在使用できるSkillを表示する機能も追加した。

HUDプレハブ内にSkill_UIグループを作り、三つのSkillスロットを配置した。


各スロットは、以下の要素を持っている。

  • Skillキーまたは名前を表示するテキスト
  • Skillアイコン画像

初期のSkillDrawerには、三つのスロットを表示するための参照だけを用意した。

[System.Serializable]
public class SkillSlotUI
{
    public TMP_Text skillText;
    public Image skillImage;
}

[SerializeField] private SkillSlotUI[] skillSlots;

最初にSkill UIを追加した時点では、実際のSkill関連プレイヤーコードがまだ完成していなかったため、実際の使用イベントへすぐに接続することはできなかった。


当時の作業記録にも、以下のように残している。

SkillアイコンとSkill関連のベースコードを追加しました。まだ動作はせず、Skill関連のプレイヤーコードが完成した後に接続します。


そのため、7月23日の最初の実装では、アイコン、スロット、基本的なUI構造から先に制作した。

その後、Skillシステムから使用できるデータやイベントが用意された段階で、実際の動作を接続する形に作業を分けたのである。

Sword Core SkillとUIの接続

7月23日の午後には、チームメンバーがSword Coreの二つのSkillを追加した。

  • UpperSlash
  • DashSlash

これにより実際のSkill使用をUIへ伝えられるようになったため、SwordCoreSkillにSkillの種類とイベントを追加した。

public enum SkillType
{
    UpperSlash,
    DashSlash
}

public event Action<SkillType> OnSkillUsed;

各Skillが実際に開始されるタイミングで、OnSkillUsedイベントが発生するよう構成した。

public void TryStartUpperSlash()
{
    if (CanStartUpperSlash())
    {
        upperSlashReadyTime = Time.time + upperSlashCooldown;
        heatManager?.AddHeat(upperSlashHeat);
        OnSkillUsed?.Invoke(SkillType.UpperSlash);
        StartCoroutine(UpperSlashRoutine());
    }
}

DashSlashにも同じ方式でイベントを追加した。


ここで重要なのは、Skillキーが単純に入力された時点でイベントが発生するのではなく、クールタイムなどの実行条件を通過し、実際にSkillが開始される時点でイベントが発生すること であった。

そのため、Skillが実際には実行されなかった場合、UIエフェクトも発生しない。

チームメンバーが担当していたSkillスクリプトを修正した部分には、UIとの接続のために追加したコードであることをコメントとして残し、Discordでもどのファイルを修正したのかを別途共有した。

SkillRefManagerでゲームロジックとUIの間を接続する

Sword CoreのSkillTypeをUIでそのまま使用すると、UIが特定Coreの内部実装構造へ直接依存することになる。

この依存を少しでも減らすため、SkillRefManagerという中間接続クラスを作った。

public enum SkillType
{
    Skill1,
    Skill2,
    Skill3
}

public event Action<SkillType> OnSkillUsed;

SkillRefManagerはSword Coreで発生したSkillイベントを受け取り、HUDで使用する共通のSkillスロット番号へ変換する。

private void HandleSkillUsed(SwordCoreSkill.SkillType skill)
{
    switch (skill)
    {
        case SwordCoreSkill.SkillType.UpperSlash:
            OnSkillUsed?.Invoke(SkillType.Skill1);
            break;

        case SwordCoreSkill.SkillType.DashSlash:
            OnSkillUsed?.Invoke(SkillType.Skill2);
            break;
    }
}

ゲームロジック側のUpperSlashはUIの一つ目のスロットへ、DashSlashは二つ目のスロットへ変換した。


全体の流れを整理すると、以下の通りである。

Sword Core Skillを実行
→ SwordCoreSkill.OnSkillUsedが発生
→ SkillRefManagerがSkillの種類を受信
→ UI用のSkill1またはSkill2へ変換
→ SkillRefManager.OnSkillUsedが発生
→ UIManagerがイベントを受信
→ SkillDrawerで該当アイコンのアニメーションを実行


UIManagerはSkillRefManagerのイベントを購読するようにした。

private void OnEnable()
{
    if (_skillRefManager != null)
        _skillRefManager.OnSkillUsed += HandleSkillUsed;
}

private void OnDisable()
{
    if (_skillRefManager != null)
        _skillRefManager.OnSkillUsed -= HandleSkillUsed;
}

Skillイベントを受け取ると、該当するスロット情報をSkillDrawerへ渡す。

private void HandleSkillUsed(SkillRefManager.SkillType skill)
{
    _skillDrawer.SetSkill(skill);
}

これにより、実際の攻撃ロジックとUIアニメーションを直接接続せず、中間層を通して互いに分離できるようにした。

Skill使用時のアイコン拡大エフェクト

Skill入力が実際に処理されたことをプレイヤーがすぐに確認できるよう、Skillを使用すると該当アイコンが一時的に大きくなり、その後元のサイズへ戻るエフェクトを追加した。

[SerializeField] private float popScale = 1.2f;
[SerializeField] private float popDuration = 0.1f;

基本設定ではSkillアイコンが元の大きさの1.2倍まで拡大し、0.1秒かけて大きくなった後、再び0.1秒かけて元の大きさへ戻る。


Skillの種類を配列のインデックスへ変換した後、該当するアイコンを探してアニメーションを実行した。

public void SetSkill(SkillRefManager.SkillType skill)
{
    int index = (int)skill;
    Image image = skillSlots[index].skillImage;

    if (image == null)
        return;

    StartCoroutine(PopSkillIcon(image));
}

実際の拡大と縮小には、コルーチンとVector3.Lerp()を利用した。

private IEnumerator PopSkillIcon(Image image)
{
    RectTransform rect = image.rectTransform;

    Vector3 originalScale = rect.localScale;
    Vector3 targetScale = originalScale * popScale;

    float time = 0f;

    while (time < popDuration)
    {
        time += Time.deltaTime;
        rect.localScale = Vector3.Lerp(originalScale, targetScale, time / popDuration);
        yield return null;
    }

    time = 0f;

    while (time < popDuration)
    {
        time += Time.deltaTime;
        rect.localScale = Vector3.Lerp(targetScale, originalScale, time / popDuration);
        yield return null;
    }

    rect.localScale = originalScale;
}

Skillを使用すると該当アイコンが素早く拡大され、その後再び元の大きさへ戻る。

これにより、別のテキストメッセージを表示しなくても、Skill入力が実際に処理されたことをHUD上ですぐに確認できるようにした。


[キャプチャ5を挿入 — Skill使用前とアイコン拡大時の比較]


Sword Core Skillを使用すると、該当するSkillアイコンが一時的に1.2倍へ拡大した後、元の大きさへ戻る。Skill入力が実際に処理されたことをHUD上で確認できるよう、視覚的なフィードバックを追加した。


この機能を正常に確認するには、Test_PlayerControllerシーンでCanvas - SkillRefManagerのSword Core Skill参照を接続する必要があった。

当時のDiscordにも以下のように共有した。

Skill使用時、該当するSkillアイコンが一時的に大きくなってから元の大きさへ戻るエフェクトを実装しました。動作確認のためには、Test_PlayerController SceneでCanvas - SkillRefManagerにSword Core Skillを接続する必要があります。

まだ接続できなかったSkill機能

3週目に実装したSkill UIは、Sword CoreのSkill使用イベントをHUDへ表示する段階 まで完成した。

しかし、当時のシステム構造では、必要なデータやイベントをまだ取得できなかった機能も存在した。

  • Skillクールタイム表示
  • Skillアイコンの自動読み込み
  • Skill使用可能状態の表示
  • ほかのCoreのSkillイベント接続
  • 現在のCoreに応じたSkillスロットの切り替え
  • 三つ目のSkillの実際の接続

当時の記録にも以下のように残している。

クールタイムやSkillアイコン自体は、現在のコードから取得する方法がないため、多少の修正が必要になるかもしれません。この部分については、ほかのCore側のスクリプトが完成した後に進めます。


SkillRefManagerについても、Sword Coreの参照だけが実際に実装されており、Core 2とCore 3の参照領域はコメントアウトした状態で残していた。

[Header("Core 1 Skill References")]
[SerializeField] private SwordCoreSkill _swordCoreSkill;

//[Header("Core 2 Skill References")]
//[Header("Core 3 Skill References")]

したがって、3週目の結果を「すべてのCoreのSkill UIを完成させた」と表現するのは正確ではない。


今週完成した範囲は、以下の通りである。

完了

  • Skill UIスロットおよびアイコンの配置
  • Sword Core Skillイベントの接続
  • UpperSlashと一つ目のSkillスロットを接続
  • DashSlashと二つ目のSkillスロットを接続
  • Skill使用時の該当アイコン拡大エフェクト

後続作業

  • ほかのCoreのSkill UI接続
  • Skillクールタイム表示
  • CoreごとのSkillアイコン自動切り替え
  • 三つ目のSkillの接続

現在のシステムで利用できる部分までを実装し、まだデータが準備されていない機能については、勝手に仮定して実装せず残しておいた。

プレイヤー死亡演出の実装

2週目には死亡UIで使用するアセットがまだ制作中であったため、死亡演出を後続作業として残していた。

3週目には新たにDeathDrawerを追加し、プレイヤーが死亡した際に既存HUDを非表示にした後、別の死亡画面を表示する演出を実装した。


HP変更イベントを処理する際にPlayerHealth.IsDeadを確認し、死亡状態であれば死亡UIを実行するようにした。

private void HandleHPChanged(int currentHP, int maxHP)
{
    _hpDrawer.SetHP(currentHP, maxHP);

    bool isLowHP = (float)currentHP / maxHP <= lowHPThreshold;
    _hpDrawer.SetLowHP(isLowHP);

    if (_playerHealth.IsDead && _deathDrawer != null)
        _deathDrawer.ShowDeathUI();
}

死亡UIが開始されると、まず既存HUDを非表示にし、半透明の背景を有効化する。

public void ShowDeathUI()
{
    if (_hud != null)
        _hud.SetActive(false);

    if (_deathBackground != null)
    {
        _background.color = new Color(69 / 255f, 69 / 255f, 69 / 255f, 0f);

        _deathBackground.SetActive(true);
        StartCoroutine(FadeIn());
    }
}

最初は背景のAlpha値を0に設定し、0.5秒かけて徐々に不透明になるようにした。

private IEnumerator FadeIn()
{
    Color start = new Color(69 / 255f, 69 / 255f, 69 / 255f, 0f);
    Color end = new Color(69 / 255f, 69 / 255f, 69 / 255f, 186 / 255f);

    float duration = 0.5f;
    float t = 0f;

    while (t < duration)
    {
        t += Time.deltaTime;
        _background.color = Color.Lerp(start, end, t / duration);
        yield return null;
    }

    _background.color = end;
    _deathTextGroup.SetActive(true);

    yield return StartCoroutine(ErrorCodeAnimation());
}

背景が表示された後は、ERROR CODEの後ろに付くアルファベットが高速で切り替わるグリッチ演出を再生する。

for (int i = 0; i < 20; i++)
{
    char c = (char)Random.Range('A', 'Z' + 1);

    _deathMainText.text = $"ERROR CODE: {c}";

    yield return new WaitForSeconds(0.03f);
}

yield return new WaitForSeconds(0.5f);

_deathMainText.color = Color.red;
_deathMainText.text = "ERROR CODE: H";

ランダムなアルファベットを20回素早く表示した後、最後には赤色のERROR CODE: Hが表示されるようにした。

その下には、あらかじめ用意した五つの文章の中から一つをランダムで表示するよう構成し、プレイヤーが死亡するたびに完全に同じ文章だけが繰り返し表示されないようにした。


死亡演出全体の流れは、以下の通りである。

プレイヤーHPが0になる
→ PlayerHealth.IsDeadを確認
→ 既存HUDを非表示
→ 暗い背景をFade In
→ ERROR CODEのアルファベットグリッチ
→ 赤色のERROR CODE: Hを表示
→ ランダムなサブテキストを表示


[キャプチャ6を挿入 — 死亡演出の進行段階]


プレイヤーが死亡すると既存HUDが消え、暗い背景が表示される。ランダムなアルファベットが素早く切り替わった後、最終的に赤色のERROR CODE: Hとサブテキストが表示される。


単純にGAME OVERという文字を表示するのではなく、プロジェクト名である『ERROR-CODE-H』そのものを死亡演出の一部として使用し、ゲームの雰囲気と結び付けたいと考えた。

HUDプレハブの配置を整理する

3週目には、ほかのチームメンバーがUIプレハブをより簡単に探して使用できるよう、HUDプレハブの配置も整理した。


元のパスは以下の通りであった。

Assets/jhkim/UITest/HUD.prefab

これを以下のパスへ移動した。

Assets/jhkim/HUD.prefab


テスト用フォルダ内にあったプレハブをAssets/jhkimフォルダ直下へ移動し、必要なシーンから比較的簡単に見つけて使用できるようにした。

当時のDiscordにも以下のように共有した。

UI用PrefabをAssets/jhkimフォルダ直下へ配置しました。必要な場合はそのまま使用できます。


初期UIテスト用の仮構造と、実際のプロジェクトで再利用するHUDプレハブの配置を分け、チームメンバーが探しやすいパスへ整理した作業である。


[キャプチャ7を挿入 — Projectウィンドウ内のHUD.prefabの位置とHUD Hierarchy]


テストフォルダ内にあったHUDプレハブをAssets/jhkimフォルダ直下へ移動した。チームメンバーがほかのシーンでもHUDを簡単に探して使用できるよう、パスを整理した。

GitHub作業記録

3週目に私が作業した主なコミットは以下の通りである。

ad61f4d — Skill Icon 추가, Death 연출 추가, Heat 게이지 및 상태 연출 리메이크

作業日: 2026.07.23 午前6時09分

  • Heatゲージのデザインリメイク
  • Heat FrameおよびFill画像を追加
  • Heat専用Shader Graphを制作
  • Heat専用Materialを制作
  • High Heatの色変化を追加
  • OverHeatの点滅エフェクトを追加
  • ピクセルスタイルフォントを追加
  • HP背景画像の視認性を改善
  • Skill UIと三つのSkillスロットを追加
  • SkillDrawerの基本構造を追加
  • DeathDrawerを追加
  • プレイヤー死亡時にHUDを非表示
  • 死亡画面のFade Inを実装
  • ERROR CODE: Hのグリッチ演出を実装
  • HUDプレハブ構造を修正

Skillシステム関連のチームコミット

作業日: 2026.07.23 午後

ほかのチームメンバーがSword Coreの二つのSkillを実装した。

  • d34d345 — 코어1 스킬 2개 생성
  • d9622a2 — Sword Core Skill作業をマージ

該当機能がプロジェクトへ追加された後、Skill UIイベントを実際のSkill使用へ接続することができた。

8bbd827 — Refactor UI system

作業日: 2026.07.24 午前1時25分

  • SkillDrawerの構造を改善
  • SkillRefManagerを追加
  • Sword Core Skillイベントを接続
  • Skill使用時の該当アイコン拡大エフェクトを実装
  • UIManagerとSkillイベントを接続
  • SwordCoreSkillにUI用イベントを追加
  • HUDプレハブ構造を整理
  • HUDプレハブをAssets/jhkim/HUD.prefabへ移動
  • Death UIの一部構造を整理

15ab621 — UIシステム作業をマージ

作業日: 2026.07.24 午前1時27分

  • UIリファクタリングブランチをメインの作業フローへマージ

3週目の作業フロー整理

今週の作業フローを整理すると、以下の通りである。

  1. 既存のHP・Heat・Core HUDのデザイン方向を改めて検討した。
  2. サイバーパンクな雰囲気に合うHeat FrameとFill画像を制作した。
  3. Heatゲージ専用Shader GraphとMaterialを作った。
  4. Heat値をShaderの_Fill値と接続した。
  5. High HeatとOverHeatの視覚的な状態を分離した。
  6. OverHeat状態に点滅エフェクトを追加した。
  7. HP背景画像の視認性を改善した。
  8. HUD全体で使用するピクセルスタイルフォントを追加した。
  9. Coreの横に三つのSkillスロットを配置した。
  10. Skillシステムが完成する前に、UIの基本構造から先に制作した。
  11. Sword Core Skillが追加された後、Skill使用イベントを接続した。
  12. Skill使用時に該当アイコンが拡大した後、元の大きさへ戻るようにした。
  13. プレイヤー死亡時に実行されるFade Inとグリッチ演出を実装した。
  14. HUDプレハブをチームメンバーが探しやすいパスへ移動した。
  15. まだ実装できていないSkillクールタイムや、ほかのCoreとの接続項目をチームへ共有した。

今週も、すべてのシステムが完成してからUIを制作する方法では進めなかった。

先に独立して作れるUIや演出を制作し、ほかのシステムが追加された段階でイベントを接続する方式 で開発を続けた。

3週目の結果

3週目には、機能を中心としていたHUDを『ERROR-CODE-H』の雰囲気に合うインターフェースへ発展させた。


完成した項目は以下の通りである。

  • Heatゲージのサイバーパンクデザインへのリメイク
  • Heat FrameおよびFillリソースの制作
  • Heatゲージ専用Shader Graphの適用
  • Heat割合とShaderの_Fill値を連携
  • High Heat警告色
  • OverHeat点滅エフェクト
  • HP背景画像の視認性改善
  • HUDへのピクセルフォント適用
  • Coreの横にSkillスロットとアイコンを追加
  • Sword Coreの二つのSkillとUIを接続
  • Skill使用時のアイコン拡大・縮小エフェクト
  • プレイヤー死亡時に既存HUDを非表示
  • 死亡画面のFade In
  • ERROR CODE: Hのグリッチ演出
  • 死亡画面のランダムなサブテキスト
  • HUDプレハブの配置と構造を整理

一方、今週は一部だけ進めたもの、あるいは後続作業として残した項目もある。

  • HP UI全体のデザインリメイク
  • Core UI全体のデザインリメイク
  • ほかのCoreのSkillイベント接続
  • CoreごとのSkillアイコン自動変更
  • Skillクールタイム表示
  • 三つ目のSkillの接続

3週目を終えて

3週目には、それまでの週よりも UIの機能だけでなく、ゲームの雰囲気やプレイヤーが受け取るフィードバックまで同時に考える作業 が多かった。

Heatゲージには専用Shader Graphを適用し、Heat状態を通常・High Heat・OverHeatの三段階に分けた。

プレイヤーが数字を常に確認しなくても、色や点滅だけで現在のHeatが危険な水準に達しているかを認識できるようにしたかった。


Skill UIについても、最初から完成したシステムへ接続したわけではなかった。

まずアイコンとスロットを制作し、その後チームメンバーがSword Core Skillを実装した段階でイベントを追加し、実際のSkill使用へ接続した。まだすべてのCoreやクールタイム情報を表示できる段階ではなかったが、少なくとも 実際にSkillを使用した際にHUDが反応する基本構造 は作ることができた。


2週目に先送りしていた死亡演出についても、今週実装した。

既存HUDを非表示にして画面を暗くした後、ランダムなアルファベットが高速で切り替わり、最終的にERROR CODE: Hへ収束するグリッチ演出を追加した。

単純にゲームオーバーという文字を表示するのではなく、プロジェクトタイトルと世界観を死亡画面にも取り入れたいと考えた。


また今週も、ほかのシステムの開発状況に合わせてUI作業の順序を調整する過程が続いた。

Skillシステムがまだ実装されていない段階では、UIスロットとデザインから先に準備し、その後システムが追加されてからイベントを接続した。一方、クールタイムやほかのCoreのSkillのように必要なデータがまだ提供されていない部分については、勝手に仮定して実装せず、後続作業として残した。


1週目にはシステムの情報を画面へ表示する構造を作り、2週目にはダメージや危険状態に対するフィードバックを追加した。

そして3週目には、その上へ『ERROR-CODE-H』ならではの雰囲気や演出を少しずつ加え始めた。

機能、デザイン、アニメーション、そしてほかのチームメンバーが作ったシステムとの接続を同時に扱う中で、HUDは単なる情報表示画面ではなく、ゲームの雰囲気と操作フィードバックを伝えるもう一つのゲーム要素 なのだということを、少しずつ実感できるようになった。

RELATED RECORDS

同じプロジェクト、または近いテーマの記録です。