アニメ編（その七）

戻る：アニメ編（その六）

目次

進む：アニメ編（その八）

基本テクニック：フェード part1

今回から三回に分けて、場面転換のテクニックであるフェードと、フェードを応用した演出手法を取り上げます。
まず今回は part1 としてフェードの原理と実装について説明します。

フェードとは何か

映像作品でフェード fadeというのはトランジション（場面転換）の手法のことで、以下の二つを意味しています。

フェードイン

fade-in 一色の状態から、徐々に映像に移行すること

フェードアウト

fade-out 映像から、徐々に一色の状態に移行すること

「一色の状態」は伝統的に黒を用いることが普通です。他の色を用いていけない理由もありませんが、通常のフェードとは異なるニュアンスを持たせて使うことになるでしょう。
たとえば白へのフェードアウトは「意識の消失」のニュアンスが出てしまいますし、赤や青など原色へのフェードアウトはタイトルバックやアイキャッチなどの用途に使うことが多く、シーンの演出に用いることは稀かもしれません。

フェードはいつ使うか

ごく常識的な使い方では、フェードはシーン（場面）やシークエンス（一連のシーン）の転換など、物語の流れがある程度変わる場面で用います。カットをつなぐ程度の細かい場所で使うことはしません。
なぜかというと、映像の間に挟まる一色の状態は時間経過を暗示するものだからです。つまり、前後のシーンが時間的に連続していない、ということを表現するためにわざわざフェードを用いるのですから、会話シーンの切り返し（登場人物を交互に映すカットの継ぎ目）程度の継ぎ目にフェードを使ったりするのはおかしいわけです。

カードワースでいえば・・・たとえば『ゴブリンの洞窟』だと、冒険者の宿のシーンと、次の洞窟の入口のシーン、この間のトランジションに使うくらいの感じですね。
洞窟内でエリア間の移動に使うのは、映像編集の常識からいえばやりすぎです。

もちろん、他の用途がないわけでもありません。特に白へのフェードアウト／フェードインは「目の前が真っ白になった」ことを表現できるので、たとえば暗闇から急に明るいところへ出たとか、フラッシュが炊かれたとか、何かが爆発して閃光が走ったとか、貧血で意識を失ったとか、白昼に幻想を見たとか・・・その種のシーンを効果的に演出することができます。
この場合はシーンを区切るトランジションというより、フェードアウト／フェードインを組み合わせて、ある種のカットインエフェクトとして用いることになるでしょう。

フェードの原理

エフェクトブースターでフェードを実現するには paintmode パラメータと alpha パラメータを用います。
これらのパラメータについては基礎編（その八）で説明しましたが、paintmode=3 を指定したセクションは alpha パラメータによって不透明度を指定することが出来ます。そして alpha の値は 0 ～ 255 の範囲を取り、0 であれば完全に透けて下の画像が見えてしまう状態、255 であれば透けずに普通の状態で表示されます。

つまり、既に表示されている画像 A の上に、徐々に alpha を増加させつつ別の画像 B の一時描画を行うことで、A から B に徐々に移行するようにすればフェードは実現できます。
先ほど説明したとおり、黒→画像がフェードイン、画像→黒がフェードアウトですから

フェードイン

黒一色の上に、画像を一時描画する

フェードアウト

画像の上に、黒一色を一時描画する

ようにするわけです。

フェードアウトの実装

まずはフェードアウトの例からお目にかけるとしましょう。
この JPY ファイルでは、おなじみ冒険者の宿から黒一色の画面にフェードアウトします。

  1: [init]
  2: backwidth=632
  3: backheight=420
  4: 
  5: [Mask_00]
  6: width=632
  7: height=420
  8: visible=0
  9: transparent=0
 10: paintmode=3
 11: alpha=51
 12: animation=3
 13: wait=200
 14: 
 15: [Mask_01]
 16: width=632
 17: height=420
 18: visible=0
 19: transparent=0
 20: paintmode=3
 21: alpha=102
 22: animation=3
 23: wait=200
 24: 
 25: [Mask_02]
 26: width=632
 27: height=420
 28: visible=0
 29: transparent=0
 30: paintmode=3
 31: alpha=153
 32: animation=3
 33: wait=200
 34: 
 35: [Mask_03]
 36: width=632
 37: height=420
 38: visible=0
 39: transparent=0
 40: paintmode=3
 41: alpha=204
 42: animation=3
 43: wait=200
 44: 
 45: [Mask_04]
 46: width=632
 47: height=420
 48: visible=1
 49: transparent=0
 50: paintmode=3
 51: alpha=255
 52: animation=3
 53: wait=200

