Trabajar con Iconos e Imágenes de tvOS en Xamarin

Artículo
03/16/2017

La creación de iconos cautivadores e imágenes es una parte fundamental del desarrollo de una experiencia de usuario inmersiva para sus aplicaciones de Apple TV. En esta guía se tratarán los pasos necesarios para crear e incluir los recursos gráficos necesarios para las aplicaciones de Xamarin.tvOS:

Imagen de inicio: Una imagen de inicio se muestra cuando se inicia la aplicación por primera vez y se reemplaza por la primera pantalla de la aplicación una vez completado el inicio.
Imágenes superpuestas: Específica de Apple TV, las nuevas imágenes superpuestas de Apple funcionan con el efecto Parallax para crear un efecto 3D para los elementos seleccionados. Hay varias maneras de Crear imágenes superpuestas.
Icono de aplicación: Los iconos son necesarios para no solo la pantalla principal de Apple TV, sino para app Store. Deben proporcionarse como una imagen superpuesta.
Imagen de estante superior: Si la aplicación se coloca en la fila superior de la pantalla inicio, necesitará una imagen de estante superior para resaltar las características de la aplicación. Opcionalmente, puede proporcionar Contenido dinámico de la estantería superior para resaltar el contenido de la aplicación.
Imágenes de Game Center: Si la aplicación es un juego y usa Game Center, se necesitarán varias imágenes adicionales.
Configuración de imágenes de proyecto de Xamarin.tvOS: Trata los pasos necesarios para establecer el icono iniciar imagen y aplicación para la aplicación Xamarin.tvOS.

Importante

Todas las imágenes de Apple TV están en la resolución 1x (@1x) y solo debe usar imágenes de este tamaño. Incluir gráficos más grandes y de mayor resolución no solo tardan tiempo en descargarse y usar más memoria y almacenamiento, sino que tienen que volver a escalar dinámicamente en tiempo de ejecución y afectarán negativamente al rendimiento del dibujo.

Iniciar imagen

Imagen de inicio es lo primero que se muestra cuando la aplicación Xamarin.tvOS se inicia inicialmente en Apple TV y, como tal, todas las aplicaciones tvOS deben proporcionar una imagen de inicio.

La imagen de inicio aparece rápidamente y da la impresión de que la aplicación es rápida y con capacidad de respuesta. Apple TV reemplazará la imagen de inicio por la primera pantalla de la aplicación poco después.

Las imágenes de inicio no son una oportunidad para anuncios o expresiones artísticas, solo existen para dar la impresión de que la aplicación se inicia rápidamente y está listo para usarse.

Iniciar tamaño de imagen	Notas
1920x1080 px	Solo archivos de .png sin capas

Apple realiza las siguientes sugerencias para diseñar la imagen de inicio de la aplicación:

Casi idéntico a la primera pantalla: La pantalla de inicio debe estar lo más cerca posible de la primera pantalla de la aplicación. Incluir diferentes gráficos o elementos puede dar lugar a un molesto "flash" cuando aparece la primera pantalla.
Evitar usar texto: Las imágenes de inicio son estáticas y, como tal, no se localizarán antes de mostrarse.
Inicio de la reproducción: Dado que los usuarios de Apple TV suelen cambiar las aplicaciones, no debería llamar la atención al proceso de inicio de la aplicación.
No hay anuncios de personalización de marca: La imagen de inicio no debe usarse como pantalla Acerca de ni incluir ninguna personalización de marca a menos que sea parte estática de la primera pantalla de la aplicación. Los anuncios están estrictamente prohibidos.

Establecimiento de la imagen de inicio

Para establecer la imagen de inicio del proyecto de tvOS, haga lo siguiente:

En el Explorador de soluciones, haga doble clic en Assets.xcassets para abrirlo para editarlo:
En el Editor de recursos, haga clic en el LaunchImages recurso:
Haga clic en la entrada 1x Apple TV y seleccione Iniciar imagen u opcionalmente, arrastre una nueva imagen desde el sistema de archivos:
Guarde los cambios.

Imágenes superpuestas

