Guía del usuario Cancelar

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

  1. Guía del usuario de Adobe Animate
  2. Introducción a Animate
    1. Novedades de Animate
    2. Glosario visual
    3. Requisitos del sistema para Animate
    4. Métodos abreviados de teclado de Animate
    5. Trabajar con varios tipos de archivo en Animate
  3. Animación
    1. Aspectos básicos de animaciones en Animate
    2. Cómo utilizar los fotogramas y fotogramas clave en Animate
    3. Animación fotograma a fotograma en Animate
    4. Uso de la animación de interpolación clásica en Animate
    5. Herramienta Pincel
    6. Guía de movimiento
    7. Interpolación de movimiento y ActionScript 3.0
    8. Acerca de la animación de interpolación de movimiento
    9. Animaciones de interpolación de movimiento
    10. Creación de una animación de interpolación de movimiento
    11. Uso de fotogramas clave de propiedad
    12. Animación de la posición con una interpolación
    13. Edición de interpolaciones de movimiento con el editor de movimiento
    14. Edición del trazado de movimiento de una animación de interpolación
    15. Manipulación de las interpolaciones de movimiento
    16. Adición de aceleraciones personalizadas
    17. Creación y aplicación de ajustes preestablecidos de movimiento
    18. Configuración de grupos de interpolación de animación
    19. Uso de interpolaciones de movimiento guardadas como archivos XML
    20. Interpolaciones de movimiento e interpolaciones clásicas
    21. Interpolación de forma
    22. Uso de la animación de la herramienta Hueso en Animate
    23. Trabajar con el rigging de personajes en Animate
    24. Uso de las capas de máscara en Adobe Animate
    25. Uso de escenas en Animate
  4. Interactividad
    1. Creación de botones en Animate
    2. Conversión de proyectos de Animate a otros formatos de documento
    3. Creación y publicación de documentos de HTML5 Canvas en Animate
    4. Adición de interactividad con fragmentos de código en Animate
    5. Creación de componentes HTML5 personalizados
    6. Uso de componentes en HTML5 Canvas
    7. Creación de componentes personalizados: Ejemplos
    8. Fragmentos de código para componentes personalizados
    9. Prácticas recomendadas - Publicidad con Animate
    10. Autoría y publicación de realidad virtual
  5. Espacio de trabajo y flujo de trabajo
    1. Creación y administración de pinceles
    2. Uso de Google Fonts en documentos HTML5 Canvas
    3. Utilización de las Bibliotecas Creative Cloud y Adobe Animate
    4. Utilización del Escenario y el panel Herramientas en Animate
    5. Flujo de trabajo y espacio de trabajo de Animate
    6. Uso de las fuentes web en documentos de HTML5 Canvas
    7. Líneas de tiempo y ActionScript
    8. Trabajo con varias líneas de tiempo
    9. Configuración de preferencias
    10. Utilización de los paneles de edición de Animate
    11. Creación de capas de la línea de tiempo en Animate
    12. Exportación de animaciones para aplicaciones móviles y motores de juegos
    13. Desplazamiento y copia de objetos
    14. Plantillas
    15. Buscar y reemplazar en Animate
    16. Deshacer y rehacer en el panel Historial
    17. Métodos abreviados de teclado
    18. Uso de la Cronología en Animate
    19. Creación de extensiones HTML
    20. Opciones de optimización para Imágenes y archivos GIF animados
    21. Configuración de exportación de imágenes y archivos GIF
    22. Panel de Recursos en Animate
  6. Multimedia y vídeo
    1. Transformación y combinación de objetos gráficos en Animate
    2. Crear y trabajar con instancias de símbolo en Animate
    3. Calco de imagen
    4. Cómo utilizar el sonido en Adobe Animate
    5. Exportación de archivos SVG
    6. Creación de archivos de vídeo para su uso en Animate
    7. Cómo añadir un vídeo a Animate
    8. Trabajo con puntos de referencia de vídeo
    9. Dibujo y creación de objetos en Animate
    10. Remodelado de líneas y formas
    11. Trazos, rellenos y degradados en Animate CC
    12. Uso de Adobe Premiere Pro y After Effects
    13. Paneles de color en Animate CC
    14. Apertura de archivos de Flash CS6 con Animate
    15. Uso de texto clásico en Animate
    16. Colocación de ilustraciones en Animate
    17. Mapas de bits importados en Animate
    18. Gráficos 3D
    19. Trabajo con símbolos en Animate
    20. Dibujo de líneas y formas en Adobe Animate
    21. Uso de bibliotecas en Animate
    22. Exportación de sonidos
    23. Selección de objetos en Animate CC
    24. Trabajo con archivos AI de Illustrator en Animate
    25. Aplicación de patrones con el pincel rociador
    26. Aplicación de modos de mezcla
    27. Organización de objetos
    28. Automatización de tareas con el menú Comandos
    29. Texto en varios idiomas
    30. Utilización de la cámara en Animate
    31. Uso de Animate con Adobe Scout
    32. Trabajo con archivos de Fireworks
    33. Filtros de gráficos
    34. Sonido y ActionScript
    35. Preferencias de dibujo
    36. Dibujo con la herramienta Pluma
  7. Plataformas
    1. Conversión de proyectos de Animate a otros formatos de documento
    2. Compatibilidad con plataformas personalizadas
    3. Creación y publicación de documentos de HTML5 Canvas en Animate
    4. Creación y publicación de un documento de WebGL
    5. Empaquetado de aplicaciones para AIR para iOS
    6. Publicación de aplicaciones de AIR for Android
    7. Publicación para Adobe AIR para escritorio
    8. Configuración de publicaciones de ActionScript
    9. Prácticas recomendadas - Organización de ActionScript en una aplicación
    10. Uso de ActionScript con Animate
    11. Prácticas recomendadas - Directrices de accesibilidad
    12. Accesibilidad en el espacio de trabajo de Animate
    13. Cómo escribir y gestionar scripts
    14. Activación de la compatibilidad con plataformas personalizadas
    15. Información general sobre compatibilidad con plataformas personalizadas
    16. Creación de contenido accesible
    17. Uso de plugins de compatibilidad con plataformas personalizadas
    18. Depuración de ActionScript 3.0
    19. Activación de la compatibilidad con plataformas personalizadas
  8. Exportación y publicación
    1. Exportación de archivos de Animate CC
    2. Publicación de OAM
    3. Exportación de archivos SVG
    4. Exportación de gráficos y vídeos con Animate
    5. Publicar documentos de AS3
    6. Exportación de animaciones para aplicaciones móviles y motores de juegos
    7. Exportación de sonidos
    8. Exportación de archivos de vídeo QuickTime
    9. Control de reproducción de vídeo externo con ActionScript
    10. Prácticas recomendadas - Sugerencias para crear contenido para dispositivos móviles
    11. Prácticas recomendadas - Convenciones de vídeo
    12. Prácticas recomendadas - Directrices de edición de aplicaciones SWF
    13. Prácticas recomendadas - Estructuración de archivos FLA
    14. Prácticas recomendadas de optimización de archivos FLA para Animate
    15. Configuración de publicaciones de ActionScript
    16. Especificación de configuración de publicación para Animate
    17. Exportación de archivos de proyector
    18. Exportar imágenes y archivos GIF animados
    19. Plantillas de publicación HTML
    20. Uso de Adobe Premiere Pro y After Effects
    21. Compartir y publicar animaciones rápidamente

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.

