こんにちは!布浦です。
Unityの2D機能をつかってキャラクターを動かそう!企画、2回目です。
全5回の予定です。
- 画像をSpriteとして画面に配置する
- Spriteにコマアニメを設定する(Animation View の使い方)
- 複数のアニメを切り替える仕組みをつくる(Mecanim)
- 2D物理エンジンでキャラクターを動かす(Physics2D)
- キー操作によるキャラクターの移動を実装する(Physics2Dつづき)
今日は、
「2. Spriteにコマアニメを設定する(Animation View の使い方)」
をやってみたいと思います!
学習用ことり画像素材はこちら
Spriteにアニメ機能を追加する
前回、Spriteを画面に配置するまでを行いました。
このSpriteに、アニメーションを再生する機能を持つ「Animator」コンポーネントを追加して、
アニメーションできるようにします。
Sprite のInspector 上で、「Add Component」というボタンを押して、
「Miscellaneous -> Animator」と選択します。
アニメーションデータをつくる
アニメーションのデータを、Unityでは「Animation Clip」といいます。
例えば今回のサンプルでは、「歩く」と「飛ぶ」2つの「Animation Clip」をつくります。
また、この「Animation Clip」を、タイムラインを使って編集できるViewが、Unityには備わっています。
まずは、そのViewを表示してみます。
Unityのメニューで 「Window -> Animation」を選択して、Animation View を開いてましょう。
タイムラインのようなウインドウが、Animation Viewです。
これをつかって、アニメーションを編集します。
編集する前に、まずは空のデータをつくる必要があります。
Animation View のタブ付近に、文字の無いボタンがあります。
クリックすると、「Create New Clip」という項目だけ表示されるので、クリックしましょう。
「Kotori@Fly.anim」という名前で、「飛ぶ」動作のアニメデータをつくってみたいと思います。
「Animation Clip」のファイル名は、「誰が@何をする」のような感じでつけておくと、後々わかりやすいと思います。
「Save」すると、プロジェクトにデータが追加されると思います。
再生マークのようなアイコンの「Kotori@Fly」が、今作成したアニメーションデータです。
もうひとつ、生成された「Kotori」というデータについては、また次回、Mecanimの回で説明します。
アニメーションデータを編集する
さきほどつくったデータは、まだ中身がない空っぽの状態なので、編集していきたいと思います。
①Hierarchyで、配置したSpriteをクリックして、フォーカスが当たった状態にします。
②Animation Viewで、さきほど「Create New Clip」をした場所に、作成したAnimation Clipの名前が表示されているのを確認します。
③「Add Curve」をクリックします。
④出てきたメニューの Sprite Renderer -> Sprite の横の「+」ボタンをクリックします。
タイムラインが画像のようになります。
ここに、キーフレームを打って、コマアニメをつくることができます。
方法は色々とあるのですが、Project View から、Animation View へ、
Spriteを直接ドラッグすることができたので、この方法でやってみます。
すでにあるキーフレームを編集する
ちなみに、すでにキーフレームが打たれている部分の絵を変えたい場合は、
タイムライン上の赤いバーを変更したいキーフレームに合わせて、
Inspectorで別のSpriteを割り当てなおせば、変更できます。
割り当てる方法は、最初にSpriteを生成したときと同じで、
Project Viewから画像をドラッグしてくるだけです。
Animation View は、コマアニメ以外にも、色々なアニメーションをつくることができます。
今回はコマアニメの方法のみの紹介になってしまいますが、
詳しく知りたいという方は、公式のマニュアルを参考にしてみてください。
(今のところ、日本語の方のマニュアルが更新されてないので、英語です)
アニメーションをプレビューする
タイムラインを編集している間は、Unityの再生ボタンが赤色になります。
このときに再生を押すと、アニメのプレビュー(動作確認)ができます。
この要領でもうひとつ、「歩く」アニメ(Kotori@Walk)も、つくってみてください。
今回は、ここまで!
つぎは、2つのアニメを切り替える仕組みをつくります。