第1回　3D表現とは？

ActionScriptを使った表現の中でも最もインパクトのある表現のひとつが3D表現だろう。奥行きを持たせた3D表現は平面のモニタ画面上でも立体的な空間を感じさせることができ、見る者を強力に惹きつける。3D表現といっても多岐にわたるが、Lesson3ではActionScriptを使った3D表現をめざしてみよう。

（解説：茅原 伸幸）

ActionScriptを使った3D表現にはあこがれている人も多いと思う。その一方で、見るからに難しそう……、3D表現のサンプルのflaファイルをダウン ロードしてActionScriptをのぞいてはみたが、わけのわからない数式の羅列に圧倒されてあきらめた……、といった人も多いのではないだろうか。

確かに複雑な表現が可能になる分、難易度は高いかもしれないが、基本は単純なことだ。先に大胆に言ってしまえば、

この1行さえ理解すれば第1段階は完了だ。

あとは、自分の頭の中に描いた立体的なイメージ空間で自由に物体を飛び回らせるだけだ。このイメージ空間での物体の動作をActionScriptで表すのが難しいところではあるが、それだけやりがいもあり、また、楽しいところでもある。

最初に、

・遠くの物は小さく、近くのものは大きく見える
・近くのものが手前に見える

この2点をきちんと計算して実現すれば立派な3D表現になることを確認しよう【サンプル1】。

10個のボールがあたかも奥行きをもった空間を回転しているように見える。でも実際には、平面上の円が拡大縮小しながら上下左右に移動して、重なり順を変えているだけだ。それではポイントを見ていこう。

まずは解説用に作成した【サンプル2】を概念が理解できるまで、見て触っていただきたい。

ボールAは仮想3D空間を回転運動しているものを真上から見ていると想定していただきたい。ボールBは焦点となるScreen上に投影されているものを表している。また、EYEは視点となるポイントを表している。

ちょうど窓ガラス越しに外を見ている感じだと思っていただければいい。窓の外に広がる風景（3D）を窓（2D）に描き写すことがまさに今回のポイントだ。「透視変換」や「透視投影」と呼ばれる手法で、三次元の物体を二次元の平面に表すときに使われる。

重要なのはボールAに対するボールBの位置と大きさだ。ボールAを自由にドラッグして、その相関関係を体験しながらイメージしてほしい。ボールAがEYE に近づけば大きくなり、遠ざかれば小さくなる。また、ボールAが右に移動すれば、ボールBも移動するが、その位置は常にボールAとEYEを結ぶ線上にある。

それでは、この関係はどうやって導けばよいだろうか……。答えは冒頭で述べた

scale=fl/(fl+pz)

この1行に集約される。

ボールBの大きさは【サンプル2】の青線（fl）と赤線（pz）を足した合計分の青線（fl）の比率で表される。同時にボールAの位置の比率も同じだ。実際にはどういう使い方をするのか簡単なサンプルを作成して確認してみよう。

まず、新規ファイルを作成し、ステージサイズ400px（幅）、200px（高さ）、フレームレート31fpsに設定する。その後、ボールを描画し、ボー ルの中心を基準点としたムービークリップに変換し、そのムービークリップのフレームアクションに次のActionScriptを記述する【図1】。

初期設定や仮想3D空間で回転動作をさせているため、若干見づらいかもしれないが、今回のポイントは黄色の部分だ。

仮想3D空間上のx座標（px）、y座標（py）を基にballムービークリップの_x座標、_y座標の位置を計算し、仮想3D空間上のz座標（px）を 基にballムービークリップの大きさ（_xscale、_yscale）を設定していることが理解していただけるであろうか。

実際に動かしてみると、次の【サンプル3】となる。

ボールが拡大縮小しながら動いているため、なんとか立体的に回転しているように見えるが、もし、静止した場合はどうだろう。いくら3D計算していたとしても、止まっていたらとても3Dには見えない。

3Dに見せるためには、【サンプル1】のように他の比較対象物があったり、回転などの動きを持たせたり、影をつけたりといったテクニックが必要となってくる。次回からはそういった見せ方のテクニックも含めながら、じっくり仮想3D空間上での動きなどを見ていこう。

次回へつづく