Guía del usuario Cancelar

Exportación de animaciones para aplicaciones móviles y motores de juegos

Buscar

Última actualización el 26/12/2022

Cree una hoja de Sprite o un atlas de texturas y exporte sus animaciones para aplicaciones móviles y motores de juegos. Importe un atlas de texturas a Unity o a cualquier otro motor de juegos empleando el plugin.

Información general

Animate le permite crear animaciones con hojas de Sprite o atlas de texturas y exportarlas para aplicaciones móviles y motores de juegos.

Hoja de Sprite

Una hoja de Sprite es un archivo de imagen de mapa de bits que contiene varios gráficos de menor tamaño dispuestos como una cuadrícula en mosaico. Mediante la compilación de varios gráficos en un solo archivo, Animate y otras aplicaciones pueden utilizar los gráficos teniendo que cargar solamente un archivo. Esta eficacia de carga puede resultar útil en situaciones como el desarrollo de juegos, donde el rendimiento es una clave importante.

Es posible crear una hoja de Sprite a partir de una selección de cualquier combinación de clips de película, símbolos de botón, símbolos gráficos o mapas de bits. Puede seleccionar elementos en el panel Biblioteca o en el escenario, pero no en ambos a la vez. Cada mapa de bits y cada fotograma de símbolos seleccionados aparece como un gráfico independiente en la hoja de Sprite. Si exporta desde el escenario, cualquier transformación (por ejemplo, la escala, la inclinación, etc.) que haya aplicado a la instancia del símbolo se conservará en la imagen de salida.

Atlas de texturas

El atlas de texturas es una colección de texturas como una única imagen de gran tamaño o como varias imágenes de la dimensión deseada. Puede optimizar un juego creando y utilizando un atlas de texturas.

En Animate, puede crear un atlas de texturas a partir de símbolos como clips de película, gráficos o botones. Puede seleccionar elementos en el panel Biblioteca o en el escenario, pero no en ambos a la vez. Cada vector y cada fotograma clave de los símbolos seleccionados aparece como un mapa de bits separado en el atlas de texturas. Si realiza una exportación desde el escenario, cualquier transformación (escala, sesgo, etc.) que haya aplicado a la instancia del símbolo se conservará en la imagen de salida.

Diferencias entre una hoja de Sprite y un atlas de texturas

Puede utilizar para sus aplicaciones móviles una hoja de Sprite o un atlas de texturas, en función de sus necesidades. En la siguiente tabla se muestran algunas de las principales diferencias entre ambos.

Función	Hoja de Sprite	Atlas de texturas
Rendimiento en aplicaciones móviles	Bajo	Alto
Eficiencia en la carga de la aplicación	Alta, ya que no hay ningún cálculo	Baja, por el cálculo del archivo JSON
Tamaño	Ocupa más tamaño	Ocupa menos tamaño
Calidad de animación	Media	Alta
Número de archivos generados	Dos: un mapa de bits y un archivo json	Variable: de acuerdo con las dimensiones de la imagen.
Número de mapas de bits generados	En función del número de fotogramas usado en una hoja de Sprite, el número de archivos de mapa de bits puede aumentar, lo que aumentaría el tamaño de la hoja de Sprite	Solo los mapas de bits únicos se generan como sprite, lo que reduce el tamaño total.

Creación de una hoja de Sprite

Para crear una hoja de Sprite, siga estos pasos:

Seleccione uno o varios símbolos de la biblioteca o instancias de símbolos en el escenario. La selección también puede incluir mapas de bits.
Haga clic con el botón derecho en la selección y elija Generar hoja de Sprite.

En el cuadro de diálogo Generar hoja de Sprite, seleccione Opciones y, después, haga clic en Exportar.

