[Unity] 프레임워크 개발 - 8. Canvas
앞선 게시물에서 2D Camera를 설정하는 스크립트를 소개하였는데, 이어서 UGUI로 UI를 표시하기 위한 필수 컴포넌트인 Cavas를 설정하는 스크립트를 설명하고자 한다.
2D Camera는 다음의 링크를 참고
https://everyday-devup.tistory.com/18
▶ Canvas 설정
: Camera와 Canvas의 크기 및 위치를 동일시 하기 위해 Render Mode는 Screen Space - Camera로 설정
: Render Camera는 UI를 보여줄 카메라로 설정
: 다른 옵션은 프로젝트 마다 상황에 맞게 설정
: 자세한 옵션은 Unity 메뉴얼을 참고
https://docs.unity3d.com/kr/current/Manual/class-Canvas.html
▶ Canvas Scaler 설정
: Canvas Scaler는 UI Scale Mode를 Scale Width Screen Size로 설정
: 타겟팅 해상도에 따라 Reference Resolution과 Screen Match Mode를 설정
: 자세한 옵션은 Unity 메뉴얼을 참고
https://docs.unity3d.com/kr/current/Manual/script-CanvasScaler.html
▶ CanvasScaleByCamera2D 컴포넌트
: 해당 컴포넌트는 설정한 2D Camera의 스크린 크기가 변경되는지를 관찰하고 있다가, 스크린 사이즈가 변경되면 Canvas Scaler의 설정 값을 변경하는 기능을 함
: Canvas와 Canvas Scaler의 설정이 필요한 상태 값으로 되어 있지 않으면 강제로 변경하는 기능을 함
: 카메라의 스크린 사이즈와 Canvas Scaler의 Reference Resolution의 값을 동일하게 맞춤으로써 의도치 않은 UI Scale의 변화가 일어나지 않도록 함
( 해당 컴포넌트를 사용하면 해상도에 따라 UI의 크기가 변경되지 않고 어떤 해상도에서든 동일한 크기를 유지하게 됨 )
using UnityEngine;
using UnityEngine.UI;
[RequireComponent( typeof( Canvas ) )]
public class CanvasScaleByCamera2D : MonoBehaviour, IObserver
{
public int Priority { get; set; }
public OBSERVER_STATE State { get; set; }
public Camera2D camera2D;
Canvas _canvas;
CanvasScaler _canvasScaler;
public void OnEnable()
{
OnScreenSize();
camera2D.AddObserver( this );
}
public void OnDisable()
{
camera2D.RemoveObserver( this );
}
public void OnResponse(object obj)
{
OnScreenSize();
}
void OnScreenSize()
{
if( _canvas == null )
{
_canvas = GetComponent<Canvas>();
}
if( _canvas.renderMode != RenderMode.ScreenSpaceCamera )
{
_canvas.renderMode = RenderMode.ScreenSpaceCamera;
_canvas.worldCamera = camera2D.GetComponent<Camera>();
}
if( _canvasScaler == null )
{
_canvasScaler = GetComponent<CanvasScaler>();
}
if( _canvasScaler.uiScaleMode != CanvasScaler.ScaleMode.ScaleWithScreenSize ) {
_canvasScaler.uiScaleMode = CanvasScaler.ScaleMode.ScaleWithScreenSize;
}
_canvasScaler.referenceResolution = new Vector2( camera2D.screenWidth, camera2D.screenHeight );
_canvasScaler.matchWidthOrHeight = camera2D.matchWidth ? 0 : 1;
}
}