유니티 입문 - 10 UI

Ui 
Canvas
- Render Mode
 - Screen Space - Overlay: 캔버스와 하나가 된다
 - Screen Space - Camera: 랜더 카메라 설정, 카메라와 한 가운데에 고정시킨다
   - Plane Distance: 카메라와의 캔버스 거리
 - World Space: 월드에 고정 시킨다. 
- Pixel Perfect: 픽셀 최적화
- Sort Order: 캔버스간의 순서
- Target Display: 어떤 모니터에 띄울지 
- Additional Shader Channels: 셰이더 추가
UI면 creen Space - Overlay
카메라에 가려져서 안보여야 한다 Screen Space - Camera
한 곳에 박아두고 우리가 다가가야 보인다 World Space

Canvas Scaler 
- UI Scale Mode: 
 - Constant Pixel Size: 화면 사이즈 그대로 해상도가 바뀌어도 고정
 - Scale With Screen Size: 해상도에 맞춰 같이 늘어나거나 줄어듬 <- 대부분 이거 사용
 - Constant Physical Size: 모니터 DPI에 따라 결정

Graphic Raycaster: 이벤트 작용, 클릭을 누르면 머가 나온다거나

TEXT
Font Size: 텍스트 폰트 크기
만약 폰트 사이즈를 늘렸는데 안나온다면
Horizontal Overflow: Overflow
Vertical Overflow: Overflow
를 하면 해결이 된다.

Best Fit: 폰트 최대 최소 사이즈 설정, 특정 영역에 글이 안나가게 설정

Raycast Target: 클릭을 방해 안받고 싶다면 선택 해제

Image
Source Image에 다양한게 있다 우선 Background 부터
- Background
 - Image Type: 시간 관련된 이미지를 할때 편함
  - Filled: 이미지 안의 내용을 어떻게 채울지 결정
   - Fill Method: 이미지가 어떻게 사라지는지 결정해 주는거
   - Fill Amount: 점점 이미지가 사라진다.

Button
버튼이다. 위에 내용과 있는건 비슷하다.
 - Button Component
  - Interactable: 상호작용
  - Transition: 마우스를 가져다 대면 회색이 되고, 누르면 검은색이되는 등 반응 관련
   - Sprite Swap: 마우스를 누르거나 가져오면 바뀌는거
   - Animation: 누르면 버튼이 사라진다거나 이런거
     - Auto Generace Animation: 애니메이터 생성

On Click(): 수행할 함수 설정

C#스크립트

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; // 이거 넣어야됨

public class Test : MonoBehaviour
{
    [SerializeField] private Text txt_name;
    [SerializeField] private Image img_name;

    public void Change()
    {
        txt_name.text = "변경됨";
        img_name.fillAmount = 0.5f;
    }
}

이렇게 만든 뒤, Canvas에 스크립트를 넣으면 
txt_name 과 img_name이 나온다. 여기에 우리가 만든 text와 image를 넣고
Button으로 가서 On Click()에 +를 누르면 None이 나오는데, None에 Canvas를 넣고, Runtime Only 옆에 change를 넣고 실행하면 버튼을 누를때 작동이 잘 된다.

상호작용이 된걸 확인하고 싶으면 Button Component에 가 Highlighted Color와 Pressed Color의 색을 바꿔 확인해 보자

이미지가 사라지는 코드

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; // 이거 넣어야됨

public class Test : MonoBehaviour
{
    [SerializeField] private Text txt_name;
    [SerializeField] private Image img_name;

    private bool isCoolTime = false;

    private float currentTime = 1f;


    private void Update()
    {
        if (isCoolTime)
        {
            currentTime -= Time.deltaTime;
            img_name.fillAmount = currentTime;
        }
    }
    public void Change()
    {
        txt_name.text = "변경됨";
        isCoolTime = true;
    }
}

이렇게 저장후 다시 유니티에서 실행하면 우리가 만든 이미지가 버튼을 누를때 사라진다.

만약 다시 이미지를 생성하고 싶으면

private void Update()
{
    if (isCoolTime)
    {
        currentTime -= Time.deltaTime;
        img_name.fillAmount = currentTime;

        if(currentTime <= 0)
        {
            isCoolTime = false;
            currentTime = 1f;
            img_name.fillAmount = currentTime;
        }
    }
}

이렇게 추가하면 된다.

이미지를 천천히 사라지게 하고 싶으면

private float delayTime = 5f;
private float currentTime = 5f;


private void Update()
{
    if (isCoolTime)
    {
        currentTime -= Time.deltaTime;
        img_name.fillAmount = currentTime / delayTime;

        if(currentTime <= 0)
        {
            isCoolTime = false;
            currentTime = 1f;
            img_name.fillAmount = currentTime;
        }
    }
}

(추가된 부분만 넣었다)
delayTime을 넣어  img_name.fillAmount = currentTime / delayTime; 하면 된다