フワフワソが「ソラとピヨちゃん」や「宮本県」を作るブログ(フワフワソ・ラウンジnew!)

ラノベとテクノを愛するふわふわがノベルゲームを作っています。あと日常のことやイベントの告知なども。スクリプト関連の記事は自分用の備忘録です

キーフレームアニメでイージングを自作する

RPGでよくあるダメージ表示をしたいなと思いました。

敵を殴るとダメージ数値が出てバウンドして消えるあれです。

まずキーフレームアニメでやろうと思いました。

kopacurve.blog.fc2.comこ・ぱんだ様のプラグインがとても便利なので、そういう動きがあるかなと思ったのですが、ないようです。

ソースを拝見すると改造OKと書いてありましたので、このプラグインをもとに改造させていただくことにしました。ありがとうございます。

作ったのがこちら。

[keyframe name="float_ability"]
[frame p=" 0%" y=" 0"]
[frame p="100%" y="-100"]
[endkeyframe]

 

[macro name="ability"]
[eval exp="mp.layer = '0'" cond="mp.layer == undefined"]
[eval exp="mp.time = 1500" cond="mp.time == undefined"]
[kanim name="&mp.name" layer="&mp.layer" keyframe="float_ability" easing="cubic-bezier(.38,1.37,.99,1.09)" time="&mp.time" count="1"]
[layopt layer="&mp.layer" visible="true"]
[endmacro]

キーフレーム名が float_ability

マクロ名がabilityです。

上記の設定をしてから、

[ptext layer=11 text="test" x=360 y=360 size=100 name="abilitypt" time=0 wait=false]

[ability layer=11 name="abilitypt" time=300]

このように記述すると、レイヤー11でabilityptという名前を付けたptextの文字が300ミリ秒でアニメします。

 

 ポイントはまずここ。

[frame p=" 0%" y=" 0"]
[frame p="100%" y="-100"]

キーフレームアニメの設定のところで、時間経過100%(この場合はマクロで設定した300ミリ秒)のところで、y方向に-100ピクセル移動、としておきます。とても単純です。

次に、バウンドしたりする複雑な動きは、マクロの方のeaseの設定でやります。

[kanim name="&mp.name" layer="&mp.layer" keyframe="float_ability" easing="cubic-bezier(.38,1.37,.99,1.09)" time="&mp.time" count="1"]

kanimにはeaseの設定があって、これで結構複雑な動きができると思いました。

こんな感じの↓

https://easings.net/ja

さっそくバウンドするようなイージングを使おうと思いました。

ところが、やってみてもうまくいきません。

よくよく見ると、ティラノのkanimには、基本的なイージングしか実装されてないようです。(kanimではなく、animのほうにはもっと種類があるのですが)

指定できる値としてease(開始時点と終了時点を滑らかに再生する) linear(一定の間隔で再生する)ease-in(開始時点をゆっくり再生する)ease-out(終了時点をゆっくり再生する)ease-in-out(開始時点と終了時点をゆっくり再生する)

困った・・。のですが、先を読むと、

 この他に、cubic-bezier関数を使って、イージングを独自に設定することも可能です

 というわけで、こちらのサイトを参考に、バウンドする動きを作ってみました。

cubic-bezier.com

その結果が easing="cubic-bezier(.38,1.37,.99,1.09)" です。

 

あとは、自動的に数字が消えるアニメを実装したいなと思います。

 

・バウンドと同時に透明から現れていく例

[keyframe name="float_ability"]
[frame p=" 0%" opacity=0]
[frame p="100%" y="-100" opacity=255]
[endkeyframe]

・バウンドと同時に透明から現れていく例(失敗例。バウンドと同時にならない)

[keyframe name="float_ability"]
[frame p=" 0%" opacity=0]

[frame p=" 25%" opacity=255]
[frame p="100%" y="-100" ]
[endkeyframe]

 

その他気づいたところ

・「バウンドして表示後に、自動的に消える」を一気にやるには、透明になる動きまで含めたcubic-bezier関数を作る必要があり、若干面倒

 ・kanimはデフォルトでアニメ終了を待たずに次の処理に進むので、アニメしながら本文を読み進めやボタン処理等ができる。

 animはアニメ終了待ちのためのタグ[wa]がある。

 ・[chara_new][chara_show][chara_mod]など、キャラ表示関連のタグは、name属性を一個しか指定できない。

キャラクターを以後操作するための名前を半角英数で指定します。このnameは他のタグを含めて必ずユニークでなければなりません

 つまり、これらのタグを使って表示させた画像は、全部同じ名前にしておかないと同時にアニメ操作できない。

imageやptextなどのタグでは、名前は複数登録できるので、

name="chara1,chara_all"

name="chara2,chara_all"

name="chara3,chara_all"

 などと登録しておいた3つの画像があるとき、"chara1"で一個だけアニメさせたり、"chara_all"で全部同時にアニメできた。

ところが[chara_new]関連のタグを使うと、名前が一個しか登録できないため、上記のような個別アニメと全体アニメの使い分けができないということになる。