ティラノスクリプト︰keyframe を使ってカードめくりのアニメーションを作る
今日はティラノスクリプトのちょいネタです。
ティラノスクリプトでは keyframe, frame, kanim タグを使って
複雑なアニメーションもカンタンに組むことができます。
今回は「ウラ向けのカードをめくってオモテ面を見せる」といった
アニメーションを組んでみたいと思います。
めっちゃカンタンなのでチャレンジしてみてねヾ(*´∀`*)ノ
カード画像を用意する
用意する画像はオモテとウラのカード2枚のみです。
2枚のカードは同じサイズで作成しましょう(今回は 160×220 px で作成)。
キーフレームアニメ定義
キーフレームアニメの中身を作っていきます。
; ▼カードを閉じるキーフレームアニメ定義
[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 左右の反復運動などなど)を作って
ストックしておくと良いかもしれません。
ということで今回はこれにて (`・ω・´)ゞ< おつかれっした!
- 関連記事
-
- ティラノスクリプト:クリック待ちグリフの設定方法 (2018/10/19)
- ティラノスクリプト:システム画面の《戻るボタン》の配置場所を変えるには (2018/10/05)
- ティラノスクリプト:任意のレイヤを塗りつぶすマクロ (2018/08/28)
- ティラノスクリプト:セーブした時間をゼロ埋め表示にする (2018/08/22)
- ティラノスクリプト:プラグインを作ってみよう (2018/08/18)
- ティラノスクリプト:ptextで一部の文字だけに装飾をつける方法 (2018/03/21)
- ティラノスクリプト:BGMや効果音の管理に連想配列をつかう (2017/12/09)
- ティラノスクリプト:レイヤ指定に変数を使用するときの注意 (2017/11/17)
- ティラノスクリプト︰keyframe を使ってカードめくりのアニメーションを作る (2017/03/17)