ActionScript 3.0による3次元表現の基礎

Array.sortOn()メソッド-前編-

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
面の前後は、Array.sortOn()メソッドを用いて整えます。
講師:
08:19

字幕

この Flash ムービーは ライブラリのビットマップから 4 つの面の Sprite を作って それを親の Sprite の中に 入れています そして四方に面を並べた上で 水平に回転します マウスポインタの位置が 中心から離れるほど 回転は速くなります また方向も変わります 座標の位置関係は 正しくできていますし 遠近法も正しく適用されています 但し面の重ね順について 何も行っていないために 面の前後関係が おかしくなっています これをどういう考え方で 揃えたら良いか 正しい面の順序に重ね合わせたら良いか ということを考えてみたいと思います では SWF は閉じましょう メインタイムラインの フレームアクションの中で ライブラリの 4 つのビットマップから 面の Sprite インスタンスを作って メインタイムラインに置いた親の Sprite の中に入れ子にしていく という部分の処理を確認していきます 先ずメインタイムラインに置く Sprite のインスタンスを作ります このステートメントです そしてそれを addChild メソッドで 今スクリプトを書いている- メインタイムラインの子として加えます そしてこの Sprite は ステージの中央に 配置するように x 座標 y 座標 z 座標は 3D の操作を行う というために入れてあります そしてライブラリの ビットマップに設定した- クラスを引数に渡して Sprite のインスタンスを作るという 関数を定義しました この関数は Sprite を作って 返してくれるので その返された Sprite のインスタンスを メインタイムラインに置いた Sprite の子どもとして addChild ということで加えます 4 面ありますので 4 つ addChild を呼び出しています そしてこの CreateFace xCreateFace という関数なんですが クラス以外におおもとの Sprite の中で配置する位置の座標を x y z と渡し 更にその中で y 軸で回転するための 回転の角度も渡しています これらの引数をもとに配置をして Sprite を作って返すというのが こちらの関数です この面を作って返す関数は 面を Sprite インスタンスで返します ですから先ず その Sprite インスタンスを作っていて そして渡された引数の x y z の座標を この Sprite に設定し また y 軸回りの回転角も Sprite に設定しています そしてそれを返す ということです ただ これでは空っぽで 何も見えませんから 中にライブラリのビットマップから作った- Bitmap のオブジェクトを 入れることになります Bitmap のオブジェクトは コンストラクタで new Bitmap で作ります その時ライブラリのカタカナの ビットマップからもらった Class を引数に受け取っていますので その Class も やはり new で呼び出して ライブラリのカタカナの ビットマップのオブジェクトを Class Bitmap 英語の Bitmap の オブジェクトの中に入れて それを変数に入れています ただ注意しなければいけないのは この Bitmap のオブジェクトの 基準点は必ず右上隅にあります 画像の中心に基準点を持ちたい そのために Sprite に 入れ子にしています Sprite のオブジェクトの中に addChild で Bitmap オブジェクトを入れています その上で Bitmap オブジェクトの 座標を左上に移動して Bitmap の中心と Sprite の中心が 合致するようにした上で その Sprite を返している ということです さて そしてビットマップの 4 つの面 この前後関係をどう判定したら良いか ということなのですが その前に最初の Bitmap オブジェクトを入れた- Sprite に設定されている座標の値を 見ておくことにしましょう この 4 つの部分ですね xCreateFace に渡している 第 2 引数以降です x y z 座標と y 軸回りの回転角 これは前面なので z 座標を マイナスつまり手前にしています 回転はしません 次 後ろの面ですね これは z 座標が奥になるので プラスの値を z に設定して 180 度回転しています 裏向きにしているわけですね 次に右の面ですから x 座標をプラスにして y と z は 0 です そして反時計回りに 90 度しています 左の面というのはこれと丁度プラスマイナスを 逆にすれば良いので x 座標はマイナスに左側にして 回転する角度は 時計回りに 90 度という風にしています これをちょっと図にして考えてみましょう メインタイムラインに置いた Sprite を 上から見た図です 実際には見えないのですが この丸が親の Sprite そしてこの直線で書いてあるのが 上から見ていますから 各面の Sprite を意味しています そして前面は z 座標がマイナス 後面は z 座標がプラス それから右面は x 座標がプラスで 左面は x 座標がマイナスという風に 指定してありました その時ビットマップを入れた Sprite の 基準点は中心にあります 何故かというと Sprite の 基準点が中心になるように Bitmap のオブジェクトを作った後 左上にずらしましたよね ということなので このそれぞれの座標というのは 各面の中心の座標を 意味しています ということは どの面が手前にあるかというのは z 座標を見てみれば良いですね z 座標が後ろにいった ということは例えば 左と右と比べて右の方が z 座標が 小さかったという場合には 右の面が後ろにいった ということです ですから x や y は気にしなくて良い z 座標だけ見て 面の前後を 判断できるということが分かります さてそれは良いですけれども そうすると 4 つの面の z 座標を総当たりで調べるか というとちょっと大変そうですね 実は簡単な方法があります 配列の中にエレメントとして オブジェクトを入れた場合 そのオブジェクトのプロパティで 並べ替えをするという sortOn というメソッドがあります 配列の中にオブジェクトを入れておいて このプロパティの順番で並べ替えてください という風にすると 総当たりを配列のメソッドが やってくれるんですね 並べ方というのはオプションで 配列 Array クラスの定数で渡すことが できるのですが 今回は 2 つだけ紹介しておきましょう Array.DESCENDING というのは 大きい順 降順という指定になります それからもう 1 つ文字ではなくて 数値として大きさを比べるという時には Array.NUMERIC です オプションは複数の定数を まとめて指定することもできます もう 1 つ これから練習するスクリプトで使うので ご紹介しておきたいメソッドがあります 親オブジェクトの中から 指定した子オブジェクトを取り出す getChildAt というメソッドです Sprite とかあるいは メインタイムラインでも結構ですが 子どものインスタンスがいる場合 それぞれは 0 から始まる連番の インデックスを持っています そしてインデックスは大きいほど 重ね順が手前ということに なっているのですが 何番目という ID を getChildAt の引数に渡すと その位置にある 子どものオブジェクトが 取り出されて返されます それではこれらのメソッドを使った 練習のスクリプトを書いてみましょう

ActionScript 3.0による3次元表現の基礎

このコースではActionScript 3.0の基礎を学んだ人を対象に、3次元空間を使ったオブジェクトの動かし方について学習します。ActionScript 3.0の3次元を扱うクラスの扱い方を説明するとともに、その基礎となる数学や物理の考え方についても解説します。

3時間53分 (29 ビデオ)
現在、カスタマーレビューはありません…
 

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。