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

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

(解説：茅原 伸幸)

今回は仮想3D空間で物体を回転させてみよう。Flashではムービークリップなどを回転させる「_rotationプロパティ」が用意されているが、3Dでは座標を基に計算する必要があるため、_rotationプロパティは使えない。そのため、三角関数の「サイン・コサイン」（sine、cosine）を使って座標を計算する必要がある。サイン・コサインと聞いただけで苦手意識をもつ人も多いと思うが、応用範囲が広いので、ぜひこの機会にチャレンジしてほしい。

今回の目標はy軸を中心に奥行きをもった回転をさせることだ【サンプル1】。

まずは回転の座標を理解するためにxy座標の2Dで考えてみよう【図1】。

ボールを回転させるためには、回転の中心点と半径（r）を決め、角度（θ）を増加・減少させ続ければよい。そこで求めたいのは【図1】のボールのxy座標だ。回転の中心と半径（r）、角度（θ）が決まっている場合、ボールのx座標、y座標はどうやって求めればよいだろうか。

【図1】のように直角三角形の補助線を入れると、赤線（x）と青線（y）の長さがわかれば、ボールの座標が求められるだろうと想像ができる。そこで登場するのが次の三角関数の式だ。

cosθ=x/r
sinθ=y/r

これを変形すると、

x=r*cosθ
y=r*sinθ

となり、さらにActionScriptで表すと、

x=r*Math.cos(rad)
y=r*Math.sin(rad)

となる。ここで注意すべきことは、角度（θ）はActionScriptではラジアンで表した数値にする必要があるということだ。ラジアンと角度（度数）との関係があやふやな人は、このFlashスキルアップ講座のLesson1、第4回で解説した「ラジアン（弧度）と角度（度数）の関係」の項目をおさらいしてほしい。

三角関数といっても、さしあたって必要なのはActionScriptで表した（？）2行だけだ。この2行を理解するだけでも、ぐんとスキルアップするだろう。それでは実際に【サンプル1】を作ってみよう。

前回と同様に、ボールを描画した後、リンケージの識別子は“ball”に設定し、中心を基準点にしてシンボルに変換しておく。作成したシンボルをダブルクリックして編集画面に入り、ナンバーを表示させるためのダイナミックテキスト（インスタンス名：num_txt）を配置しておく【図2】。

シンボルが作成できたら_rootステージ上から削除し、_rootのフレーム1に三角関数がどのように使われているか確認しながら、次のActionScriptを記述する【図3】。

以上で【サンプル1】の完成だ。上記の三角関数はxy座標で解説したが、それを【図3】ではxz座標に置換えているだけだ。y座標は手前のボールと奥のボールが重ならないように、若干上から見下ろすように調整している。このサンプルは3D表現の基本を習得するための重要な事項を多く含んでいるため、理解できるまでしっかりと取り組んでみてほしい。

また、ここで【サンプル1】の動きはそのままで、背景や影などをアレンジした例をご紹介しよう【サンプル2】。

3Dの計算や動きだけではなく、コンテンツの背景や影などの見せ方でも3D表現はぐっと引き立つ。それらしく見えるように、いろいろ試行錯誤してみるとよいだろう。

次回へつづく