鼓動に踊るエンブレムと波紋

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

speed = speed × 0.9 + forceという減衰バネ式をサイズ変更に転用した設計が効いている。通常のイージングはなめらかに収束するだけだが、この式はターゲットを超えると速度を反転させてオーバーシュートと跳ね返りを生む。重力ジャンプと同じ計算構造をアニメーションに応用した汎用パターンで、ボタンやUI要素をバネのように動かせる。このバウンスがどんなコードで成立しているか、作り方を見ていこう。

動画で見てみよう

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

今回の目標

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

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

#1変数の準備

準備

スプライト「stage」を開く

変数「■ビートカウント」を追加

ビートの回数をカウントするグローバル変数。beatをブロードキャストするたびに1増える。

変数「■基本サイズ」を追加

エンブレムの基本サイズ（100）。バウンスアニメーションの基準点として使用する。

変数「■バウンス速度」を追加

エンブレムのバウンスアニメーションの現在速度。減衰しながら動く物理シミュレーション用。

実装

イベント が押されたときのあとに「■ビートカウント」を0、「■基本サイズ」を100、「■バウンス速度」を0にセットするよ。「■基本サイズ」の100がエンブレムの基準サイズで、バウンスはこの値を中心に大きくなったり小さくなったりする。

#2ビートの送信

準備

変数「■バウンス力」を追加

ビートを受け取ったときにエンブレムに加える力。beatごとに30加算される。

メッセージ「ビート」を追加

実装

「■バウンス力」を0に初期化したら、4回繰り返すビートシーケンスを組むよ。制御( ) 回繰り返すの中で「■ビートカウント」を1増やし、イベント( ) を送るで「ビート」を送信して、1秒待つ。

この1秒間隔のブロードキャストが心臓の鼓動みたいなリズムを作って、全スプライトのアニメーションを同期させるトリガーになるんだ。

#3バウンスの物理エンジン

準備

スプライト「メインエンブレム」を開く

メインエンブレム

スプライトについて
ビートに合わせてバウンスするメインエンブレムスプライト。心臓の鼓動サウンドを再生し、beatメッセージを受け取るたびに跳ねるアニメーションを行う。
どんな役割か
ビートに合わせてドクドク跳ねるエンブレムを作るよ！心臓の鼓動みたいにボヨンとはずむアニメーションだ。

実装

イベント が押されたときで中央に配置してサイズ100にしたら、心臓の鼓動サウンドを鳴らして制御ずっとに入る。ループの中で「■バウンス速度」を「■バウンス速度 × 0.9 + ■バウンス力」に更新していくよ。

この式がバウンスの核心。普通、サイズを滑らかに変えるならイージングアウト（目標値にだんだん近づく動き）を使うけど、それだと弾まない。減衰バネ物理だと目標を超えてから跳ね返る「オーバーシュート」が生まれてボヨンとダイナミックな動きになるけど、この仕組みがなかったらサイズがスーッと基本サイズに近づくだけで弾む感じは絶対に出ないんだ。

[talk]この「速度 × 減衰率 + 力」っていう計算パターン、実はScratchの重力ジャンプと全く同じ構造なんだよね。ジャンプでは「speed_y = speed_y + 重力」で落下速度を計算するじゃん？今回はそれにさらに0.9の減衰を加えて、サイズ変更に転用してるだけ。グリフパッチはGeometry Dashのタイトル画面でボタンのホバーアニメーションに使ってたよ。座標でも回転でもサイズでも、何にでも応用できる超汎用パターン。[/talk]

#4ビートで力を注入

イベント( ) を受け取ったときで「ビート」を受信したら、変数( ) を ( ) ずつ変えるで「■バウンス力」に30を加算するよ。この30がビート1回分のインパクトの強さで、前のステップの物理エンジンに流れ込んでエンブレムがボヨンと膨らむんだ。

#5反発と方向判定

まず見た目大きさを ( ) ずつ変えるで「■バウンス速度」ぶんサイズを変えて、「■バウンス力」を0にリセット。力は1回使い切りで、次のビートまでは減衰だけで動くんだ。

跳ね返りの条件は制御もし ( ) ならで判定。「サイズ > ■基本サイズ」と「■バウンス速度 > 0」を演算( ) = ( )で比較するんだけど、普通なら「大きくなりすぎ」「小さくなりすぎ」で2つの条件が要るところを等価比較1つで統一していて、もしこの工夫がなかったら同じ反転処理を2か所に書かないといけなくなるんだ。成立したら「■バウンス速度」に-0.8を掛けて反転＋減衰させることで、バネの跳ね返りを再現するよ。

#6微小振動の除去

制御もし ( ) ならと演算( ) の ( )のabsを使って、「■バウンス速度」の絶対値が4未満かをチェック。この条件で「もうほぼ止まった」という微小振動を検知して、次のステップできれいに停止させるよ。

#7バウンスの停止

微小振動を検知したら、アニメーションをピタッと止めよう。「■バウンス速度」を0にして、見た目大きさを ( ) %にするで「■基本サイズ」ぴったりに戻す。

速度をゼロにするだけだとサイズが99や101で止まることがあるんだよね。「■基本サイズ」に戻すことで、次のビートが来たとき正確な位置からバウンスが再開できるようにしてるんだ。

#8波紋クローンの生成

準備

スプライト「リップル」を開く

リップル

スプライトについて
beatメッセージを受け取るたびにクローンを生成し、広がりながらフェードアウトする波紋エフェクトスプライト。
どんな役割か
ビートに合わせて広がる波紋エフェクトを作るよ！クローンが大きくなりながらじわっと消えていくやつ。

実装

イベント( ) を受け取ったときで「ビート」を受信したら、制御( ) のクローンを作るで自分自身のクローンを生成。ビートごとに新しい波紋が1つ生まれる仕組みだね。

#9波紋の初期設定

生まれたクローンの初期状態を整えよう。制御クローンされたときでクローンが始動したら、中央に移動してサイズ80にセットするよ。

「幽霊」の効果を0に戻すのがポイントなんだ。クローンは親スプライトの画像効果を引き継ぐから、前のクローンが消える途中で新しいクローンが生まれると最初から半透明になりかねない。ここで確実にリセットしよう。

#10広がって消える波紋

見た目表示するで表示したら、制御( ) 回繰り返すで10回ループするよ。ループの中でサイズを8ずつ大きくしながら「幽霊」の効果を5ずつ上げていくんだよ。

サイズは80から160まで広がって、「幽霊」は0から50になってじわっと薄くなっていくんだよね。アニメーションが終わったら制御このクローンを削除するでクローンを削除して後片付けしよう。

[talk]クローンを「生成→アニメーション→削除」する今回のパターン、ゲーム業界では「パーティクルシステム」って呼ばれてる。爆発の火花、魔法のキラキラ、煙のモクモク…全部この仕組みの応用なんだよね。サイズと幽霊の変化量を調整するだけで全く違うエフェクトに化けるから、いろいろ実験してみてほしい。[/talk]

まとめ

バウンスの核心は「速度 × 0.9 + 力」という1行の式だったんだ。この計算パターン、サイズだけじゃなくてx座標やy座標、向きにも使えるから応用範囲が広いよ。波紋のクローンパターンはパーティクルシステムの基本形なので、いろんなエフェクトに発展させてみてね！