¿Cómo hago un sistema independiente de resolución?

Estoy en blanco con este. Puedo anclar cosas en los bordes, por supuesto, eso haría que mi resolución de UI sea independiente ... hasta que cambie tanto que los gráficos sean demasiado pequeños. ¿Cómo escalo adecuadamente cuando sea necesario? ¿Cómo mantengo mis gráficos en la proporción correcta mientras escalo? No quiero que se estiren si la resolución tiene una proporción diferente como 16:10 en comparación con cualquier otra cosa.

¿Existe un enfoque verdadero y probado para esto? Los reproductores de video muestran bordes negros debido a este problema, ¿esto no se puede resolver adecuadamente?

Primero tenga en cuenta que con la rasterización técnicamente no existe tal cosa como la verdadera independencia de resolución. Con un aumento lo suficientemente alto, los texels individuales comenzarán a hacerse visibles. La única solución para esto es escribir un sistema de gráficos vectoriales.

Dicho esto, hay algunos pasos para crear un sistema independiente de resolución basado en ráster robusto: dimensionamiento, sistemas de coordenadas y diseño.

Para dimensionar y posicionar necesitamos usar un conjunto de unidades que mantengan una relación con la resolución real de la aplicación. En este caso, usemos pulgadas porque soy estadounidense y puedes escalar elementos con DPI (puntos por pulgada). Por ejemplo, supongamos que su aplicación se ejecuta a 800x600. El valor predeterminado de Windows DPI es 96, lo que significa que la aplicación tiene una resolución de (800/96) x (600/96) pulgadas o 8.33x6.25 pulgadas.

Dado que necesita poder trabajar, al menos, las relaciones de aspecto 4: 3 y 16: 9 de cómo maneja su sistema de coordenadas de pantalla se vuelven un poco complicadas. Lo que recomiendo hacer es poner (0,0) en el centro del área de visualización (así como ventanas y controles). Esto funciona bien porque si pones (0,0) en una esquina, a medida que esa esquina se mueve según la resolución y la relación de aspecto, traducirá todos tus sprites, mientras que el centro de la pantalla siempre será el centro de la pantalla. importa el dispositivo. Continuando con nuestro ejemplo con 800x600, esto daría como resultado un sistema de coordenadas que es (de izquierda a derecha) -4.165in a 4.165in y (de arriba a abajo) 3.125in a -3.125in.

Entonces, en este momento tiene un sistema de interfaz de usuario independiente de DPI con elementos que siempre estarán en el mismo lugar en relación con el centro de la pantalla, no del todo independiente de la resolución. Afortunadamente, lo que la independencia de DPI le permite hacer es escalar la interfaz de usuario al escalar DPI según alguna heurística. Por ejemplo, podemos escalar DPI usando la resolución vertical como nuestra heurística. Si 800x600 es 96 DPI, usaremos 123 DPI para 1024x768 o 115 DPI para 1280x720.

Por último, deberá crear un sistema de diseño que maneje tanto el posicionamiento absoluto como el relativo. Excelentes ejemplos de esto son WPF y la web. Puede especificar que los controles / cuadros llenen un porcentaje del elemento principal mientras lo acopla a un borde junto con muchas otras opciones útiles de diseño automático. Todo esto en conjunto dará como resultado un sistema de interfaz de usuario capaz de verse casi idéntico en muchas resoluciones y relaciones de aspecto diferentes.

Para resumir, le recomiendo que estudie WPF, ya que hace casi todo esto, excepto que mantiene un origen en el sistema de coordenadas de la esquina superior izquierda y no escala automáticamente el DPI según la resolución vertical.

En general, lo que quieras hacer depende del juego.

Una opción es tener bordes negros si la relación de aspecto (proporción) es diferente (probablemente lo más fácil, solo renderice a textura, luego renderice a pantalla, redimensionando según corresponda).

Otra opción es tener diferentes rutas de render para diferentes relaciones de aspecto. Podría tener uno para pantalla panorámica, uno para 'normal'.

Otra opción es escalar las cosas por separado, por ejemplo, hacer que un cuadro de mensaje de IU sea más grande o más pequeño dependiendo de la resolución. Siempre que necesite averiguar dónde dibujar, en lugar de usar píxeles exactos, haga cosas como 0.2 hacia abajo, 0.8 de ancho, 0.1 de ancho, 0.3 de altura. Obviamente, en este caso, obtendría estiramiento de las cosas, aunque dependiendo de cómo esté dibujando cosas que podrían estar bien (es decir, estirar un fondo de la interfaz de usuario, pero no el texto).

En términos de 3D, siempre que configure la ventana gráfica correctamente, debería terminar con reproductores de pantalla panorámica que puedan ver un poco más que las configuraciones que no son de pantalla panorámica. (alternativamente, dibuje bordes negros / o estire la vista).