유니티 UI (Hp Slider, Text)

 

 

 

▣ 코드 설명
이 코드는 PlayerManager 클래스에서 플레이어의 체력과 점수를 관리하고, 점수 증가 시 점수 텍스트 색상을 빨간색으로 잠시 변경한 뒤 원래 색상으로 되돌리는 기능을 제공합니다. 코루틴을 사용하여 점수 텍스트 색상이 변경되는 동작을 비동기적으로 처리합니다.

▣ 변수 설명
public Slider hpSlider;
HP 슬라이더를 연결하는 변수로, 플레이어의 체력을 시각적으로 표현하는 UI 요소입니다.

public int maxHp = 100;
플레이어의 최대 체력을 설정합니다.

private int currentHp;
현재 체력을 저장하는 변수입니다.

public Image fillImage;
슬라이더의 Fill 오브젝트(HP 바의 채워지는 부분)의 이미지를 참조하기 위한 변수입니다.

public Vector3 hpBarOffset = new Vector3(0, 1.5f, 0);
HP 바가 플레이어의 머리 위에 위치하도록 오프셋 값을 설정합니다.

public Text scoreText;
점수 텍스트를 표시할 UI 요소를 참조하는 변수입니다.

private int score = 0;
현재 점수를 저장하는 변수입니다.

private Color originalColor;
점수 텍스트의 원래 색상을 저장하는 변수입니다.

 

▣ 주요 함수 설명
void Start()
게임이 시작될 때 한 번 실행되는 함수입니다.
플레이어의 체력을 초기화하고, hpSlider의 최댓값과 현재값을 설정합니다.
현재 점수를 0으로 초기화하고 UI Text를 업데이트합니다.
점수 텍스트의 기본 색상을 저장합니다.

void Update()
매 프레임마다 호출되는 함수입니다.
hpSlider를 플레이어의 위치를 기준으로 hpBarOffset만큼 위에 표시합니다.
마우스 클릭이 감지되면, Raycast를 통해 플레이어가 클릭된 경우 TakeDamage()로 체력을 감소시키고, IncreaseScore()로 점수를 증가시킵니다.

void TakeDamage(int damage)
체력을 감소시키는 함수입니다.
체력은 damage 만큼 감소하며, 체력이 0이 되면 Debug.Log로 플레이어가 죽었다는 메시지를 출력합니다.

void IncreaseScore(int amount)
점수를 증가시키는 함수입니다.
점수는 amount 만큼 증가하며, 텍스트를 업데이트합니다.
코루틴 FlashRed()를 호출하여 점수 텍스트 색상을 빨간색으로 변경합니다.

IEnumerator FlashRed()
점수 텍스트의 색상을 빨간색으로 변경한 뒤 원래 색으로 되돌리는 코루틴입니다.
텍스트 색상을 빨간색으로 변경한 후, 0.5초 동안 대기합니다.
0.5초 후 원래 색으로 복구됩니다.

void UpdateScoreText()
scoreText를 점수에 맞춰 업데이트하는 함수입니다.
score 값을 "Score: 0" 형식으로 텍스트에 표시합니다.

 

 

▣  Canvas 컴포넌트
Canvas 컴포넌트는 UI 요소들이 어떻게 배치되고, 화면에 어떻게 렌더링 되는지를 결정하는 가장 기본적인 컴포넌트입니다. 
Render Mode: UI가 화면에 어떻게 렌더링될지 설정합니다.
Screen Space - Overlay: UI가 화면에 직접 렌더링 됩니다. UI는 항상 카메라 앞에 표시되며, 해상도에 따라 크기가 조정됩니다.
Screen Space - Camera: UI가 특정 카메라에 의해 렌더링됩니다. UI가 3D 공간의 특정 위치에 배치된 것처럼 동작하며, 카메라의 위치에 따라 UI의 크기와 배치가 영향을 받습니다.
World Space: UI가 3D 공간의 오브젝트처럼 동작하며, 월드 좌표계에서 위치가 설정됩니다. 3D 게임의 UI로 자주 사용됩니다.
Pixel Perfect: 이 옵션을 활성화하면 UI가 해상도에 상관없이 픽셀 단위로 정확하게 렌더링 됩니다. 해상도에 따른 모서리 깨짐 현상을 방지하는데 유용합니다.
Sort Order: 여러 Canvas가 있을 때 렌더링 순서를 설정하는 값입니다. 숫자가 클수록 앞쪽에 렌더링됩니다.