Opción de exportación	Descripción
Dimensiones de la imagen	Tamaño total en píxeles de la hoja de Sprite. El ajuste predeterminado es Tamaño automático, que cambia el tamaño de la hoja para ajustarse a todos los sprites incluidos.
Formato de imagen	Formato de archivo de la hoja de Sprite exportada. PNG 8 bits y PNG 32 bits admiten el uso de fondo transparente (canal alfa). PNG 24 bits y JPG no admiten fondos transparentes. Por lo general, la diferencia visual entre PNG 8 bits y PNG 32 bits es pequeña. Los archivos PNG de 32 bits son cuatro veces más grandes que los archivos PNG de 8 bits.
Relleno de bordes	Relleno alrededor de los bordes de la hoja de Sprite, en píxeles.
Relleno de formas	Relleno entre cada imagen dentro de la hoja de Sprite, en píxeles.
Algoritmo	La técnica empleada para empaquetar las imágenes en la hoja de Sprite. Hay dos opciones: Básico (predeterminado) MaxRects
Formato de datos	El formato interno utilizado para los datos de la imagen. Elija el formato que mejor se adapte al flujo de trabajo planificado para la hoja de Sprite tras la exportación.
Rotar	Gira los sprites 90°. Esta opción solo está disponible en determinados formatos de datos.
Recortar	Esta opción ahorra espacio en la hoja de Sprite recortando los píxeles no utilizados en cada fotograma de símbolo añadido a la hoja.
Apilar fotogramas	Si selecciona esta opción, se evitará el duplicado de fotogramas en los símbolos seleccionados en la hoja de Sprite resultante.

Exportar animaciones a aplicaciones móviles o motores de juegos

Animate le ayuda a exportar animaciones a plataformas de juegos y aplicaciones móviles. ¿Quiere ver animaciones en el teléfono móvil o motor de juegos? Consulte el tutorial al final de este ejemplo y siga estos pasos.

En Biblioteca, haga clic con el botón derecho en el clip de película.
Seleccione Generar hoja de Sprite.
En el cuadro de diálogo Hoja de Sprite, seleccione las opciones obligatorias.
Haga clic en Exportar.

How to export animations for mobile apps or gaming engines (Cómo exportar animaciones para aplicaciones móviles o motores de juegos)

Para obtener más información sobre otras opciones para exportar animaciones, vea este vídeo.

Creación de un atlas de texturas

Los desarrolladores de juegos pueden utilizar Animate para orquestar animaciones y exportarlas como atlas de texturas al motor de juegos Unity o a cualquier otra plataforma de juegos.

El proceso para generar un atlas de texturas en Animate e importarlo a Unity se representa en el siguiente diagrama:

flow-diagram-Texture-Atlas — Ilustración que representa el flujo de trabajo para generar el atlas de texturas e importarlo a Unity.

Para generar el atlas de texturas de su animación, realice los pasos siguientes:

En Animate, puede generar un atlas de texturas para un símbolo seleccionado en la Biblioteca o para una instancia de símbolo en el escenario.
Haga clic en el símbolo con el botón derecho y seleccione Generar atlas de texturas en el menú. Se mostrará la ventana Generar atlas de texturas.

Generar atlas de texturas

Seleccione las opciones de exportación pertinentes para el atlas de texturas.

