MMProgressBar

요약: 이 섹션에서는 Feel을 사용하여 게임에서 매력적인 진행 바를 만드는 방법을 설명합니다.

테이블 내용 소개 설정           -  MM Progress Bar 설정 방법 스크립트를 통해 막대값 제어 진행 막대 커스터마이징 스크립트를 통해 막대를 제어하는 추가 방법 MM Health Bars           -   MMHealthBar 컴포넌트를 사용하여 자동으로 체력 막대를 그리는 방법

 

소개

 

진행 막대는 게임에서 가장 일반적인 UI 요소 중 하나입니다. 진행 막대는 수치와 총 수치를 시각화하는 훌륭한 방법이며, 체력, 스태미나, 마나, 탄약, 시간 제한 등 다양한 용도로 사용될 수 있습니다. 따라서 게임에서 여러 개의 진행 막대가 필요할 가능성이 큽니다. 진행 막대를 만드는 것은 어려운 일이 아니지만, 멋지고 직관적인 막대를 만드는 것은 예술에 가깝습니다.

MMProgressBar 컴포넌트는 이러한 어려움을 해결해주며, 쉽게 제어할 수 있는 API를 통해 빠르게 멋진 진행 막대를 제공합니다. 이 컴포넌트는 UI 요소(보통 이미지)의 속성을 애니메이션화하여 두 범위 사이의 값을 반영할 수 있습니다.

이 컴포넌트는 여러 "막대"(일반적으로 가로 직사각형이지만, 원, 정사각형, 이미지 등 원하는 모든 형태로 작동할 수 있음)를 제어합니다: 현재 값의 막대를 나타내는 ForegroundBar와 선택적으로 지연된 두 개의 막대입니다. DelayedBarDecreasing은 막대 값이 감소할 때 ForegroundBar보다 뒤처지며, 플레이어가 잃어버린 값을 확인할 수 있게 해줍니다. DelayedBarIncreasing은 막대 값이 증가할 때 먼저 움직이며, ForegroundBar는 그 뒤를 따라 플레이어가 얻은 값을 보여줍니다.

이 진행 막대는 게임 내 어디에나 배치할 수 있습니다. HUD에 있거나 월드 캔버스에 있을 수 있으며, 이는 여러분의 선택에 달려 있습니다.

FeelMMProgressBar 데모 씬에서 MMProgressBar가 동작하는 예시를 확인할 수 있습니다.

 

 

설정

MMProgressBar를 설정하는 것은 매우 쉽습니다. 다음 단계에서는 단순한 직사각형을 막대로 사용하는 매우 기본적인 설정 방법을 안내하겠습니다.

 

MM Progress Bar 설정 방법

Unity 2022.3.23f1(이상)에서 새로운 프로젝트를 생성하고 패키지 매니저를 통해 Feel v4.1.2(이상)를 가져옵니다. 새 빈 씬을 생성하고, UI > Canvas를 추가합니다. 해당 Canvas 아래에 빈 자식 오브젝트를 생성하고 위치를 (0, 0)으로 설정한 후, 이름을 MyBar로 설정합니다. MyBar 아래에 UI > Image를 추가하고 위치를 (0, 0)으로 설정한 후, 이름을 BackgroundBar로 설정합니다. 색상은 검정색으로, 너비는 300으로, Pivot.x는 0으로 설정합니다. MyBar를 복제하여 이름을 DelayedBarDecreasing으로 설정하고 색상을 주황색으로 변경합니다. DelayedBarDecreasing을 복제하여 이름을 DelayedBarIncreasing으로 설정하고 색상을 노란색으로 변경합니다. DelayedBarIncreasing을 복제하여 이름을 ForegroundBar로 설정하고 색상을 초록색으로 변경합니다. 이제 네 개의 막대가 겹쳐진 상태로 (초록색 막대가 가장 위에 표시됨) MyBar에 MMProgressBar 컴포넌트를 추가합니다. (주의: Feel에는 두 개의 MMProgressBar 컴포넌트가 있습니다. NV 데모 전용이 아닌 컬러 인스펙터가 있는 것을 선택합니다. Add Component > More Mountains > Tools > GUI > MM Progress Bar 경로를 따라 추가합니다.) 최상단 인스펙터 그룹(Bindings)을 펼치고 ForegroundBar 및 DelayedBars를 해당 슬롯에 드래그합니다. FillSettings 접기를 펼치고 SetInitialFillValueOnStart를 true로 설정하고 InitialFillValue를 1로 설정합니다, BarFillMode는 FixedDuration으로 설정합니다. 에디터에서 재생 버튼을 누르고, 인스펙터 하단의 Debug 접기에서 Minus10 / Plus10Percent 버튼을 누르면 작동하는 진행 막대가 생성됩니다. 축하합니다!

 

 

스크립트를 통해 막대값 제어

