FrameWork

[Unity] 프레임워크 개발 - 8. Canvas

EveryDay.DevUp 2020. 5. 8. 22:45

앞선 게시물에서 2D Camera를 설정하는 스크립트를 소개하였는데, 이어서 UGUI로 UI를 표시하기 위한 필수 컴포넌트인 Cavas를 설정하는 스크립트를 설명하고자 한다.

2D Camera는 다음의 링크를 참고

https://everyday-devup.tistory.com/18

 

[Unity] 프레임워크 개발 - 4. 2D Camera

단말기에 따른 Camera 설정의 이론은 다음의 게시물을 통해 확인 가능 https://everyday-devup.tistory.com/7 [Unity] 해상도에 따른 2D Camera 설정 2D 카메라의 Size는 게임의 특징에 따라 가로로 고정 할지 세..

everyday-devup.tistory.com

▶ Canvas 설정

: Camera와 Canvas의 크기 및 위치를 동일시 하기 위해 Render Mode는 Screen Space - Camera로 설정

: Render Camera는 UI를 보여줄 카메라로 설정

: 다른 옵션은 프로젝트 마다 상황에 맞게 설정

: 자세한 옵션은 Unity 메뉴얼을 참고

https://docs.unity3d.com/kr/current/Manual/class-Canvas.html

 

캔버스 - Unity 매뉴얼

Canvas 컴포넌트는 UI가 배치되고 렌더링되는 추상적인 공백을 나타냅니다. 모든 UI 요소는 캔버스 컴포넌트가 부착된 게임 오브젝트의 자식이어야 합니다. 메뉴(GameObject > Create UI)에서 UI 요소 오브젝트를 생성할 경우, 그 씬에 오브젝트가 없다면 캔버스 오브젝트가 자동으로 생성됩니다.

docs.unity3d.com

▶ 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

 

캔버스 스케일러 - Unity 매뉴얼

캔버스 스케일러(Canvas Scaler) 컴포넌트는 캔버스 내 UI 요소의 전체적인 스케일과 픽셀 밀도를 제어하는 데 사용됩니다. 스케일은 글꼴 크기와 이미지 경계 등 캔버스 아래의 모든 요소에 영향을 미칩니다.

docs.unity3d.com

▶ CanvasScaleByCamera2D 컴포넌트

: 해당 컴포넌트는 설정한 2D Camera의 스크린 크기가 변경되는지를 관찰하고 있다가, 스크린 사이즈가 변경되면 Canvas Scaler의 설정 값을 변경하는 기능을 함 

: Canvas와 Canvas Scaler의 설정이 필요한 상태 값으로 되어 있지 않으면 강제로 변경하는 기능을 함

기본 옵션 상태
2D Camera 설정에 따라 자동으로 변경된 설정 값

: 카메라의 스크린 사이즈와 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;
	}
}