¿Qué debo tener en cuenta al hacer juegos en 2D para múltiples resoluciones?


27

Estoy haciendo un juego 2D (Android). Los dispositivos Android varían mucho en resolución de pantalla; ¿Qué debo tener en cuenta al hacer mi juego?

  • ¿Necesito mantener versiones grandes de todas las imágenes y reducirlas dependiendo de la resolución (eso no desperdicia espacio)?
  • ¿Las fuentes de mapa de bits se escalan bien o necesito usar algo más?
  • ¿Algo más que esté olvidando?

Respuestas:


26

Soy el desarrollador de un juego móvil extremadamente portátil que se ejecuta en todo, desde PC, hasta televisores, incluso el Kindle de Black & White Amazon (Smiles HD - http://smileshd.com - Más dispositivos y plataformas de las que ves allí) .

La mejor manera que he encontrado para admitir cualquier dispositivo es elegir una resolución base, luego escalar (o reducir) a la pantalla actual. Si desea hacer trampa, puede adaptarse a la nueva resolución de pantalla, pero idealmente debe mantener la misma relación de aspecto. Ajustar un juego hecho para una pantalla de 4: 3 se ve horrible en un 16: 9, pero ajustando un 16: 9 a un 16:10, nadie podría notarlo. Notará que me refiero a las pantallas por relación de aspecto y no a las dimensiones, lo cual es una forma especialmente útil de pensar en esta era de tamaños de LCD totalmente aleatorios.

Para crear ilustraciones que se adapten a cualquier pantalla mientras se mantiene la relación de aspecto, cree fondos que sean más grandes de lo que la mayoría de las pantallas típicas verán. Esto es similar al concepto de áreas seguras para títulos con Televisión.

http://en.wikipedia.org/wiki/Safe_area

Los fondos generados funcionan muy bien para esto. Patrones en mosaico, cuadros de ajedrez, formas fractales, etc. Solo necesita generar un poco más para que quepa en una nueva pantalla.

Además, crear imágenes estáticas más grandes de lo que verá su usuario típico. Más ancho que la pantalla panorámica (16: 9) y más cuadrado que el def estándar (4: 3). Nuevamente, regrese a las áreas seguras de título, ajuste su información importante en un área segura, escale un poco para que su área segura toque uno de los bordes de su pantalla y deje algo de escurrimiento para dispositivos que son un poco más grandes.

Una variación con la que estoy trabajando hoy es crear objetos 3D "seguros para el título". Dado que son 3D, compuestos completamente de vértices, hacerlos más grandes que la pantalla prácticamente no ocupa más memoria que si encajaran. Justo cuando aumenta la densidad de píxeles, es posible que desee algunas texturas de mayor detalle disponibles. Si no, bueno, está un poco borroso.

Interfaces de usuario, me gusta ajustar la interfaz de usuario principal dentro de un cuadrado perfecto en el medio de la pantalla. Las esquinas y los bordes medios también son lugares realmente buenos para colocar cosas; Debe calcular sus coordenadas como tales (en relación con la esquina o los bordes medios).

http://www.smileshd.com/press/iPad/png/UI01.png

Si realmente quieres ponerte elegante, puedes admitir las orientaciones Tall y Wide. Algunos dispositivos informan que sus resoluciones de pantalla son más altas que anchas (iPhone, por ejemplo), por lo que es posible que tenga que hacer algo por esos dispositivos de todos modos, incluso si simplemente gira todas sus coordenadas.

Una interfaz de usuario que se adapta a pantallas altas y anchas puede ser una vista bastante impresionante.

Ancho: http://www.smileshd.com/press/iPad/jpg/SmilesHD01.jpg

Alto: http://www.smileshd.com/press/iPad/jpg/SmilesHD02.jpg

En el lado positivo, en cuanto al diseño, solo necesita considerar Alto y Ancho, en lugar de Retrato + Retrato inverso + Paisaje + Paisaje inverso. Cuando elija las posiciones de las cosas en la pantalla, considere tener una posición alternativa más apropiada para la otra orientación.

¿Necesito mantener versiones grandes de todas las imágenes y reducirlas dependiendo de la resolución (eso no desperdicia espacio)?

Bueno, puede "desperdiciar espacio" y admitir una variedad más amplia de dispositivos con una sola construcción, o "perder el tiempo" y tener que hacer MUCHAS compilaciones y cambiar el tamaño de las obras de arte para muchos dispositivos.

En el mejor de los casos, debe crear su obra de arte a una resolución más alta que el tamaño final en un televisor de 1080p (1920x1080). 2048x2048 debe ser un tamaño común en su obra de arte de origen. O eso, o considere usar herramientas de ilustraciones vectoriales como Flash y Adobe Illustrator.

Recomiendo encarecidamente crear un proceso automatizado para cambiar el tamaño de su obra de arte. La mayoría de los dispositivos móviles actuales, incluidas las tabletas, no superan las resoluciones superiores a 720p (1280x720) ... al menos, no mucho. Sin embargo, el año que viene, simplemente no sabemos si eso ya será cierto (¿iPad 3?).

De cualquier manera, para obtener el mejor rendimiento, debe acostumbrarse a la idea de la obra de arte de origen y los activos de origen. Luego puede realizar un proceso que optimice los datos para cualquier dispositivo (s) al que se dirija.

¿Las fuentes de mapa de bits se escalan bien o necesito usar algo más?

Se escalan bien si está utilizando un buen filtrado. Si está haciendo su juego 2D con hardware 3D (OpenGL ES), entonces debo recomendar encarecidamente que utilice el filtrado lineal combinado con MipMapping (es decir, un conjunto de imágenes reducidas). Puede obtener resultados perceptiblemente perfectos con esto, y a menudo es más rápido usar mipmaps que no hacerlo.

http://en.wikipedia.org/wiki/Mipmapping

De todos modos, espero que eso ayude. Mucha suerte con tu proyecto.


2

En general, cada textura que hagas debe ser 256x256 o 512x512. Si también está apuntando a pads (Galaxy Tab, Honecomb, iPad), entonces 512x512 no llenará toda la pantalla, por lo que es posible que desee incluir versiones más grandes de esos activos artísticos que necesitan llenar la pantalla. Apple incluye un sufijo de imagen nativo "@ 2x" para manejar este caso.

La solución simple, que he usado yo mismo, es simplemente crear su juego para una pantalla de 320x480 (iPhone). Deje que esto se doble naturalmente para iPhone 2 (640 x 960), y luego el único otro caso que realmente tiene que manejar de manera diferente es el hecho de que algunos dispositivos Android tienen una pantalla más alta, así que simplemente coloque un búfer en la parte superior e inferior (en vertical modo).

En resumen: crea tu juego para un tamaño de pantalla neutral y luego cubre las excepciones, según


2
Creo que te perdiste mi Androidetiqueta. De todos modos, el búfer apesta; es mejor si tu juego realmente se amplía y se ve bien.
cenizas999

1

Es mejor conservar las copias de trabajo de cualquier activo que tenga. Si está desarrollando una imagen en Photoshop, por ejemplo, guarde el archivo psd original. Cada vez que necesite una imagen de resolución diferente, puede abrirla y exportar la nueva imagen con una pérdida de calidad mínima.

En lugar de construir para un tamaño de pantalla u otro, te sugiero encarecidamente que construyas para una variedad desde el principio. No solo estás hablando de diferentes densidades de píxeles, también estás hablando de diferentes relaciones de aspecto. 16x9 y 16x10 pueden producir una experiencia visual muy diferente. Así que asegúrese de probar nuevos cambios en una variedad de formas y tamaños de pantalla diferentes.

En mi experiencia, las fuentes de mapa de bits no se escalan bien en absoluto. Puede depender mucho del estilo de fuente que use, pero en general, volver a muestrear el mapa de bits de la fuente produce resultados muy pobres. Las fuentes de mapa de bits funcionan mejor cuando el muestreo de textura no está configurado en multimuestreo (GL_NEAREST y sin mipmaps) y se representa de tal manera que se asigna píxel por píxel a la pantalla. Es posible que desee considerar el uso de una serie de representaciones de la misma fuente en diferentes tamaños y asegurarse de que la fuente siempre aparezca a escala == 1 en su juego; esto le permitirá algunas opciones limitadas al elegir un tamaño de fuente para usar en un escenario particular.


1

Android proporciona algo de ayuda para esto ...

Puede especificar "recursos alternativos" para elementos como sus gráficos.
Consulte la sección "Proporcionar recursos alternativos" en este enlace: http://developer.android.com/guide/topics/resources/pro Provide-resources.html Debería poder encontrar ejemplos en los ejemplos del SDK o a través de Google.

Además, Google proporciona un emulador de Android que obtienes con el SDK. Puede definir varios dispositivos virtuales con diferentes configuraciones para probar su código. Aquí hay un enlace a más información: http://developer.android.com/guide/developing/devices/emulator.html

Buena suerte amb


0

Además de los aspectos técnicos (abordados por Mr Strange), tenga cuidado al diseñar un juego con un tamaño de pantalla variable. Solo a modo de ejemplo, imagine jugar calles de rabia en una pantalla tipo paisaje y luego en una pantalla de retrato.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.