디버그 컨트롤도 좋지만, 막대의 값을 제어하기 위해 직접 작성한 스크립트를 사용하고 싶을 것입니다. 진행 막대 API 메서드를 사용하면 매우 쉽게 값을 제어할 수 있습니다. 막대에 대한 참조와 간단한 메서드 호출만 필요합니다. 다음 클래스를 프로젝트에 추가해 봅시다(새 클래스를 생성하고 이름을 TestBar로 한 후 다음 내용을 붙여넣습니다).

using UnityEngine;
using MoreMountains.Tools;

public class TestBar : MonoBehaviour
{
    // 진행 막대에 대한 참조를 얻기 위해 이 슬롯에 드래그 앤 드롭합니다.
    public MMProgressBar TargetProgressBar;
    // 0과 100 사이의 값, 게임에서 주인공의 체력 값을 나타낼 수 있습니다.
    [Range(0f, 100f)] public float Value;
    // ChangeBarValue 메서드를 호출하기 위해 인스펙터에 표시할 테스트 버튼
    [MMInspectorButton("ChangeBarValue")] public bool ChangeBarValueBtn;
    
    void ChangeBarValue()
    {
        TargetProgressBar.UpdateBar(Value, 0f, 100f);
    }
}

그럼, 씬에서 새 빈 오브젝트를 생성하고, TestBar 컴포넌트를 추가한 후, MyBar를 TargetProgressBar 슬롯에 드래그하여 연결하세요. 에디터에서 Play 버튼을 눌러 재생 모드로 들어간 후, TestBar 인스펙터에서 슬라이더를 사용하여 Value 값을 설정하고 ChangeBarValue 버튼을 클릭하세요. 물론, 실제 게임에서는 캐릭터가 데미지를 입거나 마나를 사용할 때마다 UpdateBar 호출을 통해 진행 막대의 값을 업데이트하게 될 것입니다.

 

 

진행 막대 커스터마이징

MMProgressBar 인스펙터를 통해 막대를 원하는 대로 커스터마이징할 수 있습니다. 다양한 접기 항목 아래에서 막대의 모든 측면을 제어할 수 있는 필드를 찾을 수 있습니다. 대부분의 필드는 설명이 필요 없지만, 주요 옵션 목록은 다음과 같습니다:

• Bindings: 전경 및 지연 막대를 해당 슬롯에 드래그해야 합니다. PlayerID는 다른 스크립트에서 접근할 때 막대를 식별하는 데 사용할 수 있는 ID입니다.
• Fill Settings: 현재 값이 0 또는 1일 때 막대의 채움 값을 정의할 수 있으며, 시작 시 자동으로 채워지는 값을 설정할 수 있습니다(코드에서 초기화를 처리하기 위해 false로 설정하는 것이 좋습니다). 그 다음, 막대 방향, 채움 모드(채움 모드를 선택할 경우 Filled 타입으로 설정된 이미지를 사용해야 함), 그리고 작업할 타임스케일을 정의할 수 있습니다. 마지막으로, BarFillMode를 통해 막대가 고정된 기간 동안 움직이도록 설정할 수 있습니다(막대가 한 지점에서 다른 지점으로 이동하는 데 항상 X초가 걸리며, 거리에 관계없이) 또는 SpeedBased로 설정하여 막대가 더 큰 간격을 이동하는 데 더 오래 걸리도록 할 수 있습니다.
• Bar settings: 각 막대에 대해 속도와 지속 시간을 설정할 수 있으며(어느 것이 사용될지는 BarFillMode에 따라 다름), 이동 곡선을 설정할 수 있습니다.
• Bump: 막대는 내장된 "범프" 피드백 기능을 제공하여 값이 변경될 때마다 자동으로 막대의 크기와 색상을 변경할 수 있습니다. 증가 또는 감소(또는 둘 다)할 때 "범프"를 적용할지 여부를 결정할 수 있으며, 값이 크게 변할 때 더 큰 범프를 가질 수 있도록 강도 배율을 설정할 수 있습니다.
• Events: 막대는 범프부터 이동 시작/중지에 이르는 생애 주기의 모든 단계에 대해 Unity Events를 제공합니다. 이를 통해 다른 컴포넌트(일반적으로 MMF Player)를 연결하여 막대를 더욱 향상시킬 수 있습니다. HorizontalBar가 막대가 감소하고 증가할 때 다양한 MMF Player를 트리거하는 FeelMMProgressBar 데모에서 그 예를 확인할 수 있습니다.
• Text: 선택적으로 Text 또는 TextMeshPro 컴포넌트를 막대에 연결하여 막대와 함께 텍스트 값을 업데이트할 수 있습니다. 접두사와 접미사를 추가하고 총 값을 표시할지 여부를 결정하며, 표시할 텍스트 형식을 정의할 수 있습니다.
• Debug: 막대를 업데이트하거나 DebugNewTargetValue 슬라이더에 설정된 값으로 막대를 설정하고, 범프를 강제하거나 막대를 10%씩 이동시키는 버튼 세트입니다.
• Debug Read Only: 막대의 진행 상황을 실시간으로 보여주는 4개의 슬라이더(이것들은 읽기 전용입니다).

 