Novedades de Apple TV, las imágenes superpuestas funcionan con el Efecto Parallax para producir un efecto 3D que ayuda a mantener al usuario en el sofá mentalmente conectado al contenido en la pantalla a través de la sala.

Las imágenes superpuestas contienen de dos (2) a cinco (5) capas independientes que se combinan para formar una imagen completa. Con la excepción de la capa de fondo, cada capa usa su orden Z junto con la transparencia para crear una ilusión de profundidad. Cuando el usuario interactúa con una imagen superpuesta, las capas ordenadas por Z superiores se escalan y se superponen para crear este efecto.

Importante

Las imágenes superpuestas son necesarias para los iconos de la aplicación y son opcionales para otros Elementos enfocados (como la imagen de estante superior). Sin embargo, Apple sugiere usar imágenes superpuestas para cualquier imagen que pueda centrarse en la aplicación.

Apple realiza las siguientes sugerencias para diseñar las imágenes superpuestas:

Hacer que la capa de fondo sea opaca: La capa de fondo (capa 1) debe ser opaca o recibirá un error al intentar usar la imagen superpuesta en Apple TV. Todas las demás capas pueden contener varios niveles de transparencia para mejorar el efecto 3D.
Aislar elementos en primer plano, elementos intermedios y de fondo : Coloque elementos prominentes (como los personajes del juego) en primer plano, use el medio para elementos secundarios o sombras. Por último, incluya un fondo neutro para proporcionar una fase para las capas superiores.
Mantener texto en primer plano: A menos que desee que el texto se oscurezca en niveles superiores, por lo general debe estar en la capa superior.
Usar capas simples: El efecto Parallax se diseñó para ser sutil, por lo que mantener las capas en un mínimo para evitar efectos jarros y poco realistas.
Incluir una zona segura: Dado que las capas superiores se pueden recortar durante un Efecto Parallax, debe crear un borde de zona segura en cada capa. Si el contenido se acerca demasiado al borde de las capas, se puede recortar. Las capas superiores experimentarán más escalado y recorte que las capas inferiores. Vea la sección Capas de imagen de ajuste de tamaño a continuación.
Vista previa a menudo: Las imágenes superpuestas se deben obtener una vista previa a menudo para asegurarse de que se produce el efecto 3D deseado y que no se recorta ningún contenido de las capas individuales. Debe obtener una vista previa de las imágenes superpuestas en el hardware real de Apple TV para asegurarse de que se representan según lo previsto.

Siempre que sea posible, siempre debe usar los controles integrados UIKit para mostrar las imágenes superpuestas, ya que obtendrán automáticamente el Efecto Parallax cuando entren en el foco.

Cambiar el tamaño de las capas de imagen

Es importante recordar incluir un borde de Zona segura en cada capa que compondrá la imagen superpuesta. Dado que las capas individuales se pueden escalar y recortar durante el Efecto Parallax, el contenido de las capas se puede recortar si está demasiado cerca del borde de la capa:

Creación de imágenes superpuestas

tvOS funciona con imágenes superpuestas en los siguientes formatos:

Archivos CAR: Este es un formato de catálogo de activos propietario creado por Apple. No crea archivos CAR directamente, se crean en tiempo de compilación a partir de archivos LSR y se incluyen en la agrupación de aplicaciones.
Imágenes LSR: Este es un formato de imagen propietario creado por Apple. Use el Complemento Parallax Exporter Adobe Photoshop o la Vista previa Parallax para crear y obtener una vista previa de imágenes superpuestas en el formato LSR.
Assets.xcassets: De dos (2) a cinco (5) imágenes con formato .png incluidas en un catálogo de activos que se compilará en una imagen con formato CAR o LSR en tiempo de compilación.
Archivos LCR: Este es un formato de archivo propietario creado por Apple. Los archivos LCR están diseñados para usarse como contenido adicional descargado de uno de los servidores de contenido. El archivo LCR nunca debe incluirse en la agrupación de aplicaciones. Los archivos LCR se generan a partir de archivos LSR o Photoshop mediante la herramienta de línea de comandos layerutil incluida con Xcode.

El Parallax Previewer

Apple creó el Parallax Previewer para obtener una vista previa y crear imágenes superpuestas necesarias para iconos de aplicación y elementos enfocados opcionales. El previewer muestra cada capa que forma la imagen superpuesta completada:

