AnimateでHTML5 Canvasコンテンツをつくる

ラケットに当たったボールを跳ね返す

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
インスタンス同士の重なりを調べて、アニメーションの方向を変えてみます。
講師:
06:12

字幕

この レッスンではインスタンス同士の 重なりを調べて アニメーションの方向を変えてみます。 今 水平にアニメーションするボールの コンテンツが HTML ドキュメントとして 開いているんですけども 動きの方を先に確認しておきましょう。 「ファイル」> 「ブラウザーでプレビュー」します。 水平にボールが動いて 板を通過してしまうんですね。 ですから、この板と重なったら 跳ね返るという処理を加えたいと思います。 まずは板のインスタンスの参照を 変数にとります。 ボールは ball_mc で Animate の中で板は board です。 _mc という名前が付いているので 同じ名前を変数として設定しておきます。 そして、ボールのインスタンスの参照は exportRoot から取りました。 同じ処理になります。 コピーをしてペーストです。 インスタンス名と変数名が board_mc になりましたので これをコピーして 変数の方と インスタンスの方を上書きします。 これで参照がとれました。 では、跳ね返りはどこで 判定するかと言うと Ticker の addEventListener で tick イベント ここで設定されているリスナー関数が アニメーションの関数ですので この moveBall というリスナー関数の中で 重なりを判定します。 まずは重なっていない場合 どこに行く予定かという 予定を変数に入れておきます。 nextX 、X 方向に動いているので そういう名前にします。 次にどこに行く予定かというと 何も重なりがなければ 何ともぶつからなければ 今の位置に speedX を足した位置 これ = をとりますね。 この位置に移行する予定です、 ということですね。 問題が無ければ その通り移行していいんですが もし重なったらという処理を ここに加えることになります。 勿論 if 文ですね。 条件は後で考えます。 「ボールと板が重なった」と。 跳ね返りはどうしたらいいかと言うと この speedX なんですが 正の 10、プラスの 10 が設定されています。 ですから右に動くんですね。 同じスピードで左に動かすには マイナス10にすればいい 又反転するには又マイナスをかける ということなので この speedX に対して マイナス1を 跳ね返すたびに掛け算すればいいですね。 コピーを持ってきます。 そしてこの値に 掛けることの = と *= で現在の値に掛け算をすると いう処理になります。 マイナス1を掛け算すれば この処理をするたびに 方向が左右逆転するということになります。 ではボールと板が重なったというのは どう判定するかと言うと 移動予定の場所がありますね。 これを使います。 ですから、nextX と。 これが板の左端 left そんな便利なプロパティがあるのかと。 ありません。 これから変数に設定するんですが 先に書いてしまいます。 左端よりも大きかったら つまり右に行ったら 尚且つ、 &キーを2つですね。 これで AND 条件、両方の条件を 満たした場合ということになります。 板を通過しちゃったら 又跳ね返るのはおかしいですから nextX が今度は板の右側よりも 手前だったらということで こちらも変数として設定します。 ということなので、ここでは left と right それから板の厚みもちょっと必要なので 板の厚みを halfwidth と 設定しておきます。 そしてこれは Animate の方で インスタンスの幅を調べておくのですが 10 でした。 なので、半分が欲しいので 5 としておきます。 これで必要な条件は設定できました。 あとは left と right の値を 設定すれば良いでしょう。 この board_mc の参照はとれた後ですね。 まず left です。 board_mc の X 座標に halfwidth 引くことの halfwidth と。 これで左側になります。 同様に、right です。 board_mc の X に対して 今度は足せば良いですね。 halfwidth と。 それでは保存して確認してみましょう。 ファイルを保存して 「ブラウザーでプレビュー」です。 跳ね返りました。 跳ね返ったきり、向こうからは もう返ってきませんので ここまでの段階は成功です。 このレッスンではボールと板の インスタンスの重なりを調べて 重なったらボールが跳ね返ると いう処理を設定しました。 その場合、まず板の参照を exportRoot からとっておいて それから幾つか必要な変数がありましたね。 それを調べた上で 行く予定の位置 X 座標ですね、 それが板の左よりも先に行った 右よりも手前だということで 跳ね返すという場合には speedX で設定してある 移動距離に対してマイナス1を 掛け算すればいいということでした。

AnimateでHTML5 Canvasコンテンツをつくる

Animate CCではPCやモバイル、Webブラウザなどさまざまなデバイスとプラットフォームに向けたコンテンツが作れます。またHTML5に対応したダイナミックでインタラクティブな表現が可能です。このコースはAnimateで作った素材をJavaScriptでどのようにスクリプティングするのかを基礎から解説します。

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

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

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

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