Fade In (Lua)

[burgelkat]

Hi,

maybe someone can help me. in this script nothing happens at start. What do i wrong here?

 

FadeIn = {
    duration = 30.0, -- Dauer des Fade-In in Sekunden
    elapsed = 0,    -- Verstrichene Zeit
    overlay = nil,  -- Das Overlay-Panel
    isActive = false -- Status des Fade-In
}

function FadeIn:Start()

    -- Create User Interface
    local ui = CreateInterface(window)
    -- Sicherstellen, dass ein UI existiert
    if not ui then return end

    -- Größe des UI-Fensters ermitteln
    local sz = ui.background:ClientSize()

    -- Overlay erstellen
    self.overlay = CreatePanel(0, 0, sz.x, sz.y, ui.background)
    self.overlay:SetColor(0, 0, 0, 1) -- Vollständig schwarz
    self.elapsed = 0
    self.isActive = true -- Aktiviert den Fade-In-Prozess
end

function FadeIn:Update()
    if not self.isActive or not self.overlay then return end

    local step = 0.016
    -- Zeit aktualisieren
    self.elapsed = self.elapsed + step

    if self.elapsed < self.duration then
        -- Alpha-Wert basierend auf der verstrichenen Zeit berechnen
        local alpha = math.max(0, 1 - self.elapsed / self.duration)
        self.overlay:SetColor(0, 0, 0, alpha)
    else
        -- Fade-In abgeschlossen, Overlay entfernen
        self.overlay:SetHidden(true)
        self.overlay = nil
        self.isActive = false
    end
end

return FadeIn

 

[Josh]

Set a breakpoint in your code and make sure the values are what you think they should be.

[Dreikblack]

Add before "return FadeIn"

RegisterComponent("FadeIn", FadeIn)

 

[burgelkat]

 

 

Ah, thank you. I must have deleted that by mistake. However, I don't see the panel. I think I'm missing something.

 

[Dreikblack]

UI for a 3D game can be found in 2nd example (your code would work for 2D app): https://www.ultraengine.com/learn/CreateInterface?lang=lua

[burgelkat]

FadeIn = {
    duration = 3.0,  -- Dauer des Fade-In in Sekunden
    elapsed = 0,       -- Verstrichene Zeit
    overlay = nil,     -- Das Overlay-Panel
    isActive = true,   -- Status des Fade-In
    ui = nil,          -- UI-Referenz
    framebuffer = nil, -- Framebuffer für die Größe
    window = nil       -- Fenster-Referenz
}

function FadeIn:Start()
    -- Sicherstellen, dass der Framebuffer und das Fenster initialisiert sind
    if not self.framebuffer then
        local displays = GetDisplays()
        self.framebuffer = CreateFramebuffer(window)  -- Framebuffer erstellen
        print("Framebuffer erstellt!")  -- Debugging-Ausgabe
    end

    local world = self.entity:GetWorld()

    -- Sicherstellen, dass die UI initialisiert ist
    if not self.ui then
        -- Holen der Größe des Framebuffers (Fenstergröße)
        local sz = self.framebuffer.size
        local font = LoadFont("Fonts/arial.ttf")

        -- Benutzeroberfläche mit der Größe des Framebuffers erstellen
        self.ui = CreateInterface(world, font, sz)
        print("UI erstellt!")  -- Debugging-Ausgabe
    end

    -- Overlay-Panel erstellen, das das gesamte Fenster abdeckt
    local sz = self.framebuffer.size

    -- Panel im Fensterbereich erstellen (im 2D-Raum des Fensters)
    self.overlay = CreatePanel(0, 0, sz.x, sz.y, self.ui.background)
    self.overlay:SetColor(0, 0, 0, 1)  -- Vollständig schwarz
    self.elapsed = 0
    self.isActive = true  -- Fade-In-Prozess aktivieren

    print("Fade-In gestartet!")  -- Debugging-Ausgabe
end

function FadeIn:ProcessEvent(ev)
    -- Ereignisse für die UI verarbeiten (z. B. Maus- oder Tastaturereignisse)
    if self.ui then
        self.ui:ProcessEvent(ev)
    end
end

