rejin 아바타

서브컬처 게이머

세상의 모든 아름다운 것들을 위하여

3840 x 2160 1

다이얼로그 UI 다중 해상도 대응 레이아웃 기획

기획의도

다이얼로그 UI에서 배경화면을 다중 해상도를 지원할 수 있는 레이아웃 시스템을 만든다.

결과물 이미지(예시)

다이얼로그 UI 메인 표지

문서 설명

  • 아래는 2D 비주얼 노벨 스타일 다이얼로그 UI를 기획하기 위한 구현 기획서입니다.
  • 일부 예외처리가 필요하거나 보충 설명이 필요한 경우 파란색 텍스트로 표기해두었습니다.
  • 용어 정의
    • 배경화면 : 2D 배경화면(및 리소스)
    • 캐릭터 : 2D 포트레이트(및 리소스)
  1. 배경화면
    1. 배경화면은 16:9 종횡비를 기본(Default) 화면 비율로 전제한다.
      1. 해당 비율을 벗어나는 종횡비의 경우, 최대 1:1 ~ 22:9까지 지원한다.
        • 16:9 종횡비보다 가로로 긴 종횡비의 이미지는 화면 좌우에 필러박스를 사용한다.
        • 4:3 종횡비보다 세로로 긴 종횡비의 이미지는 화면 위아래에 레터박스를 사용한다.
      2. 이 이미지를 벗어나는 경우 로그에 경고 메시지(Warning)를 출력한다.
        • 로그 예시 : [배경리소스이름] & log(‘오류 발생. 이미지 종횡비가 규약에 맞는지 확인해 주세요.‘)
    2. 이미지 리소스의 기본 사이즈는 3840 x 2160(UHD)이다.
      1. 비율이 동일하되, 이미지의 사이즈가 작은 이미지가 사용된 경우 강제로 3840 x 2160 해상도로 업스케일링한다.
        • [내부 규약] 육안으로 확인한 이미지의 퀄리티가 낮을 경우 업스케일의 결과물 이미지를 사용하지 않는다.
        • [내부 규약] 이미지의 사이즈가 큰 경우 위 해상도로 이미지를 조정해 사용한다.
      2. 비율이 동일하지 않은 경우,
        1. 이미지의 가로 픽셀이 3840 미만 & 세로 픽셀 2160 미만인 경우,
        2. 이미지의 가로 픽셀이 3840 이상 & 세로 픽셀 2160 미만인 경우,
          • 이미지의 세로 픽셀을 2160px로 업스케일링한다.
          • [내부 규약] 이 이미지는 가로로 패닝하기 위한 연출용 배경으로만 사용한다.
        3. 이미지의 가로 픽셀이 3840 미만 & 세로 픽셀 2160 이상인 경우,
          • 이미지의 가로 픽셀을 3840px으로 업스케일링한다.
          • [내부 규약] 이 이미지는 세로로 패닝하기 위한 연출용 배경으로만 사용한다.
        4. 이미지의 가로 픽셀이 3840 이상 & 세로 픽셀이 2160 이상인 경우,
    3. 배경화면은 화면 정중앙(0,0)을 기준으로 배치한다.
    4. 배경화면에 사용하는 이미지의 확장자는 .jpg이다.
      • [내부 규약] png 배경도 출력에는 문제는 없으나, 인게임 용량 문제로 인해 사용을 제한한다.
  2. 캐릭터 레이어
    1. 캐릭터는 미리 지정된 위치 슬롯(이하 슬롯)에 배치한다.
      1. 슬롯은 1번, 2번, 3번, 4번, 5번으로 총 다섯 개다.
        1. 슬롯 3번 좌표는 (0, 200)이다.
        2. 슬롯 2번, 4번 좌표는 각각 (-300, 200), (300, 200)이다.
        3. 슬롯 1번, 5번 좌표는 각각 (-600, 200), (600, 200)이다.
      2. 캐릭터의 적정 배율 및 x, y축 좌표 위치는 엔진에서 별개의 시트를 참조하여 반영한다.
        1. 시트 이름 : DialogueCharacterOffset
  • 다이얼로그 UI에 필요한 최소한의 레이어는 아래의 표와 같다.
  • 배경 및 캐릭터와 무관한 레이어(예: 팝업 레이어 등)은 이 기획서에서는 다루지 않는다.
  • 레이어 번호는 상대 순서이며, 절대 순서가 아니다.
    • 예를 들어, 블랙 레이어는 입력가능 레이어 번호 중에서 가장 마지막 번호(99)가 되어도 무방하다.
번호이름설명레이어 번호(높을수록 뒤에 있다)
1캐릭터 이모티콘 레이어캐릭터 이모티콘이 노출되는 영역의 레이어1
2캐릭터 레이어캐릭터 슬롯 1번 ~ 5번에 해당하는 레이어.2
3배경화면 이펙트 레이어배경 이펙트(예 : 폭발 먼지 애니메이션)가 재생되는 레이어3
4배경화면 레이어배경화면이 위치한 레이어4
5종횡비 대응 레이어종횡비가 4:3 해상도 이상일 경우 위, 아래로 레터박스가 나타나는 영역 종횡비가 20:9 해상도 이상일 경우 좌, 우로 필러박스가 나타나는 영역5
6블랙 레이어해상도 3840 x 2160(종횡비 16:9)의 블랙 화면. 만약 배경화면 레이어가 화면을 모두 덮지 않더라도, 블랙 레이어가 있음으로써 뒤에 별개의 씬(예: 로비 씬)이 노출되지 않게 한다.6

플레이어가 볼 수 있는 영역의 크기는 배경화면 리소스 크기의 약 0.83(6:5)배로 제한한다.

3840 x 2160 1

플레이어가 볼 수 있는 영역을 제한하는 이유는 아래와 같다.

  • 다중 레이어 지원
  • 배경 연출 애니메이션 대응

각 해상도에 따른 플레이어가 볼 수 있는 영역은 아래와 같다.

16 9 1
4 3
21 9

좌우의 그레이스케일 영역 안의 배경은 필러박스로 가려진다.

1 1

위 아래의 그레이스케일 영역 안의 배경은 레터박스로 가려진다.