Tweenアニメーション


投稿日:2015年6月10日 | 最終更新日:2024年5月15日

キャラクターやスプライトなどのグラフィックオブジェクトに、Tweenアニメーションをさせます。
ある点からある点に移動したり、ある色からある色に変化したりといった簡易的なアニメーションが可能です。
宴のTweenアニメーションはiTweenというものを使っています。詳細は、iTweenの公式サイトも参考にしてください。

サンプル

リファレンス

Command 説明 Arg1 Arg2 Arg3 Arg4 Arg5 Arg6 WaitType
Tween 表示オブジェクトをTweenアニメーションさせる エフェクト対象の名前 TweenType Tweenパラメーター easeType loopType ウェイトタイプ

それぞれの詳細は後述。

エフェクト対象の名前(Arg1)

Tweenアニメーションをさせるオブジェクトの名前、またはキャラ名やスプライト名を記述してください。
背景の場合は、スプライト名は暗黙的に「BG」となっているため、それを指定すると、背景スプライトに対してのTweenを設定可能です。
Tweenでは、カメラやメッセージウィンドウを動かすことはできませんが、Shakeコマンドで、カメラやメッセージウィンドウを揺らすことはできますのでそちらも参考にしてください。

レイヤーを対象にしたTween

Arg1にレイヤー名を指定することで、レイヤー全体に対してもTweenコマンドが使用できます。
ただし、スケール値に対しての操作は、指定する値を通常の1/100にする必要があります。
宴のレイヤーは、UnityのUI Canvasの仕組みを使ってるのですが、そのスケール値は基本的には1/100になるためです。

TweenType(Arg2)、Tweenパラメーター(Arg3)

TweenTypeは「どうアニメーションさせるか」の設定です。

Tweenパラメーターは、実際に動かす移動値や時間の値です。TweenTypeによって使用可能なパラメーターが違います。
パラメーター名=値
という形で記述し、各パラメーターの間はスペースで区切る必要があります。

例) x=200
例) time=3 alpha=0

カテゴリ TweenType(Arg2) 説明 Tweenパラメーター(Arg3)
移動 MoveTo 現在の座標から、指定した座標へ移動 time,delay,x,y,z,speed,islocal
MoveFrom 指定した座標から、現在の座標へ移動 time,delay,x,y,z,speed,islocal
MoveBy 現在の座標から、指定したぶん移動 time,delay,x,y,z,speed
MoveAdd MoveByの効果をほかのTweenと同時に使える time,delay,x,y,z,speed
PunchPosition 指定座標ぶんパンチを受けたように動いた後、元にの位置に戻る time,delay,x,y,z
ShakePosition 指定座標ぶん揺れ動いた後、元にの位置に戻る。Shakeコマンドと同じ time,delay,x,y,z,islocal
回転 RotateTo 現在の角度から、指定した角度へ回転する time,delay,x,y,z,speed,islocal
RotateFrom 指定した角度から、現在の角度へ回転する time,delay,x,y,z,speed,islocal
RotateBy 現在の角度から、指定したぶん回転する time,delay,x,y,z,speed
RotateAdd RotateByの効果をほかのTweenと同時に使える time,delay,x,y,z,speed
PunchRotation 指定角度ぶんパンチを受けたように回転した後、元にの角度に戻る time,delay,x,y,z
ShakeRotation 指定角度ぶんブレるように回転した後、元にの角度に戻る time,delay,x,y,z
拡大縮小 ScaleTo 現在のスケールから、指定したスケール値へ拡大縮小する time,delay,x,y,z,speed
ScaleFrom 指定したスケールから、現在のスケールへ拡大縮小する time,delay,x,y,z,speed
ScaleBy 現在のスケールから、指定したぶん拡大縮小する time,delay,x,y,z,speed
ScaleAdd ScaleByの効果をほかのTweenと同時に使える time,delay,x,y,z,speed
PunchScale 指定スケール値ぶんパンチを受けたように拡大縮小した後、元にのスケール値に戻る time,delay,x,y,z
ShakeScale 指定スケール値ぶんブレるように拡大縮小した後、元にのスケール値に戻る time,delay,x,y,z
ColorTo 現在の色から、指定した色に変化する time,delay,color,alpha,r,g,b,a
ColorFrom 指定した色から、現在の色に変化する time,delay,color,alpha,r,g,b,a

Tweenパラメーター(Arg3)の詳細

パラメーター名 説明
time アニメーションにかける秒数。未記入の場合は1秒
time=0にすると即座にそのエフェクトがかかるので、オブジェクトの色やスケール値指定する目的でも使用可能です。
speed timeを使わずに、指定したスピードでアニメーションをさせる
delay アニメーションが始まるまでの遅延時間。未記入の場合は0秒
x,y,z TweenTypeによって使い方が異なるが、アニメーションの量
islocal ローカル座標系か、グローバル座標系か。デフォルトはグローバル座標系なので注意。レイヤーからの相対座標にする場合は、islocal=trueとすること。
color 色の値。カラー値の項目と書き方はおなじ
alpha αの値。0.0~1.0で指定
r,g,b,a カラーの値。red値、green値、blue値、alpha値。0.0~1.0で指定

EaseType(Arg4)

アニメーションの変化の仕方です。「最初は早くだんだん遅く」のようにフワっとした動きをつけたり、「いったん下がってから一気に進む」「いっきに進んで、反動で戻る」のような動きをつけられます。
以下のいずれかを記述。

easeInQuad,easeOutQuad,easeInOutQuad,easeInCubic,easeOutCubic,easeInOutCubic,easeInQuart,easeOutQuart,easeInOutQuart,easeInQuint,easeOutQuint,easeInOutQuint,
easeInSine,easeOutSine,easeInOutSine,easeInExpo,easeOutExpo,easeInOutExpo,easeInCirc,easeOutCirc,easeInOutCirc,easeInBounce,easeOutBounce,easeInOutBounce,
easeInBack,easeOutBack,easeInOutBack,easeInElastic,easeOutElastic,easeInOutElastic,linear,spring

LoopType(Arg5)

アニメーションのループ方法

LoopType 説明
loop アニメーションをループさせる。
loop=3のように記述することで、ループ回数を指定できる。
loop=0とすると無限ループ
pingPong アニメーションをピンポンループさせる。
アニメーション再生→逆再生→再生…というループをする。
pingPong=6のように記述することで、再生回数を指定できる。
再生または、逆再生で一回に数える。(再生と逆再生セットで一回ではないので注意)
pingPong=0とすることで無限ループ

マクロを使ってより書きやすく

マクロを使うと、似たようなTweenパターンを簡略化して、自分用の新しく作ったTweenコマンドのように使うことができます。

Tweenマクロサンプル

Tweenマクロを使うサンプル