vol.58 ３次元のスパイラルを表現する（前編）

まず、Flashは基本的に、水平方向を定義するX座標と垂直方向を定義するY座標によってオブジェクトの位置を決める２次元的なソフトウェアですね。つまり奥行き感を持った運動を表現するのは、非常に苦手なわけです。できなくはないのだけれど、一工夫する必要があります。では、どう工夫すればよいのか？いい例になるかどうかわからなけれど、いろいろいじくり回してできあがったもの、それが今回のサンプルの「The spiral driver version 0.1」です。あらかじめ決まり切った運動をするのではなく、パラメーターとなる数値をあれこれ変えてみることで、異なる動きをするように設計されています。

奥行き感と言いましたが、奥行き感を持った運動を表現するためには、オブジェクトを動きの中で拡大・縮小する必要があります。近くのものは大きく見えるだろうし、遠くのものは小さく見える。それをFlashのステージを映画のスクリーンに見立てて考えるには、「透視変換」という手法を使います。

「透視変換」といっても難しく考える必要はありません。映画館に入ってスクリーンを眺めている自分を想像します。座席の位置はだいたい中央あたりがいいですね。で、中央付近の座席に腰を下ろしてスクリーンを眺めます。館内が暗くなって、余計なモノが見えなくなります。スクリーンを見ると派手派手しい音声とともに映画の予告編みたいなものが始まります。スクリーン自体は２次元の世界です。スクリーン上には奥行きがありません。Flashで言う「ステージ」と同じです。通常映画館では途中で座席を移動したりしないので、見ている人の位置は固定です。つまりスクリーンと視点の位置関係は一定だと考えます。

すると仮想的な物体の位置（それはスクリーンの奥にあるので、仮想的な空間上にあります）とその物体がスクリーン上に投影されている位置と視点を線で結ぶと三角形が２つできます。そしてその三角形は相似の関係にあります。これが「透視変換」の原理です。毎フレームごとに透視変換を行い、座標位置・拡大縮小率・アルファといったオブジェクトのプロパティを計算し、ステージ上にあるオブジェクトに適用します。そうすれば、後は仮想的な空間上にあるオブジェクトを何らかの方法で動かせば、勝手に透視変換した後のプロパティを適用したオブジェクトがステージ上に表示されるわけです。

スパイラル運動は仮想的な３次元空間を回転運動しているオブジェクトにさらにZ軸上を平行移動する運動を加えることで作り出すことができます。単にZ軸方向の値を毎フレームごとに6pxずつ増加させるとか逆に減少させるとかします。

より詳しい解説は誌面の方をご覧いただくことにして、今回は原理的なことを補足してみました。では、後編に続きます。