Implementar animações de folha de sprite
Ambiente de verificação
- Windows
-
- Janelas 11
- Unity Editor
-
- 25.3.2020F1
- Pacotes do sistema de entrada
-
- 1.2.0
Pré-requisitos para esta dica
As configurações a seguir são pré-configuradas como um pré-requisito para a explicação dessas dicas.
O que é Sprite Sheet Animation?
Nos jogos modernos, personagens e efeitos são animados movendo modelos 3D, calculando explosões em tempo real e exibindo efeitos. Isso se tornou possível porque o poder de computação dos consoles de jogos aumentou, mas como os consoles antigos não tinham tanto poder, a animação de folha de sprite que continuamente trocava imagens para fazer parecer que estava se movendo era o mainstream. O princípio é o mesmo dos animes jogados na TV. As animações de folhas Sprite são usadas por menos jogos do que no passado, mas ainda são frequentemente usadas porque a carga necessária para cálculos é muito menor.
A animação de folha Sprite alterna e exibe várias imagens seguidas. É raro preparar tantos arquivos de imagem quanto existem, e basicamente todos os padrões de exibição são incluídos em uma imagem. Isso facilita o gerenciamento de arquivos de imagem e reduz a carga no carregamento de arquivos de imagem. O arquivo de imagem que resume essa animação é chamado de "folha de sprite".
Criar uma folha de sprite
Uma folha de sprite é essencialmente apenas um arquivo de imagem. Como não tem nada a ver com Unity, por favor, crie-o com uma ferramenta de edição de imagem. O formato de arquivo final será um arquivo PNG que o Unity pode manipular.
Além disso, existem as seguintes regras para criar folhas de sprite.
- Unifique o tamanho da imagem de todos os quadros. Por exemplo, se a primeira imagem tiver 32x32 pixels, a segunda e as imagens subsequentes serão 32x32 pixels. Por exemplo, se você preparar uma folha de sprite em um formato "3x2" com 6 quadros, o tamanho da folha de sprite será de 96x64 pixels.
- Você pode alinhar a imagem livremente, como "6x4" ou "2x8", mas certifique-se de criá-la na suposição de que todos os quadros serão preenchidos. Se for "6x4", são 24 quadros, e assim por diante. Se for uma animação de 13 quadros, prepare-a com "1x13" ou "13x1".
- Por se tratar de uma animação, ela é devidamente alinhada para que não haja desalinhamento nos quadros antes e depois.
- A direção da animação começa a partir da célula superior esquerda e vai para a direita, e quando você vai para a extrema direita, ela começa da esquerda um degrau para baixo e vai para a direita novamente.
Na verdade, você não precisa fazer o acima estritamente no Unity, mas é muito mais fácil decidir sobre as especificações com antecedência.
Desta vez, vou usar uma folha de sprite para alternar os números a seguir. Um quadrado é de 32x32 pixels. Ele consiste em 24 quadros "6x4", então o tamanho da imagem é de 192x128 pixels.
Configurando a folha de sprite no Editor Unity
Depois de criar seu projeto, adicione um arquivo de planilha de sprite ao seu projeto.
Aqui, presume-se que o nome do arquivo seja NumberAnimation .
NumberAnimation Selecione o arquivo e preencha o inspetor da seguinte maneira:
| Valores do item | |
|---|---|
| Tipo de textura | Sprites (2D e UI) |
| Modo Sprite | plural |
Existem muitas outras configurações que podem ser configuradas, mas vamos deixar como está por enquanto. Uma vez configurado, clique no botão "Sprite Editor".
Se a caixa de diálogo abaixo aparecer, clique no botão "Aplicar". Na verdade, as configurações deste inspetor devem ser salvas, e se você rolar para a parte inferior, há um botão "Aplicar", então você precisa salvar as configurações com este botão. Ele também será salvo por "Aplicar" na caixa de diálogo, então não importa de que maneira você salvá-lo.
O Editor Sprite é exibido. Nesta seção, trabalharemos na divisão do sprite da folha de sprite.
Há um botão chamado "Slice" no canto superior esquerdo, clique nele e altere o tipo para "Grid By Cell Size". Nesta folha de sprite, um tamanho do sprite é "32x32" pixels, então digite 32 para cada tamanho de pixel. Quando terminar, clique no botão Fatia.
Esta imagem é difícil de entender porque parece estar claramente dividida desde o início, mas é dividida por 1 sprite 32px. Pressione a tecla "Ctrl" e a linha dividida aparecerá em verde.
Depois de dividir, salve-o com o botão "Aplicar".
Se você clicar no triângulo no arquivo de imagem do projeto para expandi-lo, poderá ver que o sprite foi dividido.
Posicionamento e animação de Sprite
Arraste o sprite definido para a exibição e coloque-o.
Em seguida, uma caixa de diálogo aparecerá, então salve-a NumberAnimation como .
Esse arquivo contém as configurações de animação.
O primeiro sprite é colocado na exibição, e um controlador de animação e um clipe de animação são criados no projeto. Se a imagem for pequena, defina a escala para torná-la maior.
Neste ponto, as configurações de animação padrão serão aplicadas, para que você possa simplesmente executar o jogo. Você deve ser capaz de ver que a animação de sprite se move assim que o jogo começa.
Impedir que as animações fiquem em loop
Selecione o arquivo de clipe de animação (NumberAnimation.anim) do seu projeto.
No inspetor, há uma caixa de seleção para "Loop time", então desmarque-a.
Se você executar o jogo, verá que a animação para em 24. É eficaz para efeitos de explosão única.
Alterar a velocidade da animação
Selecione o sprite que você deseja animar na hierarquia.
Em seguida, selecione a guia Animação. Se você não tiver uma guia Animação, selecione Janela > Animação > Animação no menu.
Existe um número chamado "amostra", que é um número de vezes para trocar imagens em um segundo. Neste exemplo, a animação tem 24 quadros, portanto, a animação é repetida a cada 2 segundos.
Se você diminuir esse número, a velocidade de animação será mais lenta e, se você aumentá-la, a velocidade aumentará.
Sobre outras configurações avançadas de animação
As várias configurações de animação são explicadas separadamente nas dicas específicas da animação. Essas configurações não são exclusivas para animações de sprite, mas não são exclusivas do É o mesmo que configurar outras animações em movimento e animações 3D.
Nesta dica, explicaremos como passar de uma folha de sprite como uma animação.