function FadeIn:Update()
    if not self.isActive or not self.overlay then
        print("Fade-In-Prozess ist nicht aktiv oder Overlay fehlt.")  -- Debugging-Ausgabe
        return
    end

    local step = 0.016
    -- Zeit aktualisieren
    self.elapsed = self.elapsed + step

    if self.elapsed < self.duration then
        -- Alpha-Wert basierend auf der verstrichenen Zeit berechnen
        local alpha = math.max(0, 1 - self.elapsed / self.duration)
        self.overlay:SetColor(0, 0, 0, alpha)
    else
        -- Fade-In abgeschlossen, Overlay entfernen
        self.overlay:SetHidden(true)
        self.overlay = nil
        self.isActive = false
        print("Fade-In abgeschlossen.")  -- Debugging-Ausgabe
    end

    -- Ereignisse verarbeiten
    while (PeekEvent()) do
        local ev = WaitEvent()
        self:ProcessEvent(ev)  -- Ereignis verarbeiten
    end
end

RegisterComponent("FadeIn", FadeIn)

return FadeIn

it already works. somehow. Ha-Ha. but the panel does not cover the existing window.

 

[Dreikblack]

You need extra PROJECTION_ORTHOGRAPHIC camera and put this camera and ui to own render layers like that: SetRenderLayers(2)

Although just for fade in effect usual sprite would be better i think, it will need special camera as well

[Dreikblack]

Reworked component to make it work with sprite:

FadeIn = {
    duration = 5.0,  -- Dauer des Fade-In in Sekunden
    elapsed = 0,       -- Verstrichene Zeit
    isActive = true,   -- Status des Fade-In
    framebuffer = nil, -- Framebuffer für die Größe
    orthographicCamera = nil, -- 2D camera
    fadeSprite = nill --Sprite that covering camera fully
}

function FadeIn:Start()
    -- Sicherstellen, dass der Framebuffer und das Fenster initialisiert sind
    if not self.framebuffer then
        self.framebuffer = CreateFramebuffer(ActiveWindow())  -- Framebuffer erstellen
        print("Framebuffer erstellt!")  -- Debugging-Ausgabe
    end

    local world = self.entity:GetWorld()

    local sz = self.framebuffer.size

    self.orthographicCamera = CreateCamera(world, PROJECTION_ORTHOGRAPHIC)
    self.orthographicCamera:SetClearMode(CLEAR_DEPTH);
    self.orthographicCamera:SetClearColor(0.125)
    self.orthographicCamera:SetPosition(sz.x * 0.5, sz.y * 0.5, 0.0)
    self.orthographicCamera:SetRenderLayers(2)

    self.fadeSprite = CreateSprite(world, sz.x, sz.y)
    self.fadeSprite:SetRenderLayers(2)
    local material = CreateMaterial()
    material:SetShadow(false);
    material:SetTransparent(true);
    material:SetShaderFamily(LoadShaderFamily("Shaders/Unlit.fam"));
    self.fadeSprite:SetMaterial(material)

    self.fadeSprite:SetColor(0, 0, 0, 1)  -- Vollständig schwarz
    self.elapsed = 0
    self.isActive = true  -- Fade-In-Prozess aktivieren

    print("Fade-In gestartet!")  -- Debugging-Ausgabe
end

function FadeIn:ProcessEvent(ev)

end

function FadeIn:Update()
    if not self.isActive or not self.fadeSprite then
        print("Fade-In-Prozess ist nicht aktiv oder Sprite fehlt.")  -- Debugging-Ausgabe
        return
    end

    local step = 0.016
    -- Zeit aktualisieren
    self.elapsed = self.elapsed + step

    if self.elapsed < self.duration then
        -- Alpha-Wert basierend auf der verstrichenen Zeit berechnen
        local alpha = math.max(0, 1 - self.elapsed / self.duration)
        self.fadeSprite:SetColor(0, 0, 0, alpha)
    else
        -- Fade-In abgeschlossen, Sprite entfernen
        self.fadeSprite:SetHidden(true)
        self.fadeSprite = nil
        self.isActive = false
        print("Fade-In abgeschlossen.")  -- Debugging-Ausgabe
    end
end

RegisterComponent("FadeIn", FadeIn)

return FadeIn

 

[burgelkat]

wow

Thank you for the help. This is the effect I need. I really appreciate this!.

 

[burgelkat]

 

Here is another slightly adapted script. I wanted to create the effect of waking up. (alternatively you can use it as a dying effect  ) Then you just have to turn the "maxOpenFactor" around.

 

FadeIn.lua