美人のアニメーション


画像を切り分けて「パラパラアニメーション」をします。

画像を切り分ける

  1. 16枚の画像を切り分けて「パラパラアニメーション」をします。
    「パラパラアニメーション」とは安っぽい言い方ですが、連続した画像を次々に切り替えて動きを表現する方法です。
    授業中に教科書の端に連続した線画を書いて、パラパラめくると線画が動いて見える遊びをした覚えがあるでしょう? (^_^;)
    これが映画やテレビの原理で、画像を工夫すれば本格的なアニメーションが楽しめます。
  2. ページ先頭の画像(4*4=16枚)の画像を切り分ける方法から説明します。
    Unity を起動して 2D を選択して Project を生成します。
    メニューから[Save Scene]を選び Main の名前で保存します。
  3. ウインドウエクスプローラで Assets に美人の画像をドラッグして追加します。
    2D で読み込むと Sprite Type は Sprite(2D and UI) に設定されています。
  4. 画像を選択して Inspector から Sprite Mode に Multiple を選択します。
    Sprite Editor ボタンのクリックから Apply をクリックして Sprite Editor を起動します。
  5. Sprite Editor の Slice ボタンをクリックして Column & low に 4,4 をタイプして Slice ボタンをクリックします。
    Apply ボタンで Bijin16.jpg が16枚に切り分けられます。
  6. 切り分けられた個々の画像をヒエラルキービューにドラッグするとシーンビューに画像が追加されます。
    重ならないように配置して下さい。

パラパラアニメーション

  1. 画像の切り分けが終わったらパラパラアニメーションするのは簡単です。
    ヒエラルキービューにドラッグされた画像を右クリックから削除して下さい。
    次に切り分けられた16枚の画像をまとめてヒエラルキービューにドラッグします。
  2. アニメーターを格納するフォルダーの要求に対して、現在のプロジェクトフォルダーの Assets を指定します。
  3. 画像のサイズを整えて、再生ボタン(右三角)でパラパラアニメーションが表示されます。

画像を分割

画像を Sprite(アニメーションを構成する1枚の画像 etc)に分割する方法には幾通りかあります。
  1. 画像を選択して Inspector から Sprite Mode を Single から Multiple に切り替えます。
  2. Sprite Editor ボタンのクリックから Apply をクリックして Sprite Editor を起動します。
  3. Sprite Editor の Slice ボタンをクリックして Type から3通り選べます。
  4. Slice ボタンをクリックすると画像が線で区切られます。
  5. それで良ければ Apply ボタンで確定します。

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(Unity)