空想曲線

吉里吉里2/KAG3でのゲーム制作に使える小ネタ置き場。ゲーム用素材も置いてます。

ティラノスクリプト︰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 左右の反復運動などなど)を作ってストックしておくと良いかもしれません。

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

現在のページ

Category

Link

Comment

Mailform

Author

Twitter