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

41

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
Loris
fuente
8
No se olviden de nosotros en una proporción de 5: 4 :)
Andrew Russell
2
Me pregunto si esto podría editarse en una pregunta más general de " ¿Cómo manejas las relaciones de aspecto de múltiples pantallas? " ¿Son casos especiales los juegos de plataformas?
Anko
Podría seguir la ruta de Hearthstone y tener un espacio muerto en los lados izquierdo / derecho que simplemente corta en pantallas que no lo verían. Es mucho mejor que las barras negras de la OMI (porque si pones algo sin importancia allí, ¡tus jugadores probablemente ni lo notarán!).
Ethan The Brave

Respuestas:

12

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.

Andrew Russell
fuente
@Andrew Russell Nice y una respuesta directa. Sin embargo, prefiero una combinación de las opciones 3 y 4 sobre otras opciones. A menudo, lo que es visible afecta el comportamiento del juego, y supongo que generalmente no queremos que nuestro juego se comporte de manera diferente en varias configuraciones de hardware. Por lo tanto, el intercambio de un poco de estética por una relación de aspecto virtual forzada probablemente valga el "riesgo" y el esfuerzo adicional de colocar la escena renderizada sobre un fondo negro. Al final del día, sin embargo, todo depende de qué solución se adapte mejor a los mecanismos del juego.
Powerslave
16

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.
MrCranky
fuente
Y si estás haciendo un juego para consola, ¡no olvides el área segura para títulos!
Andrew Russell el
2
Muy buena respuesta. Además: si se trata de un juego multijugador u otro juego competitivo, elige la relación de aspecto de tal forma que no les dé ventaja a los demás. P.ej. Si el movimiento de tu juego es principalmente horizontal, usa la solución n. ° 1 en lugar de la n. ° 2, ya que con la solución n. ° 2, 16: 9 tendrá una mayor vista horizontal (y bonificación anticipada) que otros jugadores. La solución n. ° 1, por otro lado, solo extiende el fondo, lo cual está bien y no generará una discapacidad. Si el juego se mueve en ambas dimensiones por igual, elige una relación fija como en # 3 o # 4.
bummzack
8

¿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.

Gregory Avery-Weir
fuente
1

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)

Iain
fuente
1

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.

JasonD
fuente
1

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.

Mehmet Ataş
fuente
2
Sería mejor si pudieras romper los enlaces y crear una respuesta a partir de ellos. Los enlaces tienden a morir eventualmente.
Katu