Guia do Usuário Cancelar

Exportar animações para aplicativos móveis e mecanismos de jogo

 

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 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 como uma grande imagem única ou várias imagens de dimensão desejada. É 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 você exportar do palco, quaisquer transformações (dimensão, inclinação, e assim por diante) aplicadas à instância do símbolo serão preservadas 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

Variável: com base na dimensão da imagem.

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.

  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 animações para aplicativos móveis ou mecanismos de jogos

O Animate ajuda a exportar animações para plataformas de jogos e aplicativos móveis. Deseja exibir a animação no celulare ou mecanismo de jogo? Assista ao tutorial no fim deste exemplo e siga estas etapas.

  1. Na Biblioteca, clique com o botão direito do mouse no clip de vídeo.

  2. Selecione Criar planilha de entidades gráficas.

  3. Na caixa de diálogo Planilha de entidades gráficas, selecione as opções necessárias.

  4. Clique em Exportar.

Como exportar animações para aplicativos móveis ou mecanismos de jogos

Assista ao vídeo para saber mais sobre outras opções para exportar animações.

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: 

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. 

    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.
    Otimizar dimensões
    • Quando a opção Otimizar dimensões estiver marcada, ela removerá os pixels vazios dos bitmaps e as dimensões não estarão em potência de dois (opção padrão). Isso é aplicável para todos os bitmaps gerados.
    • Quando a opção Otimizar dimensões estiver desmarcada, os bitmaps serão gerados com base nas dimensões selecionadas.
    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.
    Resolução Escolha qualquer valor entre 0,3-3,0
    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 
    • MaxRects (padrão)
    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. 
    Otimizar arquivo Animation.json
    • Quando a opção Otimizar arquivo Animation.json estiver selecionada, ela removerá o recuo, a matriz decomposta e reduzirá os nomes utilizados (opção padrão).
    • Quando a opção Otimizar arquivo animation.json estiver desmarcada, ela exportará com recuo e nomes significativos.
  4. Você pode optar por exportar o símbolo para vários bitmaps com base na dimensão.

    Gerar atlas de textura para vários bitmaps

    Para os ativos que excedem o tamanho de dimensão de imagem selecionado, um aviso será exibido.

  5. Para visualizar a saída do atlas de textura, clique na guia Visualizar.

    Visualize o atlas de texturas após o ter criado

  6. 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. Os quadros idênticos são otimizados e consolidados no arquivo Animation.json por padrã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, você pode continuar a criar conteúdo no formato de vetor e na exportar como vetor ou formato rasterizado para plataformas HTML 5. Uma opção para exportar animações como um atlas de textura foi adicionada às configurações de publicação para aumentar o desempenho das animações.

1. Crie um documento do canvas. Selecione Arquivo> Novo para exibir a janela Novo documento. 

2. Selecione a guia Avançado e clique em HTML5 Canvas. Um novo documento FLA é aberto.

3. 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. E mais, o intervalo para a resolução pode ser alterado para entre 0,3 e 3X.

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

Exportar documento como textura habilitado
Exportar documento como textura habilitado

Exportar documento como textura habilitado

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

Melhorar o desempenho gráfico por meio de Texturas de bitmap

No Animate, as texturas de bitmap melhoram o desempenho das animações em diferentes plataformas. Deseja reduzir a complexidade dos vetores com texturas de bitmap? Assista ao tutorial no fim deste exemplo e siga estas etapas.

  1. No painel Inspetor de propriedades, clique em Configurações de publicação.

  2. Na guia Básico, selecione o ícone de chave inglesa ao lado de Exportar documento como textura.

  3. Na guia Configurações da imagem , clique em Alterar e selecione os símbolos de sua preferência.

  4. Clique em OK.

Como publicar seus ativos como texturas de bitmap para melhorar o desempenho

Assista ao vídeo para saber como as animações com texturas de bitmap são executadas.

Receba ajuda com mais rapidez e facilidade

Novo usuário?