ティラノスクリプトで目パチ・口パクプラグイン（CSS版）

CSSアニメーションでティラノスクリプトに目パチを実装する

ティラノスクリプトで目パチなどアニメーションを行うプラグインはいくつかありますが、CSSアニメーションを使ったものはティラノスクリプト本体に手を加える必要があるものだったので、極力ティラノ本体側には触らない方向で作ってみました。

CSSで目パチプラグイン

使い方はreadmeなりを見ていただくとして、その中身の話です。

やっていること

init.ksを見ていただければわかるのですが、jQueryでstyleタグの中身をいじってアニメーション定義したり立ち絵の要素に対してクラスを付けたり外したりしているだけです。
CSSでのスプライトアニメーションについての説明は他の記事にお任せするとして、ティラノスクリプトの仕様に絡んだ話をば。

ティラノスクリプトの立ち絵表示処理

ティラノライダーとかの開発者ツールで見れますが、ティラノスクリプトで下記のようにタグを記述するとします。

sample.ks

[chara_new name="usagi" storage="u_base.png"]
[chara_layer name="usagi" part="ear" id="1" storage="u_ear01.png"]
[chara_layer name="usagi" part="ear" id="2" storage="u_ear02.png"]
[chara_layer name="usagi" part="eye" id="3" storage="u_eye01.png"]    

すると、実際の画面上ではこのようになります。

index.html

<div class="usagi tyrano_chara" ...>
   <img src="./data/fgimage/u_base.png" class="chara_img" ...>
   <img src="./data/fgimage/u_ear01.png" class="part ear" ...>
   <img src="./data/image/u_eye01.png" class="part eye" ...>
</div>

キャラクター名のクラスを持ったdiv要素の子要素として、各パーツ名のクラスを持ったimgタグが配置されるわけですね。
プラグインの中では、このimg要素に対してアニメーションさせるためのクラスのつけ外しといった処理を行っています。

img要素内でスプライトアニメーションの実現

CSSでスプライトアニメーションをしようとしたら、background に画像を指定してやるのが手っ取り早いですし、プラグインの中でもそうしています。
しかしimg要素には当然のことながらsrc属性があり、ただbackgroundを指定しただけではおかしな表示になってしまいます。
ではどうしているかというと、src属性に透明な画像を指定しています。単純ですね。

1. アニメーションさせるパーツのimg要素にアニメーション用classを付与
2. img要素のsrc属性（[chara_layer]にて定義したパーツ画像）をdata-src属性に退避
3. src属性に透明画像をセット
4. img要素にbackgroud-imageを定義

だいたいこんな流れでアニメーションさせています。
アニメーションを停止させるときはこの逆の処理を行っているわけですね。

img要素の画像表示方法の話

アニメーションさせるときは上記でいいとして、アニメーションしないときの処理の話です。
キャラクター差分パーツ機能では、各パーツごとに最初に定義したものがそのパーツのデフォルト値となります。上の例で言うと、[chara_layer name="usagi" part="ear" id="1" storage="u_ear01.png"]が耳パーツの初期値になります。
プラグインはクラスの付け外しといった処理が入る関係で、キャラクターが実際に表示されてからでないとアニメーションの開始処理ができません。
このため、パーツの初期値がアニメーションする画像だった場合に、キャラクター表示～アニメーション開始までの間は最初の1コマ目を静止した状態で表示させる必要があります。
しかしimg要素（というかその親要素であるdiv）はwidth,heightが指定されているため、単純にスプライトアニメーション用の画像をsrc属性に指定してしまうとｷﾞｭｯと圧縮されて表示されてしまいます。
なので、アニメーションを定義するついでに差分パーツ用のimg要素に対してこんな感じで指定してあげます。

index.html

...
object-fit: cover;
object-position: 0% 0%;
...

これでスプライトアニメーション用画像の1コマ目が拡大縮小されることなく表示されます。

つかってみてね

とりあえず公開してみましたがプラグイン公開は初めてなのであれでよかったのかよくわからん
ティラノスクリプト本体側はいじってないけどDOMをいじっているので今後ティラノスクリプトのアップデートでその辺の構成変わったら使えなくなります
なにか不具合あったら教えてください