アニメーション

はじめに

Godotのアニメーションシステムは非常に強力で柔軟です。

初に、前のチュートリアル(スプラッシュ・スクリーン).のシーンを使用しましょう。 目標は、スプラッシュ画像に「フェードイン」アニメーションを追加することです。 念のためコピーを次に示しますrobisplash.zip

アニメーションプレイヤーを追加する

まず、AnimationPlayerノードを「背景」(ルートノード)の子としてシーンに追加します:

../../_images/robisplash_anim_inspector.png

このタイプのノードを選択すると、アニメーションエディタ・パネルが表示されます:

../../_images/robisplash_anim_editor.png

アニメーション エディタ・パネルは、手動で非表示になるまで表示されたままになります。

アニメーションの作成

新しいアニメーションを作成しましょう! [アニメーション]ボタンを押して、メニューから[新規]を選択します。ダイアログが表示されたら、アニメーションに「intro」という名前を付けます。

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

アニメーションができたので、プロパティエディタは「アニメーション編集」モードに入ります。このモードでは、プロパティエディタのすべてのプロパティの横にキーアイコンが表示されます。 Godotでは、どんなオブジェクトのプロパティもアニメーション化できます。

../../_images/robisplash_anim_property_keys.png

アニメーションの編集

ロゴが画面の上部から表示されます。

アニメーションエディタパネルを開いた状態で、「logo」ノードを選択し、「Rect / Position」プロパティを (118, -400) に設定し、プロパティの横にあるキーボタンを押してキーフレームを追加します。

../../_images/robisplash_anim_logo_inspector_key.png

ダイアログが表示されたら、新しいトラックを作成していることを確認します。

キーフレームは、アニメーションプレイヤー・エディタに追加されます:

../../_images/robisplash_anim_editor_keyframe.png

ここをクリックして、エディタカーソルを時間的に前方に移動します:

../../_images/robisplash_anim_editor_track_cursor.png

ロゴの位置を (118, 0) に変更し、またキーフレームを追加してください。値の異なるキーフレームがふたつあれば、アニメーションができます。

../../_images/robisplash_anim_editor_keyframe_2.png

Pressing "Play selected animation from start" button on the animation panel (or Shift + D on keyboard) will make the logo descend.

../../_images/robisplash_anim_editor_play_start.png

「ロード時の自動再生」 ボタンをクリックすると、シーンの開始時にアニメーションが自動的に開始されます。

../../_images/robisplash_anim_editor_autoplay.png

最後に、シーンを実行すると、アニメーションは次のようになります:

../../_images/out.gif