Al obtener una vista previa de una imagen superpuesta, puede usar el mouse para girar la imagen y obtener una vista previa del Efecto Parallax. Use los botones + (más) y - (menos) para agregar y quitar capas.

Al crear una nueva imagen superpuesta, se puede exportar en el formato LSR e incluirse en el lote de la aplicación.

Para obtener más información sobre cómo crear y obtener una vista previa de imágenes superpuestas, vea la sección Crear ilustraciones Parallax de Apple de la Guía de programación de aplicaciones para tvOS.

Iconos de aplicación

La aplicación Xamarin.tvOS no solo requerirá un icono de aplicación para la pantalla principal de Apple TV, sino también un icono para App Store. El icono de la aplicación es el primer cambio para hacer una gran impresión sobre el usuario potencial y debe comunicar el propósito de la aplicación de un vistazo.

Cada aplicación debe proporcionar una versión pequeña y grande del icono de la aplicación. El icono pequeño se usará en la pantalla principal de Apple TV cuando se instale la aplicación. App Store usa la versión grande. El icono de aplicación grande debe imitar la apariencia de la versión de icono pequeña.

Icono pequeño	Solución	Solución
Tamaño real	400x240px	1280x768px
Tamaño de zona segura	370x222px
Tamaño sin enfoque	300x180px
Tamaño centrado	370x222px

Importante

Los iconos de la aplicación deben proporcionarse como Imágenes superpuestas. Vea la sección Imágenes superpuestaspara obtener más información.

Apple proporciona las siguientes sugerencias para crear los iconos de aplicación:

Proporcionar un único punto de enfoque: Diseñar el icono con un único punto de enfoque colocado directamente en el centro del icono.
Usar un fondo simple: Mantener el fondo del icono sencillo para que las capas superiores destaquen. Considere la posibilidad de usar un degradado sutil o de color simple.
Limitar la cantidad de texto: Dado que el nombre de la aplicación aparecerá debajo del icono cuando el usuario lo seleccione, solo debe incluir texto cuando sea esencial para el diseño del icono.
No usar capturas de pantalla: Capturas de pantalla son demasiado complejas para un icono y no permiten al usuario ver el propósito de la aplicación de un vistazo.
Mantener iconos cuadrados: tvOS aplica automáticamente una máscara que redondea sutilmente las esquinas de los iconos. No incluya este redondeo usted mismo.
Separar cuidadosamente las capas: El texto debe estar en la parte superior, los elementos secundarios en el centro y un fondo neutro que permita que las capas superiores brillen.
Usar degradados y sombras cuidadosamente: Degradados y sombras pueden entrar en conflicto con el Efecto Parallax para que se usen cuidadosamente. Los estilos sencillos de degradado de arriba a abajo y claro a oscuro funcionan mejor. Las sombras normalmente funcionan mejor como tintas afiladas y de borde duro.
Variar la transparencia de la capa: Usar distintos niveles de transparencia en los niveles superiores del icono de la aplicación para aumentar el efecto 3D. La capa de fondo debe ser opaca o producirá un error.

Establecer los iconos de la aplicación

Para establecer los iconos de aplicación necesarios para el proyecto de tvOS, haga lo siguiente:

En el Explorador de soluciones, haga doble clic en Assets.xcassets para abrirlo para editarlo:
En el Editor de recursos, expanda el App Icon & Top Shelf Image recurso:
A continuación, expanda el App Icon - Small recurso:
A continuación, expanda el Back recurso y haga clic en la Contents entrada:
Haga clic en el entrada de Apple TV 1x y seleccione un archivo de imagen.
Repita los pasos anteriores para los recursos de Front y Middle.
A continuación, repita los mismos pasos para definir el App Icon - Large recurso.
Guarde los cambios.

Imagen de estante superior

Si el usuario ha colocado la aplicación Xamarin.tvOS en la fila superior de la pantalla inicio de Apple TV, se mostrará una imagen de estante superior grande cuando el usuario seleccione la aplicación. Esta imagen debe resaltar las características de la aplicación o proporcionar vínculos directos a su contenido.

