[5] 유니티 MVVM으로 체력바 구현하는 법

 

📢 학습 목표

• 뷰 모델을 제대로 활용할 수 있다.
• 유연하게 데이터를 가져올 수 있다.
• MVVM UI 제작과정 익숙해지기.

지난 시간 복습

지난 시간 우리는 뷰 그룹을 간단하게 배워보고 간단한 데이터 가져오는 실습을 해봤습니다.

이번 시간에는 체력바를 만들고 이를 뷰 모델에서 가져와보는 시간을 가져보겠습니다.

체력 스크립트 만들기

우선 지난 시간 프로젝트에서 씬 하나를 생성해봅시다.

저는 Health라고 지었습니다.

이 빈 씬에 들어가줍니다.

체력바 UI 만들기

빈씬에 하이어라키에 우클릭한 뒤 Slider 하나 생성해봅시다.

그런 다음 Handle Slide Area 오브젝트를 찾아줍니다.

하이어라키에 있는 Handle Slide Area 오브젝트를 삭제합니다.

하이어라키에 있는 Fill 오브젝트를 눌러 색상을 빨강으로 바꿉니다.

체력바 뷰모델 만들기

스크립트를 하나 생성해줍시다.

저는 ViewModels 폴더에 HealthViewModel.cs를 생성했습니다.

스크립트 내부에 다음과 같이 작성해주세요.

using UnityWeld.Binding;

namespace UnityWeld
{
    [Binding]
    public class HealthViewModel : ViewModel
    {
        private float _healthPercent;

        [Binding]
        public float HealthPercent
        {
            get => _healthPercent;
            set
            {
                _healthPercent = value;
                OnPropertyChanged(nameof(HealthPercent));
            }
        }
    }
}

 

 

 

해당 스크립트를 Slider 오브젝트에 컴포넌트로 할당해줍시다.

 

 

그리고 사진과같이 OneWayPropertyBinding으로 HealthPercent를 바인딩합시다.

체력 스크립트 만들기

이제 체력 스크립트 하나 만들어봅시다.

폴더에 우클릭 → Create → C# Scripts

저는 Health.cs라고 지어줬습니다.

스크립트 내부에 다음과 같이 작성해주세요

using UnityEngine;
using UnityWeld;

public class Health : MonoBehaviour
{
    public float maxHealth; //* 최대 체력
    protected float curHealth; //* 현재 체력
    public HealthViewModel healthViewModel; //* 체력 뷰모델
    
    void Start()
    {
        UpdateHealth();
    }
    public void SetHp(float amount) //*Hp설정
    {
        maxHealth = amount;
        curHealth = maxHealth;
        UpdateHealth();
    }

    public void Damage(float damage) //* 데미지 받는 함수
    {
        if (maxHealth == 0 || curHealth <= 0) //* 이미 체력 0이하면 패스
            return;
        curHealth -= damage;
        if (curHealth <= 0)
        {
            //* 체력이 0 이하라 죽음
        }
        UpdateHealth();
    }
    public void UpdateHealth()
    {
        healthViewModel.HealthPercent = curHealth / maxHealth;
    }
}

아래 사진처럼 Health 오브젝트를 생성 후 Health.cs를 할당해주시고 세팅해주시기바랍니다.

테스트용 버튼 만들기

실제 Health.cs를 인게임에서 다양한 상황에서 호출가능하지만 지금은 간단한 실습을 위해 버튼을 만들어보겠습니다.

저는 아래 사진들처럼 버튼 두개를 만들어 세팅했습니다.

 

 

 결과

오늘 이렇게 간단하게 체력 뷰 모델을 만들어서 인게임에서의 Health와 상호작용 하는 실습을 해봤습니다.

실사용시 이벤트와 액션 등으로 더 유연하게 뷰 모델에게 데이터를 전달하여 UI에 데이터를 갱신해줄 수 있습니다.

MVVM을 연습 많이 하시고 UI 정복하시기 바랍니다. 수고하셨습니다.

 

💡핵심 정리

1. MVVM 패턴의 이해와 적용

• View와 Model을 분리하여 유지보수성 향상
• ViewModel을 통한 데이터 바인딩으로 UI 업데이트 자동화
• 체력바 구현을 통해 MVVM 패턴의 실제 적용 방법 학습

📚 같이 보면 좋은 글

https://kimyir.tistory.com/20

유니티 체력바 구현하는 법

체력바 가이드