これを実行すると、このようになります。

だいぶ荒い動きですが、今は説明のためにこれでご容赦ください。実用に足るレベルのものは後ほどお目にかけます。

解説：パラメータ

比較すると分かりますが、[Mask_00] ～ [Mask_04] までは alpha パラメータと visible パラメータ以外は同じ定義です。省略されたパラメータも含めて、その中身を説明しますと・・・

• これらのセクションには fileName パラメータも loadcache パラメータも指定されていません。つまり、表示内容は color パラメータで指定されたカラーセルという扱いになります
• color パラメータ自体も省略されていますので既定値の黒（$000000）が指定されたものとして扱われます*1。つまり、これらのセルは黒一色を表示（厳密には一時描画）することを指定しています。
• 画像が指定されていない場合は width パラメータと height パラメータを省略できません（いずれも 0 として扱われてしまいます）。ここでは画面全体で一時描写するために 632 * 420 を指定します。
• visible パラメータは最後の [Mask_04] だけが 1、他は 0 が指定されています。つまり一時描画後の通常描画フェイズでは [Mask_04] だけが背景として描画されます*2。詳しくは後述します。
• transparent パラメータに 0 が指定されているので、これらのセクションは透過色を使いません。
• paintmode パラメータには 3 が指定されており、セクションの描画に透過度が設定されることを指定します。
• alpha パラメータは 51 → 102 → 153 → 204 → 255 と増加します。これが「徐々に黒い画面になる」というフェイドアウトのキーとなる部分です（後述）。
• animation パラメータは 3 が指定されており、それぞれの一時描画がセクションの間だけ有効であることを意味しています。
• wait パラメータでは一律に 200（ミリ秒）が指定されています。

という具合です。
つまりこれらのセクションでは黒一色の画面を、α値を徐々に増加させながら一時描画する、という風に機能しているわけです。ここでは五段階で変化させているので 255 / 5 = 51 ずつ値が増えていきます。
alpha=0 のセクションは描写してもムダなので含まれていません。

解説：場面転換と一時描画

これはフェイドアウトに限らない一般的な話題ですが、エフェクトブースターによる一時描画の使われ方を、背景描画の観点から分類すると以下の二つに分けることが出来ます。

カットイン型

シーンの内部で使われ、一時描画の終了後に背景に影響を与えないもの

トランジション型

シーンとシーンの継ぎ目で使われ、一時描画の終了後に背景を変更するもの

本チュートリアルでのそれぞれの例を挙げますと、前々回まで扱った「親父横移動」アニメはカットイン型です。一方、前回の拡大縮小と、今回のフェードはトランジション型です。

カットイン型では JPY が背景に影響を与えないようにしなければいけません。
ですから、本チュートリアルのアニメ編（その一）およびアニメ編（その二）で示したように「副作用」が残らないような作り方をしなければならないわけです。

これに対してトランジション型では場面転換する目的で JPY を使うなので、むしろ副作用が残るようにしなければなりません（もちろん、望む形の副作用ですが）。
ですから、トランジション型においてはアニメ編（その二）で説明したのとは逆の解決法を必要とします。つまり

• 一時描画後に [init] セクションをそのまま表示させる（透過しない）
• 特定のセクションに visible=1 を指定して一時描画後にも表示させる

これらのいずれかの手段を用い、JPY 実行前と違う背景を表示するようにしなければならない、というわけです。

前述の JPY ファイルで一番最後の [Master_04] セクションに visible=1 を指定しているのは、まさにこの理由によります。
一時描画の最後のセクションはアニメーションの最終状態ですから、その描画内容をそのまま背景として表示させるのは処理の流れとして自然です。後で読み直した際にも分かりやすい、可読性の高い記述スタイルだといえるでしょう。

