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 CC 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 con el formato de una única imagen de gran tamaño. 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 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.

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 Tres: uno mapas de bits y dos archivos json
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.

    generate-spritesheet
  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.

Exportación de la animación de hoja de Sprite para aplicaciones móviles

Exportación de la animación de hoja de Sprite para aplicaciones móviles
Train Simple - Matthew Pizzi

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: 

  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

    generate-texture-atlas (2)
    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.
    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.
    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 (predeterminado)
    • MaxRects
    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. 
  4. Para previsualizar el resultado del atlas de texturas, haga clic en la pestaña Previsualizar.

    texture-atlas-preview
    Consulte el atlas de texturas después de crearlo
  5. 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. 

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 como formato vectorial o rasterizado para las 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.

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 activos, mejora el rendimiento. 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. Asimismo, el rango de la resolución se puede cambiar de 0,3 a 3x.

Nota:

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

Exportar documento como textura
Exportar documento como textura

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

Tutorial sobre publicación de texturas

Tutorial sobre publicación de texturas
Aprenda a crear sus activos utilizando vectores para tener mayor flexibilidad y fidelidad, y a publicarlos en texturas de mapas de bits.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea