Animações

Introdução

O sistema de animação da Godot é extremamente poderoso e flexível.

Para começar, vamos usar a cena do tutorial anterior (: ref: doc_splash_screen). O objetivo é adicionar uma animação “fade-in” à imagem inicial. Aqui está uma cópia para o caso: robisplash.zip.

Adicionar um player de animação

Primeiro de tudo, adicione um nó: ref: AnimationPlayer <class_AnimationPlayer> à cena como um filho de “background” (o nó raiz):

../../_images/robisplash_anim_inspector.png

Quando um nó desse tipo é selecionado, o painel do editor de animação é exibido:

../../_images/robisplash_anim_editor.png

O painel do editor de animação permanece visível até ser ocultado manualmente.

Criando a animação

It’s time to create a new animation! Press the Animation button then select new from the menu. Name the animation “intro” when the dialog appears.

../../_images/robisplash_anim_button.png ../../_images/robisplash_anim_new.png

Now that we have an animation, the property editor enters “animation editing” mode. In this mode, a key icon appears next to every property of the property editor. In Godot, any property of an object can be animated:

../../_images/robisplash_anim_property_keys.png

Editando a animação

O logotipo aparecerá na parte superior da tela.

With the animation editor panel open, select the “logo” node and set the “Rect / Position” property to (118, -400) and press the key button next to the property to add a keyframe:

../../_images/robisplash_anim_logo_inspector_key.png

Quando a caixa de diálogo aparecer, confirme se você está criando uma nova faixa.

O quadro-chave será adicionado ao editor do player de animação:

../../_images/robisplash_anim_editor_keyframe.png

Move the editor cursor forward in time by clicking here:

../../_images/robisplash_anim_editor_track_cursor.png

Change the logo position to (118, 0) and add a keyframe again. With two keyframes with different values, the animation happens.

../../_images/robisplash_anim_editor_keyframe_2.png

Pressionar “Reproduzir animação selecionada a partir do início (Shift-D)” no painel de animação fará o logotipo descer.

../../_images/robisplash_anim_editor_play_start.png

Clique no botão “Autoplay on Load” para definir a animação para iniciar automaticamente quando a cena começar.

../../_images/robisplash_anim_editor_autoplay.png

E finalmente, ao executar a cena, a animação deve ficar assim:

../../_images/out.gif