恋愛シミュレーションを作ろう！

Part 4: 背景フェード演出と効果音


Godot Engine バージョン4.4

このパートでは、背景画像が切り替わる際にスムーズなフェード効果を加える方法と、効果音（SE）を一元管理する方法を学びます。 没入感を高め、よりリッチな演出を実現するためのテクニックです。
*Globalは今回は特に使っていないのでなくても大丈夫です。



🎬 1. 背景フェードの仕組み

背景画像をパッと切り替えるだけでは味気ないですよね？ ColorRect と Tween を使えば、スムーズにフェードイン・アウトできます。


🔧 Fadeシーンの作成

新しい ColorRect ノードを作成
名前：Fade
サイズ：画面サイズと同じに設定（例：1280x720）
色：白または黒（Color(1,1,1,0) ※透明スタート）
Visible をオフ（非表示）
以下のスクリプトを Fade にアタッチ： 
extends ColorRect

func start_fade(duration: float, callback: Callable):
	show()
	var tween = get_tree().create_tween()
	tween.tween_property(self, "modulate", Color(1, 1, 1, 1), duration)
	tween.tween_callback(callback)
	tween.tween_property(self, "modulate", Color(1, 1, 1, 0), duration)
	tween.tween_callback(hide)

✅ ポイント

modulate のアルファ値を変更することで透明度を制御
callback に背景切り替え処理を渡すことで、フェード中に背景が切り替わる
アニメと演出が自然に融合！


🧠 2. シナリオ内での使い方

load_scenario() などで、背景が変更される前に以下のように使います：
if background.texture != scenario.background:
	character_speak_panel.hide()
	Fade.start_fade(0.5, change_background.bind(scenario.background))
	await get_tree().create_timer(1.0).timeout


🔊 3. 効果音（SE）の管理

効果音もバラバラに AudioStreamPlayer2D を使うより、1か所で統一的に管理すると便利です。
新しいシーンを作成して、AudioStreamPlayer2Dを追加してSeと名前を変えます。
Se.tscnとして保存します。
Project → Project Settings → Globals → Autoload で Se.gd を Se という名前で登録




使用例

選択肢ボタンが押されたとき：


Se.play()

#　サウンドを変更したい場合は下記のように変更します。
Se..stream = load("…変更用のPath")
Se.play()
クリック音、キャンセル音、決定音などもここで一元管理！


📘 このパートで学んだこと

  • ColorRect + Tween を使ったフェード処理
  • Callable でフェード中の処理を挿入
  • 効果音を一元管理し、再生処理をシンプルに
  • 見た目と音の演出が加わることで、ユーザー体験がワンランクアップ！
ゴ

作成者

ゴドチュー

最終更新日: 2025/06/19 06:38

コメント