ZinTween Documentation
基本的な使用方法
ウィンドウの初期化関数でトゥイーンを実行すると、ウィンドウ生成時にウィンドウの移動や透明度の変更ができます。
const _Window_MenuCommand_initialize = Window_MenuCommand.prototype.initialize;
Window_MenuCommand.prototype.initialize = function() {
_Window_MenuCommand_initialize.apply(this, arguments);
//0.2秒かけて透明度を0⇒255まで変更しながらX方向に50%移動する
this.ztAlphaFrom(0, 0.2).setEase(EaseType.EaseOutSine);
this.ztXMoveTo('50%', 0.2).setDelay(2.0);
};
this.ztAlphaFrom(0, 0.2).setEase(EaseType.EaseOutSine);
画面の透明度(アルファ値)を0.2秒かけて0⇒255(最初の値)に変更します。ドットに続けてオプションを付け加えることができ、この場合はsetEase関数を読んでいます。
setEase関数はイージングの種類を決めることができます。イージングの種類は以下を設定できます。
EaseType.Slope:線形変化
EaseType.EaseInSine:サインカーブ(入り)
EaseType.EaseOutSine:サインカーブ(抜き)
EaseType.EaseInOutSine:サインカーブ(入り抜き)
EaseType.EaseInQuad:2乗変化(入り)
EaseType.EaseOutQuad:2乗変化(抜き)
EaseType.EaseInOutQuad:2乗変化(入り抜き)
EaseType.EaseInCubic:3乗変化(入り)
EaseType.EaseOutCubic:3乗変化(抜き)
EaseType.EaseInOutCubic:3乗変化(入り抜き)
EaseType.EaseInQuart:4乗変化(入り)
EaseType.EaseOutQuart:4乗変化(抜き)
EaseType.EaseInOutQuart:4乗変化(入り抜き)
EaseType.EaseInExpo:指数変化(入り)
EaseType.EaseOutExpo:指数変化(抜き)
EaseType.EaseInOutExpo:指数変化(入り抜き)
EaseType.EaseInBack:反動(入り)
EaseType.EaseOutBack:反動(抜き)
EaseType.EaseInOutBack:反動(入り抜き)
EaseType.EaseInElastic:弾性(入り)
EaseType.EaseOutElastic:弾性(抜き)
EaseType.EaseInOutElastic:弾性(入り抜き)
EaseType.EaseInBounce:バウンス(入り)
EaseType.EaseOutBounce:バウンス(抜き)
EaseType.EaseInOutBounce:バウンス(入り抜き)
EaseType.EaseStep:ステップ変化
EaseType.EaseStairs1:階段状変化1
EaseType.EaseStairs2:階段状変化2(ピンポン動作向け)
this.ztXMoveTo(‘50%’, 0.2).setDelay(2.0);
ウィンドウをX方向の指定座標に移動させます。Toの代わりにFromを使うと指定座標から現在の座標に向かって移動します。また、座標には値を直接入力する代わりに%指定することもできます。この場合はゲームスクリーン横幅の50%の位置を指定することになります。
setDelay関数は指定時間だけイージングの開始を遅らせることができます。
また、上記コードのように複数のトゥイーンを設定することができます。この場合は同時実行となります。前のトゥイーンが終了してから次のトゥイーンを開始したい場合、間にztNext関数を呼んでください。
//20%画面右に移動してから、20%画面下に移動する
this.ztXMoveBy('20%', 1).setDelay(1);
this.ztNext();
this.ztYMoveBy('20%', 0.5).setDelay(1);
オプション
トゥイーン関数を呼ぶ際、数値の代わりに文字列で目標値を指定することもできます。その際、オプション文字を含めることで以下のような機能を追加できます。どのオプションが有効かは各関数を参照してください。
‘%’: パーセント指定になります。何の割合になるかは関数によって異なり、例えばWindow.ztMoveToならUIエリアの幅が基準になり(‘50%’と指定すると画面中央に移動する)、Window.ztAlphaToなら透明度の割合(‘50%’と指定すると半透明)になります。
’C’: Window.ztMoveTo等の移動トゥイーンで有効となり、オブジェクトの中央が目標値に合うように移動します。
’R’,‘B’: Window.ztMoveTo等の移動トゥイーンで有効となり、オブジェクトの右端(下端)が目標値に合うように移動します。
‘M’: UI系のオブジェクトで有効となり、UIエリアの幅はゲームスクリーンより8px縮んでいますが、ゲームスクリーンに強制的に合わせるように調整します。
関数リファレンス
ZinTween_Object
トゥイーン関数を呼んだ後に返されるクラスです。トゥイーンのオプションを指定します。
■ setEase(EaseType)
トゥイーンのイージングの種類を指定します。
EaseType: イージングの種類
■ setDelay(delay)
イージングの開始時間を遅延させます。
delay: 遅延時間(秒)
■ setWrapMode(mode)
繰り返しモードを指定します。
mode: 繰り返しモード。以下の値が指定できます。
WrapMode.Clamp: トゥイーン実行後は最後の状態で待機します。デフォルトでこのモードが選択されています。
WrapMode.Once: 一度だけ実行し、実行後は最初の状態で待機します。
WrapMode.Loop: 実行後に最初の状態に戻り、再度イージングを実行します。
WrapMode.Pingpong: 実行後に反転して最初の状態に戻ります。
■ setCycleNum(cycleNum)
WrapModeがLoopかPingpongのみ有効で、ループ回数を指定します。
cycleNum: ループ回数。-1を指定すると無限ループします。
Wrapper Function
ここに記載している関数は、以下のWindowやSpriteクラスにラッパーとして提供されています。各クラスにおいて「this.関数名」の形で同じように呼ぶことができます。
■ ztNext()
トゥイーンを区切り、次のトゥイーン関数が呼ばれたとき前のトゥイーンの終了を待機します。
■ ztIsPlaying()
自身のトゥイーンが実行中かどうかをbooleanで返します。
■ ztSetHandler(bindFunc)
シーケンス処理が終了したときに呼び出す関数を登録します。
bindFunc: シーケンス終了時の呼び出し関数
■ ztFreeze()
自身のトゥイーンを一時停止します。
■ ztUnfreeze()
自身のトゥイーンの一時停止を解除します。
Window
■ ztMoveTo(x, y, duration)
指定場所に移動します。
x: 移動先のx座標。有効オプション:%, C, R, M
y: 移動先のy座標。有効オプション:%, C, B, M
duration: 移動にかかる時間(秒)
■ ztXMoveTo(x, duration)
指定X座標に移動します。
x: 移動先のx座標。有効オプション:%, C, R, M
duration: 移動にかかる時間(秒)
■ ztYMoveTo(y, duration)
指定Y座標に移動します。
y: 移動先のx座標。有効オプション:%, C, B, M
duration: 移動にかかる時間(秒)
■ ztMoveFrom(x, y, duration)
指定場所から移動します。
x: 移動前のx座標。有効オプション:%, C, R, M
y: 移動前のy座標。有効オプション:%, C, B, M
duration: 移動にかかる時間(秒)
■ ztXMoveFrom(x, duration)
指定X座標から移動します。
x: 移動前のx座標。有効オプション:%, C, R, M
duration: 移動にかかる時間(秒)
■ ztYMoveFrom(y, duration)
指定Y座標から移動します。
y: 移動前のx座標。有効オプション:%, C, B, M
duration: 移動にかかる時間(秒)
■ ztMoveBy(x, y, duration)
指定量だけ移動します。
x: x座標移動量。有効オプション:%, C, R, M
y: y座標移動量。有効オプション:%, C, B, M
duration: 移動にかかる時間(秒)
■ ztXMoveBy(x, duration)
指定量だけX方向に移動します。
x: x座標移動量。有効オプション:%, C, R, M
duration: 移動にかかる時間(秒)
■ ztYMoveBy(y, duration)
指定量だけY方向に移動します。
y: y座標移動量。有効オプション:%, C, B, M
duration: 移動にかかる時間(秒)
■ ztAlphaTo(a, duration)
指定値へ透明度を変更します。
a: 変更後の透明度(0-255)。有効オプション:%
duration: 変更にかかる時間(秒)
■ ztAlphaFrom(a, duration)
指定値から透明度を変更します。
a: 変更前の透明度(0-255)。有効オプション:%
duration: 変更にかかる時間(秒)
Sprite
■ ztMoveTo(x, y, duration)
指定場所に移動します。
x: 移動先のx座標。有効オプション:%, C, R, M
y: 移動先のy座標。有効オプション:%, C, B, M
duration: 移動にかかる時間(秒)
■ ztXMoveTo(x, duration)
指定X座標に移動します。
x: 移動先のx座標。有効オプション:%, C, R, M
duration: 移動にかかる時間(秒)
■ ztYMoveTo(y, duration)
指定Y座標に移動します。
y: 移動先のx座標。有効オプション:%, C, B, M
duration: 移動にかかる時間(秒)
■ ztMoveFrom(x, y, duration)
指定場所から移動します。
x: 移動前のx座標。有効オプション:%, C, R, M
y: 移動前のy座標。有効オプション:%, C, B, M
duration: 移動にかかる時間(秒)
■ ztXMoveFrom(x, duration)
指定X座標から移動します。
x: 移動前のx座標。有効オプション:%, C, R, M
duration: 移動にかかる時間(秒)
■ ztYMoveFrom(y, duration)
指定Y座標から移動します。
y: 移動前のx座標。有効オプション:%, C, B, M
duration: 移動にかかる時間(秒)
■ ztMoveBy(x, y, duration)
指定量だけ移動します。
x: x座標移動量。有効オプション:%, C, R, M
y: y座標移動量。有効オプション:%, C, B, M
duration: 移動にかかる時間(秒)
■ ztXMoveBy(x, duration)
指定量だけX方向に移動します。
x: x座標移動量。有効オプション:%, C, R, M
duration: 移動にかかる時間(秒)
■ ztYMoveBy(y, duration)
指定量だけY方向に移動します。
y: y座標移動量。有効オプション:%, C, B, M
duration: 移動にかかる時間(秒)
■ ztAlphaTo(a, duration)
指定値へ透明度を変更します。
a: 変更後の透明度(0-255)。有効オプション:%
duration: 変更にかかる時間(秒)
■ ztAlphaFrom(a, duration)
指定値から透明度を変更します。
a: 変更前の透明度(0-255)。有効オプション:%
duration: 変更にかかる時間(秒)
■ ztScaleTo(w, h, duration)
指定の倍率に拡大します。
w: 横方向の拡大倍率(1.0指定で1倍)。有効オプション:%, C, R
h: 縦方向の拡大倍率(1.0指定で1倍)。有効オプション:%, C, B
duration: 変更にかかる時間(秒)
■ ztXScaleTo(w, duration)
指定のw倍率に拡大します。
w: 横方向の拡大倍率(1.0指定で1倍)。有効オプション:%, C, R
duration: 変更にかかる時間(秒)
■ ztYScaleTo(h, duration)
指定の倍率に拡大します。
h: 縦方向の拡大倍率(1.0指定で1倍)。有効オプション:%, C, B
duration: 変更にかかる時間(秒)
■ ztScaleFrom(w, h, duration)
指定の倍率から拡縮します。
w: 横方向の拡大倍率(1.0指定で1倍)。有効オプション:%, C, R
h: 縦方向の拡大倍率(1.0指定で1倍)。有効オプション:%, C, B
duration: 変更にかかる時間(秒)
■ ztXScaleFrom(w, duration)
指定の倍率から拡縮します。
w: 横方向の拡大倍率(1.0指定で1倍)。有効オプション:%, C, R
duration: 変更にかかる時間(秒)
■ ztYScaleFrom(h, duration)
指定の倍率から拡縮します。
h: 縦方向の拡大倍率(1.0指定で1倍)。有効オプション:%, C, B
duration: 変更にかかる時間(秒)
■ ztRotationTo(d, duration)
指定の角度へ回転します。
d: 回転量(°指定)。
duration: 変更にかかる時間(秒)
■ ztRotationFrom(d, duration)
指定の角度から回転します。
d: 回転量(°指定)。
duration: 変更にかかる時間(秒)
■ ztRotationBy(d, duration)
指定の角度だけ回転します。
d: 回転量(°指定)。
duration: 変更にかかる時間(秒)
ZinTween (Static)
トゥイーンのデフォルト設定等を指定できます。
■ setEase(EaseType)
デフォルトのイージングの種類を指定します。
EaseType: イージングの種類
■ setDelay(delay)
デフォルトのイージング開始からの遅延時間を指定します。
delay: イージング開始からの遅延時間
■ setWrapMode(wrapMode)
デフォルトの繰り返しモードを指定します。
wrapMode: 繰り返しモード
■ default()
イージング・遅延時間・繰り返しモードを初期状態に戻します。
更新履歴
2020.9.13: ver 1.1.0に対応
2020.9.6: 初版作成