CreateJS実践講座

引き合うオブジェクト同士を直線で結ぶ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
引き合うオブジェクトの処理の中で、互いの間を直線で結びます。
講師:
10:59

字幕

このレッスンではランダムな位置に広がって お互いに引き合うように 動いているオブジェクト間に 糸を結んでみたいと思います バネのようにオブジェクトが近づいたり 遠ざかったりいう動きをしているのですが そのオブジェクトそれぞれ2つ同士の間を 黒い線で結んでいます この線を加えるという処理をご説明します オブジェクト同士の間に まだ線を加えていない点だけの動きを作った HTMLドキュメントを Dreamweaverで描きました 引き合う部分というのはこのspringという関数で 処理しているのですけど オブジェクトを2つずつ取り出して それぞれの距離を調べて 距離に従って もし距離がある程度の範囲内であれば 力を加えるわけですけど それぞれの距離に応じた加速度を求め その加速度をそれぞれのオブジェクトは velocity x velocity yというプロパティで 速度を持っていますので そこに加速度を加える あるいはマイナスすることで オブジェクト同士を近づけています 現在の状態をまず確認しましょう ファイルで「ブラウザーでプレビュー」します オブジェクトは個々の状態で動いています そしてお互いに引き合う力を計算して 引っ張り合うように あるいは引っ張って集まってくると その勢いもまた離れるようにという アニメーションを続けています この引き合うオブジェクト同士の間に 線を加えようということです 線を描く処理に入る前に 少し準備をしておきましょう まず線を描くには線を描くための オブジェクトが要ります これはshapeで用意するのですが ですからshapeを作りましょう この初期化の関数の中で shapeのオブジェクトを作ります 変数名はbackgroundにしましょう 名前のとおり後ろに置きます そしてshapeですので new.createjs.Shape()です これをステージに子供として加えます Stage.addChild そしてbackgroundですね 間違いないようにコピーしておきましょう コピーを持ってきます そして実際に線を描くのは shapeオブジェクトの中の graphicsと言うプロパティの中にある graphicsオブジェクトです ですからそれをあらかじめ変数として 設けておくことにします shapeでなくgraphicsさえあればいいので shapeは変数に入れません graphicsということで これは後々使いますので コピーしておきましょう そしてこのgraphicsに shapeオブジェクトの graphicsというプロパティを加えます このgraphics 今コピーした変数をペーストしましたけど backgroundのgraphics というプロパティです これでグラフィックスオブジェクトが 変数に取れましたので いつでもこのオブジェクトに対して どこからでも絵を書き加えることができます 具体的には線を引きます 後もう1つオブジェクトの色 黒ですけれども 当然線の色とそろえますので カラーを変数として 設けておくことにしましょう colorNameとします 今のところ黒です ですので blackというカラー名を入れておきます そしてこのカラー名blackは オブジェクトを作る時に使っているので ここですね craetBallという時にその大きさ半径と カラーを入れています ここを決めうちにせずに colorNameという 変数を持ってくることにします これで一応準備ができました shapeを作りbackgroundという変数です そのbackgroundという変数の いれたshapeオブジェクトのgraphicsプロパティ それがgraphicsオブジェクトを参照していますが それを変数に取りましたので これで絵を描く準備ができました あとカラーがいつでも変えられるように 変数に取った上で まずボールを描く時に そのカラーの変数を使うようにしています 結果は変わらないはずなのですが 問題が起こらないということを 確認しておきましょう ブラウザーでプレビューします 保存ですね 動きは特に変わりません 先ほどと同じようにエラーなく動いていれば 問題ないので では実際にこのオブジェクト間 たくさんあるオブジェクト同士の間に 線を加えてみたいと思います 線を引く関数は オブジェクト同士の間に働く力を計算して 加速度を加えていく springという関数の中に書きます そして実際に加速度が計算された ここですね 加速度が計算されたオブジェクト同士の間に 線を引くので ここで関数を呼び出します 関数名は新たに決めるんですが drawLineとしましょう この関数をこの後定めます 渡す引数としては線の太さ それからカラーですね カラーは先ほどcolorNameという名前で 変数に入れました あとどこからどこという座標なんですが この関数の中で オブジェクトのxy座標はそれぞれ _0x _0y _1x _1yと はいっていますので この4つを渡します これで座標がちゃんと求められますので オブジェクト同士の間に線が 引けるということになります _0x _0y _1x _1yと これで引数をすべてそろえました ではこれに従って関数を定めます drawLineですね 変数 引数に受け取るわけですけど 引数に名前を付けましょう 最初は線の太さなのでstorkeと 渡されるのは今1です そしてカラーです これはcolorNameの変数の値が blackが渡されます それから0x0yと分かりにくいので まずスタートの始まりのxで beginX ということは beginYですね 終わりの方はendX endYというふうにします さて線を描くオブジェクトは_graphicsと コピーしておきましたので ペーストします 覚えてますね ではここで線の太さをセットします setStrokeStyleと そしてStrokeと 念のためコピーを使いましょう コピーを持ってきます そしてここでいったんセミコロンで止めて また_graphicsと書いても結構なんですが createjsのこのgraphicsオブジェクトに対する メソッドはつなげることができます セミコロンで切らずにピリオドでつなぎます まずStrokeStyle setStrokeStyleで線の太さを決めた後 beginStorke 実際に書き始めます そしてその時にカラーを指定しますので ここでは引数のカラーですね まだ続けますのでセミコロンつけません ドットです そしてどこから書き始めるのか 座標を指定します movetoと これはbeginX beginYですね どこまで描くのか まだつなげます 直線を引きますので linetoにします そしてendX endY これでようやく終わりですので セミコロンで閉じます ということなので 4行にわたって書いてますが これは1文と見なされています graphicsオブジェクトのメソッドは 値を返すgraphicsオブジェクト自体返すので そこにまた繋げてドットで書くと ドットでメソッドを繋げて書くことができます では確認してみましょう 実はちょっとまずいのですが ブラウザーでプレビューします 保存が先ですね 保存をして ブラウザーでピレビューです なにか書きつぶれていますね とういのは線を描いていくと どんどん上書きするんですね 前に書いた線を消しません 消しなさいと言わない限り 消さないので 消しなさいという命令をメソッドの呼び出しを 加えないといけないと言うことです それをいれて仕上げにしましょう 線をいったんクリアするのは このspringの関数を呼び出している アニメーションのピックイベントの リスナー関数です ここで動かしてその後 ここの2つのオブジェクトに対して 処理を行うんですが この間ですね ここでいったんクリアします graphicsに対して まさにクリアというメソッドを呼び出します これだけです ではファイルを保存して 改めて確認です ブラウザーでプレビューします これでちゃんとオブジェクト同士 力が加わっているオブジェクト同士の間に 線が引っ張られました 力が加わらなくなるとその線が消えるので たまに独立して 飛んでいってしまう物がありますね でもまたそれも近づいてきたら 他のオブジェクトと結ばれますので 心配はしないでください このレッスンでは 互いに引き合うオブジェクト同士を 線で結びました それは引き合う力を計算する springという関数の中で お互いに力がかかる加速度を計算したところで drawLineという関数を新たに設け 線の太さ 色 始まり座標 終わり座標という 引数を渡して それに従って予めbackgroundとして 用意しておいたshapeオブジェクトのgraphicsに 線を描いたということです ただし忘れていけないのはクリアしたい時は 必ずgraphicsオブジェクトに対して クリアというメソッドを呼びだしてください

CreateJS実践講座

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

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

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

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

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