- ① スクラッチで順次処理を学ぼう！ネコを左右に動かすアニメーションの作り方【初心者向け】
- ② スクラッチでネコが正方形に動くアニメーションの作り方｜座標と向きの使い方
- ③ スクラッチでネコが左右にスケートするアニメーションの作り方｜繰り返しの使い方
- ④ スクラッチでネコが走るアニメーションの作り方｜コスチューム切り替えの使い方
- ⑤ スクラッチでネコがランダムな速さで走るアニメーションの作り方｜乱数の使い方
- ⑥ スクラッチでロケットを矢印キーで動かす作り方｜条件分岐の使い方
- ⑦ スクラッチで重力ゲームの作り方｜もし〜なら・でなければブロック入門
- ⑧ スクラッチでスプライト同士がメッセージを送り合う作り方｜みんなであいさつ
- ⑨ スクラッチでキャラが順番に集合するアニメの作り方｜みんな集合
- ⑩ スクラッチで分裂するネコのアートの作り方【クローン入門】
- ⑪ スクラッチでネコの分身を飛ばす作り方【クローン入門】
- ⑫ スクラッチで音付きアニメーション！2台の車が走り抜ける作り方 （いまここ）
- ⑬ スクラッチでペン拡張機能のスタンプを使った星のランダムアートの作り方
さぁ、スクラッチでナニ作る！？
0.5秒と3秒という2段階の待ち時間が、2台の車の「追い越し感」を生んでいる。同じスタート位置から同時に走らせればただの並走になるところを、2.5秒の間隔を入れるだけで「先行車が過ぎて、後続が来た」という時間の流れが生まれる設計だ。シンプルな待つブロック1つが演出の核になっている。この仕組みがどう組み立てられているのか、作り方を見ていこう。 参考資料：スクラッチプログラミング事例大全集
動画で見てみよう
チュートリアルの元になった作品
はじめてのスクラッチ #015
今回の目標
- 2台のコンバーチブルが時間差で走り出すアニメーションを作る
- 走行音（Car Passing・Car Vroom）を追加して、音付きアニメーションに仕上げる
スターター作品をリミックスしよう
このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード
#11台目の車の準備
準備
スプライト「コンバーチブル」を開く
コンバーチブル| スプライトについて |
|---|
| フラグクリック時に左から右へ走り抜け、端に触れると消える1台目の車 |
| どんな役割か |
| 車が画面の左から右へ走り抜けるアニメーションを作るよ。端まで行ったら消えるから、ループで動き続けるぞ。 |
実装
まずコンバーチブルの初期設定から。 が押されたときでスタートしたら、車を隠してサイズを80%に縮小し、スタート位置（x:-160、y:-65）にセットする。先に隠してから位置やサイズを決めるのが初期設定の基本パターンで、もし隠さなかったら準備中の車が一瞬チラッと見えてしまうんだよね。
#2走って音を鳴らす
準備ができたら、車を走らせて音を鳴らそう。( ) 秒待つで0.5秒待ってから車を表示して、( ) の音を鳴らすで「Car Passing」の走行音をスタート。このブロックは音を鳴らし始めたらすぐ次に進むから、音を流しながら車を動かせるんだ。
車の動きはずっとループで10歩ずつ右に進む仕組み。画面の端に触れたら車を隠すから、走り抜けていく演出になるよ。
#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台の車がそれぞれ違う走行音を出すよ。
たったこれだけのコードで、音付きアニメーションが完成！待ち時間と音を変えるだけで臨場感が出せるっしょ。
まとめ
音を付けるだけで、アニメーションがグッと臨場感が増したね！待つブロックの秒数を変えてタイミングを調整するコツは、他の演出にも応用できるよ。次はペンでスタンプを押す練習をしてみるぞ〜。