Papervision3D演出サンプルNo.01:羽ばたく蝶々

080818_pv3d_butterfly1

ライブラリ「Papervision3D 2.0」を利用して、スクリプトで羽ばたく蝶を作ってみました。ポイントは三角関数を使ってループ処理しているのと、PV3D 2.0新機能の反射を使っているところです。ということで以下、作り方の紹介です。

  • Demo (require Flash Player9)
  • Source (require PV3D 2.0)

Point.1 蝶の羽を準備


蝶の羽は撮影した写真をイラレでトレース。右のバナーに掲載していますが、学生時代に映像作品で蝶の羽を作ったことがあったのでそれを流用しました。こちらにPNGとAI(ver10に落としてます)を置いてます。

Point.2 三角関数(sin)で羽ばたきを演出

flashのgetTimer()メソッドを使えばswfが起動してからのミリ秒が取得できますが、それをENTER_FRAME内で利用すればループ演出の駆動部分が作れます。羽が傾く角度をサインカーブ的にループさせたかったので、三角関数(sin)を使いました。

// アニメーションの設定
addEventListener(Event.ENTER_FRAME, function(event:Event):void
{
    // 羽が羽ばたく演出
    leftWing.rotationY  = Math.sin(getTimer() / 200) * 60;
    rightWing.rotationY = Math.sin(getTimer() / 200) * -60;
});

Point.3 蝶の浮動も三角関数で

蝶の羽が羽ばたくだけでは寂しいので、蝶自体も高さの浮き沈みを表現します。こちらも上下ループしたかったので、三角関数を利用しています。ループ表現にはgetTimer()とMath.sin()は非常に便利です。

// 蝶の揺らぎを設定しています
butterfly.y = Math.sin(getTimer() / 200) * -25 + 240;

Point.4 ついでにPV3D2.0の新機能 ReflectionViewで反射表現

Seb Lee-Delisle » Blog Archive » Real reflections in Papervision3D!のブログが参考元ですが、RefrectionViewを継承すれば床に移りこんだ蝶が自動的に反映されます。

/**
* メインクラス(ReflectionViewを継承することで反射面が表現できます)
*/
public class Main extends ReflectionView
{
     //以下いろいろ続く

参考記事

PV3Dの関連記事

投稿者 : 池田 泰延

BookMark

いかがでしたでしょうか、ブックマークはこちらからどうぞ。

このエントリーをはてなブックマークに追加

Comment/Trackback 2件