読者です 読者をやめる 読者になる 読者になる

鳥小屋.txt

ゲーム作ったり、Web的なことしたり、ぐだぐだしたりしますねヽ(・x・)ノ

VXAce(RGSS3)でTweenアニメーションするスクリプトつくった

ツクール RGSS RGSS3


実は僕、Flashなどではお馴染みのTweenアニメーションって
全然つかったことなかったのです……
で、こないだの4月バカのときに初めて使ってみて、
「やべー便利すぎるー!ツクールでも使いてー!」という衝動に。

ちょっとググってみたら外人さんが作ったやつとかもあったんですが、
僕の求めてるものとはちょっと違ったので、自分でつくってみました。
動機的にちょっとArctic.jsっぽいです。

スクリプト

gistにおいてあります 【Tweenアニメーションさん for RGSS3

使い方

こんな感じ。
「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


うわー、うぜー(