유니티(Unity) 4.3 #2-1 picture-in-picture 효과 만들기

■ picture-in-picture 효과 만들기

한 개보다 많은 디스플레이 뷰포트(viewport)를 가지는 것은 많은 상황에서 유용합니다, 예를들어, 동시에 다른 장소로 가는 이벤트를 보길 원한다거나, 멀티 플레이어 게임을 위해 창을 분리해야하는 상황이 될 수 있다. 물론, 카메라의 Normalized Viewport Rect 파라메터를 직접 조정해서도 가능하겠지만, 이번 강의에서는 유저의 디스플레이 설정으로부터 더 독립적인 picture-in-picture 카메라를 만들어 본다.

■ 준비하기

예제소스로, 첫 강의에 배포해드렸던 예제코드 폴더의 0423_02_01_02 를 사용할 예정이니 미리 준비해두세요. 예제소스를 미리 다운받지 않으신분들은 아래 글로 이동하면, 최하단부에 예제소스 다운 링크가 있으니 참조하세요.

유니티(Unity) 4.3 #0 유니티 소개와 시작

■ 어떻게 하는가?

picture-in-picture 디스플레이를 생성하기 위해, 다음 설명을 따라하세요:

1. 유니티 프로젝트에 basicLevel  패키지를 가져온다(Import).
2. Project 뷰에서, 02_01_02 폴더안의 basicScene을 오픈한다. 이 basicScene은 directional light, camera 그리고 약간의 geometry가 구현되어 있다.
3. 아래 스크린샷처럼 Hierarchy 뷰에서 Create 드랍다운 메뉴를 선택하고, Camera 옵션을 추가한다.
   
4. 추가한 카메라를 선택하고, Inspector 뷰에서, Depth를 1로 셋팅한다:
   
5. Project 뷰에서 C# script를 생성하고, 이름을 PictureInPicture로 변경한다.
6. 스크립트를 열고, 아래의 코드로 바꿔준다.

   using UnityEngine;
   using System.Collections;
   
   public class PictureInPicture : MonoBehaviour {
   	public enum HorizontalAlignment {left, center, right};
   	public enum VerticalAlignment {top, middle, bottom};
   	public HorizontalAlignment horizontalAlignment = HorizontalAlignment.left;
   	public VerticalAlignment verticalAlignment = VerticalAlignment.top;
   	public enum ScreenDimensions {pixels, screen_percentage};
   	public ScreenDimensions dimensionsIn = ScreenDimensions.pixels;
   	public int width = 50;
   	public int height = 50;
   	public float xOffset = 0f;
   	public float yOffset = 0f;
   	public bool update = true;
   	private int hsize, vsize, hloc, vloc;
   
   	// Use this for initialization
   	void Start () {
   		AdjustCamera ();
   	}
   	
   	// Update is called once per frame
   	void Update () {
   		if (update)
   			AdjustCamera ();
   	}
   
   	void AdjustCamera() {
   		if (dimensionsIn == ScreenDimensions.screen_percentage) {
   			hsize = Mathf.RoundToInt (width * 0.01f * Screen.width);
   			vsize = Mathf.RoundToInt (height * 0.01f * Screen.height);
   		} else {
   			hsize = width;
   			vsize = height;
   		}
   
   		if (horizontalAlignment == HorizontalAlignment.left) {
   			hloc = Mathf.RoundToInt(xOffset * 0.01f * Screen.width);
   		}else if(horizontalAlignment == HorizontalAlignment.right){
   			hloc = Mathf.RoundToInt((Screen.width - hsize)
   			 - (xOffset * 0.01f * Screen.height));
   		}else{
   			hloc = Mathf.RoundToInt(
   				((Screen.width * 0.5f) - (hsize * 0.5f))
   			- (xOffset * 0.01f * Screen.height));
   		}
   
   		if (verticalAlignment == VerticalAlignment.top) {
   			vloc = Mathf.RoundToInt ((Screen.height - vsize) 
   			- (yOffset * 0.01f * Screen.height));
   		}else if(verticalAlignment == VerticalAlignment.bottom){
   			vloc = Mathf.RoundToInt(yOffset * 0.01f * Screen.height);
   		}else{
   			vloc = Mathf.RoundToInt(
   				((Screen.height * 0.5f) - (vsize * 0.5f))
   			- (yOffset * 0.01f * Screen.height));
   		}
   		camera.pixelRect = new Rect (hloc, vloc, hsize, vsize);
   	}
   }

7. 스크립트를 저장하고, 이전에 추가한 새 카메라에 붙여준다(스크립트를 카메라로 드래그해서 붙일 수 있음).
8. 새 카메라의 Audio Listener 컴포넌트 체크를 해제하고, PictureInPicture의 파라메터를 몇 개 변경한다: Horiziontal Alignment를 Right, Vertical Alignment를 Top 그리고 Dimensions In을 Pixels로 변경. XOffset과 YOffset은 0으로 내버려두고, Width를 400, Height를 200으로 변경한다. 최종적으로 아래와 같이 셋팅되면 된다:
   
9. Play를 해보면, 새로운 카메라 뷰포트가 우측 상단 스크린에서 보이게 되었다.
   

■ 어떻게 구성되어 있는가?

우리 스크립트는 카메라의 Normalized Viewport Rect 파라메터를 변경합니다. 따라서, 사용자의 설정에 따라 뷰포트의 크기나 위치가 조정됩니다.

■ 더 알아보기

몇 가지 변경할 수 있는 picture-in-picture 모습들을 알아보자.

1. 스크린 크기의 비례하는 picture-in-picture 만들기
   Dimensions In 옵션을 screen_percentage으로 변경하면, 뷰포트 사이즈는 픽셀이 아닌 실제 스크린 크기(dimensions)로 바뀔 것이다.
2. picture-in-picture의 위치 변경하기
   Vertical Alignment와 Horizontal Alignment는 뷰포트의 origin을 변경합니다. 이것들을 사용해서 원하는 위치에 배치할 수 있습니다.
3. 매 프레임 업데이트 할 때, picture-in-picture 제외하기
   실행 모드에서 뷰포트의 포지션이 원하는걸 원치 않는다면, Update 옵션을 체크해제해라. 또한, 테스트 할 때만 체크하고, 한 번 위치가 정해지고 셋팅이 되면, 체크헤제를 하는것도 좋은 방법이다.