第4回　立方体のワイヤーフレーム

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

(解説：茅原 伸幸)

今回は仮想3D空間で立方体のワイヤーフレームを作って動かしてみよう。3D空間で立方体の各頂点となる座標にムービークリップを8つ配置し、それぞれのムービークリップ間をラインで結んで制作する。

まずは頂点となるムービークリップの作成から始めよう。ステージ上に黒丸を描画し、名前とリンケージ識別子を“ball”として、シンボルに変換する。制作の目印となるようにダイナミックテキストを配置しておく【図1】。

シンボルが作成できたらステージ上から削除して、_rootのフレーム1のフレームアクションに【図2】のActionScriptを記述する。各座標をひとつずつ設定しているため、長くなっているが、がんばって入力しよう。

【図2】の黄色の部分は、8つの頂点の各xyz座標をそれぞれ「pt_array」配列の「px」、「py」、「pz」に格納している部分だ。【図3】を見ながら位置関係を把握してみてほしい。

【図2】のオレンジの部分は、正直とても難解だ。詳細は省略するが、座標を3D回転させたときの座標を計算している部分である。これを根本から理解するには相当の努力が必要だろう。すべてを理解できなくても、まずは入力して動きを確かめてほしい。完璧には理解できずとも、動けばやはり楽しいものだ。

この部分を突き詰めて理解したいと思う人は、「アフィン変換」などをキーワードに調べてみるとよいだろう。かなり数学的になってしまうが、Flashの可能性を広げるためには、やりがいのあるところだと思う。また、Flash関係の書籍では、洋書になるが、Keith Peters著 「Foundation Actionscript Animation: Making Things Move (Foundation) 」が詳しい。数学に加えて英語のハードルも加わることになるが、内容が充実しており一読には値する本だ。誰もが簡単に習得できるものではないので、逆に習得したあかつきには相当な武器になることは間違いないだろう。

以上で動作させると【サンプル1】の動きになる。

これで立方体の8つの頂点が作成できたので、次にワイヤーフレームを描画しよう。ワイヤーフレームは各頂点間を立方体になるように「lineToメソッド」を使って、ラインを描画していくだけだ。【図2】のつづきに、次のActionScriptを入力しよう【図4】。

不規則な順番でラインを引いていっているが、途中までは“一筆書き”の要領と思っていただければ理解が早いのではないだろうか。合計12本のラインを“消しては描画”を再生中に繰り返している【サンプル2】。

以上で、仮想3D空間で立体をモデリングし、座標のポイントを3D回転させながら移動させることができる。ポイントの数を増やしたり、座標の位置を変えたり、ラインの引き方を変更したりして楽しんでみてほしい。一筆書きできるラインは「for文」を使って繰り返しライン描画することで、比較的短いコードで作成できる【サンプル3】。

z座標の重なりを考えながら、ポイント間を「beginFill メソッド」などを使ってうまく塗りつぶせば、簡単なポリゴンモデルも作れるだろう。ぜひチャレンジしてみてほしい。ただ、あまりがんばりすぎてポイントやラインを増やしすぎると処理がもたつくため、CPUの負荷を確認しながら進める必要がある。もしくは、ActionScript3に移行するのもひとつの手かもしれない。

3D表現はとてもダイナミックで魅力的な表現手法だが、常にCPU負荷との戦いを強いられる。今やActionScript3という強力な武器を手に入れたが、その戦いはまだまだ続くだろうと思う。

「Flashスキルアップ講座」Lesson3は今回で終了です。次回Lesson4は12月13日（水）からの掲載開始となります。