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

角度を±180の範囲に変換する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
角度の値を±180の範囲に変換する処理について考えます。
講師:
12:28

字幕

この Flash ムービーファイルでは Sprite のインスタンスの中に 2 つのビットマップの オブジェクトを入れて インスタンスの入れ物ごと y 軸で回転しています ただ 見てみると 重ね順がおかしいです Flash Player では 重ね順はオブジェクトを タイムラインに置いた順番に重ねて置いて z 軸の前後によって それを入れ替えるということはしません ですから重ね順を変えるスクリプトは 加えなければいけないんですが その前に少し準備が必要です というのは この回転角の扱いを もう少し 厳格にしておかなければなりません その後説明をします では swf は閉じましょう フレームアクションの処理の流れを 簡単に確認しておきましょう 先ず Sprite のインスタンスを作ります new Sprite で コンストラクタを呼び出します そして このインスタンスは メインタイムラインに addChild ということで 子どもに加えています そして一方で ライブラリのビットマップには クラス名が付けてあります そのクラス名で ビットマップのインスタンスを作り これはカタカナのビットマップなんですが 英語のBitmap Bitmap クラスのインスタンスを やはり new コンストラクタ new Bitmap で コンストラクタを呼び出して その引数に ライブラリのビットマップから作った オブジェクトを渡します これでビットマップの オブジェクトができあがり タイムラインに表示することができます これら 2 つの ビットマップのオブジェクトは 直接メインタイムラインには置かず 先程作っておいた 予め作っておいた Sprite の オブジェクトに対して addChild しています ですからメインタイムラインには 先ず Sprite が置かれ その子どもとして ビットマップから作られたオブジェクトが 入っているということになります これから修正しようという所で ポイントになるのは 回転させるアニメーションの部分です addEventListener で ENTER_FRAME のイベントに対して Listener 関数を登録しています その Listener 関数の中で Sprite を回す処理をしています Sprite を回す時に先ずマウスポインタと この変数はステージ中央の値を 取っているんですが マウスポインタの値が 水平座標がステージ中央からどれぐらい 離れているかというピクセルを取って それに比例させて回転角を決めています その時 ピクセルの値そのままでは 数字が大き過ぎますので ratio という変数を設けてあって その中で この回転角を調整しています そして回転角を 加算すればいいんですけれども Sprite のrotationY プロパティに加算すればいいんですが 3 次元の回転のプロパティは 放っておくと幾らでも値が大きく 或いはマイナスで小さくなってしまいます それを防ぐために いきなり加算せずに Sprite の回転角を 加えた合算した値を一旦変数に取っておき やたらと大きく 或いは小さくならないように 360 の剰余 割った余りを取っています そうすることによって 360 周期になり ±360 よりも増えない ということになっています これはこれで問題なく動いています ところが 2 つのビットマップの面の 前後を決めようとした時は 角度はあのままではまずいです この図は Sprite を上から見た所です ですから z 軸が 垂直になっていまして x 軸は水平です y 軸はこの中心に 上から見てみますから 点になっているはずですね そして Sprite が丸で示されています 青い 2 つの 下駄の歯の様になっているのは ビットマップです 先ずSprite の rotationY 回転角が 0 度の場合には 前面が手前に後面が後ろになっています これが いつ入れ替わるかですね それは時計回り反対方向 −90 になった時 ここまでは前面が手前で問題ないんですが これよりも超えた時 −120 とか超えたときは 後面が手前に出てきます 今度は逆に時計回りに回った時 90 度までは前面が前でも問題ありません けれど 90 を超えて 120 度になった時には 後面を手前にしなければいけません したがって前面が前か 後面が前かというのは 角度このSprit の rotationY の値によって 決められることになります つまり前面が手前なのは −90 よりも大きく 90 よりも小さい rotationY が与えられた時です 逆に後面が手前になるのは −90 よりも rotationY が小さくなった時 或いは 90 よりも rotationYが 大きくなった時という風に分けられます 但しこれは ±180 度へ角度が 定められているということが前提になります もし 90 度を超えて 180 度を超えて 更に大きくなってしまったら また前後の面が入れ替わりますから こういう考え方で前後関係を 決めようという場合には 角度を ±180 の範囲に 収めるということが必要になる訳です Flash ムービーファイルの フレームアクションに戻りました 単純に角度を 360 度の剰余 割った余りにすると ±360 度になってしまいます それで回転の角度が やたら大きくなったり やたら小さくなったり という問題は解消できるんですが 前後関係を決めるためには ±180 にしなければいけません といって 180 の剰余を 取ったのではいけません そうすると 180 周期になってしまいます ですから周期はあくまで 回転は 360 の周期で 回転しなければなりません −180 から 180 までの値というのは これは合計で 360 ですから 360 周期にしなければいけません ですから それを ちょっと簡単にはいきませんので 少しステートメントが必要ですので これは一旦コメントアウトして 関数を定めることにしましょう xGetDegree と 角度を求めるという関数を定めてここに 幾らでも大きくなってしまう状態の 角度の値を渡します そうすると この関数が上手くやってくれて ±180 の値に換算して返してくれると そういう予定です それを これから ここに付け加えていきましょう 関数は function 関数名丸括弧 ( ) 中括弧 { という形で定めていきます その時に function の入力を楽にする ショートカットがありますので ご紹介します エスケープキーを 1 回 キーボードの f のキーを 1 回 n のキーを 1 回 ファンクションの f n ですね f と n を取っています これを順番に押します エスケープ 1 回押しました f を押しました n を押しますと function 丸括弧 ( ) 中括弧 { が入ります そうしたら ここに 関数名は ここで決めました これをコントール若しくは コマンドドラッグで持ってきます 渡されるのは 角度の値です ですから Degree にしましょうか Number です そして幾らでも大きい幾らでも 小さい値をもらったものを ±180 の値に換算して返します 返すのはですから Number ですね ここに処理を付け加えていくことになります 先ず先に引数の Degree これは よく使うので 1 回コピーしておきます どう考えたら良いかというと 360 の剰余を取るというのは これは やはり使います そうすることによって 360 周期になる訳ですから でも普通だと 0 から 360 になってしまいますね そうならないためには どうしたら良いかというと 先に 180 加えれば良いですね そうすると元の数字と違うじゃないかと 180 増えてしまいます ですから剰余を取った後 つまり 0 から 360 の間の数字にした後 ドラッグでコピーしましょう コントロール若しくはコマンド ドラッグ 引けば良いと こうすることで 0 から 360 の間の数字が −180 から 180 の間の数字に 変わるということになります 但し これは + の場合ですね マイナスの場合を考えないといけません つまり 360 の剰余 割った余りを調べて もしこれが + だったら 180 を引けば良いんですが マイナスの場合を考えないといけません もし 360 の剰余を取った後 マイナスだったらどうするかですね この場合には逆にこれをコピーします コントロール若しくはコマンドドラッグです インデントを整えます 逆に足せば良いですね もし例えば −360 だったと その場合には 180 を足し込んであげれば −180 ということになります そしてそうでない場合 else です インデントを下げます そして括弧閉じ これで良いでしょう リターンを押さないといけないですね 最終的に この計算し終えた ±180 の間に収まった 変数の値を返します 確認したいので確認の為には trace を入れておくと良いですね これは消してしまいます trace の Sprite の rotationY の値です これをドラッグコピーします コントール若しくはコマンドドラッグ 一旦保存して ファイルメニューから保存です ムービープレビューで確かめましょう 制御メニューからムービープレビューです 適当にこう回してみて 出力パネルに出ている内容を確認します もっとも 最後の方まで出てこないので 一旦 swf は閉じてしまって この一連の数字を確認しましょう ±180 に収まっていれば結構です キリがないので見ませんけど 大丈夫そうですね ではタイムラインに切り替えて おさらいをします 再現なく大きく或いは小さくなってしまう rotationY 3 次元の プロパティですね ーに与える 数値それを ±180 の間に収める という場合の関数を定めました xGetDegrees です その関数の処理はこういう具合です 先ず考え方として予め 180 を足して 360 の剰余を取り + の場合であれば 180 を引けば 0 から 360 の間の数字が −180 から +180 の間に収まります 但し ± で扱いが違ってくるので if 条件を入れています そしてもし 360 の余りを取った値が マイナスであったら 180 を今度プラスしてあげることによって 収める値の数が 180 から −180 の間に きちんと収まるようになります この ±180 の範囲に収めた回転角を使えば その面の前後関係を 回転角によって Sprite の回転する角度によって 判別することができる様になります

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

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

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

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

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

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