Flex入門者がアニメーションを基礎から説明してみる #7（最終回）

突然ですがこの「Flex入門者がアニメーションを基礎から説明してみる」の連載は今回で終了とします。 なぜかというと学習している書籍の内容的に１、２回のエントリーで書ききれるものが尽きてしまったからです。 本当はここから以下のようなものに話は及びます。

• キネマティクス

  人体の腕や足のように、関節を持った部品どうしが関連を持って運動する

• 3Dの基本

  奥行きのある空間を平面上に表します。RPGゲームの3Dダンジョンのようなことができます。

• 3Dの応用

  物体を立体的に表現し、そこに照明を当てて影などをつけます。 まだ読んでないので正確には理解してませんが。

これらのことをブログに書こうと思ったら、一つの話題を理解しやすく書くのに５回程度のエントリーを必要としそうです。 そしてそれは書籍をそのまま転載することとあまり差がなくなってしまいそうな気がするので、僕の望むところではありません。

まとめとして

最終回は新しいことを解説しません。 今まで解説してきたことの中でメインとなっていた、物体を現実と同じように運動させる方法についてのまとめを書きます。

僕がボールを使用して解説した運動は以下のものです。

1. 等速直線運動

   一番基本的な運動です。力を加えたらそっちの方に飛んで行く、もしくは転がっていく。

2. 反射

   主に壁に跳ね返ったときに使用しました。 反射する障害物に角度があるとき、すなわち外壁ではなく斜めになっている壁などに反射させるには少し高度な応用が必要です。僕は解説していませんが、書籍には１章割いて解説があります。

3. 落下運動

   これは等加速度運動の一例でした。宇宙空間のロケットの噴射にも応用できます。

4. 摩擦

   ボールが転がり続けたり、跳ね返り続けないための処置です。 現実世界は常に摩擦があるので、これを行わないと自然な動きになりません。

5. バネ

   これは重力の応用です。 重力は常に同じ力が下に加わっていますが、バネはバネの始点に向かって、離れているほど強い加速度が加わります。

一つずつ解説

さて、あなたがここでの例のようにボールなどをリアルに運動させようとしたとき、まず行うべきは「等速直線運動」の処理を実装することです。 具体的に言うと、以下の２つを用意するのです。

等速直線運動の実装

1. X方向の速度とY方向の速度をフィールドで宣言する

   このようにします。 最初は固定で適当な値を入れてもいいでしょう。

   private var vx:Number; //X方向の速度
   private var vy:Number; //Y方向の速度
   

2. 単位時間ごとに速度を位置に加算する

   Flexの場合はENTER_FRAMEイベントにリスナ関数をセットして、フレーム毎に実行される関数内で速度を物体の位置に加算します。 ballというオブジェクトが表示されているのであれば以下のようにします。

   private function onEnterFrame(event:Event):void{
       ball.x += vx;
       ball.y += vy;
   }
   

これだけでボールは同じ方向に向かって進み続けるでしょう。 これ自体はとっても簡単ですが、このとっても簡単なことはいつも変わらないし、あとの仕事はさらにシンプルなのです。

壁の反射、重力、バネ、摩擦などの実装

色々なサンプルを掲載してきましたが、やっていることにはある共通点があります。 それはいじるのは速度だけということです。 壁の外にはみ出たときなど、特殊な例でない限り、物体のX座標やY座標はいじりません。 常に速度を適切な場所で少し変更するだけで、これらは実現できるのです。 一つずつ解説していきましょう。

• 壁の反射

  物体が移動することにより、壁との衝突を検知した時点で速度を反転させるだけです。 つまり、横の壁に衝突したらvx *= -1;します。縦の壁に衝突したらvy *= -1;です。 たったこれだけ。

• 重力

  単位時間ごとつまりENTER_FRAMEのリスナ関数内で速度に重力の影響を加算します。 上のonEnterFrame関数に以下の一行を加えるような感じです。

  private function onEnterFrame(event:Event):void{
      ball.x += vx;
      ball.y += vy;
  
      vy += gravity; //gravityは重力の作用を表す数値（0.1などを代入しておく）
  }
  

• 摩擦

  摩擦とは常に速度を0に近づけるので、速度に一定の値を単位時間ごとにかけるだけです。 上のサンプルだと以下の２行を加えます。

  private function onEnterFrame(event:Event):void{
      ball.x += vx;
      ball.y += vy;
  
      vy += gravity; //gravityは重力の作用を表す数値（0.1などを代入しておく）
  
      vx *= friction; //frictionは摩擦を表す数値（0.95などを代入しておく）
      vy *= firction;
  }
  

バネの解説は前回やったため割愛します。 どうでしょうか？とてもシンプルではないですか？ 実際に完成させるにはもう少し色々な処理を考える必要がありますが、基本的にはこれでいけます。

そしてこれらは、必要なものだけを取捨選択して書き加えればよいのです。 例えばビリヤード台を上から見た図なら、等速直線運動と反射、摩擦を実装する。しかし重力はいらないから実装しない、とか。 バネと重力はいるけど、摩擦は実装せずにずっとビヨンビヨン動かしておこう、とか。 自分の作りたい世界に合わせて、必要なものだけを書き加えるという実にシンプルな作り方ができるのです。

さらに、ここで解説していない処理を加えるとしても、多くの場合は既存のコードに修正はほとんどいりません。 その処理に必要な操作を、「速度」に対して行うだけでいいのです。そういえばボールをドラッグで掴んで投げた処理もそうでした。 とっても複雑な処理も、実は一つずつの処理を順番に実行している場合がほとんどなのです。

どうですか？簡単でしょう？ 多くの人がアニメーションの簡単さ、楽しさに気付いてくれることを期待しています。 もちろん、もっともっと複雑なことがやりたい人は、簡単なことばかりでは済まないないでしょう。 その場合でも、この本さえあれば、きっと糸口は見つかります。

また宣伝かよ、とか思ったそこのあなた。だから初めからそうだと言ってるじゃないですか。

では皆さん、楽しいアニメーション作成を。