■ picture-in-picture 효과 만들기

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


■ 준비하기

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


■ 어떻게 하는가?

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

  1. 유니티 프로젝트에 basicLevel  패키지를 가져온다(Import).
  2. Project 뷰에서, 02_01_02 폴더안의 basicScene을 오픈한다. 이 basicScene은 directional light, camera 그리고 약간의 geometry가 구현되어 있다.
  3. 아래 스크린샷처럼 Hierarchy 뷰에서 Create 드랍다운 메뉴를 선택하고, Camera 옵션을 추가한다.
  4. 추가한 카메라를 선택하고, Inspector 뷰에서, Depth1로 셋팅한다:
  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 AlignmentRight, Vertical AlignmentTop 그리고 Dimensions InPixels로 변경. XOffsetYOffset0으로 내버려두고, Width400, Height200으로 변경한다. 최종적으로 아래와 같이 셋팅되면 된다:
  9. Play를 해보면, 새로운 카메라 뷰포트가 우측 상단 스크린에서 보이게 되었다.

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

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


■ 더 알아보기

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

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

도움이 되셧다면 "공감" 버튼을 눌러주세요. 로그인 필요 없습니다 :)