カットインの座標の算出方法

ゲームには、よく使う演出として、
オブジェクトが「ぎゅいーん」とカットインしてきて、
少しずつ減速しながら、ある位置にピタっと止まる演出がよくあります。
　
今回はそういった動きを実装する方法を解説します。
　

加速度を算出する方法

方法の１つとして、目的の座標で止まるように、
「初速度（）」と「加速度()」を算出する方法があります。
（というか普通はこっちを使います）
　
手順は以下のようになります。

1. 移動距離（）を求める
2. 加速度を求める
3. 初速度を求める

　
例えば、「10フレーム」かけて、「0pxから200px」へカットイン移動する場合は、
以下のように求めます。
　

1. 
2. 
3. 

2でとしているのは、
を求めるの式です。
nが11になっているのは、11フレーム目でちょうど速度が0になるからです。
　
これにより、

フレーム数	距離	速度	加速度
0	0	0	0
1	36.36363636	36.36363636	-3.636363636
2	69.09090909	32.72727273	-3.636363636
3	98.18181818	29.09090909	-3.636363636
4	123.6363636	25.45454545	-3.636363636
5	145.4545455	21.81818182	-3.636363636
6	163.6363636	18.18181818	-3.636363636
7	178.1818182	14.54545455	-3.636363636
8	189.0909091	10.90909091	-3.636363636
9	196.3636364	7.272727273	-3.636363636
10	200	3.636363636	-3.636363636

というように、いい感じに動きました（´▽｀）

log10()を使う方法

加速度を算出する方法は、

• 距離・速度・加速度

という３つの変数を持つ必要があります。
（まあ、毎回加速度を計算してもいいのですが…（´∀｀；
　
「それはめんどいな…」
　
と思われたあなた！
いい方法があります。
（というか今日見つけたのですが…（´∀｀；
　
それはlog10()を使う方法です。
log10()を使えば、タイマー変数（フレーム数）だけで、
カットインの動きができてしまいます。
　
C言語？で先ほどの例を実装するとこんな感じです。

int timer = 1; // タイマー
・
・
・
	// ゲームループらしきもの
	loop() {
		// カットイン座標を求める
		x = 200 * log10(timer);
		draw(x);
		timer++;
		if(timer > 10) break;
	}

なんとこれだけです！
　
log10とは、引数が10の何乗であるかを返す関数です。
こいつに、1〜10の値をいれてやると、0〜1.0がいい感じに返ってきます。

タイマー	log10(タイマー)	log10(タイマー)*200
1	0	0
2	0.301029996	60.20599913
3	0.477121255	95.42425094
4	0.602059991	120.4119983
5	0.698970004	139.7940009
6	0.77815125	155.6302501
7	0.84509804	169.019608
8	0.903089987	180.6179974
9	0.954242509	190.8485019
10	1	200

目標とするフレーム数が、10以外の場合は、

１＋（９×現在のフレーム数÷最大フレーム数）

として、1〜10の値に収まるように調整する必要があります。
　

で、どっちがいいの？

２つを対比したグラフです。

青が加速度、
ピンクがlog10()を使ったものです。
　
加速度のほうが滑らかーに曲線を描いているので、
動き重視でしたら、加速度になります。
　
ただ変数が３つ必要なので、、、
・
・
・
…と、まとめようと思ったのですが、

• 開始座標
• 終了座標
• 現在フレーム数
• 最大フレーム数

を引数として、
現在座標を返す関数を実装すればよいのではないかと気が付きました。（´∀｀；
　
まあ、log10()は気が向いたら使ってみるのもいいかもしれません（´Д｀；
　
　
以上、カットイン座標の算出方法でした…。