▣  Canvas Scaler (Canvas 크기 조절기)
Canvas Scaler는 UI의 크기와 해상도에 따른 스케일링 방식을 설정하는 컴포넌트입니다. 이 컴포넌트는 화면 해상도가 달라지더라도 UI가 적절한 크기로 표시되도록 돕습니다.
UI Scale Mode: UI 크기 조절 방식을 설정합니다.
Constant Pixel Size: UI의 크기가 고정된 픽셀 크기로 설정됩니다. 해상도에 상관없이 UI가 일정한 크기를 유지합니다.
Scale With Screen Size: 화면 크기에 맞춰 UI가 스케일됩니다. 이 옵션을 사용하면 다양한 해상도에서 UI가 동일한 비율로 표시됩니다.
Constant Physical Size: 실제 물리적인 크기를 기준으로 UI를 렌더링 합니다. 화면 DPI에 따라 UI 크기가 조정됩니다.
Reference Resolution: Scale With Screen Size 모드일 때 기준이 되는 해상도를 설정합니다. 해상도가 이 값보다 크거나 작을 경우 UI가 이에 맞춰 스케일 됩니다.
Screen Match Mode: 스크린 크기와 비율에 따라 어떻게 UI가 스케일 될지를 결정합니다.
Match Width or Height: 스크린의 너비 또는 높이에 맞춰 스케일을 조정합니다. 슬라이더를 사용해 어느 쪽에 더 중점을 둘 지를 선택할 수 있습니다.

▣ Graphic Raycaster
Graphic Raycaster는 Canvas에서 UI 요소들이 마우스 클릭이나 터치와 같은 상호작용을 받을 수 있도록 하는 컴포넌트입니다. 이 컴포넌트는 사용자가 UI 요소를 클릭하거나 터치했을 때, 해당 요소가 이를 감지하고 반응하도록 해줍니다.
Ignore Reversed Graphics: 뒤집힌 UI 요소(180도 회전된 요소 등)를 클릭하지 못하게 설정할 수 있습니다.
Blocking Objects: UI 요소 뒤에 있는 물체와의 상호작용을 차단할지 여부를 설정합니다.
None: UI 뒤의 오브젝트들과 상호작용이 가능합니다.
2D / 3D: 2D 또는 3D 오브젝트가 UI 뒤에 있을 때, 그 오브젝트들과의 상호작용을 차단합니다.

▣  RectTransform
RectTransform은 모든 UI 요소의 위치, 크기, 앵커(Anchor) 등을 제어하는 컴포넌트입니다. Canvas 또한 RectTransform을 가지고 있으며, UI 요소들이 화면에 어떻게 배치되는지를 설정할 수 있습니다.
Position: Canvas의 위치를 설정합니다. Screen Space - Overlay 모드에서는 이 값이 의미가 없으며, World Space 모드에서는 Canvas가 실제 3D 공간에서 위치를 가집니다.
Width/Height: Canvas의 가로, 세로 크기를 설정합니다.
Anchor: UI의 기준점을 설정합니다. 이를 통해 UI 요소가 화면의 왼쪽 상단, 중앙, 오른쪽 하단 등에 고정되도록 설정할 수 있습니다.
Pivot: UI의 중심점을 설정합니다. UI가 회전하거나 크기가 조정될 때 기준이 되는 지점입니다.

▣  Additional Components (추가 컴포넌트)
Canvas 오브젝트에는 필요에 따라 다른 컴포넌트들이 추가될 수 있습니다. 예를 들어, Canvas에 Image 컴포넌트를 추가하면 배경 이미지로 사용하거나, Animator 컴포넌트를 추가하여 UI 애니메이션을 제어할 수 있습니다.

 

https://docs.unity3d.com/ScriptReference/UIElements.Slider.html

Unity - Scripting API: Slider

https://docs.unity3d.com/ScriptReference/Canvas.html

Unity - Scripting API: Canvas

https://docs.unity3d.com/ScriptReference/RectTransform.html

Unity - Scripting API: RectTransform