¿Qué sistema de coordenadas usar para manejar la interfaz de usuario 2D?

Siguiendo con la pregunta de las relaciones de aspecto , me interesa saber qué usan otras personas cuando trabajan en sistemas de interfaz de usuario 2D (muy probablemente sus propias soluciones locales). Específicamente, cómo maneja los sistemas de coordenadas. En mi opinión, hay tres opciones:

1. Coordenadas codificadas (p. Ej .: 0 -> 720, 0 -> 576)
2. Coordenadas normalizadas (0.0 -> 1.0, 0.0 -> 1.0), mapeadas en coordenadas reales antes de renderizar
3. Coordenadas virtuales (p. Ej .: 0 -> 1600, 0 -> 1000), mapeadas en coordenadas reales antes de renderizar

Obviamente, la codificación estricta solo es útil si se encuentra en una plataforma fija y sabe de antemano cuáles son las coordenadas del espacio de su pantalla, o si está preparado para crear diseños de pantalla para cada conjunto posible de dimensiones de pantalla.

Las coordenadas normalizadas son agradables, pero sufren de ambigüedad cuando la relación de aspecto de la pantalla no es fija (por ejemplo, 0,75 asigna una coordenada física diferente cuando se ejecuta en pantalla panorámica que en 4: 3). Además, para los autores, es realmente contradictorio declarar que un elemento de la interfaz de usuario es (0.2 x 0.2), solo para descubrir que en realidad no es cuadrado cuando se representa.

Las coordenadas virtuales no son ambiguas, pero sufren los mismos problemas que las coordenadas normalizadas en la etapa de reasignación: una pequeña discrepancia decimal puede dar lugar a errores fuera de uno, lo que significa que los elementos de la interfaz de usuario que ahora deberían tener una costura entre ellos.

Del mismo modo, cuando tiene una pantalla de resolución fija, las coordenadas tanto normalizadas como virtuales significan que es muy difícil garantizar un mapeo 1: 1 entre los píxeles finamente diseñados de su artista en la imagen de la interfaz de usuario y los píxeles en la pantalla, lo que significa que corre el riesgo de artefactos de escala desagradables (suponiendo que esté renderizando como quads texturizados en la pantalla).

Hemos seguido el enfoque de coordenadas virtuales, específicamente para evitar la ambigüedad sobre las relaciones de aspecto. Entonces, cuando se procesa en una pantalla de 16:10, el espacio de la interfaz de usuario es (0,0) -> (1600,1000), pero cuando se renderiza a 4: 3, el espacio de la interfaz de usuario utilizable es en realidad (133,0) -> (1467 , 0).

¿Hay alguna solución mejor de la que no esté al tanto? ¿Existen buenas estrategias para minimizar los problemas que tienen estos 3 enfoques?

Creo que estoy de acuerdo en que las coordenadas normalizadas no se asignan bien a las cosas de la interfaz de usuario.

Lo que normalmente hago para los diseños 2D, es básicamente su espacio de coordenadas "virtual", pero elijo un espacio que asigna 1: 1 con mi resolución objetivo preferida (1280x720, por ejemplo). No está arreglado, pero es intuitivo y sé que en el 90% de los casos se verá bien. Obviamente, es importante no ser complaciente y, en realidad, verificar diferentes resoluciones a menudo.

Para una mayor nitidez al reasignar las resoluciones, tomaría prestados algunos consejos para la representación de fuentes y proporcionaría información de sugerencias. Por lo tanto, asegúrese de que las cosas que deben ser continuas estén etiquetadas de alguna manera, mientras realiza el redondeo a píxeles exactos donde es necesaria una alineación nítida.

Quizás también considere hacer las cosas más relativas. Por lo tanto, en lugar de que todo sea "posición del objeto 1 en X, Y absoluta", puede especificar "colocar la parte inferior izquierda del objeto 2 en algún desplazamiento desde la parte inferior derecha del objeto 1". Es más fácil reescalar y / o mover cosas, sin perder relaciones importantes.

El sistema de coordenadas de CEGUI parece muy bien pensado. Su sistema de coordenadas unificado combina el posicionamiento absoluto con el posicionamiento relativo. Puede especificar ubicaciones como:

• en el medio de la pantalla
  UDim(0.5,0)
• cinco píxeles a la izquierda del borde derecho
  UDim(1.0,-5)
• dos widgets en el medio pero separados por 10 píxeles
  HA_RIGHT,UDim(0.5,-5) HA_LEFT,UDim(0.5,5)

En caso de duda, ¿por qué no elegir el modelo de caja CSS o una simplificación?

Puede especificar posiciones en porcentajes o píxeles. Puede colocar contenedores con porcentajes, pero coloque los elementos dentro de ellos por píxeles, por ejemplo.

Me gusta usar coordenadas virtuales, pero basado en una resolución de objetivo común (preferiblemente una de las resoluciones más altas en las que esperas que se ejecute el juego.

En estos días, una buena opción puede ser 1920x1080.

Todas las ilustraciones y maquetas de pantalla se pueden crear con esa resolución, y facilita la medición de posiciones / distancias en píxeles.

Si se ejecuta con una relación de aspecto diferente a las coordenadas virtuales, puede elegir cómo ajustarlo a la pantalla (buzón, recortar los lados o un poco de ambos)

¡Al codificar, encuentro 'pensar en píxeles' mucho más fácil que pensar en coordenadas normalizadas! - Quiero que el texto tenga '50 (virtuales) de altura 'en lugar de' 0.0463 unidades de altura '

Depende totalmente de qué tipo de GUI tenga, pero a menudo los juegos tienen elementos anclados a lo largo de los bordes de la pantalla y en las esquinas, y luego pueden tener un cuadro en el medio de la pantalla para un diálogo modal o algo así.

Si ese es su caso, ¿podría sugerirle que utilice un esquema en el que especifique un ancla y un desplazamiento (x, y)? Esto sería similar al BorderLayout de Java (pero tal vez con las cuatro esquinas, los cuatro medios de los bordes y el centro de la pantalla). Entonces, por ejemplo, podría especificar un desplazamiento de (0,0) desde la esquina superior izquierda; entonces el elemento estaría anclado exactamente en la esquina de la pantalla. Y luego, no importa qué resolución, relación de aspecto, etc., tenga el indicador de estado en la esquina de la pantalla. Pero si ancla un elemento en la esquina superior derecha, el elemento se anclaría naturalmente en relación con su punto superior derecho (en lugar de arriba a la izquierda), por lo que nuevamente se anclaría automáticamente en la esquina de la pantalla sin importar la resolución.

Definitivamente recomiendo contra coordenadas normalizadas 0.0-1.0; estos podrían variar según la precisión de punto flotante. Las GUI deben asignarse a píxeles, a menos que tenga una GUI 3D.

Mucho depende del tipo de juego y la situación. Para prototipos rápidos y sucios, prefiero planificar la interfaz de usuario en papel cuadriculado, escribir una lista de coordenadas numéricas para un tamaño de ventana fijo y codificar todo: es más fácil y rápido para mí. Pero para un proyecto "real" en el que desea ventanas redimensionables o resoluciones de pantalla alternativas, eso obviamente no sería lo ideal, y sería mejor algún tipo de solución que permita escalar en ambas direcciones.