CreateJS実践講座

オブジェクトをランダムな速さで動かす

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
オブジェクトにランダムな水平・垂直方向の速度を定めて、アニメーションさせます。
講師:
07:52

字幕

(講師)このレッスンでは 最も基本的なアニメーションとしてー 点をランダムな方向に動かしてみます これはロードする度に 位置がランダムに変わりますしー それから スピード 方向も ランダムに変わります このランダムな方向にアニメーションする というムービーを作ってみましょう Dreamweaver で開いたのは まだ点にアニメーションを加えていないー Html ドキュメントです けれども 点を作って それをランダムな位置に置くー 所まではやっています ランダムな位置というのは Math.random で XY の座標をー ランダムに定めています ステージの幅と高さを最大限にしてますので ステージの端から端までー ランダムに決まります それを createBallという関数を定めー そこに半径 大きさですね それからカラー ランダムに定めたXYを渡しています それを受け取ってシェイプを作り shape オブジェクトを作ってー XY の座標に定めています そして drawBall というこの関数はー 作ったシェイプの graphics オブジェクトを渡してー 半径とカラーを決めてー その半径とカラーでー シェイプに丸を描きます では これを確認してみましょう ファイル>ブラウザでプレビュー します 端っこに点がありますね これはロードし直す度に 位置がランダムに決まります でも まだ動いていませんね これにアニメーションを加えたいと思います とりあえず 単純に水平に動かす という所からスタートしましょう アニメーションは Ticker クラスで定めます create.js の Ticker です そして addEventListener i が小文字ですね そして event は Tick です Listener 関数として move という関数を定めましょう それを createBall の関数の 下に持って行きます function の move event オブジェクトを受け取ります そして インスタンスは ball と いう変数に定められていますのでー この ball に対して まずは X 座標だけです 2ピクセル動いて 忘れていけないのがー stage に対する update のメソッドですね これで確認してみましょう 一回 ファイルを保存して そしてー ブラウザでプレビューします 単純に水平に動きますね しかもー 2ピクセルと決め打ちなので スピードが変わりません では これをランダムに してみることにしましょう ランダムな水平スピードは XY 座標と同じくー この initialize 初期化の関数の中で 設定することにしましょう 変数名は velocity です X と Y 分けますので X もつけます そして やはり Mass.Random を 使う訳ですけれどもー その範囲があります プラスマイナス両方持たせたいので -0.5 とします そうすると 元々のランダムのメソッドはー 0 から 1 までです その範囲のランダムな数字ですけれども -0.5 しますと ±0.5 の間の数字が ランダムに返ることになります それに対して 少し幅を持たせますので 5 としておきましょう つまり ±2.5 の範囲の値が定まります これをどう設定するかというとー この後に関数の引数として 渡すことにしましょう velocityX をコピーして 持って行きます では 関数の方もこれを受け取らないと いけませんのでー 関数に受け取らせます そうしたら XY の座標を設定した後にー ball の velocityX 同じプロパティ名にしましょう これを このプロパティにこの値 引数の値を設定します そして 実際に動かすのは この move という所ですね この関数の中ですから 2 と決め打ちだった所にー ball に設定してある velocity という プロパティの値をー コピーして持ってきます これで良いでしょう 保存して 確認します ブラウザでプレビューしましょう 水平な感じがしますけれども ロードし直しますがー スピードが少しずつ変わりますね 水平にしか動かないというのは まだ垂直方向の速度を設定していないからでー でも スピードはランダムですね ±2.5 ですので 方向も変わっています では これで良さそうなので Y の方も 同じように設定することにしましょう 垂直方向の動きは 基本的に水平と一緒ですのでー どんどんコピーを使ってしまいます まずは速さですね velocity コピーしてー ペーストしてー X を Y に変更します これでまず変数に取りました 次は 関数に渡すのが velocityX でしたけれどもー Y が加わります Y を加えてー 大文字 Y に変更ですね そして 関数にこの引数を加えなければ いけませんから コピーして持って行きます またここもコピーですね コピーしてしまってー ball のプロパティをー velocityY とします 引数はやはり velocityY ですね そして 最後にこの動かす所 Ticker イベントー Ticker クラスの Tick イベントの Listener ですね ここで X 方向にしか 今動かしていませんがー Y を加えます Y 座標を velocityY のプロパティ値に 変更ということでー これで良いでしょう ファイルを保存して ブラウザでプレビューします 今度は垂直方向の動きが加わりましたね 完全に垂直っぽいですが もちろんー 水平方向にもランダムに変わりますのでー ロードし直す度に 様々な方向に ランダムに移動します このレッスンでは ステージに置いた黒い点に対してー ランダムな垂直水平方向の速さを設定して アニメーションさせました ランダムな速さというのは Mass.Random のメソッドを使って決めてー アニメーションは Ticker クラスの Tick イベントにー addEventListener をします そして createBall というこの関数にー ランダムに定めたスピードを渡してー それをインスタンスの velocityX velocityY というー プロパティに設定しておいたのでー Ticker の EventListener に登録した move の中でー それらのランダムな水平垂直の 速度を取り出してー インスタンスの XY 座標に加えー ランダムな方向に動かすことができました

CreateJS実践講座

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

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

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

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

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