소개

게임과 그래픽을 다양한 화면 크기에 맞출 때 고려해야 할 사항은 여러 가지입니다.

• 저해상도 픽셀 퍼펙트 그래픽을 사용하는 레트로 게임인가요, 아니면 HD 품질 그래픽을 사용하는 현대적인 게임인가요?
• 서로 다른 화면 크기에서 전체 화면으로 플레이할 때 게임은 어떻게 동작해야 하나요?
  • 고해상도 화면에서 플레이어가 더 많은 게임 컨텐츠를 보아야 하나요, 아니면 항상 같은 컨텐츠가 보이도록 그래픽이 적응형으로 확대되어야 하나요?
• game.project에 설정한 것과 다른 화면비는 게임에서 어떻게 처리해야 하나요?
  • 플레이어가 더 많은 게임 컨텐츠를 보아야 하나요? 아니면 검은 막대가 있어야 할까요? 또는 크기가 조정된 GUI 요소가 있어야 할까요?
• 어떤 종류의 메뉴와 화면상의 gui 컴포넌트가 필요하며, 서로 다른 화면 크기와 화면 방향에 어떻게 맞춰져야 하나요?
  • 방향이 바뀔 때 메뉴와 다른 gui 컴포넌트의 레이아웃도 바뀌어야 하나요, 아니면 방향과 관계없이 같은 레이아웃을 유지해야 하나요?

이 매뉴얼에서는 이러한 항목 중 일부를 다루고 권장 방식을 제안합니다.

컨텐츠가 렌더링되는 방식 변경하기

Defold 렌더 스크립트는 전체 렌더링 파이프라인을 완전히 제어할 수 있게 해줍니다. 렌더 스크립트는 무엇을 어떤 순서로 어떻게 그릴지 결정합니다. 렌더 스크립트의 기본 동작은 창 크기가 조정되거나 실제 화면 해상도가 일치하지 않더라도 game.project 파일의 너비와 높이로 정의된 동일한 픽셀 영역을 항상 그리는 것입니다. 이로 인해 화면비가 바뀌면 컨텐츠가 늘어나고, 창 크기가 바뀌면 확대되거나 축소됩니다. 일부 게임에서는 이것이 허용될 수도 있지만, 화면 해상도나 화면비가 다르면 게임 컨텐츠를 더 많이 또는 더 적게 보여주거나, 적어도 화면비를 바꾸지 않고 컨텐츠를 확대/축소하고 싶을 가능성이 더 높습니다. 기본 늘이기 동작은 쉽게 변경할 수 있으며, 방법에 대한 자세한 내용은 Render 매뉴얼에서 확인할 수 있습니다.

레트로/8비트 그래픽

레트로/8비트 그래픽은 보통 낮은 해상도와 제한된 색상 팔레트를 가진 오래된 게임 콘솔이나 컴퓨터의 그래픽 스타일을 모방하는 게임을 말합니다. 예를 들어 Nintendo Entertainment System (NES)의 화면 해상도는 256x240, Commodore 64는 320x200, Gameboy는 160x144였으며, 모두 현대 화면 크기의 일부에 불과합니다. 이러한 그래픽 스타일과 화면 해상도를 모방하는 게임을 현대의 고해상도 화면에서 플레이할 수 있게 하려면 그래픽을 여러 배로 업스케일하거나 확대해야 합니다. 이를 수행하는 간단한 방법 중 하나는 모방하려는 낮은 해상도와 스타일로 모든 그래픽을 그리고, 렌더링할 때 그래픽을 확대하는 것입니다. Defold에서는 렌더 스크립트와 적절한 확대값으로 설정한 Fixed Projection을 사용하여 이를 쉽게 구현할 수 있습니다.

이 타일셋과 플레이어 캐릭터(출처)를 가져와 320x200 해상도의 8비트 레트로 게임에 사용해 보겠습니다.

game.project 파일에 320x200을 설정하고 게임을 실행하면 다음과 같이 보입니다.

현대의 고해상도 화면에서는 창이 매우 작습니다! 창 크기를 네 배인 1280x800으로 키우면 현대 화면에 더 적합해집니다.

이제 창 크기가 더 적절해졌으므로 그래픽에 대해서도 무언가를 해야 합니다. 너무 작아서 게임에서 무슨 일이 일어나는지 보기 매우 어렵습니다. 렌더 스크립트를 사용하여 고정되고 확대된 투영을 설정할 수 있습니다.

msg.post("@render:", "use_fixed_projection", { zoom = 4 })

그러면 다음 결과가 나옵니다.

더 낫습니다. 창과 그래픽 모두 적절한 크기이지만, 더 자세히 보면 명확한 문제가 있습니다.

그래픽이 흐릿해 보입니다! 이는 GPU가 렌더링할 때 확대된 그래픽을 텍스쳐에서 샘플링하는 방식 때문에 발생합니다. game.project 파일의 Graphics 섹션에 있는 기본 설정은 linear입니다.

