EFEITO FADE IN EM IMAGEM DX

[+Sommer]

Eae rapaziada, estava fazendo um script e queria fazer um efeito de Fade In em uma imagem, porem esse efeito, essa imagem so deve aparecer após hitar um marker, estava tentando usar a função interpolateBetween junto com alguns timers mas sem sucesso, dei uma procurada no forum consegui fazer com que o fade funcionasse caso uma bind fosse acionada, mas nao consigo aplicar assim que player acerta o marker, podem me dar uma direção ou algum link que possa me ajudar pfv

Edited October 11, 2023 by +Sommer

[Blaack]

11 hours ago, +Sommer said:

Eae rapaziada, estava fazendo um script e queria fazer um efeito de Fade In em uma imagem, porem esse efeito, essa imagem so deve aparecer após hitar um marker, estava tentando usar a função interpolateBetween junto com alguns timers mas sem sucesso, dei uma procurada no forum consegui fazer com que o fade funcionasse caso uma bind fosse acionada, mas nao consigo aplicar assim que player acerta o marker, podem me dar uma direção ou algum link que possa me ajudar pfv

Nos mostre como está tenttando fazer, você pode usar o interpolate sim;
Inclusive tenho um tutorial bem legal sobre, caso queira ver: link

[+Sommer]

8 hours ago, Blaack said:

Nos mostre como está tenttando fazer, você pode usar o interpolate sim;
Inclusive tenho um tutorial bem legal sobre, caso queira ver: link

olha cara meu script esta assim do lado client:

-- Esala para outros monitores
local screenWidth, screenHeight = guiGetScreenSize()
local x, y = (screenWidth/1440), (screenHeight/900)

-- Painel login em DX
function dxUI()
    dxDrawImage(0, 0, x*1440, y*900, 'images/background.jpg', 0, 0, 0, tocolor(255, 255, 255, 255))
end

-- Renderiza a UI do painel e suas funções do lado servidor
function renderUI()
    --addEventHandler('onClientRender', getRootElement(), dxUI)
end
addEvent('render_UI', true)
addEventHandler('render_UI', resourceRoot, renderUI)

-- Efeito Fade-In no Background

e assim do lado server: 

-- Cria o marker para que a pessoa acesse o painel de login
local loginMarker = createMarker(2245.528, -1260.809, 22.5, 'cylinder', 1.5, 255, 255, 255, 50)

-- Abre o painel de login e as outras funções para o player
addEventHandler('onMarkerHit', loginMarker,
    function(thePlayer)
        local elementType = getElementType(thePlayer)
        if (elementType) == 'player' then -- confirma se quem realmente esta acessando o painel é um player
             triggerClientEvent(thePlayer, 'render_UI', resourceRoot, true)
        end
    end
)

Ali no lado client eu visto em outros lugares do forum e vi de um jeito que quando vc apertava a tecla ele fazia o fade in e quando vc apertava dnv ele fazia o fade out, so como quero renderizar uma imagem eu tinha mudado um pouco e feito mais ou menos assim:

mas nao obtive sucesso, eu queria utilizar o interpolate pois creio que fique mais facil de manipular e mais otimizado por mais que sou iniciante queria ja pensar na otimização de alguns efeitos que sejam 'simples' de fazer, mas nao tenho ideia de como utilizar o interpolate para criar esse fade quando hitar o marker

-- Esala para outros monitores
local screenWidth, screenHeight = guiGetScreenSize()
local x, y = (screenWidth/1440), (screenHeight/900)

-- Painel login em DX
function dxUI()
    dxDrawImage(0, 0, x*1440, y*900, 'images/background.jpg', 0, 0, 0, tocolor(255, 255, 255, alp))
end

-- Renderiza a UI do painel e suas funções do lado servidor
function renderUI()
    addEventHandler('onClientRender', getRootElement(), dxUI)
end
addEvent('render_UI', true)
addEventHandler('render_UI', resourceRoot, renderUI)

-- Efeito Fade-In no Background
alp = 255

function bindMenu()
if showMenu == false then
  addEventHandler("onClientRender", root, showMenu)
  setTimer(function()
if alp == 254 then
   showMenu = true
end
alp = alp + 1
end,50,255)

else
 
  setTimer(function()
if alp == 1 then
  removeEventHandler("onClientRender", root, showMenu)
  showMenu = false
end
alp = alp - 1
end,50,255)
 
  end
end

 

Edited October 12, 2023 by +Sommer

[Lord Henry]

1. Corrija a indentação do seu código, pois desse jeito está ilegível.
2. Faça seu painel otimizado para a proporção 16:9 de tela que é a mais comum. (também é a proporção utilizada por monitores HD, Full HD e Ultra HD)
   Escolha a resolução 1366x768 ou 1280x720 no jogo, ambas são 16:9. A sua resolução atual 1440x900 é proporção 16:10.
