Olá! Sou um designer sênior de IU na Pixonic, Alexey Morev. E neste artigo, vamos nos concentrar nas animações da interface do usuário que cada um de nós pode ver nos jogos.
A interface do jogo é uma coleção de elementos que ajudam o usuário a interagir e controlar o jogo: botões, ícones, barras de progresso, planos de fundo, cartões, janelas pop-up. Para facilitar a interação com os elementos da interface, eles são animados.
Vou lhe dizer como essas animações são criadas, em quais programas são feitas, em que estágios de desenvolvimento de animação existem e por que geralmente são necessários.
Então, vamos começar!
Em primeiro lugar, vamos definir o que é animação e que tipo de animação existe.
Simplificando, a animação é uma sequência de quadros que dá vida a uma imagem. Está dividido em completo (animação completa) e simplificado (animação limitada). Um exemplo de animação completa é qualquer filme de animação completo: Disney's Aladdin, The Jungle Book, The Little Mermaid, etc. Exemplos de animação simplificada são a maioria dos desenhos animados, como Rick e Morty, Gravity Falls, Extreme Space e etc.
No caso da animação completa, 24-25 quadros são desenhados por segundo de tempo e pequenos detalhes do personagem, ambiente, etc. são animados. Na animação simplificada, o número de quadros por segundo é menor e alguns elementos insignificantes de personagens e arredores podem não ser animados e permanecer estáticos. Vale ressaltar que esses princípios devem ser seguidos na criação de qualquer animação, seja uma interface ou um desenho animado.
Animação completa e simplificada baseada no desenho animado Os Simpsons
Como você pode ver, na versão completa da tela inicial, as animações são mais suaves e detalhadas, enquanto na abertura curta você pode ver como o número de quadros é reduzido e os detalhes dos personagens não são animados.
Nós descobrimos o que é animação. Agora é lógico passar para as seguintes questões: que tipo de animação usar na IU? E ela é mesmo necessária?
Vou responder ao segundo primeiro. Precisamos de animação? Tudo parece claro: a janela foi aberta, o prêmio foi recebido, o botão foi pressionado. Não é tão importante usar qualquer tipo de animação, certo?
Certamente não dessa forma. Graças à animação, você pode não só diversificar o componente visual do jogo, mas também ajudar o usuário a entender o que está acontecendo na tela, onde clicar e que ação executar. Este é um dos principais motivos para usar animação de interface do usuário em jogos: chamar a atenção do jogador para os elementos que são mais importantes no momento.
A segunda razão é a capacidade da animação de mostrar a dinâmica geral e o estilo de jogo. A animação da interface do usuário deve corresponder à dinâmica do jogo. Isso contribui para uma imersão ainda maior. Usar animações muito lentas em um jogo acelerado irrita os jogadores e afeta a experiência geral.
Quanto ao tipo de animação usada, depende apenas de seus recursos e capacidades. Se você e sua equipe podem bancar a implementação de animação completa, e o estilo visual do jogo permite, então é melhor fazê-lo: ficará muito mais suculento e bonito. Em outros casos, é melhor usar animação simplificada.
Vamos usar exemplos do mesmo pop-up para ver como fica com animação completa, simplificada e mínima.
Animação completa
Animação simplificada
Animação mínima
Quem cria a animação da IU e como funciona o processo de desenvolvimento
Normalmente, há três pessoas envolvidas no desenvolvimento de uma animação:
- um designer ou artista cria uma referência de animação;
- o designer técnico transfere essa referência para o motor de jogo;
- os programadores fazem a animação aparecer no momento certo de acordo com um gatilho específico.
Às vezes, um estúdio contrata especificamente um animador, mas não com frequência - geralmente um designer é o suficiente.
A criação da animação pode ser dividida em três fases: pensamento, criação de uma referência e implementação.
Primeira etapa: ideia
Para ajustar organicamente a animação ao que está acontecendo na tela, você precisa determinar o que precisa ser animado, bem como o que acontecerá antes e depois da animação.
Vamos percorrer o processo de criação de uma animação passo a passo usando o exemplo da animação pop-up mostrada acima.
No início do trabalho, faremos uma pesquisa de jogos sobre temas e estilos semelhantes, a seguir escolheremos as opções mais interessantes e bem sucedidas que usaremos como referência. Assim, economizamos tempo, não reinventando a roda do zero, mas partindo do que já foi feito antes de nós. Em seguida, descrevemos em detalhes o que deve acontecer com o objeto de animação. Isso é feito principalmente para você, para não esquecer nada importante, bem como para escrever documentação adicional.
Como exemplo, vamos pegar o pop-up a seguir e analisar toda a sequência de criação de animação nele.
Vamos descrever brevemente a ideia:
- O aparecimento de um pop-up após uma longa ausência de um jogador no jogo;
- Faça uma animação suave, mas rápida o suficiente;
- Use animação full frame;
- Anime cada elemento;
- Anime um canhão de dinossauro;
- Adicione brilho animado sob o dinossauro.
Quando o objetivo se torna claro e claramente formulado, você pode prosseguir para o segundo estágio.
Segunda etapa: criar uma referência
Criamos nossa própria referência de animação, que será posteriormente demonstrada, refinada e alterada.
Para isso, programas como Adobe Animate, After Effects, Spine, etc. Nesta fase, não importa para nós em que programa animar (a exceção pode ser o Spine, já que este editor tem uma exportação de animação para vários engines), então escolhemos o que será mais conveniente e rápido para nós. Você pode até animar um elemento quadro a quadro no Photoshop, mas isso já é exótico. Eu prefiro trabalhar no After Effects porque é o editor mais flexível em termos de animações: você pode implementar quase qualquer ideia que vier à mente nele.
Não se esqueça de levar em consideração os tempos para que todos os elementos da IU se comportem adequadamente: sem dessincronização, atrasos e na sequência correta.
Não devemos esquecer a duração da própria animação. Por exemplo, se o aparecimento de uma janela demorar mais de um segundo e no jogo aparecer com bastante frequência, o jogador se cansará rapidamente da animação prolongada e ficará irritado. Ao mesmo tempo, se o aparecimento de um elemento ocorre muito raramente, e esse evento traz alegria ao jogador (por exemplo, receber um baú, um prêmio ou uma conquista), você pode tornar a animação da aparência mais longa e colorida.
Estágio três: implementação
Aqui, otimizamos todos os gráficos usados na referência: partículas de corte, brilho, fundo, dinossauro e outras pequenas coisas - em outras palavras, todos os efeitos visuais.
Um exemplo de fatiamento otimizado
Esse fatiamento de elementos é necessário para reduzir o tamanho da animação final, porque existem muitos outros elementos no projeto, e cada megabyte é importante. Se você não otimizar os elementos fatiados, poderá surgir uma situação em que sua bela animação ficará mais lenta. Em seguida, utilizando o animador da engine em que o jogo é desenvolvido, repetimos a mesma animação que foi feita no estágio de referência.
Por que você não pode fazer tudo no motor de uma vez? A resposta não é óbvia, mas sim simples: ao criar uma animação, por exemplo, no After Effects, você só tem o programa de animação e sua funcionalidade. Não há necessidade de configurar câmeras no jogo para que sejam exibidas corretamente na IU. Não há necessidade de otimizar os gráficos e dividir tudo em componentes: você pode facilmente substituir qualquer elemento, ou até mesmo repensar completamente a animação, alterando-a completamente. Se você criar tudo de uma vez no motor de jogo, perderá muito tempo otimizando arquivos, será pressionado tecnicamente e gastará muito tempo cortando gráficos para animação no estágio inicial, embora no final possa acabar sendo completamente diferente.
Conclusão
Finalmente, vou resumir o material e dar algumas dicas curtas. Ao trabalhar com animação, pense nisso com antecedência, observe os tempos, use a animação completa sempre que possível e não se esqueça de olhar as animações de outros projetos para possíveis referências.
Se você gostou deste artigo, o próximo artigo é planejado para saber como você pode usar os princípios da animação Disney na IU. Saiba mais sobre os próprios princípios aqui .