じわっと近づくイージング術

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

このチュートリアルでは、マウスカーソルにじわっと近づくスプライトを作るよ。「(目標 − 現在) ÷ 10」という計算式だけで、距離が遠いときは速く・近いときはゆっくり動くイージングアウトが実現できちゃう。コード量は超シンプルだけど、このテクニックはゲームのキャラ移動やWebアニメーションなど、本物のプロも使う定番の手法なんだ。ぜひマスターしておこう！

動画で見てみよう

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

今回の目標

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

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

#1初期設定

準備

スプライト「フォロワー」を開く

フォロワー

スプライトについて
マウスカーソルの位置に滑らかに追従するスプライト。目標座標との差を10分の1ずつ縮めることでイージング移動を実現する。
どんな役割か
マウスを追いかけるスプライトを作るよ！マウスの位置を目標として記憶しておいて、そこに向かってじわじわ近づいていく動きを実装するんだ。これで滑らかな追従アニメーションが完成するよ。

実装

マウスを追いかけるスプライトを作っていくよ！まずはイベント が押されたときでプログラムを開始して、スプライトの準備をしよう。

見た目大きさを ( ) %にするでサイズを50%にするんだ。元の半分の大きさになるから、画面上で追従の動きが見やすくなるよ。

[talk]ゲームやアニメーションを作るとき、最初のステップで見た目を整えるのは定番パターン。サイズや位置を旗クリック直後にセットしておけば、何回実行しても毎回同じ状態から始められる。動きの確認やデバッグがぐっと楽になるんだ。[/talk]

#2イージング移動

準備

変数「目標X座標」を追加

マウスカーソルのX座標を格納する変数。毎フレーム更新され、スプライトの移動先X座標として使われる。

変数「目標Y座標」を追加

マウスカーソルのY座標を格納する変数。毎フレーム更新され、スプライトの移動先Y座標として使われる。

実装

ここからが本番。制御ずっとループの中で、マウスの位置めがけてスプライトがなめらかに追いかけていく動きを作るよ。

「目標X座標」と「目標Y座標」にマウスの座標を毎フレーム記録して、今のスプライト座標との差を10で割った分だけ動きx座標を ( ) ずつ変えると動きy座標を ( ) ずつ変えるで移動させるんだ。距離が遠いと大きく動いて、近づくほどブレーキがかかる——もし割り算なしで固定値で動かしたら、マウスの近くでカクカク振動して止まれなくなる。これがイージングアウト（減速補間）の威力だよ。

[talk]普通、マウスの位置に動かしたいときは「〜秒でXY座標へ滑る」ブロックを使うけど、それだと固定時間で到着するから距離に関係なく同じスピード感になっちゃう。この「(目標 − 現在) ÷ 10」方式なら、遠いときはすーっと速く、近いときはふわっとゆっくり。ゲームやWebサイトのアニメーションでも、このイージングの仕組みはめちゃくちゃ使われてるんだよ。[/talk]

まとめ

たった7ブロックで、本格的なイージングアウトが完成したね！「(目標 − 現在) ÷ 10」の計算は、この先ゲームやアニメーションを作るときに何度でも使えるテクニックだよ。変数に入れる値や割る数を変えて、自分だけの動きにカスタマイズしてみよう！