こんにちは プログラマーの平尾です。
ゲームプログラムを組んでいると、次のような処理が結構でてきます。
「変更前~変更後の値が決まっていて、一定時間で補間する処理」
例えば以下のようなものです。
・カーソルなどの位置移動
・UIの拡大縮小
・モデルなどの色替え
などなど。
線形補間で処理してしまってもそれなりに見えると思いますが、
一手間かけるだけでちょっとリッチに見えたりします。
例えば、以下の様なサインカーブだったり、2乗計算だったりです。
補間の種類は他にもたくさんあり、次のページにもずらっと紹介されています。
http://easings.net/ja
徐々に加速していくものをイージング・イン、
徐々に減速していくものをイージング・アウト、
前半は加速して後半減速していくのをイージング・インアウト、
と呼びます。
easing関数がいろいろあるのが分かってもらえたかと思いますが、
実際にどんな動きになるのか、動きが見えるページを紹介します。
(スマホでは正しく見れませんでしたので要注意…)
http://gizma.com/easing/
以下、このページの操作説明です。
******
1.赤丸のある矩形内をクリックします。
2.赤丸がクリック位置まで移動します。
このとき指定しているeasing関数が使用されています。
デフォルトではQuadのイージングインアウトが設定されています。
なので動き出しと動き終わりが遅いと思います。
3.easing関数を変更しましょう。表の Lin X, Y にチェックを入れてみます。
4.再び赤丸を移動させると、先ほどと移動の感じが変わると思います。
線形補間なので、等速移動しているのが分かると思います。
ちょっと味気ないです。
5.表にはたくさんの種類があるので、チェックを変えたらどういう移動になるか試してみましょう。
******
「これらの動きを実際にプログラムに取り入れたい」
という場合は、上記のページ(の下の方)に書かれているソースコードを参考にしましょう。
t, b, c, d に何を渡したらいいかがイマイチ分からないよ… という方は、
次のページでいろいろ補足してくれてますので参考になると思います。
http://d.hatena.ne.jp/nakamura001/20111117/1321539246
http://qiita.com/idaisuke/items/e9a89f1b9ad24ff39805
(入力する時間と出力する値をそれぞれ0.0~1.0で固定して、式を簡略化するのもアリ)
最初はちょっと面倒かもしれませんが、一度用意さえしてしまえば使うのは簡単です
ゲームの動きに一手間かける調味料として役に立つと思いますよ