2D 플랫 포머에서 다른 종횡비를 어떻게 처리 하시겠습니까?

오래 전, 4 : 3은 PC에서 찾을 수있는 유일한 비율이었습니다. 오늘날 가장 일반적인 것은 16:10이지만 대부분의 새로운 모니터 (특히 랩톱)는 16 : 9입니다.

저는 2D 플랫 포머를 작성 중이며 다른 비율을 모두 처리하는 방법을 결정할 수 없습니다.

다음은 몇 가지 아이디어입니다.

1. 4 : 3 더 많은 컨텐츠를 얻고 와이드 스크린을 위아래로 자릅니다.
2. 16 : 9는 더 많은 콘텐츠를 얻고 나머지는 왼쪽과 오른쪽으로 잘립니다.
3. 게임은 다른 AR을 위해 검은 가로 막대가있는 16 : 9에 있습니다.
4. 게임은 다른 AR에 검은 세로 막대가있는 4 : 3

게임을 "와이드"(어떤 경우에는 3 번 접근 방식) 또는 좁게 (어떤 경우에는 4 번 접근 방식)으로 만들만한 강력한 이유가 없다면 1과 2 (또는 가능하면 3과 4) 의 조합 을 사용하십시오. 화면 밖을 숨 깁니다).

타협 종횡비를 선택하십시오 (16:10은 좋은 것, 또는 16:11). 사용자가 16 : 9 인 경우 측면에 더 많은 콘텐츠를 제공하고 4 : 3 인 경우 상단과 하단에 더 많은 콘텐츠를 제공하십시오.

어쨌든 카메라 클래스에서 다음과 같이 구현하는 것이 가장 좋습니다.

float scaleToFitWidth = viewport.Width / nominalWorldSize.Width;
float scaleToFitHeight = viewport.Height / nominalWorldSize.Height;
float scale = Math.Min(scaleToFitWidth, scaleToFitHeight); // world to client

이 시점에서 단순히 다른 명목상의 세계 크기 (예 : 세계 단위의 카메라 크기)를 실험하고 가장 적합한 것을 선택할 수 있습니다.

글쎄, 기본적인 조언으로 PC에서 "사용자가 전체 화면을 실행한다고 가정하지 마십시오"라고 말하고 싶습니다. 그리고 창 모드에서 이상적인 비율을 선택하고 직접 사용하십시오.

필자가 생각하는 사용자는 일반적으로 전체 화면 콘텐츠가 표시 될 때 검은 막대를 받아들입니다. 따라서 전략 3과 4는 적합하지는 않지만 수용 가능합니다. 렌더링하는 컨텐츠의 양을 항상 알 수 있다는 장점이 있습니다. 즉, 와이드 스크린에서 실행할 때만 발생하는 부적절한 버그가 없습니다.

적응하려고하고 화면 해상도를 통해 사용자 비율을 감지하고 가능한 많은 콘텐츠를 표시하려는 경우 우선 순위가 높은 콘텐츠와 낮은 콘텐츠를 다르게 고려해야합니다. 우선 순위가 높은 콘텐츠는 게임이 실패한 경우 사용자가 화면에 표시해야하는 내용입니다. 이것은 HUD 및 UI 요소, 플레이어 아바타 및 이들이 상호 작용하는 것과 같은 것입니다. 우선 순위가 낮은 콘텐츠는 화면에 표시되면 좋지만 화면에 표시되지 않으면 별 문제가되지 않습니다. 예 : 배경 그래픽과 아바타에서 상당히 멀리 떨어진 것들.

어떤 '물리적'2D 세계의 최상위에 UI / HUD가 겹쳐져 있다고 가정하면, 이것은 간단합니다. 우선 순위가 낮은 항목은 간단합니다. 4 : 3 뷰포트가 흥미로운 항목을 중심으로 한 다음 왼쪽이나 오른쪽으로 가능한 한 우선 순위가 낮은 항목을 그립니다. 2D 세계에서 우선 순위가 높은 것들 (예 : 캐릭터, 캐릭터가 직접 싸우는 적)은 항상 4 : 3 뷰포트에 보관해야합니다. 즉, 게임 코드가 카메라를 확대하여 여분의 화면 공간을 활용하지 않아도되므로 게임 코드가 와이드 스크린과 다르게 작동합니다. 게임 코드에 월드가 4 : 3으로 렌더링되고 있다고 가정하게하고 렌더링 코드에 실제로 보이는 것보다 더 많은 것이 있다는 것을 알도록하십시오.

