Prácticamente todos los juegos tienen que trabajar en una pantalla de tamaño diferente. Esto puede ser de diferentes tamaños de pantallas de teléfonos - que incluso puede variar entre diferentes versiones de un mismo dispositivo, como el iPhone 4S vs iPhone 5 - diferentes pantallas de tamaño de la tableta, ventanas del navegador redimensionadas, resoluciones de pantalla, y así sucesivamente. Incluso los juegos de tamaño fijo que corren incrustado en una página puede cambiar a modo de pantalla completa, lo que significa que todavía tienen que soportar diferentes tamaños de pantallas.
Esto significa que casi todos los juegos deben tener una manera de soportar múltiples tamaños de pantalla, bien sea para su computadora de escritorio o móvil. Este tutorial cubre los conceptos básicos de apoyo a múltiples tamaños de pantalla.
La versión corta: no se enfoque a una resolución
Un error común es que es necesario apuntar a una resolución específica, como 1280x720. Sin embargo, hay muchas resoluciones diferentes que se utilizan que es ridículo elegir sólo una. Es mucho mejor elegir una relación de aspecto, entonces escalar el juego para adaptarse a eso. Por ejemplo, en vez de 1280x720, el objetivo de la relación de aspecto de 16:9. (Solo tienes que introducir cualquier resolución de 16:9 para el tamaño de la ventana de propiedades del proyecto.) Escala Letterbox en Tamaño completo -en el navegador propiedad del proyecto, y ahora su juego debería aparecer correctamente en cualquier resolución 16:09. Si la pantalla no es 16:9, aparecen barras negras a los lados, lo que ayuda a prevenir problemas de visualización no deseadas al querer ver demasiado del nivel o de la pantalla del menú. Tenga en cuenta que si usted está diseñando un juego de estilo retro pixelada, es posible que desee utilizar Escala Letterbox.
El resto de este tutorial cubrirá las herramientas a su disposición con más detalle.Todavía vale la pena leer, incluso si utiliza la solución rápida arriba. Usted puede incluso apoyar a diferentes relaciones de aspecto, si usted está dispuesto a diseñar su juego con más cuidado.
El uso del modo a pantalla completa
En las Propiedades del proyecto,establezca Pantalla completa en el navegador en modos.
Con este modo ajustado en Off, el juego aparece incrustado en una página HTML en el tamaño determinado por el tamaño de la ventana. Sin embargo, no apoyará a distintos tamaños de pantalla. Si utiliza Solicitar pantalla completa del objeto Browser, usted todavía tiene que soportar diferentes tamaños de pantalla de todos modos.
Modo de recorte
En el modo de recorte la vista queda en la misma escala, y simplemente muestra más o menos de la disposición dependiendo del tamaño de la ventana. Las siguientes imágenes muestran una pequeña ventana en el modo de recorte. El reproductor aparece en el mismo tamaño, pero no es menos de la disposición visible.
Si la ventana cambia a un tamaño más grande, mucho más de la disposición se puede ver. Observe cómo ahora la ventana es más grande, el jugador puede detectar a los monstruos más lejos.
Este modo le permite controlar la escala a usted mismo, o simplemente ignorar la escala. Sin embargo, este modo general, no es buena para los juegos. Considere el iPhone y el iPad, que tiene el mismo tamaño de pantalla física, pero en diferentes resoluciones dependiendo de la generación. Desde modo de recorte no hace cambiar la escala, puede hacer que su juego tenga un aspecto extrañamente pequeña en dispositivos de alta resolución.
Modo de escala Letterbox
Escala Letterbox en este modo simplemente escalas el juego para adaptarse a la ventana. Si la relación de aspecto no coincide, aparecen barras negras a los lados de la ventana. He aquí dos ejemplos:
Desde que aparecen barras negras por los lados, se evita el problema de mostrar accidentalmente el contenido que se supone que está fuera de la pantalla. Sin embargo, la desventaja es que algunos usuarios pierden parte de su área de visualización de las barras negras. A pesar de esto, en el modo de escala Letterbox se puede aplicar a casi cualquier juego y tienen que seguir funcionando correctamente, por lo que es una manera rápida y fácil de soportar diferentes tamaños de pantalla, sin tener que modificarlo para diferentes relaciones de aspecto.
Escala entera Letterbox
El modo de Escala entera Letterbox es idéntica al modo escala Letterbox , conservando la relación de aspecto, pero también sólo un zoom a una escala entera. Por ejemplo, sólo se escala a 1x, 2x, 3x, 4x, etc y nunca en algo así como 2,5 veces. Esto es importante para los juegos con Point muestreo (estilo retro generalmente) para conservar la precisión de píxel exacto en que la ampliación de la partida. Esto también significa barras negras pueden aparecer en ambos lados y en la parte superior e inferior.
Modo de escala externo
El modo de escala externo, escala la vista para adaptarse al tamaño de la ventana, al igual que lo hace el Letterbox a pantalla completa . Sin embargo, en lugar de mostrar barras de color negro,utiliza toda la pantalla y muestra más de la disposición. Esto tiene el efecto secundario de a veces mostrar más de la disposición que el tamaño de la ventana. Esto puede significar un espacio vacío o supuestamente objetos fuera de la pantalla pueden aparecer por los lados de la pantalla si no diseña su juego en consecuencia.
Observe cómo el juego ha sido reducido a una pequeña ventana, sin mostrar las barras negras:
Sin embargo, si la ventana se redimensiona a un tamaño inusual, el juego se muestra incorrectamente:
El juego se ha escalado apropiadamente, pero la relación de aspecto es tan radicalmente diferente que se puede ver más allá del borde derecho de la disposición. No sólo eso, sino que el jugador ya puede ver a algunos monstruos que no podía ver antes, por lo que esto se podría contar como hacer trampa. Con Letterbox a pantalla completa esto habría sido cubierto por las franjas negras, por lo que a menudo es preferible utilizar el modo de Letterbox.
Sin embargo, si usted está apuntando a los dispositivos específicos con windows no puede cambiar el tamaño, puede utilizar este modo para soportar diferentes relaciones de aspecto. Pero el problema anterior sigue siendo válido, tendrá que hacer cosas como dibujar fondos más grandes que el tamaño de la ventana para asegurarse el espacio vacío no aparece en algunas pantallas y probar a fondo el juego para asegurar que nada intencional se produce con la apariencia del juego.
Para obtener más información, consulte la sección Teniendo algo en comun - relaciones de aspecto a continuación.
Modo interno de Escala
Al igual que la escala exterior, este modo escala la visión y utiliza la pantalla completa. Sin embargo, se encarga de las relaciones de aspecto de manera diferente: mientras que la Escala externa muestra más de la disposición si la relación de aspecto es diferente,la Escala interna muestra menos. Ya que prefiere cortar partes de la vista, nunca muestra accidentalmente el contenido fuera de la ventana ... pero usted todavía tiene el problema opuesto - ¡que podría cortar algo que usted quiere que sea visto!
He aquí un ejemplo en el que el juego se muestra correctamente cuando se escala en forma pareja:
Si usamos el mismo tamaño inusual que hicimos con la 'escala exterior', cuenta cómo un zoom y corta las partes de la vista en vez de mostrarnos demasiado:
Este es un resultado mejor que Escala exterior, pero ahora tenemos que ser conscientes de las partes del juego que se está cortado en algunos tamaños de ventana. Este punto de vista es como sólo ver una barra estrecha a través del tamaño de la ventana del juego. Una técnica es útil para el diseño de juegos es para la relación de aspecto de 16:9, pero con los laterales recortados cuando se ve en 4:03. Algunos productores de la película hacen con películas.
Teniendo algo en comun - relaciones de aspecto
Escala Letterbox o escala entera Letterbox son maneras fáciles de conseguir su juego para trabajar en una amplia gama de tamaños de pantalla, sin tener que hacer mucho trabajo. Sin embargo, la desventaja es que aparecen barras negras. Esto puede ser molesto para los usuarios móviles que tienen una pantalla pequeña, y no quieren que su tamaño de la pantalla sea ni más pequeño de lo necesario. Además, se puede mirar muy poco profesional si la relación de aspecto del dispositivo es ligeramente diferente a la relación de aspecto del juego - barras delgadas negras aparecerán en los lados, que parecen ser innecesario - el usuario podría preguntarse "¿por qué no era la pantalla simplemente extendido a mostrar el área total? "
Para apoyar este caso con una pantalla completa, necesitas usar Escala externa o Escala de modo interno en lugar de Escala Letterbox. Esto entonces significa que usted necesita soportar múltiples relaciones de aspecto también.
Este es el mismo problema que enfrentan los productores de televisión. Hay muchos televisores por ahí utilizando relaciones de aspecto de 04:03, 16:09 y 16:10. Si un productor de películas de televisión muestran sólo en 4:3, en un televisor de 16:9 habrá huecos en los laterales, o el equipo off-set, posiblemente, incluso involuntaria y la tripulación visible! Del mismo modo, si dibuja un fondo exactamente ajustado a una pantalla, a continuación, ejecutarlo con Escala modo externo en otra pantalla con una relación de aspecto ligeramente diferente, lagunas aparecerán en el lado o el contenido fuera de la disposición se hace visible. Esto puede ocurrir incluso si simplemente no se toman en cuenta para el espacio ocupado por la barra de estado de dispositivos como el iPhone.
Hay dos maneras de resolver este problema:
1) Use Escala de modo externo y sacar sus fondos más ancho (o más alto, dependiendo de la orientación) que el tamaño de la ventana, más allá de los bordes visibles normalmente, para asegurar que no siempre aparecen vacíos, independientemente de la relación de aspecto del dispositivo.
2) Use Escala de modo interno, y asegurarse de que nada importante se encuentra cerca de los bordes, ya que los bordes son susceptibles de ser separados en diferentes pantallas de tamaño.
No siempre es fácil diseñar un juego correctamente utilizando cualquier técnica. Sin embargo, le permite diseñar juegos que siempre utilizan la pantalla completa, que a menudo se ve mejor que mostrando barras negras.