Crie uma planilha de entidades gráficas ou um atlas de textura e exporte as animações para aplicativos móveis e mecanismos de jogos. Importe um atlas de textura do Unity ou de qualquer mecanismo de jogo de sua preferência usando o plug-in.

Visão geral

O Animate CC permite criar animações de planilha de entidades gráficas ou de atlas de textura e exportá-los para aplicativos móveis e mecanismos de jogos. 

Planilha de entidades gráficas

Uma planilha de entidades gráficas é um arquivo de imagem bitmap que contém vários gráficos menores organizados em uma grade lado a lado. Ao compilar vários gráficos em apenas um arquivo, você permite que o Animate Professional e outros aplicativos usem os gráficos carregando apenas um arquivo. Essa eficiência no carregamento pode ser útil em situações como o desenvolvimento de jogos, em que o desempenho é especialmente importante.

Planilha de entidades gráficas
Uma planilha de entidades gráficas com entidades gráficas em animação quadro a quadro.

Crie uma planilha de entidades gráficas a partir de uma seleção de qualquer combinação de clipes de filme, símbolos de botões, símbolos de gráficos ou bitmaps. Você pode selecionar itens no painel Biblioteca ou no Palco, mas não nos dois. Cada bitmap e cada quadro dos símbolos selecionados aparecem como um gráfico separado na planilha de entidades gráficas. Se exportar do Palco, qualquer transformação (dimensionamento, nivelamento, entre outros) que tiver aplicado para a ocorrência de símbolo estará preservada na saída da imagem.

Atlas de textura

O atlas de textura é uma coleção de texturas em uma única grande imagem. É possível otimizar seu jogo criando um atlas de textura e usando-o em seu aplicativo de jogo. 

No Animate, é possível criar um atlas de textura por meio de símbolos como clipes de filme, gráficos ou botões. Você pode selecionar itens no painel Biblioteca ou no Palco, mas não nos dois. Cada vetor e cada quadro-chave dos símbolos selecionados aparecem como um bitmap separado no atlas de textura. Se exportar do Palco, qualquer transformação (dimensionamento, nivelamento, entre outros) que tiver aplicado para a ocorrência de símbolo estará preservada na saída da imagem.

Diferença entre uma planilha de entidades gráficas e um atlas de textura

Você pode usar a planilha de entidades gráficas ou o atlas de textura em seus aplicativos móveis conforme desejar. Algumas das principais diferenças entre a planilha de entidades gráficas e o atlas de textura são apresentadas na tabela a seguir. 

Recurso Planilha de entidades gráficas Atlas de textura
Desempenho em aplicativos móveis Baixo Alto
Eficiência no carregamento do aplicativo Alto, pois não há cálculo Baixo, pois há um cálculo do arquivo JSON 
Tamanho Ocupa mais tamanho Ocupa menos tamanho
Qualidade da animação Média Alto
Número de arquivos gerados Dois arquivos: um bitmap e um json Três arquivos: um bitmap e dois json
Número de bitmaps gerados Com base no número de quadros usados na planilha de entidades gráficas, o número de arquivos bitmap também pode aumentar, resultando no aumento do tamanho da planilha de entidades gráficas Somente bitmaps exclusivos são gerados nas entidades gráficas, reduzindo assim o tamanho total.

Criar uma planilha de entidades gráficas

Para criar uma planilha de entidades gráficas, siga as etapas a seguir: 

  1. Selecione um ou mais símbolos na Biblioteca ou ocorrências de símbolos no Palco. A seleção também pode conter bitmaps.

  2. Clique com o botão direito do mouse na seleção e escolha Gerar planilha de entidades gráficas.

    generate-spritesheet
  3. Na caixa de diálogo Gerar planilha de entidades gráficas, selecione as opções exigidas e clique em Exportar.

    Opção de exportação Descrição
    Dimensão da imagem O tamanho total em pixels da planilha de entidades gráficas. A configuração padrão é Dimensionamento automático, que dimensiona a planilha para que caibam todas as entidades gráficas que você incluir.
    Formato da imagem O formato de arquivo da planilha de entidades gráficas exportada. PNG de 8 bits e PNG de 32 bits suportam o uso de plano de fundo transparente (canal alfa). PNG 24 bits e JPG não suportam planos de fundo transparentes. Normalmente, a diferença visual entre PNG 8 bits e PNG 32 bits é pequena. Arquivos PNG de 32 bits são quatro vezes maiores que arquivos PNG de 8 bits.
    Preenchimento de borda Preenchimento em volta da borda da planilha de entidades gráficas, em pixels.
    Preenchimento de forma Preenchimento entre cada imagem dentro da planilha de entidades gráficas, em pixels.
    Algoritmo

    A técnica para colocar as imagens na planilha de entidades gráficas. Há duas opções:

    • Básico (padrão)
    • MaxRects
    Formato de dados O formato interno usado para os dados da imagem. Escolha o formato que melhor se adapte ao fluxo de trabalho pretendido para a planilha de entidades gráficas depois de exportada.
    Girar Gira as entidades gráficas em 90°. Essa opção está disponível apenas para alguns formatos de dados.
    Aparar Essa opção economiza espaço na planilha de entidades gráficas aparando pixels não usados de cada quadro de símbolo acrescentado à planilha.
    Empilhar quadros Selecionar esta opção evita que quadros duplicados nos símbolos selecionados sejam duplicados na planilha de entidades gráficas resultante.

