easing関数を使おう | 株式会社ヘキサドライブ | HEXADRIVE | ゲーム制作を中心としたコンテンツクリエイト会社

HEXA BLOG

ヘキサブログ

プログラム

HEXA BLOGプログラム2016.9.1

easing関数を使おう

こんにちはプログラマーの平尾です。

ゲームプログラムを組んでいると、次のような処理が結構でてきます。
「変更前～変更後の値が決まっていて、一定時間で補間する処理」

例えば以下のようなものです。
　　・カーソルなどの位置移動
　　・UIの拡大縮小
　　・モデルなどの色替え
などなど。

線形補間で処理してしまってもそれなりに見えると思いますが、
一手間かけるだけでちょっとリッチに見えたりします。
例えば、以下の様なサインカーブだったり、2乗計算だったりです。

補間の種類は他にもたくさんあり、次のページにもずらっと紹介されています。
http://easings.net/ja

徐々に加速していくものをイージング・イン、
徐々に減速していくものをイージング・アウト、
前半は加速して後半減速していくのをイージング・インアウト、
と呼びます。

easing関数がいろいろあるのが分かってもらえたかと思いますが、
実際にどんな動きになるのか、動きが見えるページを紹介します。
（スマホでは正しく見れませんでしたので要注意…）
http://gizma.com/easing/

以下、このページの操作説明です。
＊＊＊＊＊＊
　１．赤丸のある矩形内をクリックします。
　２．赤丸がクリック位置まで移動します。
　　　このとき指定しているeasing関数が使用されています。
　　　デフォルトではQuadのイージングインアウトが設定されています。
　　　なので動き出しと動き終わりが遅いと思います。
　３．easing関数を変更しましょう。表の Lin X, Y にチェックを入れてみます。
　４．再び赤丸を移動させると、先ほどと移動の感じが変わると思います。
　　　線形補間なので、等速移動しているのが分かると思います。
　　　ちょっと味気ないです。
　５．表にはたくさんの種類があるので、チェックを変えたらどういう移動になるか試してみましょう。

＊＊＊＊＊＊

「これらの動きを実際にプログラムに取り入れたい」

という場合は、上記のページ（の下の方）に書かれているソースコードを参考にしましょう。

t, b, c, d に何を渡したらいいかがイマイチ分からないよ… という方は、
次のページでいろいろ補足してくれてますので参考になると思います。
http://d.hatena.ne.jp/nakamura001/20111117/1321539246
http://qiita.com/idaisuke/items/e9a89f1b9ad24ff39805
（入力する時間と出力する値をそれぞれ0.0～1.0で固定して、式を簡略化するのもアリ）

最初はちょっと面倒かもしれませんが、一度用意さえしてしまえば使うのは簡単です
ゲームの動きに一手間かける調味料として役に立つと思いますよ