目パチと移動アニメーション

ティラノスクリプトでアニメーションを使ったので、
備忘録としてまとめてます。
↓こちらのゲームで使った、目パチと移動の部分です。
http://hiyokk0.hateblo.jp/entry/2017/04/03/180556

目パチアニメーション

下記のやり方を参考にしました。
ティラノスクリプトで目パチしたい - memo

3枚でパチパチさせたかったので、
そこをアレンジしています。

完全に開いた目の立ち絵に、
半開きの目、

閉じた目、

の表示と非表示を切り替えてパチパチしています。
好みによると思いますが、
【開く→閉じる→半開き→開く】
の順にしております。

;目パチアニメ定義
[keyframe name="pachi01"]
[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=80% opacity=0]
[frame p=82% opacity=1]
[frame p=84% opacity=1]
[frame p=86% opacity=0]

[frame p=100% opacity=0]
[endkeyframe]

;目パチアニメ定義
[keyframe name="pachi02"]
[frame p=0% opacity=0]
[frame p=20% opacity=0]
[frame p=22% opacity=0]
[frame p=24% opacity=0]
[frame p=26% opacity=1]
[frame p=27% opacity=0]

[frame p=80% opacity=0]
[frame p=82% opacity=0]
[frame p=84% opacity=0]
[frame p=86% opacity=1]
[frame p=88% opacity=0]

[frame p=100% opacity=0]
[endkeyframe]


;目を閉じたいキャラを表示（目は完全に開いている）
[charaset layer=0 left=&f.yuu_x top=&f.yuu_y time= 1 storage = yuu/yuu.png] 
;閉じた目を表示（閉じかけた目）
[image storage="yuu/yuu_eye03.png" layer=0 left=238 top=147 name="eye02" visible=true]
;閉じた目を表示（完全に閉じた目）
[image storage="yuu/yuu_eye02.png" layer=0 left=238 top=147 name="eye01" visible=true]
;アニメーション
[kanim name="eye01" keyframe="pachi01" time=4000 easing=ease count=infinite]
[kanim name="eye02" keyframe="pachi02" time=4000 easing=ease count=infinite]

移動アニメーション

移動は簡単にできるのですが、
今回は画像の反転も使用しました。
キャラのアニメーション自体も、目パチ同様アニメーションを使おうかと思ったのですが、
GIFアニメになっております。

;画像を反転して右への移動用アニメ
[keyframe name="anim01"]
[frame p=0%  opacity=1 rotateY="180deg" x="0"]
[frame p=95%  opacity=1 rotateY="180deg" x="-550"]
[frame p=100%  opacity=1 rotateY="180deg" x="-550"]
[endkeyframe]

;画面外に移動している座標を調整
[keyframe name="anim02"]
[frame p=95%  x="-1000"]
[frame p=100% x="-800"]
[endkeyframe]

;実際の移動
[image storage="anim/anim.gif" layer=0 left=-100 top=209 opacity=255 name="sinoanim" visible=true]
[kanim name="sinoanim" keyframe="anim01" time=10000 easing=ease]
[wait time=11000]
[kanim name="sinoanim" keyframe="anim02" time=10000 easing=ease]
[wait time=4000]

右へ行くためには、まず画像の反転『rotateY="180deg"』を行います。
そして、反転すると-方向が右になるので、xの位置もすべて反対にしないといけません。

;右への移動用アニメ
[keyframe name="anim03"]
[frame p=0%  x="300"]
[frame p=95% x="-500"]
[frame p=100% x="-500"]
[endkeyframe]

;実際の移動
[image storage="anim/anim.gif" layer=0 left=300 top=209 opacity=255 name="sinoanim02" visible=true]
[kanim name="sinoanim02" keyframe="anim03" time=10000 easing=ease]

今度は左へ行きますが、
右へ行った画像とは別の画像を表示させて右へと表示させています。
また反転させても良かったのですが、x座標の計算がややこしかったのです。

もうちょっといい感じにできたかなぁと思ったのですが、
脳内で移動を考えながら作るのが難しくて挫折しましたっ！

丸ごとダウンロード

下記に丸ごとアップしているので、
ダウンロードすると動きが分かりやすいです。

背景は購入したものを使用しており、プラグインも使用しておりますので、
ご使用はローカルに留めるようお願いいたします。
http://www.mediafire.com/file/012taulb9cmg593/higai.zip