Exportar a animação da planilha de entidades gráficas para aplicativos móveis

Exportar a animação da planilha de entidades gráficas para aplicativos móveis
Train Simple - Matthew Pizzi

Criar um atlas de textura

Os desenvolvedores podem usar o Animate para criar animações e exportá-las como atlas de textura para o mecanismo de jogos Unity ou para qualquer outra plataforma de jogos que prefiram. 

O processo de gerar o atlas de textura no Animate e importá-lo para o Unity está descrito no diagrama a seguir: 

flow-diagram-Texture-Atlas
Uma ilustração que descreve o fluxo de trabalho para gerar o atlas de texturas e importá-lo para o unity.

Para gerar o atlas de textura da sua animação, execute as etapas a seguir: 

  1. No Animate, é possível gerar um atlas de textura para um símbolo selecionado na Biblioteca ou uma instância do símbolo no palco. 

  2. Clique com o botão direito do mouse no símbolo e selecione Gerar atlas de textura no menu. A janela Gerar atlas de textura é exibida. 

    generate-texture-atlas (2)
    Gerar atlas de textura
  3. Escolha as opções de exportação apropriadas para o atlas de textura. 

    Opção de exportação Descrição
    Dimensão da imagem O tamanho total em pixels do atlas de textura. A configuração padrão é Dimensionamento automático, que dimensiona a planilha para que caibam todas as imagens que você incluir.
    Formato da imagem O formato de arquivo da planilha de entidades gráficas exportada. PNG de 8 bits e PNG de 32 bits suportam o uso de plano de fundo transparente (canal alfa). Normalmente, a diferença visual entre PNG 8 bits e PNG 32 bits é pequena. Arquivos PNG de 32 bits são quatro vezes maiores que arquivos PNG de 8 bits.
    Preenchimento de borda Preenchimento em volta da bordas do atlas de textura, em pixels
    Preenchimento de forma Preenchimento entre cada imagem dentro do atlas de textura, em pixels.
    Algoritmo

    A técnica usada para colocar as imagens no atlas de textura. Há duas opções:

    • Básico (padrão)
    • MaxRects
    Formato de dados O formato interno usado para os dados da imagem. O padrão é o formato JSON.
    Girar Gira as imagens em 90 graus. Essa opção está disponível apenas para alguns formatos de dados.
    Nivelar objetos inclinados para bitmap Selecione essa opção se você for usar transformações de distorção em seus objetos. O Animate converte esses objetos em imagens bitmap já que alguns dos mecanismos de jogo não interpretam as transformações de distorção apropriadamente. 
  4. Para visualizar a saída do atlas de textura, clique na guia Visualizar.

    texture-atlas-preview
    Visualize o atlas de texturas após o ter criado
  5. Clique em Procurar e escolha o caminho de destino em seu computador para o arquivo de saída ou insira o caminho na área de texto e clique em Exportar

A pasta de saída gerada para o atlas de textura contém os seguintes arquivos:

Animation.json

Esse arquivo contém informações sobre a animação. 

spritemap.json

Esse arquivo contém informações sobre o arquivo spritesheet.png.

spritemap.png

Para o símbolo exportado, esse arquivo contém a representação bitmap de todas as texturas originais mínimas necessárias para reconstruir a animação.

É possível usar o Atlas de textura gerado em todos os mecanismos de jogos, tal como o Unity com o plug-in do importador adequado.

Importar Atlas de textura para o Unity

Você pode importar os arquivos de atlas de textura gerados no Animate para os seus mecanismos de jogos favoritos. Para importar arquivos do atlas de textura, é possível criar plug-ins de importação que correspondam aos seus mecanismos de jogos. É fornecida uma amostra do plug-in de importação para a plataforma Unity. 

