mieki256's diary

ステージクリア時に鳴らす短い音楽を ―― _ジングル？ ステッカー？ アタック？ を作成中。なのだけど。なんかイメージと違うんだよなあ…。もっとパキッとした感じのイメージにしたいのだけど…。

tween だの、イージングだの呼ばれているソレは、プログラム中で「このオブジェクトをこんな風にアニメしといて」と設定しておくと、「合点承知之助！」とばかりに、後は自動でそのように動かしてくれるソレ。

ActionScript や JavaScript の世界ではフツーに存在するらしいけど、HaxeFlixel にも用意されてたらしい。いや、もしかすると Flixel にも用意されているのかもしれないのだけど。

_Tutoriales HaxeFlixel のソースが大変参考になった。ありがたや。

まずは以下を import して。

import org.flixel.tweens.FlxTween;
import org.flixel.tweens.misc.MultiVarTween;
import org.flixel.tweens.util.Ease;

初期化処理などで、以下のようなことをして。

        // 拡大表示しておく

        scale.x = 3.0;
        scale.y = 3.0;
        
        // Tweenを設定
        // この例では、一瞬(0.3秒)で勢いよく縮小する(scaleを変化させる)動きを指定

        var mvt1 = new MultiVarTween(null, FlxTween.ONESHOT);
        mvt1.tween(this.scale, { "x":1.0, "y":1.0 }, 0.3, Ease.backOut);
        
        // tweenを登録

        addTween(mvt1);

• var hoge = new MultiVarTween(null, FlxTween.ONESHOT); で、1回だけイージングせよ、と指定している。
• ONESHOT の他にも、LOOPING、PINGPONG、BACKWARD、PERSIST が指定できるらしい。LOOPING は繰り返し、PINGPONG は行ったり来たりだろうけど、他はどういう指定なのかまだ分からず。BACKWARD は逆再生かな…？
• hoge.tween(fuga, {"piyo":3.0}, 2.0, Ease.backOut); で、fugaというオブジェクトの、piyoというプロパティを変化させろ、最終目標値は 3.0 だよ、と指定している。その後に続く 2.0 は、イージングをする秒数。0.5 と書けば0.5秒で、4.0 と書けば4秒かけて変化する。最後に書くのが、イージングの種類。いきなり動いたり、のんびり動いたり、ウニョーンムニュウと動いたり等が指定できる。
• addTween(hoge); で登録？

後は、FlxSprite なり、FlxState なりで、update() が呼ばれてさえいれば、その中で値を計算して、指定したプロパティに勝手に代入してくれる。

ちなみに、update() を override した中で、super.update(); を呼ぶのを忘れていて、「動かないなあ…」とハマってました。update() を override するときは、super.update(); を入れておくことを忘れずに。

一応、他の例もメモ。

不透明→透明→不透明…を繰り返す・alpha を弄る例。

        // スプライトを発生・登録
        var pressz = new FlxSprite(x, y);
        pressz.loadGraphic(Assets.getBitmapData("assets/images/pressz.png"));
        add(pressz);

        // tweenで点滅させる
        var mvt:MultiVarTween = new MultiVarTween(null, FlxTween.PINGPONG);
        mvt.tween(pressz, { "alpha":0.0 }, 0.5);
        pressz.addTween(mvt);

イージングの種類については、JavaScript や ActionScript 関係の解説ページを眺めたほうがいいのかもしれず。

_Easing Function 早見表
_Easing Equations
_jQuery入門講座：イージングの追加
_jQueryのイージングを拡張する「jquery.easing(ver1.3)」のサンプル
_ActionScriptのトゥイーン制御ライブラリTweenerの使い方 | creator note

ちなみに、 _Demos | HaxeFlixel の中にも、そもそも _FlxTween | HaxeFlixel というサンプルがあった。

こんな便利な機能が実装されるとは知らなくて、自前で動かしてましたわ…。