かげさんの111から始まるHistory » ゲームエフェクト, 初音ミク冒険記 » イージング関数の導入テスト(動画あり)

« ボカロタウン入口に噴水を作ってみた(動画あり) | トップページ | 2Dカメラに関する記事を見つけたのでメモっておく »

イージング関数の導入テスト(動画あり)

これまでの初音ミク冒険記のプログラムでは
動きを付ける処理の殆どは等速運動をしています。

ジャンプや落下は加速度運動してますが
他は動きがないか、等速運動ばかりなのです。

これだと味気ないなぁ、と思っていました。coldsweats01

そこで動きを付けるために
jQuery Easing Pluginの関数を移植して
初音ミク冒険記に組み込んでみました。

実は、MMDとかでファンクションカーブとか
EffekseerでFカーブとか言われているものは知っていたのですが
この記事を見つけるまでイージングという言葉を知りませんでした。
イージング関数を使いたい@C++

最初は、この記事の処理をそのまま組み込んだのですが
イージング処理初心者のかげさんには
ちょっとパラメータの設定が面倒そうな感じでした。weep
(パラメータの順序が一部違っていれば、まだよかったんだけどね)

なのでjQueryのイージング関数を真似することにしました。
(こっちの方が関数の使用イメージが湧いた)

イージング関数の動きは
イージング関数の早見表」で
グラフにマウスカーソルを合わせたり
jQuery日本語リファレンス Easing/jQuery」の
イージング名のリンクをクリックして見てもらうと分かりやすいです。

移植元のソースはコチラのものを使っています。
jQuery Easing Plugin (version 1.3)

ちなみにかげさんはjQueryを自分で使って
プログラムしたことはないんですが
jQueryは、JavaScriptでできているので
一応、単純な移植ならできるって感じです。wink

jQuery Easing Plugin のイージング関数を直接利用する方法
という記事にjQuery Easing Plugin の2つのイージング関数の結果があったので
同じ値になることを確認しています。

単純にテキストエディタでマクロを組んでゴリゴリ移植したので
2つ合っていれば、多分大丈夫でしょう。

ということで、せっかく移植しても使わないと意味が無いので
お試しプログラムを作ってみました。

30関数もあって単純な動作なので
正直、見てても面白く無いかもしれませんが
一応、後々自分で見返したりするかもしれないので
テスト動画を作りました。note

とりあえず、メニューの動作に組み込んでみようと思います。

フェードイン・フェードアウトの処理や
イベントでのカメラの移動に組み込むのも良いかもしれませんね。happy01

面白かったら押すべし。→ へぇ~
ランキング [] [] [] [] [] [↑50] [かげさんの111から始まるHistory内]

|

このエントリーへのリンク

このエントリーのリンクを入れるHTML:

トラックバァ~ック!


★アディダスやニューバランス関連のトラックバックスパムが多すぎて★
★超迷惑なので、トラックバックは承認制としました。★
★このため、トラックバックが記事に表示されるまで
★時間がかかることがあります★

この記事にトラバ~る為のURL:

この記事へのトラックバックの一覧です: イージング関数の導入テスト(動画あり):

コメント

このブログの新着コメントをRSSリーダに登録する為のxml




←名前とメールアドレスは必須です。URLも記入すれば、URLのみが公開されます。メールアドレスのみですと、メールアドレスが公開されてしまいますので、御注意ください。

メールアドレスは書きたくないって人は、掲示板に書き込むって方法もあります。掲示板はメールアドレスなしでもOKです!

↓コメント本文では、「a href」「b」「i」「br/」「p」「strong」「em」「ul」「ol」「li」「blockquote」「pre」のタグが使えます。絵文字をクリックすると、本文にタグを挿入できます。


絵文字を挿入