Para importar o atlas de textura para o Unity, siga as etapas a seguir: 

  1. Na plataforma Unity, crie um projeto em qualquer local específico. Nesse local, é criada uma pasta com a subpasta Ativos

  2. Crie duas subpastas em Ativos como Recursos e Editor

  3. Clique aqui para baixar o plug-in de importação de amostra do Unity. Escolha Plug-in do Unity na guia Downloads e selecione o número da versão correspondente para baixar. 

    O unity-plugin.zip consiste-se em arquivos Plugin.cs, WrapperPlugin.cs, AnimateEditor.cs e Effect.shader

    Ao baixar a amostra, você indica que aceita os Termos de uso e a Política de privacidade online. 

  4. Mova os arquivos do atlas de texturas como Animation.json, spritemap.json, spritemap.png e os arquivos de plug-in unity como plugin.cs e Effect.shader para Ativos > Recursos.

  5. Mova os arquivos AnimateEditor.cs e WrapperPlugin.cs para a pasta Ativos

  6. No Unity, clique no arquivo AnimateEditor.cs e arraste-o para a Câmera principal.

  7. Reproduzir. Reproduzir seu projeto divide o mapa da entidade gráfica para entidades gráficas diferentes.

  8. Mova AnimateEditor.cs para o Editor.

  9. No Unity, clique no arquivo wrapperplugin.cs e e arraste-o para a Câmera principal. Além disso, desmarque ou remova AnimateEditor.cs de Câmera principal.

  10. Reproduza ou publique a saída de acordo com suas necessidades. 

Também é possível personalizar o plug-in, modificando o arquivo WrapperPlugin.cs para atender às suas necessidades. 

O plug-in Unity oferece suporte a efeitos de cor para Animar arquivos gerados do atlas de texturas. Além disso, o plug-in suporta mascaramento por meio de camadas. O recurso de mascaramento é aplicável somente à versão de 2017 ou posterior do Unity. 

Publicação de textura

Como um animador, agora você pode continuar a criar conteúdo no formato de vetores e exportar no formato de vetor ou raster para plataformas HTML 5. Uma opção para exportar animações como um atlas de textura foi adicionada nas configurações de publicação para aumentar o desempenho das animações.

Clique em Arquivo > Configurações de publicação. Se a opção Exportar documento como textura estiver habilitada na guia Básico, a guia Configurações da imagem exibe as opções de Publicação de textura. Por padrão, todos os símbolos são incluídos na Publicação de textura. Para escolher seletivamente símbolos para texturas, clique no ícone de configurações ao lado. 

Embora essa opção possa aumentar o tamanho dos ativos, ela melhora o desempenho. Além disso, você pode aumentar a resolução das imagens em 2x e 3x a resolução original das imagens para telas HiDPI. Para alterar as configuração de resolução, clique no ícone de chave inglesa ao lado da opção Exportar documento como textura conforme mostrado na captura de tela abaixo. Arraste os números adjacentes até Resolução obter os múltiplos de 2x ou 3x.

Por padrão, a publicação de textura é definida na resolução 2X. Além disso, o intervalo para a resolução pode ser alterado de 0,3 para 3X.

Observação:

A publicação de textura é aplicável somente ao tipo de documento HTML5 Canvas. 

Exportar documento como textura
Exportar documento como textura

A escolha entre um arquivo de vetor ou raster é semelhante à escolha entre tamanhos de arquivo e desempenho. As plataformas HTML5 são otimizadas para o conteúdo de raster. Portanto, para algumas formas complexas, é melhor converter as imagem de vetor em raster previamente. Para alguns conteúdos básicos, você ainda pode usar o conteúdo vetorial. O Animate fornece essa opção por meio de uma caixa de diálogo de seleção parcial de símbolo. A seleção parcial de símbolo permite que você escolha os símbolos que devem ser convertidos em raster mantendo os restantes como vetores.

Para abrir a seleção parcial de símbolo, clique em Alterar na caixa de diálogo Configurações de publicação e selecione um símbolo na lista. Por padrão, todos os símbolos são selecionados.

Alterar seleção de símbolo parcial
Alterar seleção de símbolo parcial

Selecione os símbolos de sua escolha na lista. 

Seleção parcial de símbolo
Seleção parcial de símbolo

Um tutorial sobre a publicação de textura

Um tutorial sobre a publicação de textura
Saiba mais sobre como criar seus ativos usando vetores para flexibilidade e fidelidade e, em seguida, publique-os como texturas de bitmap.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online