TIL(2024,06,28)최종 프로젝트 1차 구현 한개씩 만들어보기

오늘 할 구현은 Unity에서 Image의 Fill Amount를 이용한 레벨 바 구현 및 물의 최대 양 제한

오늘 한 일

UI 설정 및 구성

Canvas 생성 후, Panel 및 Image UI 요소를 추가하여 레벨 바를 구현했습니다.
Panel은 레벨 바와 텍스트를 포함할 컨테이너로 사용했습니다.
Image UI 요소를 사용하여 레벨 바를 시각화하고, Fill Type을 Horizontal로 설정했습니다.
Text UI 요소 두 개를 추가하여 하나는 현재 레벨을, 다른 하나는 물의 재화량을 표시하도록 구성했습니다.

스크립트 작성

ResourceManager 스크립트를 작성하여 물의 양과 레벨을 관리했습니다.
물의 최대 양을 1000으로 제한하고, 레벨은 클릭으로 증가하지 않도록 설정했습니다.
IncreaseWater 메서드를 통해 터치 입력 시 물의 양이 증가하고, 최대 양을 초과하지 않도록 했습니다.
UpdateUI 메서드를 통해 물의 양과 레벨 텍스트, 레벨 바의 Fill Amount를 업데이트했습니다.

using UnityEngine;
using UnityEngine.UI;

public class ResourceManager : MonoBehaviour
{
    public int waterAmount = 0;
    public int currentLevel = 1;
    private const int maxWaterAmount = 1000; // 물의 최대 양
    public Text waterText; // 물의 재화량을 표시할 텍스트
    public Text levelText; // 현재 레벨을 표시할 텍스트
    public Image levelFillImage; // 레벨 바 이미지

    void Start()
    {
        UpdateUI(); // 초기 UI 업데이트
    }

    // 물의 양을 증가시키는 메서드
    public void IncreaseWater(int amount)
    {
        waterAmount += amount;
        if (waterAmount > maxWaterAmount)
        {
            waterAmount = maxWaterAmount;
        }
        UpdateUI();
    }

    // UI를 업데이트하는 메서드
    private void UpdateUI()
    {
        waterText.text = "Water: " + waterAmount;
        levelText.text = "Level: " + currentLevel;
        levelFillImage.fillAmount = (float)waterAmount / maxWaterAmount;
    }
}

TouchInputManager 스크립트 작성

터치 입력을 감지하여 물의 양을 증가시키는 TouchInputManager 스크립트를 작성했습니다.
터치 또는 마우스 클릭 시 IncreaseWater 메서드를 호출하여 물의 양을 증가시켰습니다.

using UnityEngine;

public class TouchInputManager : MonoBehaviour
{
    public ResourceManager resourceManager; // ResourceManager 참조

    void Update()
    {
        // 터치 입력 감지
        if (Input.GetMouseButtonDown(0)) // 마우스 왼쪽 버튼 클릭 또는 터치 입력
        {
            resourceManager.IncreaseWater(1); // 물의 양 증가
        }
    }
}

오브젝트 설정 및 연결

Unity 에디터에서 Canvas에 있는 Text UI 요소를 ResourceManager 스크립트의 waterText 및 levelText 필드에 드래그하여 연결했습니다.
Image UI 요소를 ResourceManager 스크립트의 levelFillImage 필드에 드래그하여 연결했습니다.
TouchInputManager 스크립트를 빈 오브젝트에 추가하고, resourceManager 필드에 ResourceManager오브젝트를 드래그하여 연결했습니다.

배운 점

Image 컴포넌트의 Fill Amount 속성을 사용하여 레벨 바를 쉽고 직관적으로 구현할 수 있다.
Unity에서 Text와 Image UI 요소를 활용하여 실시간으로 변하는 데이터를 시각적으로 표현하는 방법을 익힘,
const 키워드를 사용하여 상수를 정의하고, 특정 값이 초과되지 않도록 제한하는 방법을 학습,
터치 입력을 감지하여 특정 동작을 수행하는 스크립트를 작성하는 방법을 배웠습니다.