La imagen de estante superior se puede proporcionar como un único archivo estático de .png o .lsr (veaCreación de imágenes superpuestas) o se puede crear dinámicamente en tiempo de ejecución como una sola fila de elementos enfocados (vea Contenido dinámico de la estantería superior a continuación).

Tamaño de imagen de estante superior	Notas
1920x720px	Archivo .lsr o .png estático

Apple proporciona las siguientes sugerencias para crear las imágenes de la estantería superior:

Usar imágenes estáticas enriquecidas: Si la aplicación no proporciona un contenido dinámico, su imagen de estante superior no se podrá centrar. Usa esta imagen para resaltar las características de la aplicación o su marca.
Vínculo al contenido de la aplicación: Diseños dinámicos de estante superior proporcionan un vínculo rápido al contenido que el usuario encuentra más importante en la aplicación. Usa esta área para proporcionar un vínculo rápido para iniciar la aplicación e ir inmediatamente al contenido especificado.
Mostrar el contenido más reciente: Contenido enriquecido de la plataforma superior puede dibujar un usuario en la aplicación y hacer que quiera usarlo más. Úselo como área para mostrar el contenido más alto o más reciente.
Contenido personalizado: Los usuarios colocan sus aplicaciones más usadas o favoritas en la fila superior de la pantalla inicio. Use el estante superior para mostrar el contenido en el que estarían más interesados.
Anuncios no permitidos: Los anuncios están estrictamente prohibidos de mostrarse en la estantería superior. Puede mostrar el contenido más reciente que se puede purgar, pero no se debe mostrar información de precios.

Establecer la imagen de estante superior

Para establecer la imagen de estante superior necesaria para el proyecto de tvOS, haga lo siguiente:

En el Explorador de soluciones, haga doble clic en Assets.xcassets para abrirlo para editarlo:
En el Editor de recursos, expanda el App Icon & Top Shelf Image recurso:
Haga clic en el Top Shelf Image recurso:
Haga clic en el entrada de Apple TV 1x y seleccione un archivo de imagen.
Guarde los cambios.

Contenido dinámico de la estantería superior

En lugar de mostrar una imagen estática de estante superior, el estante superior puede contener una fila dinámica de Elementos enfocados o un conjunto dinámico de banners de desplazamiento. Ambos estilos dinámicos te permiten resaltar el contenido proporcionado por la aplicación o saltar a sus características más usadas.

Fila de contenido seccionado

Este tipo de contenido dinámico de estante superior presenta una sola fila de desplazamiento, elementos enfocados opcionalmente divididos en secciones. Normalmente se usa para resaltar contenido nuevo, favorito o recientemente visto de la aplicación.

El contenido se presenta como una única lista de desplazamiento horizontal de contenido con una etiqueta que aparece bajo la parte actual de contenido seleccionado (que actualmente tiene el foco). Si el usuario selecciona un fragmento de contenido determinado, se iniciará la aplicación y se debe tomar directamente en ese contenido.

Se requerirán los siguientes tamaños de contenido:

Size	Publicación (2:3)	Cuadrado (1:1)	HDTV (16:9)
Tamaño real	404x608px	608x608px	908x512px
Tamaño de zona segura	380x570px	570x570px	852x479px
Tamaño sin enfoque	333x500px	500x500px	782x440px
Tamaño centrado	380x570px	570x570px	852x479px

Apple proporciona las siguientes sugerencias para la fila de contenido con seccionado:

Completar la fila: Debe proporcionar suficiente contenido para abarcar el ancho completo de la pantalla.
Escalado de imágenes mixtas: La fila de contenido con sección se diseñó para contener una combinación de tamaños de imagen (de la lista proporcionada anteriormente). Sin embargo, si combina tamaños de imagen, tenga en cuenta que se aplicará escalado adicional para normalizar la presentación del contenido.

Desplazamiento de banners de conjunto de entrada

Opcionalmente, la aplicación Xamarin.tvOS puede presentar su contenido en la plataforma superior como una colección de banners que rellenan casi la pantalla automáticamente y se desplazan automáticamente. Este estilo se usa normalmente para mostrar contenido enriquecido y nuevo, como los nuevos programas de TELEVISIÓN.

