해상도 독립 시스템을 만들려면 어떻게합니까?


10

나는 이것을 비우고있다. 물론 가장자리에 물건을 고정하여 UI 해상도를 독립적으로 만들 수 있습니다. 그래픽이 너무 작아서 그래픽이 너무 작을 때까지. 필요할 때마다 어떻게 적절하게 확장합니까? 스케일링하는 동안 그래픽을 올바른 비율로 유지하려면 어떻게합니까? 해상도가 다른 것에 비해 16:10과 같은 비율을 가지면 그것들이 늘어나기를 원하지 않습니다.

이것에 대한 진실되고 테스트 된 접근법이 있습니까? 이 문제로 인해 비디오 플레이어에 검은 색 테두리가 표시됩니다. 제대로 해결할 수 없습니까?


1
[this] [1] 질문을 참조하십시오. 내 대답은 몇 가지 까다로운 세부 사항을 설명합니다. [1] : gamedev.stackexchange.com/questions/34/…
엔지니어

답변:


5

먼저 래스터 화를 수행 할 때 기술적으로 진정한 해상도 독립성은 존재하지 않습니다. 충분히 높은 배율로 개별 텍셀이 보이기 시작합니다. 이에 대한 유일한 해결책은 벡터 그래픽 시스템을 작성하는 것입니다.

그러나 강력한 래스터 기반 해상도 독립 시스템 (사이징, 좌표 시스템 및 레이아웃)을 만드는 몇 가지 단계가 있습니다.

크기 조정 및 위치 지정을 위해서는 실제 응용 프로그램 해상도에 대한 비율을 유지하는 일부 장치 세트를 사용해야합니다. 이 경우 내가 미국인이기 때문에 인치를 사용할 수 있으며 DPI (인치당 도트 수)로 요소의 크기를 조정할 수 있습니다. 예를 들어 응용 프로그램이 800x600에서 실행되고 있다고 가정합니다. 기본 Windows DPI는 96이므로 응용 프로그램의 해상도는 (800/96) x (600/96) 인치 또는 8.33x6.25 인치입니다.

화면 좌표계를 처리하는 방법을 최소한 4 : 3 및 16 : 9 종횡비로 작업 할 수 있어야하므로 약간 까다로워집니다. 내가 권장하는 것은 디스플레이 영역의 중앙 (창과 컨트롤뿐만 아니라)에 (0,0)을 두는 것입니다. 모서리에 (0,0)을 넣으면 해당 모서리가 해상도와 종횡비에 따라 움직일 때 모든 스프라이트를 변환하는 반면 화면의 중심은 항상 화면의 중심이되기 때문에 잘 작동합니다. 장치 문제. 800x600으로 예제를 계속하면 좌표계는 (왼쪽에서 오른쪽) -4.165in에서 4.165in, (위에서 아래로) 3.125in에서 -3.125in입니다.

따라서 현재 해상도와 무관하게 화면 중앙에 대해 항상 같은 위치에있는 항목이있는 DPI 독립 UI 시스템이 있습니다. 다행히 DPI 독립성을 통해 할 수있는 일은 휴리스틱을 기반으로 DPI를 조정하여 UI를 조정하는 것입니다. 예를 들어 휴리스틱으로 수직 해상도를 사용하여 DPI를 확장 할 수 있습니다. 800x600이 96 DPI이면 1024x768에 123 DPI를, 1280x720에 115 DPI를 사용합니다.

마지막으로 절대 위치와 상대 위치를 모두 처리하는 레이아웃 시스템을 구축해야합니다. 이것의 훌륭한 예는 WPF와 웹입니다. 컨트롤 / 상자가 다른 많은 유용한 자동 레이아웃 옵션과 함께 가장자리에 고정되는 동안 부모 요소의 일부를 채우도록 지정할 수 있습니다. 이 모든 기능을 통해 UI 시스템은 다양한 해상도와 종횡비에서 거의 동일하게 보일 수 있습니다.

요약하면 왼쪽 위 모서리 좌표계에서 원점을 유지하고 수직 해상도를 기반으로 DPI를 자동으로 조정하지 않는 것을 제외하고는 거의 모든 것을 수행하므로 WPF를 연구하는 것이 좋습니다.


-1

일반적으로하고 싶은 것은 게임에 따라 다릅니다.

한 가지 옵션은 종횡비 (비율)가 다른 경우 검은 색 테두리를 갖는 것입니다 (아마도 가장 쉬운 방법, 텍스처로 렌더링 한 다음 화면에 렌더링하여 적절하게 크기 조정).

다른 옵션은 종횡비에 따라 다른 렌더링 경로를 갖는 것입니다. 하나는 와이드 스크린 용이고 다른 하나는 '정상형'입니다.

또 다른 옵션은 해상도에 따라 UI 메시지 상자를 더 크게 또는 더 작게 만드는 것과 같이 항목을 개별적으로 확장하는 것입니다. 정확한 픽셀을 사용하는 대신 그릴 위치를 정할 필요가있을 때마다 0.2 아래, 가로 0.8, 너비 0.1, 높이 0.3과 같은 작업을 수행하십시오. 분명히이 경우에는 그림을 그리는 방법에 따라 텍스트가 아닌 UI 배경을 늘릴 수 있지만 항목을 늘릴 수 있습니다.

3D와 관련하여 뷰포트를 올바르게 설정하면 와이드 스크린 플레이어가 와이드 스크린이 아닌 설정보다 약간 더 많이 볼 수있게됩니다. (또는 검은 색 테두리를 그리거나보기를 늘립니다).


"텍스처로 렌더링 한 다음 화면에 렌더링하여 적절하게 크기를 조정하십시오."아니요. 정말 흐릿하고 이상하게 보이는 이미지를 만듭니다. 해상도가 너무 낮 으면 어떻게해야합니까? 모든 것을 읽을 수 없게됩니다.
타라

계속 읽으십시오. 몇 가지 옵션 중 하나입니다. (등 단순히 / 잘못 다음 예는 흐릿하게 될 것이다 수행하고 뻗어 경우하지만) 당신은 확실히 중 하나를 당신이 설명하는 문제를 얻을 것이다
조지 Duckett

나는 계속 읽고 있었다. 그러나 당신의 대답은 매우 구체적이지 않습니다. 또한 모든 것을 저해상도로 렌더링 할 수 없으며 텍스트를 완벽하게 읽을 수 있기를 기대하기 때문에 위에서 설명한 문제가 발생합니다.
타라

분명히 고해상도로 렌더링하면 아티팩트가 생성되지만 대상보다 낮은 해상도로 렌더링하는 것은 아닙니다. 내 대답도 다룰 수 있었지만 좋은 대답이 이미 있기 때문에 나는 이것으로 돌아 가지 않을 것입니다. 텍스트 렌더링을 구체적으로 언급 한 것은 무언가를 그릴 위치와 크기를 선택하는 것과 약간 다르지만 매우 간단하고 정교해질 수 있다는 것이 사실입니다 .
George Duckett

대상보다 해상도가 낮게 렌더링되었다고 말하지 않았습니다. UI 1 : 1을 가져다가 원래 설계된 것보다 낮은 해상도로 렌더링 할 수는 없습니다 (저는 해상도가 낮습니다).
Tara
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.