アニメ編（その八）

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

目次

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

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

今回はフェードインを取り上げます。
意味的にはフェードアウトと逆のことをしているだけですが、実装上はフェードアウトにはない工夫が必要な場合もあります。

原理と実装

フェードアウトが背景の上に重ねた黒の透過度を操作するのに対し、フェードインは黒の上に重ねた背景画像の透過度を操作する。基本的にはこの違いだけです。

ただし、背景画像が一枚絵であるとは限りません。
たとえば本チュートリアルで頻繁に使ってきたサンプルでは、地図の画像 MapOfWirth.bmp と冒険者の宿の画像 AdventurersInn.bmp の二枚を組み合わせて背景を構成していますから、この二枚を同時になんとかしなければなりません。
まあ、ペイントツールを使って合成した一枚絵を作ってしまってもいいのですが、それをやっていると際限なく画像の枚数が増え、シナリオの容量も増えてしまいますし管理も大変です。

その点、CardWirth の背景描写では、複数の画像を組み合わせて一枚の画像であるかのように扱う方法があります。
それはもちろんエフェクトブースター、JPY ファイルの機能です。
本チュートリアルの基礎編でずっと見てきたように、画像をセルのように組み合わせて背景画像を定義することができ、しかもそれは JPY ファイルから呼び出して使うことが可能なのです。

実装１

まず、背景画像（地図＋冒険者の宿）を JPY ファイルで定義します。

  1: [init]
  2: fileName=MapOfWirth.bmp
  3: dirtype=2
  4: 
  5: [冒険者の宿]
  6: fileName=AdventurersInn.bmp
  7: dirtype=2
  8: position=116,15
  9: transparent=0

次に、この JPY ファイルを使ってフェイドを実装します。

  1: [init]
  2: 
  3: [Mask_00]
  4: fileName=01_800.jpy1
  5: savecache=1
  6: visible=0
  7: transparent=0
  8: paintmode=3
  9: alpha=51
 10: animation=3
 11: wait=200
 12: 
 13: [Mask_01]
 14: loadcache=1
 15: visible=0
 16: transparent=0
 17: paintmode=3
 18: alpha=102
 19: animation=3
 20: wait=200
 21: 
 22: [Mask_02]
 23: loadcache=1
 24: visible=0
 25: transparent=0
 26: paintmode=3
 27: alpha=153
 28: animation=3
 29: wait=200
 30: 
 31: [Mask_03]
 32: loadcache=1
 33: visible=0
 34: transparent=0
 35: paintmode=3
 36: alpha=204
 37: animation=3
 38: wait=200
 39: 
 40: [Mask_04]
 41: loadcache=1
 42: visible=1
 43: transparent=0
 44: paintmode=3
 45: alpha=255
 46: animation=3
 47: wait=200

[Mask_00] の fileName パラメータ（4 行目）は、実際に保存したファイル名によって変わります。これを savecache パラメータを使ってキャッシュに保存し、[Mask_01] ～ [Mask_04] セクションでは loadcache パラメータを使って描画します。
それ以外は前回紹介したフェイドアウトと同じです。

これを実行しますが、コンテントツリーは今までと少し変わります。

[image:801]

表示する順番が黒→画像となるので、先に背景変更コンテントで黒一色の画面を表示しておきます。状況を確認しやすくするために、その後に 1.0 秒の時間経過を経由し、先ほどの JPY ファイルを用いてフェイドインを一時描画します。
では、これを表示させてみましょう。

フレーム割りが荒いので動作になめらかさはありませんが、ちゃんとフェードインすることはおわかりでしょう。あとは前回やったのと同様、適切なフレーム数とウェイト時間を設定するだけです。

実装２

前回のフェードアウトの動作を逆転させる形でのフェードインを実現することも不可能ではありません。
つまり、あらかじめ地図＋冒険者の宿＋黒マスクを描画した状態で一時描画をはじめ、地図＋冒険者の宿は表示し続けたまま黒マスクの不透明度を徐々に下げていく方法です。

  1: [init]
  2: 
  3: [地図]
  4: fileName=MapOfWirth.bmp
  5: dirtype=2
  6: visible=1
  7: transparent=0
  8: animation=1
  9: wait=0
 10: 
 11: [冒険者の宿]
 12: fileName=AdventurersInn.bmp
 13: dirtype=2
 14: visible=1
 15: position=116,15
 16: transparent=0
 17: animation=1
 18: wait=0
 19: 
 20: [Mask_00]
 21: width=632
 22: height=420
 23: savecache=1
 24: visible=0
 25: transparent=0
 26: paintmode=3
 27: alpha=255
 28: animation=3
 29: wait=200
 30: 
 31: [Mask_01]
 32: loadcache=1
 33: visible=0
 34: transparent=0
 35: paintmode=3
 36: alpha=204
 37: animation=3
 38: wait=200
 39: 
 40: [Mask_02]
 41: loadcache=1
 42: visible=0
 43: transparent=0
 44: paintmode=3
 45: alpha=153
 46: animation=3
 47: wait=200
 48: 
 49: [Mask_03]
 50: loadcache=1
 51: visible=0
 52: transparent=0
 53: paintmode=3
 54: alpha=102
 55: animation=3
 56: wait=200
 57: 
 58: [Mask_04]
 59: loadcache=1
 60: visible=0
 61: transparent=0
 62: paintmode=3
 63: alpha=51
 64: animation=3
 65: wait=200

[Mask_00] の前に二つのセクションが挿入されています（11 ～ 30 行目）が、これらのセクションではいずれも visible=1 と animation=1 が指定されていることに注目して下さい。
つまりこの二つのセクションは

• animation=1 によって一時描画の間はずっと表示され続ける
• visible=1 によって一時描画の後も描画される

というわけです。その上で [Mask_00] ～ [Mask_04] セクションではこれまでと逆に alpha パラメータが 255 → 204 → 153 → 102 → 51 と減少することで、画像を覆っているマスクの黒を薄くしてきます。

前回同様、フレームをさらに細かく割ってみましょう。
全 20 フレーム、ウェイト時間を各 50 ミリ秒とします。

JPYソースを表示

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

これを表示してみますと・・・

いちおう正常に動作しているようです。
なぜ「いちおう」なのかと言いますと、タイミングによってはフェードインする前に一瞬、ちらっと画像（地図＋宿）が見えてしまうことがあるからなのです。

これは前述の処理の内容を全く変えることなく、ただ繰り返して実行しているうち、数回に一回程度の割合でこんな見え方をすることがあるのです。
理由はよく分かりません・・・ PC の処理能力の問題なのか、それとも画面をリフレッシュするタイミングとの兼ね合いなのか、幾つか可能性は考えられますが、なんにしろ俄かには防ぐ方法が見当たらないことは事実です。

ですから実装２のタイプ、マスクを徐々に薄くするスタイルについては「理論上は可能だが、実施すると予期しない不具合が起きることがある」といわざるを得ないのが現状です。

まとめとおさらい

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

• フェードインは黒画面に背景画像を載せるようにする
• 背景画像が一枚絵でない場合、定義済みの JPY ファイルを読み込む方法がある
• 背景画像上の黒マスクを徐々に薄くする方法も理論上は可能だが、フェードイン前に画像のちら見せ現象が起きることがある

次回はクロスフェード、画像からフェードアウトしつつ画像に直接フェードインする手法について説明します。

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

目次

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