さぁ、スクラッチでナニ作る！？
動画で見てみよう
チュートリアルの元になった作品
小技：FPSのレティクルの動き
今回の目標
スターター作品をリミックスしよう
このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード
#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が減衰率。もし減衰をかけなかったら、レティクルは永遠に揺れ続けて止まらなくなってしまう。この値だとレティクルがマウスを少し行き過ぎてから戻ってくる「オーバーシュート」が起きて、ゲームの照準っぽいリアルな手触りが生まれるってわけ。
#3Y方向にも同じ仕組みを
「★Y速度」に(マウスのY座標 − 今のY座標) × 0.2を足して、0.65倍で減衰させて、y座標を ( ) ずつ変えるで動かす。X方向と完全に同じパターンだよね。こうやってX軸とY軸を独立に計算するから斜め方向にもちゃんとバネっぽく動くんだけど、もしXとYを分けなかったら、斜めに動かしたときに減衰がおかしくなってガタガタした軌道になってしまうんだ。
これで完成。マウスをすばやく動かすとレティクルが遅れてついてきて、止めるとふわっとオーバーシュートしてから落ち着く。たった12ブロックでゲームの照準みたいなぬるぬるした動きが実現できるの、バネ物理の力だね。
まとめ
たった12ブロックと変数2つで、本物のゲームみたいなぬるぬる照準が完成したね。「速度 += 差分 × バネ強度」「速度 ×= 減衰率」「座標 += 速度」の3行パターン、覚えておくとカメラ追従とかスクロールのブレーキとか、いろんな場面で使えるから。これがバネ物理の一番シンプルな形。