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

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

2015.09.27

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

| |コメント (0)|トラックバック (0)

 このエントリーをはてなブックマークに追加

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

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

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

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

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

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

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

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

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

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

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

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

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

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

動画を再生するには、videoタグをサポートしたブラウザが必要です。

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

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


 このエントリーをはてなブックマークに追加

| |コメント (0)|トラックバック (0)

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

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

トラックバック

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

コメント

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




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

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