Con hyperPad, puedes crear tu proyecto para múltiples dispositivos y tamaños de pantalla. Cuando se trata de soportar diferentes dispositivos, hay dos tipos de proyectos: Proyectos Específicos de Dispositivo y Proyectos Universales.

Proyectos Específicos de Dispositivo: Crea una versión separada de tu proyecto para cada plataforma que quieras soportar. Al crear tu proyecto, especificas un único dispositivo para tu proyecto. Por ejemplo, si deseas hacer solo un juego para iPad, selecciona SOLO iPad (4:3) al crear tu proyecto.

Proyectos Universales: Soporta múltiples dispositivos con un solo proyecto. Cuando creas tu proyecto, seleccionas más de un dispositivo objetivo. Esto significa que el mismo proyecto puede funcionar tanto en iPhone como en iPad sin necesidad de tener dos versiones separadas.

Hay pros y contras para ambos enfoques. Para proyectos que requieren control total sobre la pantalla, y lo que deseas que sea visible en todo momento, un enfoque específico de dispositivo puede ser beneficioso. Sin embargo, esto implica el costo de tener que recrear tu juego/proyecto para cada nueva plataforma.

El beneficio de los proyectos universales es que solo tienes que crear tu juego o aplicación una vez. Sin embargo, tienes menos control sobre lo que aparece en pantalla. Por ejemplo, en un dispositivo más ancho, puedes ver más contenido que de otro modo no sería notable. hyperPad proporciona algunas herramientas y comportamientos para controlar ciertos elementos, pero a veces simplemente necesitas control total y un proyecto específico de dispositivo tiene más sentido.

Este artículo cubre principalmente proyectos universales, ya que estás tratando con múltiples relaciones de aspecto y dispositivos. Para proyectos específicos de dispositivo, es tan simple como asegurarte de que tu contenido encaje en el área verde en el lienzo.

Creando un Proyecto Universal

Al crear un nuevo proyecto, se te solicita que selecciones los dispositivos que deseas soportar. Por defecto, solo se selecciona el iPad (4:3). Puedes tocar los otros dispositivos para habilitar el soporte para ellos también. Si tienes más de un dispositivo seleccionado, tu proyecto se considera un "Proyecto Universal".

Ciclado de Dispositivos

Cuando seleccionas múltiples dispositivos para soportar, esto significa que debes asegurarte de que el contenido de tu proyecto encaje en pantalla para cada dispositivo/relación de aspecto.

El área rectangular verde en el lienzo es el espacio de pantalla visible. Cualquier cosa colocada dentro del espacio de pantalla visible será vista cuando tu proyecto esté en funcionamiento. Ten en cuenta que cada dispositivo que habilitaste al crear el proyecto tiene su propio espacio de pantalla visible.

Para asegurarte de que tu contenido encaje dentro del espacio de pantalla visible para cada área, toca el icono de Ciclo de Dispositivo en la paleta de herramientas.

Recuerda, algunos dispositivos como el iPhone tienen múltiples tamaños de pantalla y relaciones de aspecto. Si estás desarrollando un proyecto para estos dispositivos y deseas soportar una versión anterior de iOS, debes asegurarte de que tu contenido funcione en cada versión de ese dispositivo. Así que si seleccionas iPhone, debes asegurarte de que tu contenido encaje dentro del espacio de pantalla del iPhone 4 (3:2), y el espacio de pantalla del iPhone 5,6,6+ (16:9).

Diseñando tu proyecto para múltiples dispositivos

Típicamente, al desarrollar un juego o una aplicación, quieres evitar rehacer todo para cada proyecto. Con Proyectos Universales puedes usar un diseño inteligente para minimizar la cantidad de trabajo que necesitas hacer nuevamente.

hyperPad tiene todos los tamaños de pantalla comenzando desde la esquina inferior izquierda, luego escalando hacia arriba y a la derecha para dispositivos más grandes. Si tienes esto en cuenta, muchos juegos se pueden crear una vez.

Al diseñar tu escena, diseña de modo que tu contenido principal encaje dentro del dispositivo más pequeño, y tu fondo se ajuste al más grande. Al crear tu proyecto, el tamaño más grande se etiqueta como "Resolución de Diseño". Al hacer esto, muchos proyectos automáticamente se ven geniales en todos los dispositivos.

Por ejemplo, si deseas hacer un juego de plataformas para funcionar tanto en iPhone como en iPad. Puedes diseñar el nivel principal (obstáculos en el suelo, etc.) para encajar dentro de la pantalla más pequeña del iPhone (relación de aspecto 16:9), y luego hacer que tu fondo se ajuste al dispositivo más grande (iPad). En el iPhone más pequeño, el juego aparecerá exactamente como lo diseñaste. Para los dispositivos más grandes (iPad 4:3, o Escritorio 16:10), el juego mostrará más contenido vertical en la parte superior. Dado que hiciste que tu fondo se ajuste al tamaño más grande, siempre hay algo visible y no te quedas con un espacio negro vacío.

