Godot和訳速報「アニメーション」

効果的なチュートリアルってhtmlかepubかなのだろうか

このチュートリアルを分かりやすく編集する際に、本当にhtmlがベストなのかということが引っかかっています。モバイル端末で質の高い動画が簡単に再生できるこの時代にテキストベースでの学習が本当に効果的なのかという話です。

あとチュートリアルの元々の質も微妙のような気がします。英語圏の人的には分かりやすいのかも知れませんが、私の感覚ではなんでそれを言うためにそんな冗長な説明をするんだということが多々あります。日本で拡めるにはこのチュートリアルを元にオリジナルのチュートリアルを作ったほうがいいのかもしれません。

アニメーション

イントロダクション

このチュートリアルは、Godotの全てのアニメーションに通じる方法を説明します。Godotのアニメーションシステムは強力かつ柔軟です。

これには前回のチュートリアル、見栄えのするスクリーンのシーンを使います。シンプルなアニメーションを付加することが目標です。一応コピーを置いておきます。

リンク

アニメーションの作成

まず、AnimationPlayerノードをルートノードbgの子ノードとして追加します。

画像

このタイプのノードが選ばれると、アニメーションエディターパネルが現れます。

画像

さて、新しくアニメーションを作りましょう。new animationボタンを押して、そのアニメーションに”Intro”と名付けて下さい。

画像

アニメーションが作成されたら”edit”ボタンを押して、編集しましょう。

画像

アニメーションの編集

“edit”ボタンが押されると少し面白いことが置きます。アニメーションエディターがアニメーションパネルに現れます。(Godot 2.xではこのボタンは削除されました。代わりに”animation”トグルをクリックすします。)

画像

そして次が最も重要な変化です。プロパティーエディタがアニメーション編集モードに切り替わると言うことです。このモードではキーアイコンがあらゆるプロパティに付きます。これは、Godotでは全てのオブジェクトに対してアニメーションを付加できることを意味しています。

画像

ロゴの表示アニメーションを作る

次に、ロゴをスクリーン上部から出現させます。アニメーションプレイヤーを選びぶと、エディターパネルは手動で隠さなければ表示され続けます。(アニメーションノードを消せば消えます。)これを使って、”logo”ノードを選択し、”pos”プロパティを選択、114,-400に動かします。

このポジションに移動したら、プロパティの後ろにあるキーボタンを押します。

画像

トラックが新しくなると、確認ダイアログが現れます。きちんと確認しておきましょう。

画像

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

画像

次に、エディタのカーソルをアニメーションの終了ラインに合わせます。ここをクリックしてください。

画像

ロコの位置を(114,0)に変え、キーフレームを再び打ちます。2つキーフレームがあるとアニメーションが生成されます。

画像

アニメーションパネルでPlayを押すとロゴが降りてきます。シーンを実行してテストがしたいので、シーンが始まる時に自動的に再生するタグをアニメーションに付けます。

画像

最後に、シーンを再生して、アニメーションがこのように再生されたら成功です。

アニメーション

2 comments

  1. 自分はこういったチュートリアル動画を観つつ、実際に手を動かしながら覚えていってますね。https://youtu.be/k_ghOyPX820

    1. やっぱり動画が分かりやすいですよね。こんな大量に文字を打ち込むよりチュートリアルをこなしている動画を撮ってyoutubeに上げたりしていった方が日本で広まるのかも知れないとか考えてしまいます。

Add a Comment

メールアドレスの入力は任意です。(公開されることはありません)