かっこいいレティクルの動きの作り方

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

動画で見てみよう

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

今回の目標

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

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

#1レティクルの初期設定

準備

スプライト「レティクル」を開く

レティクル

スプライトについて
マウスを追いかけるターゲット照準スプライト。速度変数を使って慣性のある滑らかな動きを実現する
どんな役割か
マウスの動きを追いかけるレティクル（照準マーク）を作るよ。いきなり飛び付くんじゃなくて、バネみたいにじわじわ近づいていく動きがポイントだね。X速度とY速度の2つの変数を使って、ふわっとした慣性のある動きを実現するよ。

変数「★X速度」を追加

X方向の移動速度。マウスX座標とスプライトのX座標の差から加速量を計算し、0.65倍で減衰させて慣性のある動きを作る

変数「★Y速度」を追加

Y方向の移動速度。マウスY座標とスプライトのY座標の差から加速量を計算し、0.65倍で減衰させて慣性のある動きを作る

実装

イベント が押されたときでスタートしたら、サイズを80%にして中央(0, 0)に配置。「★X速度」「★Y速度」を両方0にリセットするよ。この2つの変数がバネ物理の核になるから、最初はまっさらな状態にしておくんだ。

#2X方向のバネ追従

ここからが本番。制御ずっとループの中で、レティクルがマウスをバネみたいに追いかける仕組みを作るよ。普通ならマウスの座標にワープさせるところだけど、それだと瞬間移動でカクカクした動きになっちゃうんだよね。

やることはたった3行。「★X速度」に(マウスのX座標 − 今のX座標) × 0.2を足して、「★X速度」を0.65倍にして、動きx座標を ( ) ずつ変えるで「★X速度」ぶんだけ動かす。この「引っ張る → ブレーキ → 動く」の3ステップが、変数だけで物理シミュレーションを実現する定番パターンで、もし速度を変数で蓄積しなかったら、前フレームの勢いが残らないからオーバーシュートみたいな慣性の動きは絶対に作れないんだよ。

0.2がバネの強さ、0.65が減衰率。もし減衰をかけなかったら、レティクルは永遠に揺れ続けて止まらなくなってしまう。この値だとレティクルがマウスを少し行き過ぎてから戻ってくる「オーバーシュート」が起きて、ゲームの照準っぽいリアルな手触りが生まれるってわけ。

[talk]この「速度 += (目標 − 現在) × バネ強度 → 速度 ×= 減衰率 → 座標 += 速度」の3行パターン、実はゲーム業界ではめちゃくちゃ使われてるんだ。RPGのカメラがプレイヤーを追いかける動きとか、スマホアプリのスクロールがスーッと減速して止まる動きとか、全部同じ仕組み。たった3行でこんな自然な動きが作れるの、控えめに言ってすごい。[/talk]

#3Y方向にも同じ仕組みを

「★Y速度」に(マウスのY座標 − 今のY座標) × 0.2を足して、0.65倍で減衰させて、動きy座標を ( ) ずつ変えるで動かす。X方向と完全に同じパターンだよね。こうやってX軸とY軸を独立に計算するから斜め方向にもちゃんとバネっぽく動くんだけど、もしXとYを分けなかったら、斜めに動かしたときに減衰がおかしくなってガタガタした軌道になってしまうんだ。

これで完成。マウスをすばやく動かすとレティクルが遅れてついてきて、止めるとふわっとオーバーシュートしてから落ち着く。たった12ブロックでゲームの照準みたいなぬるぬるした動きが実現できるの、バネ物理の力だね。

[talk]X軸とY軸をバラバラに計算してるのに斜めでも自然に動くの、不思議に感じるかもしれない。実はこれ「軸分離」っていう考え方で、物理シミュレーションの基本テクニックなんだ。2D格闘ゲームの放物線ジャンプも、横方向と縦方向を独立に計算してるだけ。3Dゲームなら同じパターンにZ軸を足すだけで立体的な動きが作れるよ。[/talk]

まとめ

たった12ブロックと変数2つで、本物のゲームみたいなぬるぬる照準が完成したね。「速度 += 差分 × バネ強度」「速度 ×= 減衰率」「座標 += 速度」の3行パターン、覚えておくとカメラ追従とかスクロールのブレーキとか、いろんな場面で使えるから。これがバネ物理の一番シンプルな形。