第2回　仮想3D空間での物体移動（1）

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

（解説：茅原 伸幸）

前回は、仮想3D空間のオブジェクトを2D画面へ透視変換により投影する手法を解説したが、今回は仮想3D空間でオブジェクトをいろいろ移動させてみたい。

通常の2DのFlash制作では縦横の動き（xy座標）だけだが、3Dということで奥行きのz座標が加わってくる。立体的にイメージしながら楽しんでいただきたい。

まずは、単純にz座標のみを動かすサンプルを作成してみよう。

新規ファイルを作成し、フレームレートを31fpsにしておく。その後、ボールを描画し、中心を基準点にしてシンボルに変換する。そのとき、名前を“ball”にし、リンケージを「ActionScriptに書き出し」にチェックを入れ、識別子も“ball”にしておく【図1】。

シンボルが作成できたら、ステージ上のボールは削除しておく。そして、_rootのフレーム1に次のActionScriptを記述すれば完成だ【図2】。

【図2】のActionScriptの概略を説明すると、再生中、ボールムービークリップをz座標の奥側（1000）の位置にランダムにアタッチし、アタッチされたボールはz座標の値のみを減算し続け、手前に向ってくる仕組みとなっている。実行したものが次のサンプルだ【サンプル1】。

※3D計算の処理には負荷がかかりやすいため、以降のサンプルはクリックする度に、実行、停止の処理を入れてある。適宜クリックして実行、停止を切り替えながらサンプルを確認してほしい。

たったこれだけで宇宙の飛行シーンのような奥行きをもった効果が表現できる。

なお、【図2】でコメントアウトしている「xy座標移動」の2行（青枠部分）は、ボールムービークリップのxy座標をマウス位置によって変化させた場合だ。コメントアウトを外して実行すると次の【サンプル2】となり、より飛行感、浮遊感が増すだろう。

右の【図3】は【サンプル1】とほとんど同じだが、ボールムービークリップのy座標のみに手を加え、バウンドするようにさせたものだ。図2のActionScriptからの変更点に注意しながら見比べてほしい。

この【図3】を実行したものが次の【サンプル3】だ。

ちょっとした変更でさまざまな表現が楽しめるが、変更しているのは仮想3D空間用に用意した座標の「px」、「py」、「pz」の値だけで、透視変換用のActionScriptは触っていない。理屈さえわかってしまえば3D表現もさほど難しいものではないと感じていただけるのではないだろうか。サンプルのActionScriptは基本的なものだが、変数などの各値をいろいろ変更しながら実際に体験してみるとさらに理解は深まるだろう。

また、3D計算を含んだFlashコンテンツは負荷がかかりやすいため、プレビューの際には、Windows環境であれば、「タスクマネージャ」、Mac環境であれば「アクティビティモニタ」などを起動し、CPU負荷も併せて確認しながら作業を進めることが重要だ【図4】。

次回は仮想3D空間上での回転動作を取り上げたい。サイン・コサインが必要になってくるが、苦手意識をもたずにチャレンジしてほしい。

次回へつづく