ティラノスクリプト︰keyframe を使ってカードめくりのアニメーションを作る

今日はティラノスクリプトのちょいネタです。

ティラノスクリプトでは keyframe, frame, kanim タグを使って
複雑なアニメーションもカンタンに組むことができます。

今回は「ウラ向けのカードをめくってオモテ面を見せる」といった
アニメーションを組んでみたいと思います。
めっちゃカンタンなのでチャレンジしてみてねヾ(*´∀`*)ノ


カード画像を用意する


用意する画像はオモテとウラのカード2枚のみです。
2枚のカードは同じサイズで作成しましょう(今回は 160×220 px で作成)。


card_back card_open


キーフレームアニメ定義


キーフレームアニメの中身を作っていきます。


; ▼カードを閉じるキーフレームアニメ定義
[keyframe name="card_close"]
[frame p="0%" rotateY="0"]
[frame p="100%" rotateY="90deg"]
[endkeyframe]

; ▼カードを開くキーフレームアニメ定義
[keyframe name="card_open"]
[frame p="0%" rotateY="90deg"]
[frame p="100%" rotateY="0" opacity=255]
[endkeyframe]


card_close の方では画像を90度Y軸回転させています。
card_open の方では90度Y軸回転してある画像を元に戻します。

この2つを組み合わせることでカードをめくっているように見せています。
実際のカードのように180度回転しているわけではないので注意です。


マクロをつくる


さっきのキーフレームアニメを組み合わせたものをマクロ化します。
基本的な設定しか書いてないので、お好みでカスタムしてください。


; ▼カードをめくるマクロ
[macro name="anim_card_open"]
; カードを閉じるキーフレームアニメを実行
[kanim keyframe="card_close" layer="0" name="turn1" time="300" easing="ease-in"]
[wait time="300"]
; 表面のカード画像を読み込ませているレイヤを可視に
[layopt layer="1" visible="true"]
; カードを開くキーフレームアニメを実行
[kanim keyframe="card_open" layer="1" name="turn2" time="300" easing="ease-out"]
[wait time="300"]
[freeimage layer="0"]
[endmacro ]


スクリプトを書く


*test
; ▼カードの裏面をレイヤ0に読み込ませる
[image storage="card_back.png" top="300" left="300" layer="0" name="turn1" visible="true"]

; ▼カードの表面をレイヤ1に読み込ませる(visible=falseなので画面上では見えていない)
[image storage="card_open.png'" top="380" left="300" layer="1" name="turn2" visible="false"]

; ▼カードをめくる
[anim_card_open ]


keyframe で定義したアニメーションは他にも使い回すことができるので、
基本的な動き(X,Y,Z軸回転、ズーム、上下 or 左右の反復運動などなど)を作って
ストックしておくと良いかもしれません。

ということで今回はこれにて (`・ω・´)ゞ< おつかれっした!

関連記事
Posted byこ・ぱんだ

Comments 0

There are no comments yet.

Leave a reply