実は僕、Flashなどではお馴染みのTweenアニメーションって
全然つかったことなかったのです……
で、こないだの4月バカのときに初めて使ってみて、
「やべー便利すぎるー!ツクールでも使いてー!」という衝動に。
ちょっとググってみたら外人さんが作ったやつとかもあったんですが、
僕の求めてるものとはちょっと違ったので、自分でつくってみました。
動機的にちょっとArctic.jsっぽいです。
使い方
こんな感じ。
「60フレーム(1秒間)かけて、X座標64、Y座標128に移動する」アニメーションです。
# 【補足】 # object : 動かしたいもの(SpriteとかWindowとか) # アニメーションの準備 animation = HZM::Tween::Animation.new(object, { # 必須設定(省略しても勝手に設定して動きますが……) :time => 60, # アニメーション時間(フレーム数。60フレーム=1秒) :transition => :ease_in_quad, # 動作方法。詳細は後述。 # ここから先は変更するものを設定 :x => 64, # X座標を64へ :y => 128, # Y座標を128へ }) # アニメーションの開始 animation.play
「:transition」の部分は毎回のフレームに移動させる量を計算するメソッドを指定する部分です。
要するに計算式を設定する部分です。
この辺りのサイト様を参考にしていくつか用意してあります↓↓↓
- :linear
- :ease_in_quad
- :ease_out_quad
- :ease_in_out_quad
- :ease_in_cubic
- :ease_out_cubic
- :ease_in_out_cubic
- :ease_in_quart
- :ease_out_quart
- :ease_in_out_quart
- :ease_in_quint
- :ease_out_quint
- :ease_in_out_quint
- :ease_in_sine
- :ease_out_sine
- :ease_in_out_sine
- :ease_in_expo
- :ease_out_expo
- :ease_in_out_expo
- :ease_in_circ
- :ease_out_circ
- :ease_in_out_circ
上の以外を使いたい場合は、HZM_VXA::Tween::Transitionの中に
新しくメソッドを増やすことで追加できます。
また、例ではx座標とy座標を指定していますが、別にほかのも指定できます。
「○○.hoge = 数値」で設定できるものなら、「:hoge => 数値」でOK。
ただし、計算結果を強制的に整数にしてしまっているので、
小数の結果が欲しい場合はうまく動かないです。
ついでに別にSpriteとかWindowじゃなくても、何でも使えます。
Spriteに限定せず何にでも使えるやつが欲しかったので自分でつくったのです。
まぁ、通常用途ではあんまり意味ないかもしれませんが。。。僕には必要。
わかりにくいから実際に試したい
実用性ゼロのサンプル。
メニューを開くときにアニメーションします。
# メニュー画面を開いたときにうぃんうぃんするスクリプト class Scene_Menu < Scene_MenuBase ANIMATION_TIME = 15 #----------------------------------------------------------------------------- # ● 開始処理 #----------------------------------------------------------------------------- alias hzm_vxa_tween_sample_start start def start hzm_vxa_tween_sample_start unless Window_MenuCommand.last_command_symbol # 各アニメーションを設定 anim_command = HZM_VXA::Tween::Animation.new(@command_window, { :time => ANIMATION_TIME, :transition => :ease_out_quad, :x => @command_window.x, :y => @command_window.y, }) anim_gold = HZM_VXA::Tween::Animation.new(@gold_window, { :time => ANIMATION_TIME, :transition => :ease_out_quad, :x => @gold_window.x, :y => @gold_window.y, }) anim_status = HZM_VXA::Tween::Animation.new(@status_window, { :time => ANIMATION_TIME, :transition => :ease_out_quad, :x => @status_window.x, :y => @status_window.y, }) # 初期値を指定 @command_window.x = 0 - @command_window.width @command_window.y = 0 - @command_window.width @gold_window.x = 0 - @gold_window.width @gold_window.y = Graphics.height + @gold_window.width @status_window.x = Graphics.width # アニメーション開始 anim_command.play anim_gold.play anim_status.play end end end class Window_MenuCommand < Window_Command #----------------------------------------------------------------------------- # ● コマンド選択位置の取得(クラスメソッド)(独自) #----------------------------------------------------------------------------- def self.last_command_symbol @@last_command_symbol end end
うわー、うぜー(