2D UI를 처리하는 데 사용할 좌표계는 무엇입니까?


20

로부터에 따라 화면 비율 질문 , 나는 2D UI 시스템 (대부분 자신의 집에서 재배 솔루션)에서 작업 할 때 다른 사람이 사용하는 것을 듣고 관심이 있어요. 특히 좌표계를 어떻게 처리합니까? 제 생각에는 세 가지 옵션이 있습니다.

  1. 하드 코딩 된 좌표 (예 : 0-> 720, 0-> 576)
  2. 렌더링 전에 실제 좌표로 매핑 된 정규화 된 좌표 (0.0-> 1.0, 0.0-> 1.0)
  3. 렌더링 전에 실제 좌표에 매핑 된 가상 좌표 (예 : 0-> 1600, 0-> 1000)

하드 코딩은 고정 플랫폼에 있고 화면 공간 좌표가 무엇인지 미리 알고 있거나 가능한 모든 화면 크기 세트에 대해 화면 레이아웃을 작성할 준비가 된 경우에만 유용합니다.

정규화 된 좌표는 훌륭하지만 화면의 가로 세로 비율이 고정되어 있지 않으면 모호성이 발생합니다 (예 : 4 : 5에서와 같이 와이드 스크린에서 실행할 때 0.75가 다른 실제 좌표에 매핑 됨). 또한 저자에게는 UI 요소를 (0.2 x 0.2)로 선언하는 것이 실제로 반 직관적입니다. 렌더링 할 때 실제로 사각형이 아님을 알기 만합니다.

가상 좌표는 모호하지 않지만 리매핑 단계에서 정규화 된 좌표와 동일한 문제를 겪습니다. 소수의 작은 불일치로 인해 오류가 발생할 수 있으므로 타일로 묶어야하는 UI 요소에 이음새가 생깁니다.

마찬가지로 고정 해상도 화면이있는 경우 정규화 된 좌표와 가상 좌표는 UI 이미지에서 정교하게 제작 된 아티스트의 픽셀과 화면의 픽셀간에 1 : 1 매핑을 보장하기가 매우 어렵다는 것을 의미합니다. 불쾌한 스케일링 아티팩트 (화면에서 텍스처 쿼드로 렌더링한다고 가정).

가로 세로 비율에 대한 모호성을 피하기 위해 가상 좌표 접근 방식을 사용했습니다. 16:10 화면으로 렌더링 할 때 UI 공간은 (0,0)-> (1600,1000)이지만 4 : 3으로 렌더링 할 때 사용 가능한 UI 공간은 실제로 (133,0)-> (1467)입니다. , 0).

내가 모르는 더 나은 솔루션이 있습니까? 이 세 가지 접근 방식의 문제점을 최소화하기위한 좋은 전략이 있습니까?

답변:


5

정규화 된 좌표가 실제로 UI에 잘 맞지 않는다는 데 동의합니다.

2D 레이아웃에서 일반적으로하는 것은 기본적으로 "가상"좌표 공간이지만 선호하는 대상 해상도 (예 : 1280x720)로 1 : 1을 매핑하는 공간을 선택합니다. 고정되어 있지는 않지만 다루는 것은 직관적이며 90 %의 경우 올바르게 보일 것입니다. 분명히 만족스럽지 않고 실제로 다른 해상도를 자주 확인하는 것이 중요 합니다.

해상도를 다시 매핑 할 때 선명하게하기 위해 글꼴 렌더링에서 몇 가지 팁을 빌리고 힌트 정보를 제공합니다. 따라서 연속해야하는 항목에는 어떤 식 으로든 태그를 지정하고 선명한 정렬이 필요한 정확한 픽셀로 반올림을 수행해야합니다.

아마도 상대적인 관계를 만드는 것도 고려해보십시오. 따라서 모든 것이 "절대 X, Y에서 위치 객체 1"인 것이 아니라 "객체 1의 오른쪽 아래에서 일부 오프셋에서 객체 2의 왼쪽 아래 위치"를 지정할 수 있습니다. 그러면 중요한 관계를 잃지 않으면 서 규모를 조정하거나 이동하는 것이 더 쉽습니다.


5