なお、アニメ編（その三）では副作用を抑制するための裏技として、JPY ファイルを 0*0 ピクセルのセルとして設定する、という方法を紹介しました。
この方法ですとカットイン型のエフェクトは作れますが、当然ながらトランジション型のエフェクトを作れません。
やっていけないということはありませんが、あまりスジのいい方法でもないので、本チュートリアルでは推奨しません。

検証：フレーム数による差異

前述のフェイドアウトでは不透明度を五段階で変化させていたため、かなり荒い動作でした。
これをもう少し細かくフレーム（コマ）を割り、なめらかにフェイドアウトさせることを試みます。

まず、フレーム数を倍の 10 、ウェイトは半分の 100 ミリ秒にしてみます。

JPYファイルを表示

  1: [init]
  2: backwidth=632
  3: backheight=420
  4: 
  5: [Mask_00]
  6: width=632
  7: height=420
  8: visible=0
  9: transparent=0
 10: paintmode=3
 11: alpha=25
 12: animation=3
 13: wait=100
 14: 
 15: [Mask_01]
 16: width=632
 17: height=420
 18: visible=0
 19: transparent=0
 20: paintmode=3
 21: alpha=51
 22: animation=3
 23: wait=100
 24: 
 25: [Mask_02]
 26: width=632
 27: height=420
 28: visible=0
 29: transparent=0
 30: paintmode=3
 31: alpha=76
 32: animation=3
 33: wait=100
 34: 
 35: [Mask_03]
 36: width=632
 37: height=420
 38: visible=0
 39: transparent=0
 40: paintmode=3
 41: alpha=102
 42: animation=3
 43: wait=100
 44: 
 45: [Mask_04]
 46: width=632
 47: height=420
 48: visible=0
 49: transparent=0
 50: paintmode=3
 51: alpha=127
 52: animation=3
 53: wait=100
 54: 
 55: [Mask_05]
 56: width=632
 57: height=420
 58: visible=0
 59: transparent=0
 60: paintmode=3
 61: alpha=153
 62: animation=3
 63: wait=100
 64: 
 65: [Mask_06]
 66: width=632
 67: height=420
 68: visible=0
 69: transparent=0
 70: paintmode=3
 71: alpha=178
 72: animation=3
 73: wait=100
 74: 
 75: [Mask_07]
 76: width=632
 77: height=420
 78: visible=0
 79: transparent=0
 80: paintmode=3
 81: alpha=204
 82: animation=3
 83: wait=100
 84: 
 85: [Mask_08]
 86: width=632
 87: height=420
 88: visible=0
 89: transparent=0
 90: paintmode=3
 91: alpha=229
 92: animation=3
 93: wait=100
 94: 
 95: [Mask_09]
 96: width=632
 97: height=420
 98: visible=1
 99: transparent=0
100: paintmode=3
101: alpha=255
102: animation=3
103: wait=100

まだちょっとチラチラしますね。
フレーム数をさらに倍の 20 にします。ウェイトはさらに半分の 50 ミリ秒です。

JPYファイルを表示

  1: [init]
  2: backwidth=632
  3: backheight=420
  4: 
  5: [Mask_00]
  6: width=632
  7: height=420
  8: visible=0
  9: transparent=0
 10: paintmode=3
 11: alpha=12
 12: animation=3
 13: wait=50
 14: 
 15: [Mask_01]
 16: width=632
 17: height=420
 18: visible=0
 19: transparent=0
 20: paintmode=3
 21: alpha=25
 22: animation=3
 23: wait=50
 24: 
 25: [Mask_02]
 26: width=632
 27: height=420
 28: visible=0
 29: transparent=0
 30: paintmode=3
 31: alpha=38
 32: animation=3
 33: wait=50
 34: 
 35: [Mask_03]
 36: width=632
 37: height=420
 38: visible=0
 39: transparent=0
 40: paintmode=3
 41: alpha=51
 42: animation=3
 43: wait=50
 44: 
 45: [Mask_04]
 46: width=632
 47: height=420
 48: visible=0
 49: transparent=0
 50: paintmode=3
 51: alpha=63
 52: animation=3
 53: wait=50
 54: 
 55: [Mask_05]
 56: width=632
 57: height=420
 58: visible=0
 59: transparent=0
 60: paintmode=3
 61: alpha=76
 62: animation=3
 63: wait=50
 64: 
 65: [Mask_06]
 66: width=632
 67: height=420
 68: visible=0
 69: transparent=0
 70: paintmode=3
 71: alpha=89
 72: animation=3
 73: wait=50
 74: 
 75: [Mask_07]
 76: width=632
 77: height=420
 78: visible=0
 79: transparent=0
 80: paintmode=3
 81: alpha=102
 82: animation=3
 83: wait=50
 84: 
 85: [Mask_08]
 86: width=632
 87: height=420
 88: visible=0
 89: transparent=0
 90: paintmode=3
 91: alpha=114
 92: animation=3
 93: wait=50
 94: 
 95: [Mask_09]
 96: width=632
 97: height=420
 98: visible=0
 99: transparent=0
