TweenXCoreカスタムイージングのレシピ

14399 ワード
Haxe Haxe テキストリンク

先日、TweenXCoreというトゥイーンライブラリを公開し、あわせてそのカスタムイージングを作成できるイージングエディタを公開しました。

この記事では、イージングエディタで作ることができるカスタムイージングの例を紹介していきます。

16次関数イージング


[エディタで見る]

function quartQuartIn(rate:Float):Float {
    return rate.quartIn().quartIn();
}

4次(quart)のイージングを2重に使うことで、キレのあるイージングを作ることができます。

16次関数イージングと線形イージングのミックス


[エディタで見る]

function custom1(rate:Float):Float {
    return rate.mixEasing(
        quartQuartOut, 
        Easing.linear, 
        0.1
    );
}

キレのあるイージングは動きが瞬間的すぎて視認性が悪くなるという欠点があるのですが、その欠点を補うにはLinearのイージングを少しミックスするというのが効果的です。

イージングの気持ち良さと、視認性の良さを両立できます。

負の値でのミックス


[エディタで見る]

function custom2(rate:Float):Float {
    return rate.mixEasing(
        quartQuartOut, 
        Easing.linear, 
        -0.1
    );
}

ミックスに使う数値は、0より小さい値や、1より大きい値でも構いません。ここでは負の値でミックスして、バックから始まるイージングを作っています。

カットインっぽいイージング


[エディタで見る]

function quartQuartOutIn(rate:Float):Float {
    return rate.quartOutIn().quartOutIn();
}

function custom3(rate:Float):Float {
    return rate.mixEasing(
        quartQuartOutIn, 
        Easing.linear, 
        0.14
    );
}

中詰め(OutIn)の16次関数イージングを線形イージングのミックスすることで、ゲームのカットイン演出のようなイージングを作ることができます。

折れ線


[エディタでみる]

function custom4(rate:Float):Float {
    return rate.polyline([0, 1.1, 1]);
}

折れ線を使ったイージングというのはリズミカルで意外な気持ちよさがあります。この例は、何かにコツンとぶつかるようなイージングです。

折れ線に曲線を合成する


[エディタでみる]

この例では、折れ線に3次関数を合成しました。コツンというぶつかり方に勢いがつきました。

function custom6(rate:Float):Float {
    return rate.cubicIn().polyline([0, 1.1, 1]);
}

2つのイージングをつなげる


[エディタで見る]

function quintInAndLinear(rate:Float):Float {
    return rate.connectEasing(
        Easing.quintIn, 
        Easing.linear, 
        0.5, 
        0.92
    );
}

この例では、backInからlinearにつなげて急激に失速するようなイージングを作りました。

このConnectは他にも様々な動きを作るのに使えます。

パチンッと飛んでいくBackIn


[エディタで見る]

function cubicOutBackAndCubicIn(rate:Float):Float {
    return rate.connectEasing(
        cubicOut, 
        cubicIn, 
        0.9, 
        -0.2
    );
}

ゴムで引っ張ってパチンと飛んでいくようなBackIn系のイージングです。

カチッと戻るBackOut


[エディタで見る]

function quintOutAndQuartQuartInBack(rate:Float):Float {
    return rate.connectEasing(
        Easing.quintOut, 
        quartQuartIn, 
        0.48, 
        1.15
    );
}

スッといってカチッと戻ってくるようなBackOut系のイージングです。

ライセンス

各ユーザーがイージングエディタで作ったイージングは、完全にそのユーザー自身で作ったイージングとして自由に使えます。

また、ここに記載した各カスタムイージングについても自由に使って構いません。創作性があるといえるほど複雑なものでは無いでしょうし、仮に創作性が認めらるとしても著作権を放棄します(CC0)。