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

インスタンスの座標を三角関数で定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
マウスポインタに追随するインスタンスの座標を、三角関数で定めてみましょう。
講師:
12:58

字幕

マウスポインタの後を インスタンスが追いかけるという インタラクティブなアニメーションを 三角関数と 三平方の定理を使って作ってみましょう ではこの swf は一旦閉じます この Flash ムービファイル プラファイルに書かれている アクションスクリプトを 先ず確認しましょう フレームアクションは このステージに置いてある MovieClip MovieClip シンボルの中に書いてありますので ダブルクリックで シンボルの編集状態にします シーン 1 の右側に MovieClip のアイコンと MovieClip の名前が表示されましたので 現在シンボルの編集状態です ここにキーフレームに スクリプトが書いてありますので 右クリックでアクションパネルを開きます このスクリプトは 三平方の定理も三角関数も使っていません 流れを確認しますと 先ず EventListener を addEventListener の メソッドで登録します イベントは ENTER FRAME 描画が書き換えられる時 フレームが切り替わる時のイベントです アニメーションの乗積ですね そしてメソッドを定めます Listener 関数は イベントオブジェクトを受け取ります この時の型指定は addEventListener で イベントを定めたクラスと同じにします 戻り値は void です そして中括弧の中が 関数本体ということで アニメーションの実際の 処理ということになります インスタンスから見た マウスポインタの xy 座標は それぞれ mouseX mouseY という プロパティで調べることができます インスタンスから見た座標を それぞれ xy 座標に 足し込んであげると マウスポインタの後を きっちりと付いて行きます それに対して掛けることの この変数ですね ratio ここには 0.2 という比率が入っています そうすると きっちり付いて行くのではなく 少し遅れて 移動距離をこれで割り引いている訳ですね ということでイーズアウトの 動きをしているということになります このムービーに限って言えば 三平方の定理とか三角関数を使うと 逆に処理が増えてしまいます ただ座標を扱う場合 特に 3 次元の座標を扱う様になりますと 座標間の距離とか それから三角関数を扱った 扱いというのも重要になりますので その練習問題と考えてください スクリプトを書き始める前に 三平方の定理と 三角関数 サイン コサインについて 確認しておきましょう 先ず三角関数のサインとコサインです 三角関数のサインとコサインというのは 単位円つまり半径 1 の円で定義されます 半径 1 の円で x 軸となす角が θ の時 xy 座標はそれぞれ cosθ sinθ で表されます ですからもしこの半径が r そして角度が θ これを極座標というんですけれども そこから xy 座標を求めたい時は 単純に距離 r を掛け算すれば良いので r x cosθ r x sinθ が それぞれ求める XY 座標になります そして2つの座標間の距離を求めるのが 三平方の定理です 実際の Math クラスを使った 求め方というのは 座標をそれぞれ X1 Y1 と X2 Y2 とした時 x 座標同士の差 y 座標同士の差を取ります そして その 2 乗を求めます 変数 sq_x sq_y に x 座標 y 座標それぞれの 差の 2 乗が入れられます そうしたら三平方の定理は この 2 つの和をとって 平方根 Math.sqrt square root を取ってあげると この 2 点間の距離が求まるということです さて MovieClip の フレームアクションに戻りました 三平方の定理と 三角関数を使った このマウスポインタの後を追いかける アニメーションの処理の流れを 先ず確認します 最初にマウスポインタまでの 距離を求めます マウスポインタの値は 変数に入れておきましょう ですからこれを変数に mouseX mouseY を それぞれ変数に入れます 変数名は X は使えませんので nX Number X という意味です 変数 nY Number です 流れだけを確認しますので どんどん変数を立てていきます 距離を求めます distance ですね どうやって求めるのかは三平方の定理ですが 今ちょっと置いておきましょう 流れを確認します 次に角度を求めます 角度というのは 自分とマウスポインタを結ぶ直線が x 軸となす角です ここは まだ求め方ー これからお話しますので 分からなくても結構です angle にしておきましょう この 2 つが求まれば 三角関数を使って インスタンスの位置を 変えることができますので ちょっと今途中ですけど こんな感じにしておきましょう ここで三角関数サイン コサインそれぞれを使って xy 座標を求めて それをインスタンスに XY というプロパティに代入をします ステートメントを 順番に完成させていきます 先ずはマウスポインタまでの距離ですね それには x 座標同士の差の 2 乗というのを取りますけれども sq square の X Number ところがインスタンスの座標は乗ですね 自分から見たマウスポインタの座標ですから 引き算をする必要がありません ということなんで これは単純に nX を 2 乗すれば良いです 2 乗は Math.pow ですね nX の 2 乗です 差を取らなくていいと楽ですね ではこれをコピーしてしまいましょう y 座標も同様です コピーして ペーストします Y 大文字の Y とします そうすると 三平方の定理ですから 平方根ですね sqrt square root 全部タイプしないとだめですね ここに 2 つの square root square ですね すみません square の X と square の Y 2 乗同士を足して square root か平方根ですので これで距離が求まりました 角度 angle は今一旦飛ばします 角度が求まったものとして考えましょう そうすると三角関数 コサインですね x 座標はコサインです Math. コサインは Math.cos コサインですね 数学の記号通りです ここに角度が求まったとして 角度を入れます コントロール若しくはコマンド ドラッグです コピーします そして Y 座標の方は Math.sin ですね 同様にこれをコピーしてしまいましょう 閉じ括弧も含めて コントロールまたはコマンドドラックです それに距離を掛け算するんですね ですからこの distance を コントロール コマンド ドラッグでコピーして 掛けることと 同様に y 座標も 距離は一緒ですから 同じものを掛け算します ドラッグでコピーですね このままでは まだイージングの 比率を掛けていませんけれども とりあえずきっちりとくっ付いて来る という所を完成させたいと思います 残るは角度です 角度を求めるには 便利なメソッドが Math クラスにあります xy 座標から 角度を求めることができるんです = で Math.atan2 と 変わった名前ですね 名前の由来は Arctangent Tangent の逆関数 2 と付くのは 数学には無いんですけれども Arctangent に 由来する関数ということなんですが もう これは xy 座標から 角度を求める関数だという風に 覚えてしまえば結構です 1 つだけ大きな注意がありまして 引数が xy 座標なんですが x 座標が先ではありません y 座標 x 座標の順番になります ということなので nY nX と ここにご注意ください そしてサイン コサインに渡す 角度はラジアンという 単位でなければなりません けれども幸いなことに Math.atan2 が計算して 返してくれる角度というのは ラジアンです ですから特に ラジアン度数の変換 という計算は必要ありません Math.atan2 に渡す第 2 引数は X ですね 間違えていました では ムービープレビューを確かめてみましょう 制御メニューから ムービープレビューです マウスポインタの後を きっちり付いて来ますね これで 三平方の定理と三角関数を使った 処理が上手く動いていることが 確かめられました swf を閉じましょう 仕上げはイージングを加えます これは この式の後に 掛けることの ratio ですね y 座標も同様に ドラッグ コピーしてしまいます コントロール若しくはコマンド ドラッグ 一旦保存しましょう ファイルメニューから ムービープレビューを確かめます 制御メニューから ムービープレビューです イージングがかかって マウスポインタの後を 少し遅れて付いて来る様になりました これで出来上がりです ではフレームアクションを確認しましょう 三平方の定理と 三角関数を使った 座標の扱いのおさらいです 先ずマウスポインタの xy 座標は 使いやすい様に短い変数に入れました 三平方の定理で このマウスポインタの 座標までの距離を求めます その為には x 座標 y 座標それぞれの 2 乗 Math.pow ですね 2 乗を取ります 自分とマウスポインタとの距離ですから 自分の 基準点は 0 ですので 引き算が必要ありません マウスポインタの座標の 2 乗をそれぞれ X 座標が sq_x square x ですね Y 座標が square Y という変数に入れました そうしたら 2 乗同士を足し込んで 平方根を取れば距離になります 平方根は Math.sqrt square root です 距離が求まりました 次に角度です これは Math.atan2 という ちょっと変わった名前の メソッドが使えます 注意は y 座標 x 座標の順番で渡します そうすると角度がラジアンで求まります 三角関数のコサイン サイン Math のメソッドは両方とも引数に 角度をラジアンで渡すことになります x 軸となす角度が angle 距離が distance となった時に x 座標は 距離掛けるコサインの角度 そして y 座標は距離掛ける サインの角度 これで角度から 角度と距離から xy 座標が求まります そしてイージンングの為に 掛けることの ratio ということで 少し遅れて付いて行く処理にしました

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

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

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

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

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

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