🎬 Component: Fade In / Fade Out

The FadeInOut component allows you to create smooth opacity transitions on any object in the engine (sprites, images, UI, backgrounds, etc.). It is ideal for entrance/exit animations, blinking effects, and progressive appearance or disappearance.

⚙️ Properties

• fadeIn → Gradually appears (opacity 0 → 1).
• fadeOut → Gradually disappears (opacity 1 → 0).
• duration → Total transition time (in seconds).
• loop → If enabled, the effect repeats (fade in → fade out → fade in ...).

🎮 Usage in the Editor

In the inspector panel, once you add the FadeInOut component, the following controls appear:

• Fade In: enables the appearance animation.
• Fade Out: enables the disappearance animation.
• Duration: total animation time.
• Loop: repeats the effect indefinitely (only meaningful when both Fade In and Fade Out are enabled).

🧩 Internal Operation

The component automatically manages the object’s opacity between 0 and 1. Internally it keeps a state (in, out or done) that determines the current phase:

// Internal Fade States
"in"   → increasing opacity (fade in)
"out"  → decreasing opacity (fade out)
"done" → transition completed

When loop is enabled, the component automatically alternates between the "in" and "out" states.

💡 Configuration Examples

1️⃣ Simple Fade In

{
  "type": "FadeInOut",
  "fadeIn": true,
  "fadeOut": false,
  "duration": 2,
  "loop": false
}

The object gradually appears over 2 seconds and remains visible.

2️⃣ Simple Fade Out

{
  "type": "FadeInOut",
  "fadeIn": false,
  "fadeOut": true,
  "duration": 1.5,
  "loop": false
}

The object gradually disappears in 1.5 seconds and stays invisible.

3️⃣ Fade In + Fade Out (one-shot)

{
  "type": "FadeInOut",
  "fadeIn": true,
  "fadeOut": true,
  "duration": 2,
  "loop": false
}

The object fades in and then fades out once.

4️⃣ Fade In + Fade Out with Loop

{
  "type": "FadeInOut",
  "fadeIn": true,
  "fadeOut": true,
  "duration": 1.5,
  "loop": true
}

The object continuously alternates between appearing and disappearing, creating a pulse/breathing effect.

🧠 Script Examples

Here are practical script examples that use the FadeInOut component to create dynamic in-game effects.

🔹 Fade In a logo at scene start

// Script: fade_logo.js
function Start(obj) {
  obj.opacity = 0;
  addComponent(obj, createFadeInOut(true, false, 3, false));
}

Creates a smooth 3-second intro fade for logos or splash screens.

🔹 Make an object fade out after a delay

// Script: fade_remove.js
function Start(obj) {
  wait(2, () => { // wait 2 seconds
    addComponent(obj, createFadeInOut(false, true, 1.5, false));
  });
}

The object stays visible for 2 seconds and then fades out.

🔹 Button or pickup blinking effect

// Script: pulse_button.js
function Start(obj) {
  addComponent(obj, createFadeInOut(true, true, 1.2, true));
}

Creates a smooth pulse or breathing animation.

🔹 Scene transition with fade to black

// Script: fade_to_black.js
function Start(obj) {
  // Invisible black background
  obj.opacity = 0;
  addComponent(obj, createFadeInOut(true, false, 2, false));

  // Change scene when fade ends
  wait(2, () => {
    LoadScene("MainMenu");
  });
}

Used for clean scene-to-scene transitions.

🔹 Fade In + sound effect

// Script: fade_with_sound.js
function Start(obj) {
  const audio = createAudioSource("sfx/appear.wav", 1, false, true);
  addComponent(obj, audio);
  addComponent(obj, createFadeInOut(true, false, 1, false));
}

Synchronizes a fade-in animation with a sound cue.

🚀 Integration & Performance

• The effect is completely framerate-independent; it uses dt (delta time).
• Does not create extra instances or increase render cost.
• Combines smoothly with other components (AudioSource, PlatformMover, etc.).
• Ideal for intros, transitions or UI breathing effects.

📌 Summary