Además del desplazamiento automático, el usuario puede tomar el control de los banners y desplazarse en cualquier dirección mediante el control remoto de Siri. Hacer un gesto pequeño y circular en el control remoto de Siri cuando un banner está en el foco activará el Efecto Parallax para ese banner.

Imagen de banner (Ancho adicional)

Size	Solución
Tamaño real	1940x624px
Tamaño de zona segura	1740x620px
Tamaño sin enfoque	1740x560px
Tamaño centrado	1740x620px

Los banneres de conjunto de desplazamiento se pueden proporcionar como un .png estático o un archivo .lsr por capas.

Apple proporciona las siguientes sugerencias para los banners de conjunto de desplazamiento:

Cantidad de contenido: Debe proporcionar un mínimo de tres (3) banners para que el desplazamiento se sienta natural. No debe incluir más de ocho (8) banners o hacer que la navegación sea difícil para el usuario final.
Texto de contenido: Si el banner requiere texto en debe incluirse en la imagen de banner. Si usa imágenes superpuestas, el texto debe estar en la capa superior.

Vea la Referencia de TVServices Framework de Apple para obtener más información sobre cómo agregar una extensión de estante superior a su aplicación para proporcionar contenido dinámico de la estantería superior.

Imágenes de Game Center

Si su aplicación Xamarin.tvOS es un juego y ha incluido compatibilidad con Game Center, se necesitarán varios recursos de imagen más:

Iconos de logros: Se requiere una imagen opaca para cada logro que se recortará automáticamente en un círculo. Los logros son elementos no enfocados.
Ilustraciones del panel: Se puede proporcionar una imagen opcional que aparecerá en la parte superior del panel de la aplicación en Game Center. Estas imágenes no se pueden centrar.
Ilustración de tabla de clasificación: Debe proporcionar entre una (1) y tres (3) imágenes de relación de aspecto de 16:9 para cada tabla de clasificación que admita la aplicación. Pueden ser archivos de .png estáticos o .lsr en capas. La ilustración de tabla de clasificación se puede centrar.

Size	Iconos de logros	Ilustración del panel	Ilustración de tabla de clasificación
Tamaño visible	200x200px	923x150px	N/D
Tamaño real	320x320px	N/D	659x371px
Tamaño de zona segura	N/D	N/D	618x348px
Tamaño sin enfoque	N/D	N/D	548x309px
Tamaño centrado	N/D	N/D	618x348px

Para obtener más información sobre cómo trabajar con Game Center, vea guía de programación de Game Center de Apple.

Working with Images (Trabajo con imágenes)

Dado que tvOS 9 es un subconjunto de iOS 9, las mismas técnicas que se usan para incluir y mostrar imágenes en una aplicación de Xamarin.iOS, también funcionan para una aplicación Xamarin.tvOS. Vea nuestra documentación de Mostrar una imagen para obtener más información.

Establecer imágenes de proyecto de Xamarin.tvOS

Como se indicó anteriormente, todas las aplicaciones de tvOS requieren un Iniciar imagen, y Icono de aplicación. En esta sección se explica cómo seleccionar el icono iniciar imagen y aplicación para el proyecto de aplicación de Xamarin.tvOS después de que se hayan establecido en un catálogo de activos.

Haga lo siguiente:

En el Explorador de soluciones, haga doble clic en el Info.plist para abrirlo para editarlo:
En el Editor de Info.Plist, seleccione el Catálogo de activos (configurado anteriormente en la sección Establecer los iconos de aplicación ) para los Iconos de aplicación:
A continuación, seleccione el Catálogo de activos (configurado anteriormente en la sección Establecer la imagen de inicio ) para las Imágenes de inicio.
Guarde los cambios.

Resumen

En este artículo se han tratado todos los tipos y tamaños de imagen usados en una aplicación Xamarin.tvOS. En primer lugar, se trataron imágenes de inicio, imágenes superpuestas, iconos de aplicación, imágenes de estante superior e imágenes de Game Center. A continuación, se ha tratado el trabajo con imágenes en la aplicación Xamarin.tvOS.

Share via

Trabajar con Iconos e Imágenes de tvOS en Xamarin