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

ゲームオーバーのフレームを表示する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ゲームオーバーになったとき、そのテキストが示されたフレームに移動します。
講師:
06:34

字幕

このレッスンでは ゲームオーバーになった時 その表示をして、ゲームの仕上げを したいと思います。 今ゲームとしてはほぼ出来上がりです。 確認してみましょう。 「ファイル」> 「ブラウザでプレビュー」です。 いきなり終わってしまいました。 もう一回リロードして ランダムな方向に出てくるので 後ろに抜けたらゲームオーバーで、 これ以降ボールは出てこないのですが 終わったのかどうかちゃんと 表示した方が分かりやすいでしょう。 ゲームオーバーの表示は Animate の方で 既に作ってあります。 そして書き足されてもいますが こちらの2フレーム目は ゲームオーバーということになっています。 けれどもこの第1フレームの スクリプトのレイヤーですが アクションパネルを見ると 「this.stop」となっているので 何もしなければいつまで経っても 第2フレームは表示されない ということです。ですから ゲームが終わった時に 第2フレームに移る、 「go to and stop」ですね。 それからフレーム番号は「go to and stop」 「go to and play」 スクリプトで指定する時には 0から始まること 改めて思い出してください。 0、1ですね。1フレームに行け、 という事になります。 ボールがステージの右端を超えたら ゲーム終了ですから 右端の座標が欲しいです。 それはステージの 幅ということになります。 ステージの高さは既に変数を設定して 値も入れてあるので 同じようにバーとして 「stagewidth」ですね。これも 変数宣言をしておきます。 どこでこの設定をするかと言うと 「startanimation」 アニメーションの設定をする、 最初に高さを取ってますから同じように stagewidth ですね。 コピーを持ってきましょう。 そして「 = canvas.width 」 ということになります。 セミコロンで止めます。 そしてゲーム終了はこのアニメーションの リスナー関数ですね。 こちらでボールを 動かしているわけですけども 動かした結果右端を超えた、 ということになりますので ここに if 文ですね。 if の後、丸括弧・中括弧を 先に閉じてしまいます。 どういう条件になるかというと ball の位置ですね ball_mc の x 座標が stagewidth を超えたら、 心配なのでコピーを取ってきます。 stagewidth を取ってきてコピーします。 超えたら終了ですね。 フレーム番号1に行けと 誰に言ったらいいかというと、 メインタイムラインです。 メインタイムラインは 「exportRoot」 ということで 参照することができます。 それはここですね。 コピーを持ってきましょう。 exportRoot に対して 「gotoAndStop」 1と書いてもいいのですが、折角なので プロパティを使いましょう。 exportRoot の現在 表示しているフレームは 「currentFrame」 という プロパティで取れますので、 次のフレームに行けという場合には 1を足せばいいですね。 これで一旦確認してみましょう。 ファイルを保存して、 ブラウザでプレビューです。 ちょっと変なことになっていますね。 これは若干 createJS 内部的な 問題もあると思うのですが、 ゲームが終わったといっても スクリプトのインタラクティブな処理とか アニメーションの処理が 動いているんですね。 そのためにこういう問題が起こるようです。 ですからそれを完全に 終了させる必要があります。 アニメーションの初期設定は 「startanimation」 という 関数で行っています。 そしてこの辺りは値の変数に対する、 設定ということなので、これが動き続ける ということはないのですが アニメーションとインタラクションは ここですね。 これを止めないといけない、 「addEventListener」で始まった、 この動きを止める。その場合には addEventListener になっているものを 取り除くということで、 「removeEventListener」という メソッドがあります。それを この終了の時に実行しないといけない ということで、 コピーしてしまいましょう。 コピーして ここにペーストします。 ちょっとインデントが 狂ってしまいましたね。 整えますけども、今申し上げた EventListener を取り除く という命令は add にたいして remove になります。 remove 、こちらも同様に add を 選んで remove と。 改めて保存して確認します。 ブラウザでプレビューです。 今度は綺麗にできましたね。 もう一回確認しましょう。 失敗してしまいました。 で、ゲームオーバーということで、 ゲームオーバーの処理は きちんと動いています。 このレッスンではゲームが終了した時に ゲームオーバーの表示を出すようにしました。 ゲームオーバーのための判定は ボールがステージの右端を超えたとき ということで、ステージの幅を canvas から取っています。 そして比べて、調べた時に、 Animate の方で 第2フレームに表示を 用意してあったので メインタイムラインである exportRoot に対して gotoAndStop 、そして 現在表示されている メインタイムラインのフレームの 次に行けということで 表示しました。それから設定した アニメーション、インタラクション、 これが動いていると 不都合がありますので その処理を終わらせる、ということで removeEventListener という メソッドについてもご紹介しました。

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

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

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

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

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

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