ティラノスクリプトで目パチしたい
息抜き小ネタ。ティラノスクリプトで目パチ(瞬きアニメ)をしよう、というお話です。目パチ、口パクくらいの簡単な動きならキーフレームアニメーションで再現可能です。色んなやり方がありますが、今回は自分で試した中で一番簡単じゃないかなーと思った方法でやってみます。ティラノのタグのみで実装可能。
このデモだとわかりやすいようにゆっくり目の動き&瞬きの頻度が多いので、実際はもっと自然になるように数値を調整する必要がありそうです。
・画像準備
girl.png
girl2.png(表情差分)
eye.png(目パチ差分)
閉じた目の差分を用意します。大きさは自由でいいですが、表情差分と同じでなるべく容量を減らすために最低限の大きさにしています。
レイヤー構造は背景、girl.png(レイヤー0)、eye.png(レイヤー1)という風にしました。ここも厳密なきまりはないのでご自由にどうぞ。表情差分を入れる関係で目パチ差分は一番上のレイヤーに設定しています。
次に目パチアニメの定義をします。
[keyframe name="pachi"]
[frame p=0% opacity=0]
[frame p=20% opacity=0]
[frame p=22% opacity=1]
[frame p=24% opacity=1]
[frame p=26% opacity=0][frame p=70% opacity=0]
[frame p=72% opacity=1]
[frame p=74% opacity=1]
[frame p=76% opacity=0][frame p=80% opacity=0]
[frame p=82% opacity=1]
[frame p=84% opacity=1]
[frame p=86% opacity=0][frame p=100% opacity=0]
[endkeyframe]
閉じた目が表示されているか非表示かを切り替えて瞬きさせています。実際にアニメーションさせるときは[kanim]タグを使います。4秒かけてアニメーションするのを無限に繰り返す、という設定にしています。
[kanim name="eye" keyframe="pachi" time=4000 easing=ease count=infinite]
detaファイルをまるっとDLできるようにしておいたので、参考になるかわかりませんがよろしければどうぞ。
同梱の画像はテスト目的以外の使用禁止です。
気が向いたらスプライト画像を使用したパラパラアニメ風のアニメーション実装もやってみたいと思います。これが自由自在に使えるようになったらエフェクトとかの幅も広がるんだけどなー。意外と難しいです。