Unity/UI 5

UI - Scroll View를 사용하여 UI 세로로 나열하기

가끔 Scroll View를 사용하여 리스트 UI를 구현할 때 세로로 UI가 일정한 간격으로 나열되게 하고 싶을 때가 있다.그러기 위해선 간단한 세팅이 필요하다. 1. Scroll View 구성Scroll View > Viewport > Content 구조Content 설정:Vertical Layout Group 추가 (Spacing 10)Content Size Fitter: Vertical Fit → Preferred SizePivot: (0.5, 1), Anchor Min/Max: (0,1)/(1,1)✅ 위에서 아래로 자연스럽게 추가되는 구조 완성 위 설정을 하게 되면 Content안에 UI를 추가 했을 때 일정한 간격으로 생성(나열)되게 된다. 다음엔 동적으로 Content안에 UI를 생성해보도록..

Unity/UI 2025.08.05

UI - 동그란 로딩 UI 구현하기

이미지처럼 동그란 로딩 UI를 만들고 싶다면 Image 컴포넌트의 Fill Method: Radial 360을 이용해서fillAmount 값을 0 → 1로 천천히 증가시키면 된다! ✅ 1. UI 준비 방법Image 컴포넌트를 추가한 오브젝트를 만들고,Image Type을 FilledFill Method를 Radial 360Fill Origin을 원하는 방향 (예: Bottom)Clockwise 체크 (시계방향) ✅ 2. FillAmount를 코루틴으로 애니메이션 주기using UnityEngine;using UnityEngine.UI;using System.Collections;public class CircularLoader : MonoBehaviour{ public Image fillImage..

Unity/UI 2025.08.03

Unity - 시간 포맷 개념 정리(UI)

✅ ⏱ 시간 포맷 관련 수학 개념 정리📘 1. 초 → 분:초 변환 공식전체 초에서 분(min) 은 전체초 / 60남은 초(sec) 는 전체초 % 60수학식:minutes = totalSeconds ÷ 60 seconds = totalSeconds % 60예:totalSeconds = 125minutes = 125 ÷ 60 = 2seconds = 125 % 60 = 5=> 02:05📘 2. C# 예제 코드int totalSeconds = 125;int minutes = totalSeconds / 60; // 2int seconds = totalSeconds % 60; // 5string formattedTime = string.Format("{0:00}:{1:00}", minutes, secon..

Unity/UI 2025.07.02

Unity 체력 UI 만들기

Unity에서 Slider을 통해 캐릭터 체력을 만들어보자. ※본 글에서는 몬스터나 캐릭터 위에 뜨는 HP 체력바가 아닌 배틀그라운드 같은 게임처럼 특정 지점에 존재하는 체력 바를 구현할 것다. 1. 먼저 Slider 오브젝트를 추가해주자 2. 다음으로 Handle은 필요없으므로 지워주도록 하자.  속성명설명Interactable슬라이더를 사용자가 조작할 수 있는지 여부 설정Transition슬라이더 핸들에 적용할 전환 방식 (ex.Color, Tint, Animation 등)Target Graphic전환 효과를 적용할 UI 그래픽 (Handle 이미지)Color 설정들Normal, Highlighted, Pressed, Selected, Disabled 색상 설정Color Multiplier전환 색상의..

Unity/UI 2025.03.31