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

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

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

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

• gihyo3.zip

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

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

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

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

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

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

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）を実際に試してみると，以下の動画のような動きになります。