이를 nearest로 변경하면 원하는 결과를 얻을 수 있습니다.

이제 레트로 게임에 선명한 픽셀 퍼펙트 그래픽이 적용되었습니다. 고려할 사항은 더 있습니다. 예를 들어 game.project에서 스프라이트의 서브픽셀을 비활성화하는 것입니다.

Subpixels 옵션을 비활성화하면 스프라이트가 절반 픽셀에 렌더링되지 않고 항상 가장 가까운 정수 픽셀에 스냅됩니다.

고해상도 그래픽

고해상도 그래픽을 다룰 때는 레트로/8비트 그래픽과는 다른 방식으로 프로젝트와 컨텐츠 설정에 접근해야 합니다. 비트맵 그래픽에서는 컨텐츠가 1:1 스케일로 표시될 때 고해상도 화면에서 보기 좋도록 만들어야 합니다.

레트로/8비트 그래픽과 마찬가지로 렌더 스크립트를 변경해야 합니다. 이 경우에는 원래 화면비를 유지하면서 그래픽이 화면 크기에 맞게 스케일되도록 해야 합니다.

msg.post("@render:", "use_fixed_fit_projection")

이렇게 하면 화면비가 다른지에 따라 위아래 또는 양옆에 추가 컨텐츠가 표시될 수 있지만, 화면은 game.project 파일에 지정된 것과 같은 양의 컨텐츠를 항상 보여주도록 크기가 조정됩니다.

game.project 파일의 너비와 높이는 게임 컨텐츠를 스케일하지 않고 보여줄 수 있는 크기로 설정해야 합니다.

High DPI 설정과 retina 화면

고해상도 retina 화면도 지원하려면 game.project 파일의 Display 섹션에서 이를 활성화할 수 있습니다.

그러면 이를 지원하는 디스플레이에서 High DPI 백 버퍼가 생성됩니다. 게임은 Width 및 Height 설정에 지정된 값의 두 배 해상도로 렌더링되며, 이 설정값은 스크립트와 프로퍼티에서 사용되는 논리 해상도로 계속 유지됩니다. 즉 모든 측정값은 그대로 유지되고, 1x 스케일로 렌더링되는 컨텐츠도 같은 크기로 보입니다. 하지만 고해상도 이미지를 임포트하고 0.5x로 스케일하면 화면에서는 High DPI로 표시됩니다.

적응형 GUI 만들기

GUI 컴포넌트를 만드는 시스템은 여러 기본 빌딩 블록, 즉 노드를 중심으로 구성되어 있습니다. 지나치게 단순해 보일 수 있지만 버튼부터 복잡한 메뉴와 팝업까지 무엇이든 만들 수 있습니다. 생성한 GUI는 화면 크기와 방향 변경에 자동으로 맞춰지도록 설정할 수 있습니다. 예를 들어 노드를 화면의 위쪽, 아래쪽 또는 양옆에 고정할 수 있으며, 노드는 크기를 유지하거나 늘어날 수 있습니다. 노드 사이의 관계뿐만 아니라 노드의 크기와 모양도 화면 크기나 방향이 바뀔 때 변경되도록 설정할 수 있습니다.

노드 프로퍼티

gui의 각 노드에는 피벗 포인트, 가로 및 세로 앵커, 그리고 adjust 모드가 있습니다.

• 피벗 포인트는 노드의 중심점을 정의합니다.
• 앵커 모드는 씬 경계 또는 부모 노드의 경계가 실제 화면 크기에 맞게 늘어날 때 노드의 세로 및 가로 위치가 어떻게 변경되는지 제어합니다.
• adjust 모드 설정은 씬 경계 또는 부모 노드의 경계가 실제 화면 크기에 맞게 조정될 때 노드에 어떤 일이 일어나는지 제어합니다.

이 프로퍼티에 대한 자세한 내용은 GUI 매뉴얼에서 확인할 수 있습니다.

레이아웃

Defold는 모바일 기기에서 화면 방향 변경에 자동으로 맞춰지는 GUI를 지원합니다. 이 기능을 사용하면 다양한 화면 크기의 방향과 화면비에 맞출 수 있는 GUI를 설계할 수 있습니다. 특정 기기 모델에 맞는 레이아웃을 만들 수도 있습니다. 이 시스템에 대한 자세한 내용은 GUI Layouts 매뉴얼에서 확인할 수 있습니다.

다양한 화면 크기 테스트하기

Debug 메뉴에는 특정 기기 모델의 해상도나 커스텀 해상도를 시뮬레이션하는 옵션이 있습니다. 어플리케이션이 실행 중일 때 Debug->Simulate Resolution을 선택하고 목록에서 기기 모델 중 하나를 고를 수 있습니다. 실행 중인 어플리케이션 창의 크기가 조정되고, 게임이 다른 해상도나 다른 화면비에서 어떻게 보이는지 확인할 수 있습니다.