FLARToolKitを使ったAR系Flashの作り方

第3回 マーカーの位置や回転,向きなどを取り出す

この記事を読むのに必要な時間:およそ 3 分

マーカーから文字が飛び出してくるような表現

第1回第2回では,マーカーの上に様々なオブジェクトを乗せてみましたが,例えば筆者が制作に携わったHAPPY NEW YEAR '09のような,マーカーから文字が飛び出してくるような表現はどのようにすればできるのでしょうか?

図1 「HAPPY NEW YEAR '09」のデモ


AR New Year Greeting Card from Saqoosha on Vimeo.

今回は,FLARToolKitの内部処理をより具体的に確認しながら,一段上のアニメーションを表現してみましょう。

今回使うデータは,以下になります。

Flashをお持ちの方はflaディレクトリに.flaファイルがあるのでこれをパブリッシュ,Flex Builderを使ってる人はこのzipをそのままFlex ProjectのArchiveファイルとしてimportしてください。

なお,今回も前回使用したものと同じマーカーを使います。そのため,まだマーカーを作ってない人は,マーカーのPDFファイルを80mmx80mm(等倍)で印刷しておいてください。

マーカーの座標を利用してみる

まずは,これまで解説してこなかったFLARのカメラとマーカーの位置関係を説明します。FLARではカメラは原点にあり全く動きません。かわりに入力画像内のマーカーに一致するようにFLARBaseNode(このノードにaddChildするとマーカーにオブジェクトがくっついているように表示される)の位置が変化します図2)。

図2 カメラとマーカーの位置関係

図2 カメラとマーカーの位置関係

つまり,マーカーから文字が飛び出す表現とは,ちょうど飛び出すタイミングのFLARBaseNodeの位置から,適当な位置へアニメーションさせれてやれば実現できるわけです。

gihyo3_1.asを見てください。コードは以下のとおりです。

リスト1 gihyo3_1.as(27~54行目)

protected override function onInit():void {
  super.onInit();
  this._timer = new Timer(1000, 0);
  this._timer.addEventListener(TimerEvent.TIMER, this._onTimer);
  this._timer.start();
}

private function _onTimer(e:TimerEvent):void {
  if (this._baseNode.visible) {  // 1
    var letter:VectorLetter3D = new VectorLetter3D(String.fromCharCode(65 + this._count++ % 26), this._mat, this._font);  // 2
    letter.x = this._baseNode.x;  // 3
    letter.y = this._baseNode.y;
    letter.z = this._baseNode.z;
    letter.scale = 0.3;
    this._scene.addChild(letter);  // 4
    
    Tweener.addTween(letter, {  // 5
      x: 0,
      y: 0,
      z: 100,
      time: 2,
      transition: Equations.easeNone,
      onComplete: function ():void {
        _scene.removeChild(letter);  // 6
      }
    });
  }
}

今回も前回と同じようにPV3DARAppクラスをベースクラスとしたクラスを作りました。gihyo3_1.as(gihyo3_1.fla)は1秒置きに文字がマーカーから出てくるというもので,onInitでタイマーをつくって1秒置きに_onTimerが呼ばれるようにしています。

1で_baseNodeのvisibleをチェックしているのは,マーカーが認識できているときだけ文字を発生させるためです。

2では,文字オブジェクトとなるVectorLetter3Dオブジェクトを作ります。

3がさきほど説明した部分で,文字オブジェクトの位置をマーカーの位置に合わせている部分になります。

4では,以前のサンプルとは異なり_sceneにaddChildしています。マーカーに追随して動く必要がないからですね。_baseNodeにaddChildするとマーカーの位置に合わせて動いてしまいます。

5では,特定の位置(ここではx=0, y=0, z=100)までTweenerを使ってアニメーションさせています。

6はアニメーションが終わったらシーンから削除している部分です。

gihyo3_1.as(gihyo3_1.fla)を実際に試してみると,以下の動画のような動きになります。

図3 gihyo3_1.as(gihyo3_1.fla)のデモ


Flying Letters 1 from Saqoosha on Vimeo.

著者プロフィール

さくーしゃ

大阪のKatamari Inc.っていうWeb屋でFlashやってます。Saqoosha.netでブログ書いてます。新しもの好きで飽きっぽいGeek。

コメント

コメントの記入