MENU閉じる

HEXA BLOG

プログラム

HEXA BLOGプログラム2016.9.1

easing関数を使おう

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

 

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

 

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

 

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

20160901_00

 

補間の種類は他にもたくさんあり、次のページにもずらっと紹介されています。
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で固定して、式を簡略化するのもアリ

 

 

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

RECRUIT

大阪・東京共にスタッフを募集しています。
特にキャリア採用のプログラマー・アーティストに興味がある方は下のボタンをクリックしてください

RECRUIT SITE