Comunidad orientada al desarrollo de videojuegos

Viewport Manager en Wave Engine (v1.0.8 en adelante)

Cuando creamos aplicaciones 2D para móviles o tablets, queremos que la aplicación se vea de la misma manera en todos los dispositivos: desde dispositivos lentos y antiguos(ej. iPhone 3GS con resolución de 320×480) hasta los nuevos(ej. iPhone 5 con una resolución de 1136×640). Sin embargo, la gran diferencia de resolución hace esta tarea muy difícil.

figure1

Diferentes resoluciones entres las 3 generaciones de iPhone

Si las diferencias de gestión dentro de la plataforma iOS son difícil, añadiendo otros como Android, que presenta una increíble diversidad de recursos y resoluciones existentes, puede llegar a ser muy compleja.

Wave proporciona dos maneras de afrontar este problema. Una es usar diferentes gráficos para cada versión. Pero para aquellos que quieran simplificar aún más este problema, desde la versión del motor 1.0.8 se añadió un servicio llamado “ViewportManager”. Este servicio te permite desarrollar la aplicación para un dispositivo imaginario con una resolución especificada por nosotros mismos (ej. 480×800). Entonces, de forma automática y de manera transparente para el desarrollador, el motor es capaz de adaptar la aplicación al dispositivo en el que se está ejecutando.

Para usar las características de ViewportManager, tenemos que crear un proyecto de Wave  con la plantilla de VS2012. Vamos a la clase llamada Game.cs y establecemos la resolución para nuestro dispositivo imaginario:

figure2

Lo primero que hay que hacer es obtener el servicio ViewportManager:

ViewportManager vm = WaveServices.GetService();

Y lo segundo es activar el uso de este servicio:

vm.Activate(480, 800, ViewportManager.StretchMode.Uniform);

La llamada al método que activa el ViewportManager incluye 3 parámetros:

parametro1: Ancho del dispositivo virtual

parametro2: Alto del dispositivo virtual

parametro3: Modo de configuración del dispositivo real. Hay 3 modos:

    • Fill: Estirar la aplicación para adaptarse a las dimensiones del dispositivo mediante la deformación de la imagen si es necesario.
    • Uniform: Estirar la aplicación para adaptarse a las dimensiones, manteniendo la relación de aspecto. Esto puede originar barras negras en la parte superior o inferior.
    • UniformToFill: Estirar la aplicación para adaptarse a las dimensiones, conservando la relación de aspecto y evitar las barras negras que podrían conducir a la perdida de partes de la pantalla.

A continuación se presentan algunos ejemplos del uso de Viewport Manager y los resultados de los 3 modos de ajuste:

figure3

Resolución: 480 × 800, modo de Ajuste: Fill

figure4

Resolución: 480 × 800, modo de Ajuste: Uniform

figure5

Resolución: 480 × 800, modo de Ajuste: UniformToFill

Notas Finales

  1. ViewportManager afecta a todas las entidades 2D en Wave Engine: Sprites, UIComponents o entidades personalizadas. Sin embargo, no afecta a las entidades 3D ya que estas no necesitan ser adaptadas cuando se cambia la resolución del dispositivo.
  2. ViewportManager puede ayudar a simplificar el desarrollo de aplicaciones 2D, ya que le permite utilizar los mismos assets gráficos para todas las plataformas y dispositivos y permite trabajar a una resolución fija.
  3. El uso de Viewport Manager no es necesario y para usarlo debe ser activado.
  4. La selección de la resolución con Viewport Manager es un poco complicada y tiene que estar bien pensada. En efecto, si se elige una resolución pequeña, una vez instalado en resoluciones más altas, la aplicación se mostrará en una resolución baja, pero si se elige una resolución alta, entonces los assets serán muy (demasiado) grandes. Nuestra recomendación es utilizar el tamaño más común (o intermedio) para el rango de dispositivo al que la aplicación se dirige.

FUENTES

Tutorial original en inglés: http://blog.waveengine.net

Para descargar Wave Engine: http://www.waveengine.net

Traducción por Carlos Sánchez López

, , , , ,

Leave a Reply