Opción de exportación	Descripción
Dimensiones de la imagen	Tamaño total en píxeles del atlas de texturas. El ajuste predeterminado es Tamaño automático, que cambia el tamaño de la hoja para ajustarse a todas las imágenes incluidas.
Optimizar dimensiones	Cuando la opción Optimizar dimensiones está marcada, se eliminan los píxeles vacíos de los mapas de bits y las dimensiones no están en potencia de dos (opción predeterminada). Esto se aplica a todos los mapas de bits generados. Cuando la opción Optimizar dimensiones está desmarcada, los mapas de bits se generan en función de las dimensiones seleccionadas.
Formato de imagen	Formato de archivo de la hoja de Sprite exportada. PNG 8 bits y PNG 32 bits admiten el uso de fondo transparente (canal alfa). Por lo general, la diferencia visual entre PNG 8 bits y PNG 32 bits es pequeña. Los archivos PNG de 32 bits son cuatro veces más grandes que los archivos PNG de 8 bits.
Resolución	Seleccione cualquier valor entre 0,3 y 3,0
Relleno de bordes	Relleno alrededor de los bordes del atlas de texturas, en píxeles
Relleno de formas	Relleno entre cada imagen dentro del atlas de texturas, en píxeles.
Algoritmo	La técnica empleada para empaquetar las imágenes en el atlas de texturas. Hay dos opciones: Básico MaxRects (predeterminado)
Formato de datos	El formato interno utilizado para los datos de la imagen. El formato predeterminado es JSON.
Rotar	Rota las imágenes 90 grados. Esta opción solo está disponible en determinados formatos de datos.
Acoplamiento de objetos sesgados como mapa de bits	Seleccione esta opción si va a utilizar la opción transformar para sesgar los objetos. Animate convierte estos objetos en imágenes de mapa de bits, ya que algunos motores de juegos no interpretan adecuadamente la transformación sesgada.
Optimizar archivo Animation.json	Cuando·la·opción·Optimizar el archivo animation.json está seleccionada, se elimina la sangría, se descompone la matriz y se recortan los nombres utilizados (opción predeterminada). Cuando la opción está desmarcada, las exportaciones incluyen la sangría y tienen nombres significativos.

Puede optar por exportar el símbolo en varios mapas de bits en función de la dimensión.

Crear el atlas de texturas para varios mapas de bits

Se muestra una advertencia para los recursos que superan el tamaño de la dimensión de imagen seleccionada.
Para previsualizar el resultado del atlas de texturas, haga clic en la pestaña Previsualizar.

Consulte el atlas de texturas después de crearlo
Haga clic en Examinar y elija la ruta de destino del archivo de salida en su equipo, o bien introduzca la ruta en el área de texto y haga clic en Exportar.

La carpeta de salida generada para el atlas de texturas contiene los siguientes archivos:

Animation.json

Este archivo contiene información sobre la animación. De forma predeterminada, los fotogramas idénticos se optimizan y consolidan en el archivo Animation.json.

spritemap.json

Este archivo contiene información sobre el archivo spritesheet.png.

spritemap.png

Este archivo contiene la representación de mapa de bits de todas las texturas únicas mínimas requeridas del símbolo exportado para reconstruir la animación.

Puede utilizar el atlas de texturas generado en cualquier motor de juegos, como Unity, con el plugin adecuado del importador.

Importación de atlas de texturas en Unity

Puede importar los archivos de atlas de texturas generados por Animate en sus motores de juego favoritos. Para importar los archivos de atlas de texturas, puede crear los plugins correspondientes a sus motores de juego. Se proporciona un plugin de importación de muestra para la herramienta Unity.

Importe el atlas de texturas en Unity siguiendo estos pasos:

En Unity, cree un proyecto en una ubicación concreta. En esta ubicación se crea una carpeta que contiene la subcarpeta Activos.
Cree dos subcarpetas en Activos como Recursos y Editor.
Haga clic aquí para descargar el complemento de importación de muestra para Unity. Seleccione Complemento de Unity de la ficha Descargas y el número de versión correspondiente para descargar.

El archivo unity-plugin.zip está formado por los archivos Plugin.cs, wrapperplugin.cs, AnimateEditor.cs y Effect.shader.

Descargar la muestra implica la aceptación de las Condiciones de uso y la Política de privacidad en línea.
Mueva a Activos > Recursos los archivos de atlas de textura, como Animation.json, spritemap.json y spritemap.png, así como los archivos del complemento de Unity, como Plugin.cs y Effect.shader.
Mueva los archivos AnimateEditor.cs y wrapperplugin.cs a la carpeta Activos.
En Unity, haga clic en el archivo AnimateEditor.cs y arrástrelo a Main Camera.
Reproducción. Al reproducir el proyecto, el spritemap se divide en distintos sprites.
Mueva el archivo AnimateEditor.cs a la carpeta Editor.
En Unity, haga clic en el archivo wrapperplugin.cs y arrástrelo a Main Camera. Asimismo, desactive o elimine AnimateEditor.cs de Main Camera.
Reproducir o publicar la salida según sea necesario.

