Ren’PyではATLを使用してアニメーションを容易に記述できますが、トランジションと組み合わせようとすると一工夫必要になります。
まずRen’Pyにおいてトランジションとは何でしょう。以下のコードでは立ち絵 Aを表示されているトランジション前の場面から立ち絵 Bが表示されているトランジション後の場面へディゾルブで変化します。Ren’Pyにおいてトランジションとはこのようにトランジション前後の場面を何らかの効果によって繋げる物です。トランジションが作用するのは場面、正確にはレイヤー単位であり、画像単位で作用しているわけではないことに注意してください。
scene
show 立ち絵 A
"トランジション前"
show 立ち絵 B
with dissolve
"トランジション後"変わり種ではmoveトランジションのようにトランジション前後で同じタグの画像を移動させるものや、live2dでトランジション前後で別の動作をしている立ち絵を繋げる物もあります。
ではATLと組み合わせるとどうなるでしょうか。以下のコードを試してみます。望ましい動作は立ち絵が左から右へ移動しながらディゾルブすることですが、実際には静止したまま立ち絵 Aが消え、移動中の立ち絵Bが現れます。これは静止した立ち絵の場面とアニメーションを伴う立ち絵の場面間でトランジションが行われるためです。アニメーションしながらのトランジションはどうするのでしょう。
scene
show 立ち絵 A:
xalign 0.0
"トランジション前"
show 立ち絵 B:
linear 5.0 xalign 1.0
with dissolve
"トランジション後"方法1 トランジション前でも同じアニメーションをする
トランジション前でもアニメーションすれば滑らかに繋げられます。以下のように記述します。同じアニメーションを2回記述するので少し見づらくなりますが、ユーザー定義ステートメントを使用して省略できそうです。MultipleTransitionを使用すればトランジションのタイミングを任意でも出来ます。複数の画像を別々のタイミングでトランジションしたい場合は少し面倒ですが、画像を複数レイヤーに分け、辞書トランジションを使用してレイヤーごとに別のトランジションを行います。
show 立ち絵 A:
xalign 0.0
"トランジション前"
show 立ち絵 A:
xalign 0.0
linear 5.0 xalign 1.0
show 立ち絵 B:
xalign 0.0
linear 5.0 xalign 1.0
with dissolve
"トランジション後"方法2 アニメーション中にトランジションする画像を定義する
Ren’Pyとしては恐らくこちらが正式な記述方法になると思います。以下のようなコードになります。表示する画像を変数にしてある程度汎用性を持たせていますが、あらかじめ定義しないといけないので少し不便です。
transform animate_image(old, new):
contains:
old
xalign 0.0 alpha 1.0
linear 5 xalign 1.0 alpha 0.0
contains:
new
xalign 0. alpha 0.0
linear 5 xalign 1.0 alpha 1.0
scene
show 立ち絵 A:
xalign 0.0
"トランジション前"
show expression animate_image("t0 A", "t0 B") as t0
"トランジション後"
以下のような書き方でATL内でwith節も使えます。containsブロックに入れないと置き換え前の位置プロパティーが優先されるようで移動しません。また、この書き方だと置き換え前の位置を引き継がないので最初に初期位置を設定する必要があります。
transform animate_image(old, new):
contains:
old
parallel:
xalign 0.0
linear 5 xalign 1.0
parallel:
new with dissolve211223 追記
方法3 ATL中でトランジションする
よく考えると以下の方法であらかじめ定義しないでもATLとトランジションを併用できました。こういう書き方でもちゃんと動いたみたいですね。
show 立ち絵 A:
xalign 0.0
"トランジション前"
show 立ち絵:
parallel:
linear 5.0 xalign 1.0
parallel:
pause 2 #時間指定も出来る
"立ち絵 B" with dissolve #トランジションと変更後の画像を表示
show 立ち絵 B with None #画像名が変化しないので必要なら差し替える
"トランジション後"ただしこの方法で画像を変更すると名前は変化せず”立ち絵 A”のままで扱われます。なので画像属性と連携したサイドイメージの表示とかを利用していると例のように後で差し替える等の対策がいります。
show 立ち絵 A:
xalign 0.0
"トランジション前"
show 立ち絵:
parallel:
linear 5.0 xalign 1.0
parallel:
pause 2 #時間指定も出来る
"立ち絵 B" with dissolve #トランジションと変更後の画像を表示
show 立ち絵 B with None #画像名が変化しないので必要なら差し替える
"トランジション後"もしくは下記のように立ち絵 Bとして表示して最初は立ち絵Aにするとか、こっちの方がシンプルですね。
show 立ち絵 A:
xalign 0.0
"トランジション前"
show 立ち絵 B:
"立ち絵 A"
parallel:
xalign 0.0
linear 5.0 xalign 1.0
parallel:
pause 2 #時間指定も出来る
"立ち絵 B" with dissolve #トランジションと変更後の画像を表示
"トランジション後"
その他上手くいかなかった方法
画像定義時に以下のように同じタグの画像で置き換えるときのアニメーションをあらかじめ設定できます。しかし以前の画像のアニメーションが完了するまで次の画像のアニメーションは開始しないので、これではトランジションには向きません。
image 立ち絵 A:
"立ち絵 A"
on replaced: #同じタグで置き換えられるときの動作
alpha 1.0
linear 1.0 alpha 0
on replace: #同じタグを置き換えるときの動作
alpha 0.0
linear 1.0 alpha 1.0
image 立ち絵 B:
"立ち絵 B"
on replaced: #同じタグで置き換えられるときの動作
alpha 1.0
linear 1.0 alpha 0
on replace: #同じタグを置き換えるときの動作
alpha 0.0
linear 1.0 alpha 1.0
