Android 기기에는 다양한 폼 팩터와 화면 크기가 지원됩니다. 일반적인 카테고리는 다음과 같습니다.
- 휴대전화
- 태블릿
- TV 및 TV 셋톱 박스
- Chrome용 Android 런타임을 사용하는 노트북
이러한 다양성 덕분에 게임은 다양한 화면 해상도와 가로세로 비율에서 실행됩니다. 예:
- 가로세로 비율이 19:9(2280x1080)인 가로 모드 휴대전화
- 가로세로 비율이 20:9(3200x1400)인 가로 모드 휴대전화
- 가로세로 비율이 16:9(1920x1080)인 1080p HD TV
- 가로세로 비율이 4:3(2048x1536)인 태블릿
게임을 디자인할 때 이러한 차이점을 고려하여 화면 해상도와 기기의 가로세로 비율과 무관하게 올바르게 표시되도록 해야 합니다.
Defold 투영 모드
Defold 프로젝트에는 구성 가능한 기본 해상도가 있습니다. 이 해상도는 game.project 파일에서 Display 카테고리의 Width 및 Height 필드를 사용하여 설정됩니다.
Defold의 기본 동작은 기본 해상도로 렌더링한 다음 결과 이미지를 대상 기기의 실제 해상도로 조정하는 것입니다. Defold는 이 모드를 확장 투영이라고 합니다. 확장 투영에서는 원래의 가로세로 비율을 유지하지 않습니다. 일부 게임의 경우 이 기본값이 시각적으로 허용될 수 있습니다. 표준 Defold 렌더링 스크립트에는 기본 가로세로 비율을 유지하는 두 가지 추가 투영 옵션인 고정 맞춤 투영과 고정 투영이 포함되어 있습니다.
다음 예는 Defold 편집기에 표시된 480x272의 기본 해상도를 중심으로 설계된 샘플 프로젝트를 보여줍니다.
이 예의 과정은 다음과 같습니다.
- 타일맵 객체는 기본 해상도의 테두리 주위에 프레임을 그리는 데 사용됩니다.
- 두 개의 스프라이트 객체와 텍스트 객체가 기본 해상도의 테두리 내에 있습니다.
- 기본 해상도의 테두리 외부에 있는 4개의 스프라이트 객체가 각각 위, 아래, 왼쪽, 오른쪽에 있습니다.
960x544의 디스플레이 해상도(기본 해상도의 정확히 2배)로 실행되는 경우 프로젝트가 다음과 같이 표시됩니다.
확장 투영
다음 예는 가로세로 비율이 유지되지 않는 기본 확장 투영을 사용하여 창 크기를 조정한 결과를 보여줍니다.
고정 맞춤 투영
고정 맞춤 투영 모드는 기본 해상도의 가로세로 비율을 유지합니다. 가로세로 비율은 유지되므로 조정된 기본 해상도에 포함되지 않는 추가 화면 영역이 있습니다. 가로세로 비율 차이의 주요 축에 따라 이 추가 영역은 기본 해상도의 상단과 하단 또는 왼쪽과 오른쪽에 있습니다. 고정 맞춤 투영은 이 영역을 고려하여 기본 해상도를 수정합니다. 이렇게 수정하면 기본 해상도 영역 밖에 있는 게임 장면의 추가 영역이 렌더링됩니다. 결과로 나온 이미지는 디스플레이 해상도에 맞게 조정됩니다.
다음 예는 기본 해상도 480x272와 다른 가로세로 비율의 디스플레이 해상도에 대한 고정 맞춤 투영 렌더링을 보여줍니다.
고정 투영
고정 투영 모드는 기본 해상도 가로세로 비율을 유지하고 지정된 확대/축소 배율로 기본 해상도를 조정합니다. 디스플레이 해상도와 확대/축소 배율에 따라 기본 해상도 영역의 하위 집합 또는 상위 집합이 표시될 수 있습니다.
다음 예시는 각각 1배 및 2배 확대/축소 배율의 644x408 화면 해상도를 사용하는 고정 투영 모드를 보여줍니다.
투영 모드 변경
활성 투영 모드는 적절한 메시지를 렌더기에 전송하여 런타임에 전환할 수 있습니다. 이러한 메시지는 표준 Defold 메시지 시스템을 사용하여 전송됩니다. 모든 투영 모드 메시지에는 근거리 및 원거리 Z값을 지정하는 매개변수가 포함됩니다.
-- Change to stretch projection mode
msg.post("@render:", "use_stretch_projection", { near = -1, far = 1 })
-- Change to fixed fit projection mode
msg.post("@render:", "use_fixed_fit_projection", { near = -1, far = 1 })
-- Change to fixed projection mode
msg.post("@render:", "use_fixed_projection", { near = -1, far = 1, zoom = 2 })
Defold 렌더링 스크립트
Defold 렌더링 동작은 렌더링 스크립트라는 특수 스크립트 파일에 의해 제어됩니다. 다른 Defold Engine 스크립트와 마찬가지로 렌더링 스크립트는 Lua 프로그래밍 언어로 작성됩니다. 프로젝트를 만들 때 기본 렌더링 스크립트가 포함되지만, 맞춤 렌더링 스크립트로 바꿀 수도 있습니다.
확장, 고정 맞춤 및 고정 투영 모드는 기본 렌더링 스크립트의 기능입니다. 이러한 모드 중 하나를 사용하면 렌더링 스크립트가 게임 객체 렌더링에 사용할 2D 직각 투영 매트릭스를 생성합니다. 이 매트릭스의 구성은 사용 중인 투영 모드에 따라 다릅니다.
맞춤 렌더링 스크립트를 사용하여 투영 매트릭스의 구성을 확장하거나 변경할 수 있습니다. 다양한 가로세로 비율의 레터박스 또는 필러박스와 같은 기본 스크립트에서 지원하지 않는 기능은 맞춤 렌더링 스크립트로도 구현할 수 있습니다.
오픈소스 개발자는 기본 Defold 스크립트보다 더 많은 기능을 제공하는 렌더링 스크립트와 카메라 패키지를 만들었습니다. 일반적으로 사용되는 두 가지 패키지는 RenderCam과 Defold-Orthographic입니다.
Defold GUI 시스템
Defold에는 GUI 장면 파일의 개념을 기반으로 하는 GUI 시스템이 포함되어 있습니다. GUI 장면 파일에는 이미지 또는 텍스트와 같은 개별 UI 요소를 정의하는 노드라는 객체가 포함되어 있습니다.
GUI 장면 파일을 Defold 게임 객체에 구성요소로 추가할 수 있습니다. GUI 장면 및 포함된 노드는 별도로 렌더링되며, 일반적인 게임 객체와 약간 다르게 작동합니다. 이러한 차이로 인해 GUI 장면으로 여러 디스플레이 해상도를 지원하려면 GUI 시스템 좌표 및 GUI 노드 피봇 및 앵커와 관련된 추가 고려사항이 필요합니다.
GUI 시스템 좌표
일반 Defold 게임 객체는 월드 공간에서 좌표를 지정합니다. 카메라 객체는 월드 공간을 화면 공간으로 변환하고 카메라의 현재 가상 뷰 내에 속하는 게임 객체를 표시합니다. GUI 시스템은 자체적으로 별도의 카메라를 사용합니다. GUI 장면에 속하는 노드는 월드 공간 좌표 대신 화면 공간 좌표를 사용합니다. 화면 해상도가 GUI 노드 레이아웃에 사용된 프로젝트 기본 해상도와 다를 경우 화면 노드 또는 상위 노드의 가장자리 대비 여백이 다른 노드가 생성될 수 있습니다. Defold에는 디스플레이 해상도 차이를 고려하여 GUI 레이아웃을 조정하는 여러 옵션이 있습니다.
GUI 노드 피봇 및 앵커
GUI 노드는 X Anchor 및 Y Anchor 속성을 사용하여 세로 또는 가로 가장자리에 고정할 수 있습니다.
- 노드에 상위 노드가 있으면 앵커는 상위 노드의 가장자리에 연결됩니다.
- 노드에 상위 노드가 없으면 앵커는 화면 가장자리에 배치됩니다.
다음은 GUI 노드 2개(왼쪽 하단 모서리와 오른쪽 상단 모서리의 컨트롤러 아이콘)가 있는 샘플 장면을 보여줍니다. 두 노드 모두 X Anchor 및 Y Anchor가 None로 설정되어 있습니다.
앵커 없이 디스플레이 크기가 조정될 때 컨트롤러 아이콘은 기본 해상도를 기준으로 위치를 유지합니다.
None로 설정된 GUI 요소로 크기가 조정된 샘플 장면왼쪽 하단 노드의 Y Anchor가 Bottom로 설정되고 오른쪽 상단 노드의 Y Anchor가 Top로 설정된 경우 GUI 노드는 적절한 화면 가장자리에 고정됩니다.
Edges로 설정된 GUI 요소로 크기가 조정된 샘플 장면GUI 노드의 Pivot 속성은 화면 공간 좌표 Position 속성에 해당하는 노드의 경계 직사각형에 있는 점을 지정합니다. GUI 노드는 기본적으로 Center 설정으로 설정되어 있으며 Position 지점이 경계 직사각형의 직접 중심에 배치됩니다. 가능한 다른 Pivot 설정에는 4개의 기본 방향과 4개의 대각선이 포함됩니다. Pivot 속성을 X Anchor 및 Y Anchor 속성과 함께 사용하면 여백 공간 지정을 간소화할 수 있습니다.
다음 예에서는 왼쪽 하단의 컨트롤러 아이콘 GUI 노드의 Position이 0,0이고 Pivot이 Center로 설정되어 있습니다.
Center로 설정된 GUI 노드Pivot을 South West로 변경하면 다음과 같이 조정됩니다.
South West로 설정된 GUI 노드GUI 노드 조정 모드
디스플레이 해상도가 기본 프로젝트 해상도와 다른 경우 GUI 노드의 크기가 조정될 수 있습니다. Adjust Mode 속성은 노드 콘텐츠의 조정 동작을 제어합니다. Adjust Mode에는 Fit, Zoom, Stretch의 세 가지 설정이 있습니다.
Fit
Fit 설정은 노드 콘텐츠의 가로세로 비율을 유지합니다. 콘텐츠는 크기가 조정된 노드의 직사각형 너비 또는 높이와 일치하도록 조정됩니다. 차이가 더 적은 축이 선택됩니다. 이렇게 하면 콘텐츠가 원래 가로세로 비율에서 테두리 직사각형 안에 들어갑니다.
Zoom
Zoom 설정은 노드 콘텐츠의 가로세로 비율을 유지합니다. Fit 설정과 마찬가지로 Zoom는 노드의 크기가 조절된 경계 직사각형의 너비나 높이와 일치하도록 콘텐츠의 크기를 조정합니다. Fit와 달리 Zoom는 원래 크기와 차이가 큰 축을 일치 타겟으로 사용합니다. 즉, 확장된 콘텐츠가 테두리 직사각형을 오버플로할 수 있습니다.
다음은 Adjust Mode 설정이 다른 GUI 노드의 두 가지 예입니다. 왼쪽 하단 컨트롤러 아이콘의 Adjust Mode는 Fit이고, 오른쪽 상단 컨트롤러 아이콘의 Adjust Mode는 Zoom입니다.
Stretch
Stretch 설정은 노드의 크기가 조정된 테두리 직사각형과 정확하게 일치하도록 노드 콘텐츠를 조정합니다. 원래 가로세로 비율은 유지되지 않습니다.
GUI 레이아웃
Defold에서는 GUI 레이아웃을 다양한 화면 해상도에 맞게 조정하는 또 다른 방법을 제공합니다. 레이아웃을 GUI 장면에 추가하여 기본 GUI 노드 속성을 재정의할 수 있습니다. 레이아웃은 특정 화면 해상도와 연결됩니다. 여러 레이아웃을 사용할 수 있는 경우 Defold는 실제 화면 해상도와 가장 가깝게 일치하는 레이아웃을 선택합니다. GUI 노드에서 사용하는 기본 위치, 크기, 조정 또는 그래픽 리소스는 모두 레이아웃에 의해 재정의될 수 있습니다.