UI / HUD 요소 레이아웃은 다음 두 가지 방법 중 하나로 접근 할 수 있습니다.

1. 동적 배치 : 화면 가장자리를 기준으로 모든 요소를 ​​지정합니다 (예 : 0,0을 기준으로 한 것은 아님). 종횡비에 따라 요소가 화면 중앙에서 멀어 지거나 멀어집니다. 장점 : 물건을 구석에 걸고 '작동'할 수 있습니다. 단점 : 중앙에서 레이아웃이 잘 작동하고 요소가 겹칠 위험이 있습니다.
2. 보수적 인 정적 위치 : 4 : 3에 모든 요소를 ​​배치하고 와이드 스크린에서 실행할 때 간단히 오프셋합니다. 장점 : 단순하고 명확한 레이아웃 논리 / 좌표. 단점 : UI 컨트롤의 왼쪽과 오른쪽에 시각적 데드 스페이스를 남겨두고 백그라운드에서 2D 세계를 볼 수 있지만 UI는 없습니다.

게임에 가장 적합한 것은 무엇입니까? Canabalt (즉, 수평 속도에 의존하는 게임)를 만드는 경우 측면 움직임을 강조하는 데 좁은 영역에 검은 막대 (# 3)가있는 넓은 종횡비가 이상적입니다. 다른 한편으로, Super Smash Brothers와 같은 공중 게임이 더 큰 경우 더 큰 화면 (# 2 또는 # 4)이 가장 좋습니다. 게임에 가장 적합한 것이 무엇인지에 대한 결정을 내 렸습니다.

다른 응답자는 한 디스플레이에서는 볼 수 있지만 다른 디스플레이에서는 볼 수없는 요소와 관련하여주의를 기울여야한다는 데 동의합니다.

Castle Crashers는 약간의 # 2와 약간의 # 3을 사용하는 것 같습니다. 4 : 3 화면에 검은 막대가 표시되고 가시 영역이 약간 더 작지만 항상 가장자리 주변에 "안전한 영역"이 있어야합니다. 어쨌든 중요한 것을 넣지 않는 곳 (가장자리를 자르는 CRT TV와 같은 화면)

다른 옵션이 있습니다. 중간 비율로 프레임을 구성하고 두 가지 일반 해상도 모두에서 자르기와 확장 (또는 경계)을 모두 수행 할 수 있습니다.

4 : 3의 자르기는 그리 과감하지 않고 패닝을 최소화하는 반면, TV 촬영은 이러한 방식으로 구성되어 와이드 스크린은 괜찮아 보인다 (모두가 화면 중간에 혼잡하지 않음).

다음은 모바일 장치에서 여러 화면 크기를 처리하는 방법에 대한 블로그 글 이며 libgdx를 사용 하여이 방법을 Java로 코딩하는 방법에 대한 두 번째 부분 입니다. Andrew의 답변과 약간 같지만 다른 사람을 도울 수 있습니다.

블로그 게시물은 세 가지 주요 접근 방식을 다룹니다.

1. 상단 또는 측면에 검은 막대가 있습니다.
2. 가상 뷰포트를 사용하십시오.
3. 웹 페이지 flexbox 레이아웃에서와 같이 플로팅 요소를 사용하십시오.

No. 1은 매우 자명합니다.

아니오를 설명하기 위해. 2, 세 가지 종횡비를 가진 세 가지 장치를 지원한다고 가정합니다. 이미지 편집기에서 이미지를 엽니 다. 첫 번째 장치의 경우 이미지 내부에 맞는 해당 장치의 가로 세로 비율로 가장 큰 사각형을 그립니다. 두 번째 장치와 세 번째 장치에 대해서도 동일하게 수행하십시오. 사용 가능한 영역 또는 가상 뷰포트는 세 사각형의 교차점입니다. 해당 뷰포트 외부의 모든 것을 볼 수는 없습니다.

3 번은 flexbox 또는 float를 사용하여 웹 페이지에 요소를 배치하는 방법과 유사하게 화면에 객체를 배치하는 것과 관련이 있습니다. 예를 들어, 일시 정지 버튼을 위에서 5 픽셀, 오른쪽에서 5 픽셀로 배치합니다. 장치의 종횡비에 관계없이 일시 정지 버튼은 항상 오른쪽 상단에 있습니다.