100: paintmode=3
101: alpha=127
102: animation=3
103: wait=50
104: 
105: [Mask_10]
106: width=632
107: height=420
108: visible=0
109: transparent=0
110: paintmode=3
111: alpha=140
112: animation=3
113: wait=50
114: 
115: [Mask_11]
116: width=632
117: height=420
118: visible=0
119: transparent=0
120: paintmode=3
121: alpha=153
122: animation=3
123: wait=50
124: 
125: [Mask_12]
126: width=632
127: height=420
128: visible=0
129: transparent=0
130: paintmode=3
131: alpha=165
132: animation=3
133: wait=50
134: 
135: [Mask_13]
136: width=632
137: height=420
138: visible=0
139: transparent=0
140: paintmode=3
141: alpha=178
142: animation=3
143: wait=50
144: 
145: [Mask_14]
146: width=632
147: height=420
148: visible=0
149: transparent=0
150: paintmode=3
151: alpha=191
152: animation=3
153: wait=50
154: 
155: [Mask_15]
156: width=632
157: height=420
158: visible=0
159: transparent=0
160: paintmode=3
161: alpha=204
162: animation=3
163: wait=50
164: 
165: [Mask_16]
166: width=632
167: height=420
168: visible=0
169: transparent=0
170: paintmode=3
171: alpha=216
172: animation=3
173: wait=50
174: 
175: [Mask_17]
176: width=632
177: height=420
178: visible=0
179: transparent=0
180: paintmode=3
181: alpha=229
182: animation=3
183: wait=50
184: 
185: [Mask_18]
186: width=632
187: height=420
188: visible=0
189: transparent=0
190: paintmode=3
191: alpha=242
192: animation=3
193: wait=50
194: 
195: [Mask_19]
196: width=632
197: height=420
198: visible=1
199: transparent=0
200: paintmode=3
201: alpha=255
202: animation=3
203: wait=50

かなり自然な表現になりました。これくらいならば実用に供するといえるでしょう。

なお、これらの JPY はいずれも 1 秒かけてフェードアウトしていますが、これは絶対の尺度ではなく、比較のために統一しているだけです。演出の内容によっては、もっと短かったり、長かったり、適切な時間を選ぶ必要があるでしょう。
たとえば「突然爆発があって目の前が真っ白になった」という状況を表現するため白にフェードアウトするなら、おそらく 1 秒は長すぎるでしょう。それに伴い、必要なフレーム数やウェイト時間もおのずと変わるはずです。
どうであれば適切かは一概に言えないので、いろいろ試してシーンに適する表現を見つけてください。

まとめとおさらい

説明が長くなりましたので、今回はいったんここまでとし、フェードインは次回アニメ編（その八）で説明します。

今回のポイントは下記の通りです。

• フェードは場面転換に用いる
• フェードは alpha パラメータの変化を用いて一時描画する
• フェードアウトするには元の画像に黒一色のセクションを逐次重ねる
• フェードは場面転換（トランジション）型なので副作用が残るようにする
• フレーム数／ウェイト時間によって見た目がかなり変わる

戻る：アニメ編（その六）

目次

進む：アニメ編（その八）

---

*1 ヘルプファイルでは白（$ffffff）が既定値とされていますが誤りで、実際には黒です
*2 厳密には [init] セクションの上に [Mask_04] セクションが重ねられたものが背景として描画されます