Al ciclar por los diferentes dispositivos, observa que el espacio de pantalla visible no cambia en ancho. hyperPad utiliza una resolución personalizada para mantener los anchos consistentes entre todos los dispositivos. Solo la altura cambia mostrando más o menos contenido verticalmente.

Abajo se muestra una tabla que representa las diferentes relaciones de aspecto y resoluciones de los dispositivos.

Relaciones de Aspecto	Ícono	Dispositivos	Resolución de Diseño
4:3		iPad, iPad Pro	2048 px x 1536 px
16:9		iPhone 5, iPhone 5S, iPhone 6, iPhone 6 plus, iPhone 6S, iPhone 6S Plus, iPod 5ta generación, iPod 6ta generación	2048 px x 1158 px
3:2		iPhone 3GS, iPhone 4, iPhone 4S, iPod 4ta generación	2046 px x 1364 px
16:10		Computadoras de escritorio	2048 px x 1280 px

Una nota respecto a los iPhones antiguos (3GS, iPhone 4, 4S y iPod 4ta Generación): Estos dispositivos utilizan una relación de aspecto 3:2. Para mantener el ancho de todos los dispositivos consistente, el espacio de pantalla visible para dispositivos 3:2 es en realidad más alto que los dispositivos físicamente más grandes como el iPhone 5, 6+ (16:9). Si deseas desarrollar para iPhone y soportar iOS 9 y versiones anteriores, DEBES asegurarte de que tu proyecto encaje dentro del espacio de pantalla 3:2.

Si solo deseas soportar iOS 10 y versiones posteriores, entonces no tienes que preocuparte por que tu contenido encaje dentro del espacio de pantalla 3:2.

Importando activos

hyperPad escala automáticamente tu proyecto para verse genial en todos los dispositivos. Para mantener tu proyecto genial en todos los dispositivos, siempre debes importar tus imágenes para que encajen dentro de la Resolución de Diseño. La Resolución de Diseño se da en retina, así que cuando importas imágenes, se generará automáticamente una imagen no retina para ti.

Por ejemplo, si importas una imagen de 512x512 píxeles, se creará una imagen de 256x256 píxeles para ti.

También nota que la resolución de diseño se mide en píxeles. En el dispositivo real, todo se mide en puntos. Esto significa que 2048x1536 píxeles son en realidad 1024x768 puntos (en un dispositivo retina).

Posición Absoluta y Relativa

Hay dos formas de posicionar objetos en hyperPad. Absoluta y Relativa. Las posiciones absolutas colocan un objeto en una ubicación específica en píxeles en el lienzo y se miden en metros. Las posiciones relativas colocan tu objeto en función del porcentaje del espacio de pantalla visible.

Con posiciones absolutas, tus objetos pueden aparecer fuera de la pantalla para dispositivos más pequeños. Esto sucede porque el sistema de coordenadas no cambia según cada dispositivo (1 metro es lo mismo en un iPhone, iPad, y cualquier otro dispositivo).

Con posiciones relativas, tu objeto aparecerá en la misma posición relativa sin importar el dispositivo. Así que si colocas tu objeto en el medio de tu pantalla, estará en el medio para iPhone, iPad, y cualquier dispositivo más grande como un televisor o computadora.

Por defecto, cualquier objeto que coloques en capas regulares usará posiciones absolutas, y cualquier cosa colocada en las capas UI se establece en posiciones basadas en porcentaje. De esta manera, no tienes que preocuparte de que tus botones, barras de salud o joysticks estén fuera de la pantalla para cada dispositivo.

En el gif a continuación, puedes ver el efecto de las posiciones relativas. Las señales "Toca" y la mano están usando posiciones relativas y siempre permanecen en el medio para cada dispositivo.

Para cambiar el tipo de posicionamiento de tu objeto, selecciona tu objeto y desde las propiedades del objeto, cambia a la pestaña Transformar y toca el icono "%" en el campo de posición. Esto convertirá tu posición actual en un porcentaje de la pantalla.

Si ciclas a través de tus dispositivos soportados desde la paleta de herramientas, puedes ver que tus objetos relativos permanecen dentro del espacio de pantalla visible.

Para mantener un objeto completamente centrado, las posiciones X e Y deben estar al 50%.

Acciones Personalizadas Basadas en el Tamaño de Pantalla

A veces quieres que tu proyecto se vea y se sienta ligeramente diferente para cada dispositivo. Por ejemplo, solo deseas que un botón esté disponible en el iPad y no en el iPhone.

Para esto, puedes usar el comportamiento "Obtener Pantalla" para determinar el tamaño de la pantalla actual, y con un comportamiento IF para ocultar el botón en el iPhone.

En el ejemplo anterior, usarías Obtener Pantalla, luego output el Ratio de Aspecto a un comportamiento IF, que verifica si es un iPhone (16:9).

Luego utiliza el comportamiento de ocultar gráfico para ocultar el botón si el tamaño de pantalla es 16:9.

Múltiples tamaños de pantalla y dispositivos