#015 音付きアニメーションの作り方｜2台のコンバーチブルが時間差で走り抜ける

さぁ、スクラッチでナニ作る！？

0.5秒と3秒という2段階の待ち時間が、2台の車の「追い越し感」を生んでいる。同じスタート位置から同時に走らせればただの並走になるところを、2.5秒の間隔を入れるだけで「先行車が過ぎて、後続が来た」という時間の流れが生まれる設計だ。シンプルな待つブロック1つが演出の核になっている。この仕組みがどう組み立てられているのか、作り方を見ていこう。 参考資料：スクラッチプログラミング事例大全集

動画で見てみよう

チュートリアルの元になった作品

今回の目標

スターター作品をリミックスしよう

このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード

#11台目の車の準備

準備

スプライト「コンバーチブル」を開く

コンバーチブル

スプライトについて
フラグクリック時に左から右へ走り抜け、端に触れると消える1台目の車
どんな役割か
車が画面の左から右へ走り抜けるアニメーションを作るよ。端まで行ったら消えるから、ループで動き続けるぞ。

実装

まずコンバーチブルの初期設定から。イベント が押されたときでスタートしたら、車を隠してサイズを80%に縮小し、スタート位置（x:-160、y:-65）にセットする。先に隠してから位置やサイズを決めるのが初期設定の基本パターンで、もし隠さなかったら準備中の車が一瞬チラッと見えてしまうんだよね。

#2走って音を鳴らす

準備ができたら、車を走らせて音を鳴らそう。制御( ) 秒待つで0.5秒待ってから車を表示して、音( ) の音を鳴らすで「Car Passing」の走行音をスタート。このブロックは音を鳴らし始めたらすぐ次に進むから、音を流しながら車を動かせるんだ。

車の動きは制御ずっとループで10歩ずつ右に進む仕組み。画面の端に触れたら車を隠すから、走り抜けていく演出になるよ。

[talk]現実で救急車が通り過ぎるとき、音が高くなったり低くなったりするのを聞いたことない？あれは「ドップラー効果」っていう物理現象。音を出す物体が近づくと音波が圧縮されて高く聞こえて、遠ざかると引き伸ばされて低く聞こえるんだ。ゲームの世界でもこれを再現すると一気にリアルになるよ。[/talk]

#32台目の車の準備

準備

スプライト「コンバーチブル2」を開く

コンバーチブル2

スプライトについて
フラグクリック時に3秒遅れて左から右へ走り抜け、端に触れると消える2台目の車
どんな役割か
2台目の車が少し遅れて走り出すアニメーションを作るよ。1台目とタイミングをずらして、車が次々と走る感じが出るぞ。

実装

初期設定は1台目とほぼ同じ。旗クリックで隠して、サイズ80%にして、スタート位置を（x:-180、y:-80）にセットする。1台目より少し左下に配置することで、道路の奥を走っている感じが出るんだ。

#4時間差で走らせる

2台目のポイントは制御( ) 秒待つの待ち時間。1台目が0.5秒だったのに対して、こっちは3秒待ってから走り出すよ。この時間差が「車が次々と走り抜ける」演出のカギなんだ。

走る仕組み自体は1台目と同じで、制御ずっとで10歩ずつ動いて端に触れたら消える。ただし音は「Car Vroom」に変えてあるから、2台の車がそれぞれ違う走行音を出すよ。

[talk]アニメーションの世界では「タイミング」が超重要な原則のひとつ。ディズニーが提唱した「アニメーション12原則」にも入ってるぐらいで、同じ動きでも間の取り方を変えるだけで印象がガラッと変わるんだよね。今回の車みたいに時間差をつけると「次々と通過する」感じが出るけど、同時発車だと「レース開始」みたいになっちゃう。たった数秒の差で演出が変わるの、おもしろくない？[/talk]

たったこれだけのコードで、音付きアニメーションが完成！待ち時間と音を変えるだけで臨場感が出せるっしょ。

まとめ

音を付けるだけで、アニメーションがグッと臨場感が増したね！待つブロックの秒数を変えてタイミングを調整するコツは、他の演出にも応用できるよ。次はペンでスタンプを押す練習をしてみるぞ〜。