3. Sua lógica de incrementar o valor alpha com um timer repetitivo faz sentido, mas dessa forma você não consegue garantir com precisão a duração do fade, por isso que usamos o interpolateBetween. Porém você errou ao usar showMenu como nome de função ali no seu "onClientRender" pois ele já está sendo usado como variável.

Vou mostrar como fazer usando o setTimer que você tentou:

client.lua

Spoiler

O código ficou meio grande, por isso coloquei dentro de um spoiler aqui no fórum.

local screen = Vector2(guiGetScreenSize()) -- Obtém a resolução da tela e salva em duas variáveis: screen.x, screen.y
local x, y = (screen.x/1920), (screen.y/1080) -- Proporção 16:9
local alp = 0 -- Alpha que será usado por todos os elementos DX do painel.

function drawLoginPanel() -- PAINEL DX
    dxDrawImage(0, 0, x*1920, y*1080, background, 0, 0, 0, tocolor (255, 255, 255, alp), false) -- Imagem de fundo.
    
    if isMouseInPosition ((x*1920)/2 - 50, (y*1080) - 40, 100, 30) then -- Se o cursor está em cima do botão, então:
        dxDrawRectangle((x*1920)/2 - 50, (y*1080) - 40, 100, 30, tocolor (255, 255, 255, alp), false) -- Botão branco.
        dxDrawText("FECHAR", (x*1920)/2 - 50, (y*1080) - 40, (x*1920)/2 + 50, (y*1080) - 10, tocolor (0, 0, 0, alp), 1.3, "default-bold", "center", "center") -- Texto preto sem sombra.
    else -- Se o cursor não está em cima do botão, então:
        dxDrawRectangle((x*1920)/2 - 50, (y*1080) - 40, 100, 30, tocolor (255, 50, 50, alp), false) -- Botão vermelho.
        dxDrawText("FECHAR", (x*1920)/2 - 48, (y*1080) - 39, (x*1920)/2 + 52, (y*1080) - 9, tocolor (0, 0, 0, alp), 1.3, "default-bold", "center", "center") -- Sombra atrás do texto.
        dxDrawText("FECHAR", (x*1920)/2 - 50, (y*1080) - 40, (x*1920)/2 + 50, (y*1080) - 10, tocolor (255, 255, 255, alp), 1.3, "default-bold", "center", "center") -- Texto branco.
    end
end

addEvent("render_UI", true)
addEventHandler("render_UI", resourceRoot, function(state) -- state = true (faz o painel aparecer) | state = false (faz o painel desaparecer)
    if state then -- Se o painel deve aparecer, então:
        background = dxCreateTexture ("images/background.jpg", "argb", true, "clamp") -- Salva a imagem numa variável para ser mais leve no processamento.
        addEventHandler("onClientRender", root, drawLoginPanel) -- Começa a renderizar o painel.
        setTimer(function()
            addEventHandler("onClientClick", root, clickOnLoginPanel) -- Função que faz os botões DX funcionarem. Só funciona depois que o painel apareceu completamente.
        end, 1500, 1)
        setTimer(function() -- Incrementa o alpha em +10 a cada 50ms (A animação dura pouco mais de 1 segundo)
            alp = alp + 10
            if alp == 250 then
                alp = 255
            end
        end, 50, 25)
    else -- Se o painel deve desaparecer, então:
        removeEventHandler("onClientClick", root, clickOnLoginPanel) -- Remove a função de clique dos botões.
        setTimer(function() -- Decrementa o alpha em -10 a cada 50ms (A animação dura pouco mais de 1 segundo)
            alp = alp - 10
            if alp == 5 then -- Quando chegar no final da animação, para de renderizar o painel e apaga a imagem da variável.
                removeEventHandler("onClientRender", root, drawLoginPanel)
                destroyElement(background)
                background = nil
                alp = 0
            end
        end, 50, 25)
    end
    showCursor(state) -- Mostra/oculta o cursor do mouse quando mostra/oculta o painel.
end)

function clickOnLoginPanel(button, state, absoluteX, absoluteY) -- Função de teste que faz o botão de fechar funcionar.
    if button == "left" and state == "down" then -- Se o botão clicado for o esquerdo, então:
        if isMouseInPosition ((x*1920)/2 - 50, (y*1080) - 40, 100, 30) then -- Se o mouse estava em cima do botão do menu quando clicou, então:
            triggerEvent("render_UI", resourceRoot, false) -- false = Faz o menu desaparecer.
        end
    end
end

function isMouseInPosition (xx, yy, width, height) -- Função útil obtida da Wiki. Verifica se o cursor do mouse está dentro de uma área retangular da tela.
    if (not isCursorShowing()) then
        return false
    end
    local sx, sy = guiGetScreenSize ()
    local cx, cy = getCursorPosition ()
    local cx, cy = (cx * sx), (cy * sy)

    return (( cx >= xx and cx <= xx + width) and (cy >= yy and cy <= yy + height))
