さぁ、スクラッチでナニ作る！？
マウスカーソルに向かってスプライトが滑らかに追従する、イージングアウト（減速補間）の基本デモ作品
動画で見てみよう
ok-scratch
チュートリアルの元になった作品
スクラッチ小技：イージングアウト
今回の目標
スターター作品をリミックスしよう
このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード
#1初期設定
準備
スプライト「フォロワー」を開く
フォロワー| スプライトについて |
|---|
| マウスカーソルの位置に滑らかに追従するスプライト。目標座標との差を10分の1ずつ縮めることでイージング移動を実現する。 |
| どんな役割か |
| マウスを追いかけるスプライトを作るよ！マウスの位置を目標として記憶しておいて、そこに向かってじわじわ近づいていく動きを実装するんだ。これで滑らかな追従アニメーションが完成するよ。 |
実装
マウスを追いかけるスプライトを作っていくよ。まずはが押されたときでプログラムを開始して、スプライトの準備をしよう。
大きさを ( ) %にするでサイズを50%にするんだ。元の半分の大きさになるから、画面上で追従の動きが見やすくなるよ。
ok-scratch
確認プレビューしておこう
#2イージング移動
準備
変数「目標X座標」を追加
マウスカーソルのX座標を格納する変数。毎フレーム更新され、スプライトの移動先X座標として使われる。
変数「目標Y座標」を追加
マウスカーソルのY座標を格納する変数。毎フレーム更新され、スプライトの移動先Y座標として使われる。
実装
ここからが本番。ずっとループの中で、マウスの位置めがけてスプライトがなめらかに追いかけていく動きを作るよ。
「目標X座標」と「目標Y座標」にマウスの座標を毎フレーム記録して、今のスプライト座標との差を10で割った分だけx座標を ( ) ずつ変えるとy座標を ( ) ずつ変えるで移動させるんだ。距離が遠いと大きく動いて、近づくほどブレーキがかかる——もし割り算なしで固定値で動かしたら、マウスの近くでカクカク振動して止まれなくなる。これがイージングアウト（減速補間）の威力だよ。
ok-scratch
確認プレビューしておこう
まとめ
たった7ブロックで、本格的なイージングアウトが完成したね！「(目標 − 現在) ÷ 10」の計算は、この先ゲームやアニメーションを作るときに何度でも使えるテクニックだよ。変数に入れる値や割る数を変えて、自分だけの動きにカスタマイズしてみよう！