¿Cómo manejarías diferentes relaciones de aspecto en un juego de plataformas 2D?

Hace mucho tiempo, 4: 3 era prácticamente la única relación de aspecto que encontraría en una PC. Hoy el más común es el 16:10, pero la mayoría de los monitores nuevos (especialmente los portátiles) son 16: 9

Estoy escribiendo un juego de plataformas en 2D, y no puedo decidir cómo debo manejar todas las diferentes proporciones.

Aquí hay algunas ideas:

1. 4: 3 obtiene más contenido, las pantallas anchas se cortan en la parte superior e inferior
2. 16: 9 obtiene más contenido, los otros se cortan a izquierda y derecha
3. El juego es en 16: 9 con barras horizontales negras para otros AR
4. El juego es en 4: 3 con barras verticales negras para otros AR

Si no tienes una razón convincente para hacer que tu juego sea "amplio" (en cuyo caso, usa el enfoque 3) o estrecho (en cuyo caso usa el enfoque 4), elige una combinación de 1 y 2 (o posiblemente 3 y 4 si quieres ocultar cosas fuera de la pantalla).

Seleccione una relación de aspecto de compromiso (16:10 es buena, o incluso 16:11). Si el usuario está en 16: 9, dele más contenido a un lado, y si está en 4: 3, dele más contenido en la parte superior e inferior.

En cualquier caso, me parece mejor implementarlo con algo como esto en su clase de cámara:

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

En ese momento, simplemente puede experimentar con diferentes tamaños mundiales nominales (es decir, el tamaño de la cámara en unidades mundiales) y simplemente seleccionar el mejor.

Bueno, como consejo básico, en PC diría "no asumas que tu usuario quiere ejecutar la pantalla completa". Y en modo ventana, elija su relación ideal y simplemente utilícela directamente.

Los usuarios creo que generalmente aceptan barras negras cuando se les presenta contenido de pantalla completa. Entonces las estrategias 3 y 4 son aceptables, si no ideales. Tienen la ventaja de que siempre sabes cuánto contenido estás representando: es decir, no hay errores furtivos que solo ocurren cuando se ejecuta en pantalla panorámica.

Si está tratando de adaptarse y detecta la proporción de usuarios a través de la resolución de pantalla y muestra la mayor cantidad de contenido posible, debe tener en cuenta el contenido de alta y baja prioridad de manera diferente. El contenido de alta prioridad es algo que el usuario tiene que ver absolutamente en la pantalla, si está fuera de la pantalla el juego falla. Así que se trata de elementos como HUD y UI, y el avatar del jugador y cualquier cosa con la que estén interactuando. El contenido de baja prioridad es algo que si está en pantalla es bueno, pero si está fuera de la pantalla no es gran cosa. Por ejemplo: gráficos de fondo y cosas que están razonablemente lejos del avatar.

Suponiendo que tiene una interfaz de usuario / HUD que se está superponiendo en la parte superior de un mundo 2D 'físico', entonces esto es lo suficientemente sencillo. Los elementos de baja prioridad son fáciles, solo asegúrate de que la ventana gráfica 4: 3 esté centrada en las cosas interesantes, luego dibuja tantas cosas de baja prioridad como puedas a la izquierda o la derecha. Las cosas de alta prioridad en el mundo 2D (por ejemplo, tu personaje, los enemigos con los que tu personaje está luchando directamente) siempre deben mantenerse en la ventana gráfica 4: 3. Es decir, su código de juego no amplía la cámara para aprovechar el espacio adicional de la pantalla, porque entonces tendrá un código de juego que actúa de manera diferente en pantalla panorámica en lugar de no. Haga que el código del juego suponga que el mundo se está representando en 4: 3, y solo deje que su código de representación tenga en cuenta que en realidad hay más que eso visible.

El diseño de los elementos UI / HUD se puede abordar de dos maneras:

1. Posicionamiento dinámico: especifique todos sus elementos en relación con los bordes de la pantalla (es decir, no todos en relación con 0,0). Dependiendo de su relación de aspecto, los elementos estarán más cerca o más lejos del centro de la pantalla. Pros: Le permite enganchar cosas a las esquinas y hacer que "funcionen". Contras: es difícil hacer que el diseño funcione bien en el centro, y el riesgo de que los elementos se superpongan
2. Posicionamiento estático conservador: diseñe todos sus elementos en 4: 3 y simplemente desfaselos cuando se ejecute en pantalla panorámica. Pros: lógica / coordenadas de diseño simples y sin ambigüedades. Contras: deja un espacio visual muerto a la izquierda y a la derecha de los controles de la interfaz de usuario, donde verá el mundo 2D en el fondo pero no la interfaz de usuario.

¿Cuál es el más apropiado para tu juego? Si está haciendo Canabalt (es decir, un juego que depende de la velocidad horizontal), una relación de aspecto amplia con barras negras (# 3) en aspectos más estrechos sería ideal para resaltar el movimiento lateral. Por otro lado, si tienes un juego más aéreo como Super Smash Brothers, una pantalla más alta (# 2 o # 4) sería lo mejor. Basaría mi decisión en lo que funciona mejor para el juego.

Estoy de acuerdo con otros respondedores en que se debe tener cuidado con respecto a los elementos que podrían ser visibles en una pantalla pero no en otra.

Castle Crashers parece usar un poco de # 2 y un poco de # 3: obtienes barras negras en una pantalla de 4: 3 y también un área visible muy ligeramente más pequeña, pero siempre debes tener un "área segura" alrededor de los bordes donde no pones nada vital de todos modos (para pantallas como televisores CRT que recortan los bordes)

Hay otra opcion. Puede enmarcar una relación intermedia y recortar y expandir (o limitar) en ambas resoluciones normales.

Creo que la filmación de TV está enmarcada de esta manera, de modo que la pantalla panorámica se ve bien (no todos están abarrotados en el medio de la escena), mientras que recortar para 4: 3 no es tan drástico y hay una panorámica mínima.

Aquí hay una publicación de blog sobre el manejo de múltiples tamaños de pantalla en dispositivos móviles, y aquí su segunda parte cómo este enfoque codificó en Java usando libgdx . Es un poco como la respuesta de Andrew, pero puede ayudar a alguien más.

La publicación del blog cubre tres enfoques principales:

1. Vive con barras negras en la parte superior o en los laterales.
2. Utiliza una ventana virtual.
3. Use elementos flotantes, como lo haría en un diseño de caja flexible de página web.

El número 1 se explica por sí mismo.

Para ilustrar no. 2, suponga que desea admitir tres dispositivos diferentes con tres relaciones de aspecto diferentes. Abra la imagen en un editor de imágenes. Para el primer dispositivo, dibuje el rectángulo más grande en la relación de aspecto de ese dispositivo que se ajuste dentro de su imagen. Haga lo mismo para el segundo dispositivo y el tercer dispositivo. Su área utilizable, o ventana virtual, es la intersección de los tres rectángulos. No se puede garantizar que cualquier cosa fuera de esa ventana sea visible.

El número 3 implica colocar objetos en la pantalla de forma similar a cómo colocaría elementos en una página web utilizando flexbox o flotantes. Por ejemplo, colocaría el botón de pausa 5 píxeles desde la parte superior y 5 píxeles desde la derecha. No importa qué relación de aspecto tenga el dispositivo, el botón de pausa siempre estará en la esquina superior derecha.