CEGUI 의 좌표 시스템은 정말 잘 생각 된 것 같습니다. 그건 시스템의 좌표 통합 블렌드에게 상대 위치와 절대 위치를. 다음과 같은 위치를 지정할 수 있습니다.

  • 화면 중앙에
    UDim(0.5,0)
  • 오른쪽 가장자리 왼쪽에 5 픽셀
    UDim(1.0,-5)
  • 가운데에 두 개의 위젯이 있지만 10 픽셀로 구분됨
    HA_RIGHT,UDim(0.5,-5) HA_LEFT,UDim(0.5,5)

2

의심 스러우면 CSS 상자 모델을 사용하거나 단순화하지 않겠습니까?

백분율 또는 픽셀로 위치를 지정할 수 있습니다. 예를 들어, 백분율로 컨테이너를 배치 할 수 있지만 컨테이너 내에 항목을 픽셀 단위로 배치 할 수 있습니다.


1

나는 가상 좌표를 사용하는 것을 좋아하지만 일반적인 목표 해상도 (바람직하게는 게임이 실행될 것으로 예상되는 최고 해상도 중 하나)를 기반으로합니다.

요즘에는 1920x1080을 선택하는 것이 좋습니다.

모든 아트 워크 및 화면 모형을 해당 해상도로 만들 수 있으며 위치 / 거리를 픽셀 단위로 쉽게 측정 할 수 있습니다.

가상 좌표와 다른 종횡비로 실행하는 경우 화면에 맞추는 방법 (레터 박스, 측면 자르기 또는 둘 다)을 선택할 수 있습니다.

코딩 할 때 정규화 된 좌표로 생각하는 것보다 '픽셀 생각'이 훨씬 쉽습니다! -텍스트를 '0.0463 단위 높이'가 아닌 '50 (가상) 픽셀 높이 '로 설정하고 싶습니다.


0

그것은 당신이 가지고있는 GUI의 유형에 전적으로 달려 있지만, 종종 게임은 화면의 가장자리와 모서리에 고정 된 것들을 가지고 있으며, 화면 중간에 모달 대화 상자 또는 무언가를위한 상자가있을 수 있습니다.

이 경우 앵커와 오프셋 (x, y)을 지정하는 구성표를 사용하는 것이 좋습니다. 이것은 Java의 BorderLayout 과 비슷 하지만 (모서리 4 개, 가장자리 가운데 4 개 및 화면 중앙 1 개). 예를 들어 왼쪽 상단 모서리에서 (0,0)의 오프셋을 지정할 수 있습니다. 그러면 요소가 화면 모서리에 정확히 고정됩니다. 그런 다음 해상도, 종횡비 등에 관계없이 화면 모서리에 상태 표시기가 있습니다. 그러나 요소를 오른쪽 위 모서리에 고정하면 요소가 자연스럽게 왼쪽 위 대신 오른쪽 위 점을 기준으로 고정되므로 해상도에 관계없이 화면 모서리에 자동으로 고정됩니다.

정규화 된 0.0-1.0 좌표에 대해 권장합니다. 부동 소수점 정확도에 따라 달라질 수 있습니다. 3D GUI가 없으면 GUI를 픽셀에 매핑해야합니다.


글쎄, 어떤 종류의 UI 시스템에 대해서도 상대적 위치와 앵커를 사용하면 거의 주어진다. 다른 구성 요소 간의 측정에 특히 관심이 있습니다. 그리고 이런 종류의 경우 3D / 2D GUI 구별은 흐릿합니다. 특히 질감이있는 화면 공간 쿼드를 사용하여 임의의 크기의 이미지를 가져 와서 UI 공간에 스케일 / 배치 할 때 특히 그렇습니다.
MrCranky

0

게임의 종류와 상황에 따라 다릅니다. 빠르고 더러운 프로토 타입의 경우 그래프 용지에 UI를 계획하고 고정 된 창 크기에 대한 숫자 좌표 목록을 작성하고 모든 것을 하드 코딩하는 것이 더 쉽고 빠릅니다. 그러나 크기 조정 가능한 창 또는 대체 화면 해상도를 원하는 "실제"프로젝트의 경우에는 이상적이지 않으며 양방향으로 확장 할 수있는 솔루션이 더 좋습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.