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

ふたつのインスタンスの重ね順を整える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
3次元空間で水平に回るふたつのインスタンスの前後を正しく定めます。
講師:
12:41

字幕

この Flash ムービーは ライブラリのビットマップから 2 つのインスタンスを作って それを Sprite インスタンスの中に入れ Sprite インスタンスを y 軸で回転しています ここでのポイントは Sprite を回転すると ビットマップのオブジェクトの 前後が入れ替わります その入れ替わった前後に従って オブジェクトの重ね順を 変えてあげないといけません その前後をどうやって判断し 順番をどうやって重ね順を変えるか というところがポイントになります では swf は閉じましょう こちらの完成品の fla ファイルは閉じましょう まだ重ね順を変えていない サンプルがこちらです このスクリプトに重ね順を判定して 置き換えるという処理を加えることにします その前に今現在どこまで できているかというのを確認しましょう 制御メニューから ムービープレビューを見ましょう 遠近法が適用されて インスタンスの見え方が変わるんですけども 重ね順は常にペンギンが後ろですね ちゃんと重ね順の順番を変えて z 軸の座標が 手前にあるものが 手前に見える様にしたいと思います では swf は閉じます フレームアクションを簡単に確認します 先ずインスタンスを タイムラインに置く所ですね Sprite のインスタンスを作って それを このメインタイムラインに 子どもとして addChild を加えます 次にライブラリの ビットマップに付けてあるクラスで インスタンスをそれぞれ作り それをビットマップのオブジェクトとして Sprite に addChild します つまりメインタイムラインに Sprite のインスタンスを置き その Sprite の中にビットマップの インスタンスを置いているということです 次にアニメーションの処理です アニメーションは Event ENTER_FRAME に addEventListener で Listener 関数を加えます これが この Listener 関数です マウスポインタの x 座標と この変数はステージの 中心の値を持っていますので ステージの中心から マウスポインタの位置の差を取り それに割引の率を掛け算して 回転する角度を定めてみます それをそのまま Sprite の rotationY プロパティに入れても 回転はするんですが 3 次元のプロパティというのは値が 再現なく大きくなったり 小さくなったりしてしまいます そこでその値を一定の範囲に 収めるということが必要になってきます そこで定めたのが この関数 xGetDegrees です この関数はどのような 大きい値が来ても小さい値が来ても ±180 の範囲に値を変換して返します 度数は 360 度周期です 値を 360 周期にするのが この剰余の演算子を使った処理です 角度を 360 の剰余 割った余りにします そうすると 0 から 360 まで行くと また 0 に戻ります ところが今回やりたかったのは ±180 度の 360 です −180 から +180 の 360 の周期にしたいということなので 基本的な考え方として それでは先に 180 を足して 360 の剰余を取り そして 180 を その後引けば良いでしょう ということです もっとも値が マイナスになる場合がありますので マイナスになった時は 360 の剰余を取って マイナスになった時には 180 を逆に足すということで この元となる値というのは 受け取った値を ±180 の値に 換算して返すということです その値を この関数 呼び出しの戻り値として受け取って Sprite の rotationY プロパティに設定することにより Sprite は回転し また回転する角度は常に −180 から +180 の間の 数字ということになっています では この回転角から どうやって面の前後を 決めたら良いかということです Sprite のインスタンスを y 軸で回転しますので 上から見た図で考えます 先ず Sprite の回転角 rotationY が 0 の場合 前面が手前で後面が後ろです そして 反時計回りに回転する場合を考えて −90 度になった ここまでは前面が手前で問題ありません −90 を超えた時に 後面が手前に来るということになります 今度は時計回りで考えた場合 +90 度までは前面が前で大丈夫です ここを超えると後面が前になります ということで −90 よりも rotationY が大きく 90 よりも小さい場合は前面が手前 そうでない場合は後面が手前 という風に判定ができます ではフレームアクションに重ね順を コントロールする処理を加えます この角度を決める関数はもう見ないので 畳んでしまいましょう では 重ね順を変える関数を定めることにします この後に 名前はに xSetOrder にしましょう そして引数を渡します 渡すのは ±180 の間の回転角とします コントロール若しくはコマンドで ドラッグしてコピーします もっとも今この nRotationY の値は 180 を超えている場合があります ですから改めて この xGetDegrees で 180 の ±180 に収めた値を 変数に入れてから ドラッグコピーです コントロール若しくはコマンドドラッグで 一旦変数に入れてから この変数の値を Sprite の rotationY プロパティに設定し そして これから定義する関数にも 渡すということにします 関数 xSetOrder を新たに定めます 関数のfunction というキーワードを 入れる時のショートカット エスケープキーを押して その後 f のキーを押して n のキーを押すと この 3 つのキーを順番に押すと エスケープを押しました f を押しました n を押しましたという風にすると function () { までが入ります そしてfunction 名 関数名は xSetOrder です コントロール若しくはコマンドで ドラッグします 受け取るのは角度ですので ここでは angle にしましょう 型指定は Number です そして戻り値は特にありませんので void とします ここに処理を書き加えていきます 考え方としては手前に来るべき ビットマップのオブジェクトを 重ね順の手前に持ってくる という風にしたいと思います そうすると手前の インデックス番号が欲しいです これを nTop という値にして そして飾り上は整数ですから ここは uint にしておきます そして重ね順の一番手前というのは Sprite の中に入っている インスタンスの数から調べることができます mySprite をコピーしましょうね コントロール若しくはコントロール ドラッグです そしてmySprite に来ます numChildren と というプロパティが インスタンスの中に入っている Sprite の中に入っている インスタンスの数を示します 但しインデックス番号は 0 からスタートするので 一番手前の番号というのは numChildren から 1 引く必要があります そして引数に受け取った角度による 条件判定をすることになります もし受け取った この angle ドラッグコピーします コントロール若しくはコマンド ドラッグです 90 よりも大きい場合 または縦棒 2 つです −90 よりも小さい場合が 後面が前に来るんですね 後ろの面が前に来ます 同じくドラッグコピーで −90 よりも 大小比較でいえば 小さい場合ということになりますね この時は後ろの面が 後ろのビットマップが 手前に来るという風に手前に持ってきます 手前に持ってくるには また mySprite. です ドラッグコピーします コントロール若しくはコマンドドラッグ メソッドは setChildIndex です この場合は後ろの面ですね 後ろの面は BitmapBack としましたので BitmapBack を コントロール若しくはコマンドドラッグで コピーして持ってきます それを前面のインデックス というのは変数に取ってありますね この nTop という値です これで先ず 1 つの場合ができました この if 条件以外の場合は else ですね else で その時はフロントが前に来ればいいので コピーしちゃいましょう コピーして ここにペーストし バックでなくてフロントですね bitmapFront を 手前に持ってきます コピーして ペーストです ファイルは一旦保存しましょう ファイルメニューから保存です ムービープレビューで結果を確かめます 制御メニューからムービープレビューです ペンギンがちゃんと 手前に来るようになりました 逆に回しても問題ないですね これでちゃんと z 軸方向の 奥と手前の判定に従って ビットマップの重ね順が変わっています 確認ができましたので swf は閉じて まとめましょう 二つのビットマップオブジェクトの 重ね順の判定の仕方 先ずは図で もう 1 度確認します Sprite インスタンスで回転角 y 軸の回転角 rotationY が −90 よりも大きく 90 よりも小さい時 その時は前面が手前になります そうではない場合 つまり −90 よりも rotationY が小さく 数字が大きくなる場合ですね その場合と 90 よりも + の 90 よりも rotationY が大きくなる場合には 後ろの面を 手前に持ってくることになります フレームアクションには 重ね順をコントロールする関数 xSetOrde を定めました 引数には ±180 の範囲の Sprite インスタンスの回転角を渡します これが その関数です 先ずは前面のビットマックオブジェクトを 前面に持ってくるという考え方にしたので 一番前面のインデックス番号を ここで調べています Sprite に子どもが全部で 何人いるかと聞きます インデックスは 0 から始まりますので 一番手前のインデックスは この numChildren から マイナス 1 した値になります そして引数に受け取った角度です 90 よりも大きい場合 或いは −90 よりも小さいという場合は 後ろの面バックですね bitmapBack が手前に来ますので メソッドは Sprite に対して setChildIndex そして手前に持ってくるオブジェクト そして手前の インデックスを渡すことによって この後ろの面が手前に来ます そうでない場合というのは 前面が手前に来ていい訳ですから 同じく setChildIndex のメソッドを呼び出し フロントのビットマップですね bitmapFront という変数にしましたが それを手前に持ってくると こうすることによって 奥行き z 座標の値によって インスタンスの重ね順が適切に 整えられるということになりました

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

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

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

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

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

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