end

server.lua

local loginMarker = createMarker(2245.528, -1260.809, 22.95, "cylinder", 1.5, 255, 255, 255, 50)

addEventHandler("onMarkerHit", loginMarker, function(hitElement) -- Ativa essa função quando algum elemento colidir no loginMarker.
    if hitElement and getElementType(hitElement) == "player" then -- Se o elemento que colidiu é um jogador, então:
        -- if isGuestAccount (getPlayerAccount(hitElement)) then -- Se o jogador que colidiu estiver deslogado, então:
            triggerClientEvent(hitElement, "render_UI", resourceRoot, true) -- Mostra o painel pra ele.
        -- end
    end
end)

 

Edited October 14, 2023 by Lord Henry

[Lord Henry]

Caso queira fazer com interpolateBetween, troque essas funções no client.lua:

function dxFade(showing, maxValue, theDuration, theType, thePeriod, theAmplitude, theOvershoot)
    local start = getTickCount() -- Marca o instante do início da animação.
    if showing then -- Se é para fazer fade-in, então:
        alp = 0 -- Seta o alpha em 0 para começar tudo invisível.
        function renderIn() -- Executa essa função a cada frame. (onClientRender)
            local now = getTickCount() -- Obtém o instante deste frame (ms).
            local endTime = start + theDuration -- Calcula e obtém o instante (ms) que vai acabar a animação.
            local elapsedTime = now - start -- Calcula quantos ms passaram desde que começou a animação.
            local duration = endTime - start -- Calcula quantos ms faltam para finalizar a animação.
            local progress = elapsedTime / duration -- Calcula o progresso atual da animação de 0 até 1.
            alp = interpolateBetween (0, 0, 0, maxValue, 0, 0, progress, theType, thePeriod, theAmplitude, theOvershoot) -- Aplica o interpolate no alpha.
            -- É possível interpolar até 3 valores diferentes ao mesmo tempo, desde que eles comecem e terminem ao mesmo tempo. Útil para interpolar alphas diferentes do painel.
            
            if alp >= maxValue then -- Se o alpha atingiu o valor de objetivo, então:
                removeEventHandler("onClientRender", root, renderIn) -- Para de calcular essa interpolação a cada frame, pois ela foi concluída.
            end
        end
        addEventHandler("onClientRender", root, renderIn) -- Começa a calcular a interpolação a cada frame.
    else -- Se é para fazer fade-out, então:
        alp = maxValue -- Alpha começa no valor do objetivo para começar tudo visível.
        function renderOut() -- Igual a parte de cima, mas faz o caminho inverso, interpolando do valor objetivo até 0.
            local now = getTickCount()
            local endTime = start + theDuration
            local elapsedTime = now - start
            local duration = endTime - start
            local progress = elapsedTime / duration
            alp = interpolateBetween (maxValue, 0, 0, 0, 0, 0, progress, theType, thePeriod, theAmplitude, theOvershoot)
            
            if alp <= 0 then -- Se o alpha chegou a 0, então:
                removeEventHandler("onClientRender", root, renderOut) -- Para de calcular essa interpolação a cada frame, pois ela foi concluída.
            end
        end
        addEventHandler("onClientRender", root, renderOut) -- Perceba que para evitar conflitos, essa função tem nome diferente do fadeIn.
    end
end

addEvent("render_UI", true)
addEventHandler("render_UI", resourceRoot, function(state) -- state = true (faz o painel aparecer) | state = false (faz o painel desaparecer)
    if state then -- Se o painel deve aparecer, então:
        background = dxCreateTexture ("background.jpg", "argb", true, "clamp") -- Salva a imagem numa variável para ser mais leve no processamento.
        addEventHandler("onClientRender", root, drawLoginPanel) -- Começa a renderizar o painel.
        setTimer(function()
            addEventHandler("onClientClick", root, clickOnLoginPanel) -- Depois de pouco mais de 1 segundo, faz os botões DX funcionarem.
        end, 1100, 1)
    else -- Se o painel deve desaparecer, então:
        removeEventHandler("onClientClick", root, clickOnLoginPanel) -- Remove a função de clique dos botões.
        setTimer(function()
            removeEventHandler("onClientRender", root, drawLoginPanel) -- Depois de pouco mais de 1 segundo, para de renderizar o painel e apaga a imagem da variável.
            destroyElement(background)
            background = nil
        end, 1100, 1)
    end
    showCursor(state) -- Mostra/oculta o cursor do mouse quando mostra/oculta o painel.
    dxFade (state, 255, 1000, "Linear") -- Aciona o interpolateBetween com duração de 1000 ms (1 segundo). O valor vai de 0 até 255 e vice-versa.
end)

Você também pode utilizar a função útil dxFade que eu criei. Detalhes na Wiki.

Edited October 16, 2023 by Lord Henry