Puede incluso personalizar el plugin modificando el archivo Wrapperplugin.cs para adaptarlo a sus necesidades.

El complemento de Unity admite efectos de color para archivos de atlas de texturas generados con Animate. Asimismo, el complemento es compatible con las máscaras en capas. Las función de máscaras se puede aplicar solamente en la versión de Unity 2017 y versiones posteriores.

Publicación de textura

Como animador, puede seguir creando contenido en formato vectorial y exportarlo en formato vectorial o rasterizado para plataformas HTML 5. Para mejorar el rendimiento de las animaciones, se ha añadido una opción para exportar animaciones como un atlas de texturas en la configuración de publicación.

1. Cree un documento de lienzo. Seleccione Archivo > Nuevo para mostrar la ventana Nuevo documento.

2. Seleccione la pestaña Avanzado y haga clic en HTML5 Canvas. Se abrirá un nuevo documento FLA.

3. Haga clic en Archivo > Configuración de publicación. Si la opción Exportar documento como textura está activada en la pestaña Básico, la pestaña Configuración de imágenes mostrará las opciones de publicación de textura. De forma predeterminada, todos los símbolos se incluyen en la publicación de textura. Para elegir selectivamente los símbolos para las texturas, haga clic en el icono de configuración que encontrará al lado.

Aunque es posible que esta opción aumente el tamaño de los recursos, el rendimiento mejorará. Asimismo, puede aumentar la resolución de las imágenes en términos de 2x y 3x la resolución original de las imágenes para las pantallas HiDPI. Para cambiar la configuración de la resolución, haga clic en el icono de la llave inglesa junto la opción Exportar documento como textura, tal y como se muestra en la captura de pantalla siguiente. Arrastre los números junto a Resolución para obtener múltiples de 2x y de 3x.

De forma predeterminada, la publicación de textura está establecida a una resolución de 2x. Además, el intervalo de la resolución se puede cambiar entre 0,3 y 3x.

La publicación de texturas se aplica solo al tipo de documento HTML5 Canvas.

Exportación de un documento con la textura activada

Elegir un archivo de vector o ráster es como elegir entre tamaños de archivo y rendimiento. Las plataformas HTML5 están optimizadas para el contenido rasterizado. Por tanto, para algunas formas complejas es mejor preconvertir las imágenes vectoriales a ráster. Para parte del contenido básico puede seguir utilizando contenido vectorial. Animate le proporciona esta opción mediante un cuadro de diálogo de selección parcial de símbolos. La selección parcial de símbolos le permite elegir símbolos que deben convertirse a ráster, pero manteniendo los demás como vectores.

Para abrir la selección parcial de símbolos, haga clic en Cambiar en el cuadro de diálogo Configuración de publicación y seleccione un símbolo de la lista. De forma predeterminada, se seleccionan todos los símbolos.

Seleccione en la lista los símbolos que desee.

Mejorar el rendimiento de los gráficos mediante Texturas de mapa de bits

En Animate, las texturas de mapa de bits mejoran el rendimiento de las animaciones en plataformas diferentes. ¿Quiere reducir la complejidad de los vectores con las texturas de mapas de bits? Consulte el tutorial al final de este ejemplo y siga estos pasos.

En el panel Inspector de propiedades, haga clic en Configuración de publicación.
En la pestaña Básico, seleccioneel icono de la llave inglesa junto a Exportar documento como textura.
En la pestaña Configuración de imagen, haga clic en Cambiar y seleccione los símbolos que quiera.
Haga clic en Aceptar.

How to publish your assets as bitmap textures to improve performance (Cómo publicar activos como texturas de mapa de bits para mejorar el rendimiento)

Para más información sobre el rendimiento de las animaciones con las texturas de mapa de bits, vea este vídeo.

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?