
――【はじめに】――――――――――――――――――――――――――――――――

ダウンロードありがとうございます！
本コモンは、ピクチャの移動等にイージング（加減速をつけたアニメ）をかけるためのコモンです。

本コモンの利用による著作権表記は不要です。改造もご自由に。


自分用に作ったコモンなのでところどころ手抜き仕様です。
※近似値や具体的な値を多用して計算してるので加減速の細かいところは設定できない。
※実装が面倒だったElastic系の関数や、使い道の思いつかなかったInBounce等は実装してない。


――【更新履歴】――――――――――――――――――――――――――――――――

更新する際は元のコモンに上書きして使用して下さい。

2020/07/04 公開
2020/07/05 ピクチャ番号を範囲指定する機能を追加


――【導入】――――――――――――――――――――――――――――――――――

本コモンは11個のコモンイベントで構成されます。
空きスペースを確保し「Easing.common」をウディタに読み込んでください。

――【各コモン解説】――――――――――――――――――――――――――――――

　・[E]相対移動
　・[E]絶対移動
　・[E]回転
　・[E]拡大
　・[E]透過

名前の通り、ピクチャにイージングをかけながら移動等の処理を行います。
値の設定の仕方は通常のピクチャコマンドとほぼ同じです。

Cself5にはイージングに用いる関数名を指定して下さい。
※同梱されている「EasingMemo.png」を参照。


　・[E]スクロール

画面のスクロールにイージングをかけることができます。
ピクチャ操作とは異なり、ディレイは使用不可、強制的にウェイトが入ります。

Cself5にはイージングに用いる関数名を指定して下さい。

なお、画面の端にぶつかるようなスクロールで
Back系の関数を使用すると挙動がおかしくなります。


　・[E]ウェイト

直前に実行したイージングの完了までウェイトを入れます。


　・[E]ディレイ

次に実行するイージングにディレイを設定します。
ディレイを使わないときは設定しなくてオッケーです。


　・[E]ピクチャ終端

次に実行するイージングにピクチャ番号の終端を設定する。

「ピクチャ番号○○～××」と複数のピクチャを同時に変化させるときに
「××」の部分を設定するためのコモンです。

複数枚のピクチャを同時に使わないときは設定しなくてオッケーです。


　・[E]関数

内部計算用のコモン。
イージングで用いている関数が記述されています。
処理速度を速めるため近似値を用いた計算を多用しています。

ここを改造すれば関数を書き換えたり追加したりできます。
小数を扱えないため、0～1の値は1000倍して0～1000で計算してます。


　・演出サンプル

演出サンプルです。（削除して問題なし）

同梱されている「EasingSample」フォルダを「Data」フォルダ内に入れ
適当なピクチャ番号を指定して実行すると演出が再生されます。

イージングの使い方がわからない場合に参考にして下さい。

――【関数解説】――――――――――――――――――――――――――――――――

関数名については
同梱されている「EasingMemo.png」を参照してください。

イージングがよくわからない人のために
関数名の意味について独断と偏見で適当に説明。


■頭につく単語

　・In

変化の始まりがゆっくり、だんだん早くなる関数。
ピタッと急に止まる変化になるので使いどころが難しい。

　・Out

変化の終わりがゆっくり、だんだん遅くなる関数。
メリハリのある変化になるのでカッコいい。

　・InOut

変化の始まりと終わりがゆっくり、途中だけ早くなる関数。
全体的になめらかな変化になるので気持ちいい。


■後ろにつく単語

　・Sine

三角関数で作られたイージング。
バネや波のような変化に適してるかもしれない。

　・Quad
　・Cubic
　・Quart
　・Quint

それぞれ「二次」「三次」「四次」「五次」を意味する。
後のものほど変化具合が急になる。

　・Back

少し行って戻ってくるような変化をするイージング。
変化が分かりやすいので使ってて気持ちいいかもしれない。

　・Bounce

ぶつかって跳ね返るような変化をする。

　・Linear

イージング無しの直線的な変化をする。
普通のピクチャ移動と変わらないため単体では使い道は無いが
下記補足のベクトル合成で役立つこともある。

――【補足解説】―――――――――――――――――――――――――――――――

■補足1

英語力がガバガバなので、コモンのメモ欄に関数名をメモしてます。
同じく英語力がガバガバな人は活用してね。

■補足2：やや技術的な話

通常のピクチャコマンドでは
ピクチャの移動を行っている途中で別のピクチャコマンドを実行すると
ピクチャの移動命令が上書きされます。

※例：相対移動の途中でピクチャを回転→相対移動が停止

イージングコモンではこの挙動が変わり
イージングによる命令同士はそのまま重ね掛けされます。

※例：相対移動（100,50）＋相対移動（50,100）→（150,150）に移動

これは、ピクチャへの命令の上書きは2フレーム目から発生するため
1フレーム目は同時に実行されるというウディタの仕様と

イージングのためにディレイで毎フレームピクチャを更新している
本コモンの仕様が重なり生じたものだと推測しています。

結果的にベクトルの合成のような挙動が可能になるので
面白いな～と思ってます。

■補足3：ベクトル合成の応用

上記ベクトル合成には以下のような応用例があります。

・応用例1

特定の操作でウィンドウが位置AからBに移動、操作をキャンセルすると位置BからAに戻ってくる、というUIを考えます。これを滑らかに実装しようと思うと、ウェイトを入れて移動の完了を待つか、操作時に座標を計算し直す必要がありやや面倒です。

これがベクトルの合成により、位置AからBへの移動、位置BからAへの移動をイージングをかけて行うだけで、どのタイミングでキャンセルしても適切な加減速を保ったまま元の位置に戻ります。画面変遷時にウェイトの完了を待たなくてもいいとレスポンス的に快適なので、操作性のいいUIを作るのに便利です。

・応用例2

X方向の移動にLinear、Y方向の移動にSineのイージングを設定すると、ふたつのベクトルが合成されて三角関数のグラフが描かれます。他にも、組み合わせ次第で円を描いたり曲線を描いたりするような挙動を比較的容易に組めます。

演出サンプルで描写されている最初の正方形の蛇のような動きも、複数の関数の合成により作られています。