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

第2回 3Dソフトで作ったオブジェクトを使ってみる

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

ARラジコン的な何か

外部オブジェクトの読み込みができるようになったところで,次はラジコンっぽいものを動かしてみましょう。

意外とPapervision3Dは歴史が長く,いろんな方がサンプルを作っています。そのため,そういうサンプルをFLARToolkitと組み合わせてみるだけでも,新しいおもしろさを表現できたりします。

例えば,以下の図の車は,Papervisio3D 1.7時代に作られたFocusというサンプルです。

図3 Focus

図3 Focus

URL:http://saqoosha.net/lab/Focus/

このサンプルは,当時Papervision3Dに付属していました。Ford社のFocusという車(のラリー仕様?)のCollada形式のモデリングデータを読み込んで,十字キーで操作([↑]キーがアクセル,[←][→]キーでハンドル。[↓]はバック)&マウスで視点が変えられるというものです。実際に車を動かしてみてください

今回の目的に必要十分な要素が使われてるので,これをFLAR対応させてみましょう。元のFocusサンプルはPapervision3DのSubversionリポジトリからダウンロードできます。Papervision3D 1.7用なのでPapervision3D 2.0でそのまま動かすことはできませんが,FLAR対応には特に問題ありません。

さきほどと同様に,PV3DARAppクラスを継承したGihyo2_2クラス(Gihyo2_2.as)を作って,main.as(Focusサンプルのメインとなるドキュメントクラス)から必要な部分をどんどんコピーして持ってきます。

リスト3 Gihyo2_2.as,15~31行目

// ____________________ 3D vars

private var rootNode  :DisplayObject3D;

// ____________________ Car vars

private var topSpeed  :Number = 0;
private var topSteer  :Number = 0;
private var speed     :Number = 0;
private var steer     :Number = 0;

// ____________________ Keyboard vars

private var keyRight   :Boolean = false;
private var keyLeft    :Boolean = false;
private var keyForward :Boolean = false;
private var keyReverse :Boolean = false;

15~31行目の変数宣言部分は,ほとんどそのままです。

リスト4 Gihyo2_2.as,37~52行目

protected override function onInit():void {
  super.onInit();
 
  var car:DAE = new DAE();   // 1
  car.load('Focus.dae');
  car.scale = 3;
  car.rotationX = 90;
  car.rotationZ = -90;
  this._baseNode.addChild(car);
  this.rootNode = car;

  stage.addEventListener( KeyboardEvent.KEY_DOWN, keyDownHandler );   // 2
  stage.addEventListener( KeyboardEvent.KEY_UP, keyUpHandler );       // 3

  this.addEventListener( Event.ENTER_FRAME, loop3D );   // 4
}

37~52行目は,onInit内での初期化部分です。1のFocus.daeの読み込みはPapervision3D 1.7と2.0でずいぶん違うため,ここは自分で書き直す必要があります(はちゅねのサンプルとほぼ同じです)⁠2,3,4はmain.asのコンストラクタの58~61行目をコピーして持ってきます。そして,キーボード用のイベントハンドラとフレームごとに車を動かすloop3Dを登録します。

リスト5 Gihyo2_2.as,57~114行目

private function keyDownHandler( event :KeyboardEvent ):void
{
  // 省略
}

private function keyUpHandler( event :KeyboardEvent ):void
{
  // 省略
}

57~114行目のキーボード処理関連はそのままなので,コピペします。

リスト6 Gihyo2_2.as,119~158行目

private function driveCar():void
{
  // Speed
  if( keyForward )
  {
    topSpeed = 2;
  }
  else if( keyReverse )
  {
    topSpeed = -1;
  }
  else
  {
    topSpeed = 0;
  }

  speed -= ( speed - topSpeed ) / 10;

  // Steer
  if( keyRight )
  {
    if( topSteer < 45 )
    {
      topSteer += 5;
    }
  }
  else if( keyLeft )
  {
    if( topSteer > -45 )
    {
      topSteer -= 5;
    }
  }
  else
  {
    topSteer -= topSteer / 5;
  }

  steer -= ( steer - topSteer ) / 2;
}

119~158行目は,スピードとステアリングの処理部分です。元のままだと,なぜかものすごいスピードで操作できないため,数値を調整します。

リスト7 Gihyo2_2.as,194~222行目

private function loop3D( event :Event ):void
    {
// 1
//      camera.z = -300 + scene.container.mouseX * 5;
//      camera.y = Math.max( 0, this.mouseY ) * 5;
 
      // Get plane from rootNode
      var car :DisplayObject3D = this.rootNode.getChildByName("Focus", true);  // 2
      
      // Check if car has been loaded
      if( car )
      {
// 3
//        // Get plane from rootNode, we obviously don't need to check if it has been loaded.
//        var plane :DisplayObject3D = this.rootNode.getChildByName( "Plane" );
//  
//        // Check if car hits plane and change color
//        if( car.hitTestObject( plane ) )
//          plane.material.fillColor = 0xFFFFFF;
//        else
//          plane.material.fillColor = 0x333333;
 
        // Calculate current steer and speed
        driveCar();
 
        // Update car model
        updateCar( car );
      }
 
      // Render the scene
// 4
//      this.scene.renderCamera( camera );
    }

194~222行目では,フレームごとに実行されるloop3Dメソッドを記述し,ここで車を動かしています。

ここは結構いらない部分があるのでいろいろコメントアウトします。1はカメラ制御のコードですが,カメラはFLARが処理しちゃうのでいじる必要ありません。

3は床の色を車の位置に応じて変えるという処理ですが,これも必要ないのでコメントアウトします。4はシーンをレンダリングしているのですが,レンダリングはPV3DARAppクラスが行ってくれるのでコメントアウトします。

2はgetChildByNameの第2引数にtrueを渡すように変更します。これはPapervison 2.0での仕様変更に伴うものです。

それでは,動かしてみましょう(Flash使ってる人はGihyo2_2.flaをパブリッシュ,Flex Builderの人はGihyo2_2.asをRun)⁠

図4 AR的ラジコンが完成!

図4 AR的ラジコンが完成!

キー操作は,先に述べたものと同じですムービーで見てみる)⁠

ほとんどコピペと,ちょっとした調整だけでFLAR対応できちゃいました。簡単ですね。

まとめ

最初に言及したようにFLARToolKitはカメラの計算をするだけなので,今回説明したように,ほとんどがPapervision3Dのお話になります。つまり,Papervision3Dが使える人であれば簡単にFLARなコンテンツが作れてしまうわけです。

次回は,僕が作った株式会社カタマリの年賀サイトで使ったテクニックをいくつか紹介してみようと思います。

著者プロフィール

さくーしゃ

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