CreateJS実践講座

オブジェクト同士の間に引き合う力を与える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
オブジェクト同士の距離に比例した加速度を引き合う向きに与えることで、バネで引張られるような動きが表せます。
講師:
10:13

字幕

このレッスンでは ランダムに動く たくさんのオブジェクト同士の間に 引っ張り合う力を与えます そうすると今画面で見ているように お互いのオブジェクトの間に バネで引っ張り合っているように くっつきあったり離れたり という動きになります すべてのオブジェクト同士の間に 力を加えるという処理を 入れたいと思います Dreamweaverで開いた HTMLドキュメントには まだオブジェクト同士の間に 力を加えてはいません ティッカーイベント アニメーションの イベントのリスナー関数は すべてのオブジェクトを取り出して それぞれにランダムに 定められたスピード velocityX, velocityYという プロパティで与えられているのですが それに従って一定の方向に動くだけです ですから 力が働くというような 動きにはなっていません けれども 2つのオブジェクトを取り出して その2つのオブジェクトの関係を 調べて 力を加えるという 処理が加えられるように 2つのオブジェクトを 総当たりで取り出すという for文は書き加えてあります ですからこの中に その力を加えるという処理を 書き込めばいいと いうことになります 具体的には 関数を定めて その関数に 2つのオブジェクト (ボール) を 送ることになります まずは 今現在の動きを 確かめておきましょう 「ファイル」で 「ブラウザーでプレビュー」です それぞれのオブジェクトが ランダムな向きに またスピードも それぞれ velocityX, velocityYに 定められているのですが その定められたスピードで ずーっと一定方向に動くだけです ただし ステージの外側に行ったら 反対側からまた現れるように という処理が加えられていますので すべてのオブジェクトが常に このステージの中にいるという 状態にはなっています このオブジェクトの中から 2つの組み合わせ 全てを取り出して そこに力を加えたい バネのような力を加えたいと思います その時のまず 考え方からご紹介しましょう オブジェクト同士の間に バネのように 引き合う力を加えたいという場合 これは「フックの法則」 という法則に従います 力は伸びに比例すると言われるのですが 要するに 離れれば離れるほど くっつこうとするという そういう力のかかり方です 具体的に処理するには まずオブジェクト同士の距離を求めます これが遠いほど力が大きいわけですね 次に その力というのは 加速度になるのですけれど 距離に比例した加速度を求めます そしてその上で その加速度を 両方に加えるのですけれども その加えるのは お互いが引っ張り合うようにですから 実はプラスマイナスを 逆にするわけですね そうすることによってお互いが 引き合うということになります これを実際のコードに落とし込んでみると このようになります 加速度を距離に比例させる というコードなのですが 関数名はspringとしましょう 2つのボールを受け取ります object0, object1という変数名にしました 引数ですね そうしたら2つのオブジェクトの 距離を求めます これは厳密にはx座標とy座標 それぞれ求めなければいけません けれどベクトルだと思って いただければ良いでしょう ベクトルはx,y座標を両方 持っているものですから ベクトルと考えていただいても結構です そうしたら その距離に比例した 値を加速度にするということですので 距離に比例計数をかけます そうすると加速度 これも もちろん xとyがあります その加速度をそれぞれ object0とobject1に 加えるということなのですが 先ほども言いましたとおり 引っ張り合うようにしますので 方向を逆転します つまりobject0に加速度を加えたら object1の速度には加速度を引くと いうことによって お互い同じ力で 引き合うという結果になるわけです ではティックイベントのリスナー関数 moveですけれども ここに処理を加えます 処理というのは 先ほど言いましたとおり 関数を呼び出します springという名前にします そしてball0, ball1というふうに渡して その結果 お互いに引き合うような 力を加えるということです ではこの関数を ここに加えましょう functionの springです そして引数はobjectにしましょう object0とobject1です x,y座標は 初めに変数に取ってしまいましょう object0のx座標ということで _0x object0 コピーして xです 同様にyですね コピーしてペーストで yに変えます _0y そしてobject0のy座標 今度は 1についても同様に コピーしてペーストですね 1に変えます _1x と _1y object1のx座標に object1のy座標ということです ではそこから距離を求めます distaneです x座標 y座標を別々に求めますので そうしたら 1から0を引きましょう _1xから_0xを引いて これでxの距離です 同様にyについても yに変えて distanceY そして_1yに_0yと 1から0を引いています そうしたら加速度ですね 加速度はaccelとしましょう accelX, accelYとします そしてdistanceを求めましたので distanceX それに比率をかけます ratioという変数名にしましょう これは後で書き加えます コピーして今度はyですね accelYにします accelYはdistanceYに 比率は一緒にします 縦横比率は一緒です そうしたらいよいよ objectの速度に加えます 速度はvelocityでしたね ですからobject0のvelocityX これがX方向の速度ですから そこに加速度を object0については加えるのでしたね accelXを加えます 同様に今度はYですね Yもコピーしまして Yに変えます velocityYに加速度を加える 今度はobject1の方です 加速度はx,y同じように 扱うのですけれども 方向が逆でしたね ちゃんとコピーされていませんね ペーストします 1個1個になっているんですね こうしまして もう一度書き加えなければいけませんか YとaccelYです それからobject1について 加速度の大きさは同じなんですが 方向を逆にして引っ張るようにする ということでしたね object1のvelocityYについては やはりaccelYを 互いに符合を反対にして 引き合うようにします これであとはratioですね 変数ですので上の方に 持って行っておきましょう varのratio これで小さくした方がいいので いろいろやってみた結果 1/2000ぐらい ということにしておきます では保存しまして 確認しましょう 「ブラウザーでプレビュー」です オブジェクトが くっついては離れと お互いにバネのように 引き合う動きになりました このレッスンでは オブジェクト同士の間に バネのように引き合う力を加えました その法則というのは 「フックの法則」と呼ばれて 力はその伸びに比例する 離れれば離れるほど 力が大きくなるということでした では具体的にどう処理するかというと オブジェクト同士の距離を求めます そしてその距離に比例した加速度を求めて その加速度を オブジェクトの引っ張り合う方向に 符合を変えて与えるということでしたね コードの方に引き当てますと 加速度を距離に比例させて 速度を変えていけばいいということですので springという関数名にしましたが 2つのオブジェクトについて その距離をまず求める その距離に比例計数をかけて加速度 その加速度を 最初のオブジェクトの速度に加えたら 今度は2つ目のオブジェクトの 加速度を速度から引くと 引っ張り合う力になる といういうことでした

CreateJS実践講座

CreateJSは、これまでFlashでしかできなかったようなインタラクティブなコンテンツや多彩なアニメーションを作ることができるJavaScriptライブラリです。このコースではチャプターごとにJavaScriptコードのサンプルをひとつずつとりあげながら、その制作方法を一歩一歩段階的に解説します。

3時間26分 (37 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年07月07日

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

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

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