스크립트를 통해 막대를 제어하는 추가 방법

다른 모든 Feel 클래스와 마찬가지로, 해당 클래스의 메서드에 대한 자세한 정보는 API 문서나 클래스 자체에서 확인할 수 있습니다(모든 클래스는 주석이 잘 달려 있습니다). 그러나 막대와 상호 작용하는 주요 방법은 다음과 같습니다. 아래 모든 코드 라인에서 TargetProgressBar는 MMProgressBar에 대한 참조입니다.

막대의 값을 변경하는 주요 메서드는 두 가지 유형이 있습니다: Update와 Set입니다. Update는 값을 변경하고 범프(스케일, 색상 등에 영향을 미치는 시각적 피드백을 트리거하며, 위치로 이동함)를 트리거합니다. 반면 Set 메서드는 범프를 발생시키지 않고, 막대를 최종 상태로 가상 텔레포트합니다.

// 지정한 값과 범위 사이에서 막대를 업데이트하며, 범프를 발생시킵니다
TargetProgressBar.UpdateBar(Value, SomeMinValue, SomeMaxValue);
// 예를 들어, 아래 코드는 막대를 50%로 설정합니다:
TargetProgressBar.UpdateBar(20f, 0f, 40f);

// 지정된 정규화된 값(0f와 1f 사이)으로 막대를 업데이트하며, 범프를 발생시킵니다
TargetProgressBar.UpdateBar01(NormalizedValue);
// 예를 들어, 아래 코드는 막대를 50%로 설정합니다:
TargetProgressBar.UpdateBar01(0.5f);

// 지정한 값으로 즉시 막대 값을 설정하며, 범프를 발생시키지 않습니다
TargetProgressBar.SetBar(Value, SomeMinValue, SomeMaxValue);
// 지정된 정규화된 값으로 즉시 막대 값을 설정하며, 범프를 발생시키지 않습니다
TargetProgressBar.SetBar01(NormalizedValue);

API 문서를 확인하여 막대를 제어하는 데 사용할 수 있는 다양한 메서드에 대한 추가 정보를 꼭 확인하세요!

 

 

MM Health Bars

MMHealthBar 컴포넌트는 MMProgressBar의 기능을 활용하여 클릭 한 번으로 객체에 체력 막대(또는 다른 막대)를 추가할 수 있는 솔루션을 제공합니다. 이 (체력) 막대는 오버레이 UI가 아닌 월드 내에 존재하며, 부착된 객체를 따라다니며, 빌보드, 자동 숨김, 사망 시 작업 수행 등의 옵션을 제공합니다. 월드 내에 위치한 작은 MM Progress Bars를 사용하고 싶지만, 모든 측면을 제어할 필요가 없는 경우 유용한 컴포넌트입니다. 다음은 설정 단계입니다:

 

MMHealthBar 컴포넌트를 사용하여 자동으로 체력 막대를 그리는 방법

Unity 2022.3.23f1(이상)에서 새로운 프로젝트를 생성하고 패키지 매니저를 통해 Feel v4.1.2(이상)를 가져옵니다. 새로운 빈 씬을 생성합니다. 큐브를 생성하고, 위치를 (0,0,0)으로 설정합니다. 큐브에 MMHealthBar 컴포넌트를 추가합니다. 재생 버튼을 누르면 큐브 위에 체력 막대가 그려지는 것을 확인할 수 있습니다. MMHealthBar와 상호작용하고 업데이트하려면 데이터를 전달하여 업데이트해야 합니다. 이를 위해 스크립트를 사용하겠습니다. 새로운 C# 클래스를 생성하고, 이름을 TestMMHealthBar로 설정한 후 다음 코드를 붙여넣습니다:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using MoreMountains.Tools;

/// <summary>
/// MMHealthBar 컴포넌트와 상호작용하고 테스트하는 데 사용되는 간단한 클래스입니다.
/// 이를 사용하려면, MMHealthBar가 있는 객체에 추가하고 런타임 시 CurrentHealth 슬라이더를 이동한 후 Test 버튼을 눌러 막대를 업데이트합니다.
/// </summary>
public class TestMMHealthBar : MonoBehaviour
{
    [Range(0f, 100f)]
    public float CurrentHealth = 50f;

    protected float _minimumHealth = 0f;
    protected float _maximumHealth = 100f;
    protected MMHealthBar _targetHealthBar;

    [MMInspectorButton("Test")] public bool TestButton;

    protected virtual void Awake()
    {
        _targetHealthBar = this.gameObject.GetComponent<MMHealthBar>();
    }

    public virtual void Test()
    {
        if (_targetHealthBar != null)
        {
            _targetHealthBar.UpdateBar(CurrentHealth, _minimumHealth, _maximumHealth, true);    
        }
    }
}

이 컴포넌트를 큐브에 추가하고, 재생 버튼을 누른 후 런타임 시 인스펙터에서 CurrentHealth 슬라이더를 이동하세요. Test 버튼을 누를 때마다 체력 막대가 업데이트됩니다.