Hoja de Sprite
Una hoja de Sprite con los sprites en una animación fotograma a fotograma.

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: 

  1. 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.

  2. Haga clic con el botón derecho en la selección y elija Generar hoja de Sprite.

  3. 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.

  1. En Biblioteca, haga clic con el botón derecho en el clip de película.

  2. Seleccione Generar hoja de Sprite.

  3. En el cuadro de diálogo Hoja de Sprite, seleccione las opciones obligatorias.

  4. 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: 

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: 

  1. 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. 

  2. 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

  3. 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.
  4. 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.

  5. Para previsualizar el resultado del atlas de texturas, haga clic en la pestaña Previsualizar.

    Consulte el atlas de texturas después de crearlo

  6. 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:

  1. En Unity, cree un proyecto en una ubicación concreta. En esta ubicación se crea una carpeta que contiene la subcarpeta Activos

  2. Cree dos subcarpetas en Activos como Recursos y Editor

  3. 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. 

  4. 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.

  5. Mueva los archivos AnimateEditor.cs y wrapperplugin.cs a la carpeta Activos

  6. En Unity, haga clic en el archivo AnimateEditor.cs y arrástrelo a Main Camera.

  7. Reproducción. Al reproducir el proyecto, el spritemap se divide en distintos sprites.

  8. Mueva el archivo AnimateEditor.cs a la carpeta Editor.

  9. En Unity, haga clic en el archivo wrapperplugin.cs y arrástrelo a Main Camera. Asimismo, desactive o elimine AnimateEditor.cs de Main Camera.

  10. 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
Exportación de un documento con la textura activada

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.

Cambio de selección parcial de símbolos
Cambio de selección parcial de símbolos

Seleccione en la lista los símbolos que desee. 

Selección parcial de símbolos
Selección parcial de símbolos

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.

  1. En el panel Inspector de propiedades, haga clic en Configuración de publicación.

  2. En la pestaña Básico, seleccioneel icono de la llave inglesa junto a Exportar documento como textura.

  3. En la pestaña Configuración de imagen, haga clic en Cambiar y seleccione los símbolos que quiera.

  4. 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.
Logotipo de Adobe

Inicia sesión en tu cuenta