Unity UI - 깔끔한 사이즈 변경을 도와주는 Image Type

유니티에서 UI를 만지다 보면 해당 UI를 본래 스프라이트 사이즈보다 크거나 작게 크기를 변경해야 하는 경우가 잦습니다.

그러한 경우 위 사진처럼 가장자리가 보기 안 좋게 늘어나는 현상이 대부분일 것입니다.

 

이때 해당 이미지 컴포넌트의 Image Type이 큰 역할을 발합니다.

 

Image Type을 이용해 깔끔한 UI 이미지 변경을 시도해보고 싶다면 선행적으로 마쳐야 하는 작업이 있습니다.

해당 스프라이트 에셋을 클릭해 인스펙터에서 Sprite Mode-Mesh Type을 Full Rect로 설정한 후 Sprite Editor를 클릭합니다.

스프라이트 가장자리의 녹색 기준선들을 드래그해 테두리 안쪽까지 맞춰주고 우상단 Apply 버튼을 누릅니다.

녹색 선 바깥의 테두리들은 사이즈 변경이 고정될 것입니다.

Full Rect 설정을 맞춘 후 해당 이미지의 Image Type을 Sliced로 변경해보았습니다.

후줄근하게 늘어졌던 테두리가 원래 사이즈를 되찾고 안쪽 공백만 늘어나 훨씬 보기 좋게 돌아왔습니다.

 

Fill Center를 해제해 테두리를 제외한 영역을 빈 공간으로 만들어버릴 수도 있고

 

Pixel Per Unit Multiplier를 조절해 테두리를 더욱 두껍게 하거나 반대로 얇게 만들 수도 있습니다.

 

 

Image Type - Tiled는 언뜻 보기에 Sliced랑 별 차이가 없어보입니다.

Sliced와의 차이를 살펴보기 위해 Pixels Per Unit Multiplier를 조절해보겠습니다.

Sliced는 내부 영역과 테두리 이미지가 확대와 축소의 방식으로 변화하는 것을 볼 수 있습니다.

Tiled는 내부 영역과 테두리가 단순이 확대,축소되는 것이 아니라 타일을 쌓는 것처럼 패턴 방식으로 변화하는 것을 알 수 있습니다. 

Tiled 타입은 모자이크 타일이라던가, 대충 요런 패턴식 이미지 UI에 적합할 것입니다.

 

마지막 Image Type은 Filled 타입입니다.

해당 타입은 위 Sliced랑 Tiled와는 그 사용처가 사뭇 다릅니다.

 

Filled Type은 Fill Amount를 수정하여 해당 이미지의 채우기를 조정할 수 있는 기능을 제공합니다.

360º 회전식 외에도 수직,수평,90º,180º 설정도 가능합니다.

 

보통 능력의 쿨타임이나 기한 카운트, 지속시간 등 시간에 관련된 UI에서 사용하면 유용합니다.

 

public class test : MonoBehaviour
{
  [SerializeField] private Image MyImage = null;
  [SerializeField] private TextMeshProUGUI MyTMP = null;
  private float TargetTime = 3.0f;

  private IEnumerator count()
  {
    float _time = 0.0f;
    while(_time< TargetTime)
    {
      MyImage.fillAmount = _time / TargetTime;
      MyTMP.text = (TargetTime - _time).ToString("n2");
      _time += Time.deltaTime;
      yield return null;
    }
    MyTMP.text = "0.00";
    MyImage.fillAmount = 1.0f;
  }
  private void Start()
  {
    StartCoroutine(count());
  }
}

 

 

Filled Amount에서 이미지가 변경되는 시작점을 변경할 수도 있습니다.

 

ClockWise를 설정해 시계 방향/반시계 방향을 결정할 수도 있습니다.

 

Perserve Aspect는 이미지 스프라이트의 원 비율을 유지할 수 있도록 도와줍니다.

이 기능은 딱히 써 본적이 없어서 어디에 활용할지 잘 상상이 가진 않습니다.