カメラと被写体の関係から擬似3D空間を作る (1)

FICC 福岡です。

初めての投稿ですから、まずは簡単に自己紹介を。FICCでは主にFlashコーディングを担当していますが、PHPでの簡単なシステム設計や、場合によってはデザインを担当することも。皆さんの目に触れるところでは、FICC AnotherBookmark BetaのFlashインターフェースからその管理ツールの作成まで一人で行っています（ちなみにデザインも）。

今回はCOBYウェブサイトでも利用した3Dインターフェースの基本的な部分を解説をします。ご存知の通り、Flashは3Dの概念を標準ではサポートしていません。近年ではPaperVision3DやSandyなどのAS2/3に対応したライブラリが公開されており、比較的簡単にFlashでも3Dが利用できる環境が整いつつあるようです。ですが今回は、改めて基本から。

3Dの概念の基本はオブジェクトとカメラの関係です。オブジェクトの位置情報とカメラの位置情報によって最終的な絵が決まります。つまり風景をカメラで切り取る感覚と同じ捉え方が出来ます。例えばカメラのファインダーをのぞいたとき、同じ物が近くと遠くにあるのでは見え方が異なります。近くにある物は大きく見え、遠くにある物は小さく見えます。さらに遠くにある物ほど画面中央に寄っていくように見えるでしょう。また、カメラを右に振れば被写体は左に流れ、左に振れば右に流れていく。こういった基本法則をASで再現します。

今回は画面中央が原点0に、そして奥行き方向を表すパラメータ z を考え、被写体オブジェクトとカメラの関係からFlashでの擬似3D表現を目指します。カメラと被写体が持つ仮想的なx、y、z座標は、MCが持っている_x、_yとの混同を避けるためoz、oy、ozとしました。

// カメラの役目となるMC、cameraを作成
this.createEmptyMovieClip("camera", 0);
// カメラ座標の初期値は(x,y,z)=(0,0,1000)。
this.camera.ox = 0;
this.camera.oy = 0;
this.camera.oz = 500;
// カメラのx、y座標はマウスと連動（z座標は1000のまま固定）
this.camera.onEnterFrame = function() {
　this.ox = -(Stage.width/2-this._parent._xmouse)*3;
　this.oy = -(Stage.height/2-this._parent._ymouse)*3;
};
 
// 被写体となるMCを作成するファンクション。引数depthはMCのz座標。
function createModel(depth:Number):Void {
　var myModel:MovieClip = this.createEmptyMovieClip("myModel"+depth, 100000-depth);
　myModel.lineStyle(1, 0xCCCCCC, 100, true, "none", "round", "miter", 1);
　myModel.beginFill(0xFFFFFF);
　myModel.moveTo(-50, -50);
　myModel.lineTo(50, -50);
　myModel.lineTo(50, 50);
　myModel.lineTo(-50, 50);
　myModel.lineTo(-50, -50);
　myModel.endFill();
 
　// 被写体MCのx、y、z座標を指定。x、yはランダムで。
　myModel.ox = -300+600*Math.random();
　myModel.oy = -200+400*Math.random();
　myModel.oz = depth;
 
　myModel.onEnterFrame = function() {
　　var camera:MovieClip = this._parent.camera;
　　var sZ:Number = camera.oz/this.oz;
 
　　// sZが小さくなればなるほど、つまりcameraのz値が小さくなるほど(ズームアウト)、myModelaは中央に寄って表示される。
　　// 逆にcameraのz値が大きくなるほど(ズームイン)、myModelaは画面外の方向へ向かう。
　　this._x = Stage.width*0.5+(this.ox-camera.ox)*sZ;
　　this._y = Stage.height*0.5+(this.oy-camera.oy)*sZ;
 
　　// sZが1になったとき、cameraとmyModelのzが一致したときにmyModelが100%のスケールで表示される。
　　// 基本的にcameraのZ値が大きくなればスケールも大きく、小さくなればスケールも小さくなる。
　　this._xscale = this._yscale=100*sZ;
　};
}
 
// 被写体オブジェクトをz座標500間隔で10個作成
for(var i:Number = 0;i<10;i++){
　createModel(500*i)
}

実行結果がこちら。

エントリー冒頭で作例として紹介したswfはオブジェクトをクリックすると、カメラがオブジェクトに寄ります。逆に何もないところをクリックするとカメラが引いて全体が見渡せるようになります。被写体とカメラの関連づけを工夫したり、カメラの動かし方を変えることでリアルな擬似3D空間が再現できるでしょう。