Imagem hud responsiva de acordo com o radar

Mopped · December 29, 2019

Olá, eu tenho um radar no qual apenas mostra APENAS a barra de vida e colete FORA do carro, dentro do carro ele mostra o radar, a vida e o colete. Eu queria saber como faço para quando o player (ped) entrar no carro, esse painel de fome/sede/sono se mover de acordo se o ped está no carro ou não, no caso, substituir o lugar do radar quando o player está fora do carro, e quando estiver dentro do carro, esse painel de fome/sede/sono ficar em cima do radar

Tenho certa ciência de que devo me basear a partir deste comando:

  local vehicle = getPedOccupiedVehicle( getLocalPlayer() )
	 if not( vehicle ) then return end

Só não sei por onde começar...

Algumas prints para vocês entenderem melhor do que eu tô falando:

Foto dentro do carro que aí aparece o radar:

Spoiler

Foto fora do carro que o radar não aparece e a hud de fome, sede e sono continua no mesmo lugar (fica feio)

Spoiler

Developer. · December 30, 2019

Acredito eu que o melhor jeito será com um interpolateBetween, com essa func você pode estar fazendo um tipo de animação!

Mopped · December 30, 2019

Just now, Eder said:

Acredito eu que o melhor jeito será com um interpolateBetween, com essa func você pode estar fazendo um tipo de animação!

Você tem alguma ideia de como eu posso fazer isso ou poderia me ajudar mais especificamente?

Lord Henry · December 30, 2019

Ué. Só criar 4 variáveis, 2 delas pra posição sem o radar e as outras 2 pra posição com o radar. Quando estiver dentro do veículo, faz o dxDraw da HUD com as variáveis com o radar, caso contrário, desenha a HUD com as variáveis sem o radar.

Pra otimizar, eu faria as variáveis dentro de uma table.

local positions = {
    [1] = {screenX*0.01, screenY*0.08}, -- Posição sem o radar.
    [2] = {screenX*0.01, screenY*0.06} -- Posição com o radar.
}

function render ()
    if (getPedOccupiedVehicle(localPlayer)) then -- Se o jogador está dentro de um veículo, então:
        dxDrawRectangle (positions[2][1], positions[2][2], 200, 100) -- dxDraw com as posições do segundo item da table.
    else -- Se o jogador está a pé, então:
        dxDrawRectangle (positions[1][1], positions[1][2], 200, 100) -- dxDraw com as posições do primeiro item da table.
    end
end

(Programado e postado via mobile)

Developer. · December 30, 2019

Mesma coisa que o Lord Comentou, porém com animação e MUUUUITO mais linhas...

-- tabela posição do radar
local posSubir = {
    [1] = {218, 609, 168, 28},
    [2] = {218, 647, 168, 28},
    [3] = {218, 685, 168, 28},
}
-- tabela posição acima do radar
local posDescer = {
    [1] = {218, 426, 168, 28},
    [2] = {218, 464, 168, 28},
    [3] = {218, 502, 168, 28},
}

-- dx quando o player ENTRAR no veiculo
function onVeh()
    local x1, y1, z1 = interpolate(0, posSubir[1][2], 0, 0, posDescer[1][2], 0, inicio2, 1000, "Linear") -- animação retangulo 1
    local x2, y2, z2 = interpolate(0, posSubir[2][2], 0, 0, posDescer[2][2], 0, inicio2, 1000, "Linear") -- animação retangulo 2
    local x3, y3, z3 = interpolate(0, posSubir[3][2], 0, 0, posDescer[3][2], 0, inicio2, 1000, "Linear") -- animação retangulo 3

    dxDrawRectangle(posSubir[1][1], y1, posSubir[1][3], posSubir[1][4], tocolor(255, 255, 255, 255), false) -- retangulo 1
    dxDrawRectangle(posSubir[2][1], y2, posSubir[2][3], posSubir[2][4], tocolor(255, 255, 255, 255), false) -- retangulo 2
    dxDrawRectangle(posSubir[3][1], y3, posSubir[3][3], posSubir[3][4], tocolor(255, 255, 255, 255), false) -- retangulo 3
end

-- dx quando o player SAIR no veiculo
function onFoot()
    if inicio then -- (anti-bug) verifica se a váriavel inicio existe, se ela existir então:
        local x1, y1, z1 = interpolate(0, posDescer[1][2], 0, 0, posSubir[1][2], 0, inicio, 1000, "Linear") -- animação retangulo 1
        local x2, y2, z2 = interpolate(0, posDescer[2][2], 0, 0, posSubir[2][2], 0, inicio, 1000, "Linear") -- animação retangulo 2
        local x3, y3, z3 = interpolate(0, posDescer[3][2], 0, 0, posSubir[3][2], 0, inicio, 1000, "Linear") -- animação retangulo 3

        dxDrawRectangle(posDescer[1][1], y1, posDescer[1][3], posDescer[1][4], tocolor(255, 255, 255, 255), false) -- retangulo 1
        dxDrawRectangle(posDescer[2][1], y2, posDescer[2][3], posDescer[2][4], tocolor(255, 255, 255, 255), false) -- retangulo 2
        dxDrawRectangle(posDescer[3][1], y3, posDescer[3][3], posDescer[3][4], tocolor(255, 255, 255, 255), false) -- retangulo 3
    else -- se a váriavel não existir então:
        dxDrawRectangle(218, 609, 168, 28, tocolor(255, 255, 255, 255), false) -- retangulo sem animação 1
        dxDrawRectangle(218, 647, 168, 28, tocolor(255, 255, 255, 255), false) -- retangulo sem animação 2
        dxDrawRectangle(218, 685, 168, 28, tocolor(255, 255, 255, 255), false) -- retangulo sem animação 3
    end
end
addEventHandler("onClientRender", root, onFoot)

-- evento onde o player entra no veículo
function onVehEnter()
    inicio2 = getTickCount() -- salva o tempo 
    addEventHandler("onClientRender", root, onVeh) -- adicionar o dx de entrar
    if isEventHandlerAdded( 'onClientRender', root, onFoot) then -- se o dx de sair existir então:
        removeEventHandler('onClientRender', root, onFoot) -- remove / destroi ele
    end
end
addEventHandler ("onClientVehicleEnter", root, onVehEnter)

-- evento onde o player sai do veículo
function onVehExit()
    inicio = getTickCount() -- salva o tempo
    addEventHandler("onClientRender", root, onFoot) -- adicionar o dx de sair
    if isEventHandlerAdded( 'onClientRender', root, onVeh) then -- se o dx de entrar existir então:
        removeEventHandler('onClientRender', root, onVeh) -- remove / destroi ele
    end
end
addEventHandler ("onClientVehicleExit", root, onVehExit)

--------------------------------------------------------- funções uteis -------------------------------------------------------------------

-- interpolate       posX   posY   posZ   posX1  posY1  posX1   tick   tempo  tipo de animação
function interpolate(varX1, varY1, varZ1, varX2, varY2, varZ2, tick1, timer, animation)
    local tick2 = getTickCount()
    local fim = tick1 + timer
    local tempoDecorrido = tick2 - tick1
    local duracao = fim - inicio 
    local progresso = tempoDecorrido / duracao
    if (progresso > 1) then
		progresso = 1
	end
    local varX1, varY1, varZ1 = interpolateBetween (varX1, varY1, varZ1, varX2, varY2, varZ2, progresso, animation) 
    return varX1, varY1, varZ1
end

-- EventAdded             nome evento      elemento evento   nome da função
function isEventHandlerAdded( sEventName, pElementAttachedTo, func )
    if type( sEventName ) == 'string' and isElement( pElementAttachedTo ) and type( func ) == 'function' then
         local aAttachedFunctions = getEventHandlers( sEventName, pElementAttachedTo )
         if type( aAttachedFunctions ) == 'table' and #aAttachedFunctions > 0 then
              for i, v in ipairs( aAttachedFunctions ) do
                   if v == func then
                    return true
               end
          end
     end
    end
    return false
end

--------------------------------------------------------- funções uteis -------------------------------------------------------------------

Edited December 30, 2019 by Eder

Mopped · December 31, 2019

Ok, eu entendi essa função de Interpolate com animação, eu só n entendi como que eu faço pro próprio painel de fome/sede/sono no lugar dessas 3 barrinhas que criaram...

Sem contar que se uma pessoa entra/sai do carro, a barrinha move pra mim também...

Fora do carro:

Código que eu preciso colocar no lugar das 3 barrinhas que sobem e desce

 		dxDrawImage(x*1185, y*172, x*24, y*24, "files/images/money.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)
        dxDrawImage(x*849, y*634, x*36, y*36, "files/images/comida.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)        
        dxDrawRectangle(x*895, y*634, x*150, y*35, tocolor(0, 0, 0, 140), false)    
        dxDrawRectangle(x*895, y*634, x*150/100*fome, y*35, tocolor(255, 165, 0), false)
        dxDrawImage(x*849, y*677, x*36, y*36, "files/images/sede.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)              
        dxDrawRectangle(x*895, y*677, x*150, y*35, tocolor(0, 0, 0, 140), false)
        dxDrawRectangle(x*895, y*677, x*150/100*sede, y*35, tocolor(16, 102, 231, 200), false)
        dxDrawImage(x*849, y*718, x*36, y*36, "files/images/iconeSONO.png", 0, 0, 0, tocolor(255, 255, 255, 255), false) 
        dxDrawRectangle(x*895, y*718, x*150, y*35, tocolor(0, 0, 0, 140), false)
        dxDrawRectangle(x*895, y*718, x*150/100*Sono, y*35, tocolor(138, 43, 226, 200), false)

Mopped · December 31, 2019

...

Mopped · January 1, 2020

Alguém ajuda??

Developer. · January 1, 2020

-- tabela posição Y que fica no mesmo lugar que o radar
local posSubir = {
    [1] = {634}, -- retangulo 1
    [2] = {677}, -- retangulo 2
    [3] = {718}, -- retangulo 3
}
-- tabela posição Y que fica acima do radar
local posDescer = {
    [1] = {426}, -- retangulo 1
    [2] = {464}, -- retangulo 2
    [3] = {502}, -- retangulo 3
}


    -- x = posição x
    -- y = posição y
    -- w = largura
    -- h = altura
     
    -- dx é tipo um plano cartesiano: (https://s1.static.brasilescola.uol.com.br/be/conteudo/images/plano-formado-por-duas-retas-perpendiculares-para-marcar-localizacoes-57d931d798001.jpg)


    -- x é a (reta) ← 0 →

	--                           ↑
    -- y é o que (sobe ou desce) 0
	--                           ↓



-- dx quando o player ENTRAR no veiculo
function onVeh()
    --    variaveis     func.util  x1     y1         z1  x2      y2         z2   tick   tempo   tipo animação
    local x1, y1, z1 = interpolate(0, posSubir[1][1], 0, 0, posDescer[1][1], 0, inicio2, 1000, "Linear") -- animação retangulo 1
    local x2, y2, z2 = interpolate(0, posSubir[2][1], 0, 0, posDescer[2][1], 0, inicio2, 1000, "Linear") -- animação retangulo 2
    local x3, y3, z3 = interpolate(0, posSubir[3][1], 0, 0, posDescer[3][1], 0, inicio2, 1000, "Linear") -- animação retangulo 3
    
  -- retangulos 1 ↓
    --          x    y   w   h
    dxDrawImage(849, y1, 36, 36, "files/images/comida.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)        
    dxDrawRectangle(895, y1, 150, 35, tocolor(0, 0, 0, 140), false)    
    dxDrawRectangle(895, y1, 150/100*fome, 35, tocolor(255, 165, 0), false)
  
  -- retangulos 2 ↓
    dxDrawImage(849, y2, 36, 36, "files/images/sede.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)              
    dxDrawRectangle(895, y2, 150, 35, tocolor(0, 0, 0, 140), false)
    dxDrawRectangle(895, y2, 150/100*sede, 35, tocolor(16, 102, 231, 200), false)
  
-- retangulos 3 ↓
    dxDrawImage(849, y3, 36, 36, "files/images/iconeSONO.png", 0, 0, 0, tocolor(255, 255, 255, 255), false) 
    dxDrawRectangle(895, y3, 150, 35, tocolor(0, 0, 0, 140), false)
    dxDrawRectangle(895, y3, 150/100*Sono, 35, tocolor(138, 43, 226, 200), false)

    -- perceba que só alteramos com o valor de Y com as variaveis y1, y2 e y3. Essas variaveis é o que contem a animação
  	-- lembre-se variavel contem um valor, no caso dessas o valor são as animações!

end

-- dx quando o player SAIR no veiculo
function onFoot()
    if inicio then  -- verifica se existe o tick (inicio) (anti-bug)

        local x1, y1, z1 = interpolate(0, posDescer[1][1], 0, 0, posSubir[1][1], 0, inicio, 1000, "Linear") -- animação retangulo 1
        local x2, y2, z2 = interpolate(0, posDescer[2][1], 0, 0, posSubir[2][1], 0, inicio, 1000, "Linear") -- animação retangulo 2
        local x3, y3, z3 = interpolate(0, posDescer[3][1], 0, 0, posSubir[3][1], 0, inicio, 1000, "Linear") -- animação retangulo 3

        dxDrawImage(849, y1, 36, 36, "files/images/comida.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)        
        dxDrawRectangle(895, y1, 150, 35, tocolor(0, 0, 0, 140), false)    
        dxDrawRectangle(895, y1, 150/100*fome, 35, tocolor(255, 165, 0), false)

        dxDrawImage(849, y2, 36, 36, "files/images/sede.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)              
        dxDrawRectangle(895, y2, 150, 35, tocolor(0, 0, 0, 140), false)
        dxDrawRectangle(895, y2, 150/100*sede, 35, tocolor(16, 102, 231, 200), false)

        dxDrawImage(849, y3, 36, 36, "files/images/iconeSONO.png", 0, 0, 0, tocolor(255, 255, 255, 255), false) 
        dxDrawRectangle(895, y3, 150, 35, tocolor(0, 0, 0, 140), false)
        dxDrawRectangle(895, y3, 150/100*Sono, 35, tocolor(138, 43, 226, 200), false)
    else
        dxDrawImage(849, 634, 36, 36, "files/images/comida.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)        
        dxDrawRectangle(895, 634, 150, 35, tocolor(0, 0, 0, 140), false)    
        dxDrawRectangle(895, 634, 150/100*fome, 35, tocolor(255, 165, 0), false)

        dxDrawImage(849, 677, 36, 36, "files/images/sede.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)              
        dxDrawRectangle(895, 677, 150, 35, tocolor(0, 0, 0, 140), false)
        dxDrawRectangle(895, 677, 150/100*sede, 35, tocolor(16, 102, 231, 200), false)

        dxDrawImage(849, 718, 36, 36, "files/images/iconeSONO.png", 0, 0, 0, tocolor(255, 255, 255, 255), false) 
        dxDrawRectangle(895, 718, 150, 35, tocolor(0, 0, 0, 140), false)
        dxDrawRectangle(895, 718, 150/100*Sono, 35, tocolor(138, 43, 226, 200), false)
    end
end
addEventHandler("onClientRender", root, onFoot, false)

-- evento onde o player entra no veículo
function onVehEnter(p)
    if p == getLocalPlayer() then -- verificação se thePlayer(p) é igual ao client
        inicio2 = getTickCount() -- salva o tempo 
        addEventHandler("onClientRender", root, onVeh, false) -- adicionar o dx de entrar
        if isEventHandlerAdded( 'onClientRender', root, onFoot) then -- se o dx de sair existir então:
            removeEventHandler('onClientRender', root, onFoot, false) -- remove / destroi ele
        end
    end
end
addEventHandler ("onClientVehicleEnter", root, onVehEnter)

-- evento onde o player sai do veículo
function onVehExit(p)
    if p == getLocalPlayer() then -- verificação se thePlayer(p) é igual ao client
        inicio = getTickCount() -- salva o tempo
        addEventHandler("onClientRender", root, onFoot, false) -- adicionar o dx de sair
        if isEventHandlerAdded( 'onClientRender', root, onVeh) then -- se o dx de entrar existir então:
            removeEventHandler('onClientRender', root, onVeh, false) -- remove / destroi ele
        end
    end
end
addEventHandler ("onClientVehicleExit", root, onVehExit)

--------------------------------------------------------- funções uteis -------------------------------------------------------------------

-- interpolate       posX   posY   posZ   posX1  posY1  posX1   tick   tempo  tipo de animação
function interpolate(varX1, varY1, varZ1, varX2, varY2, varZ2, inicio, timer, animation)
    local tempo = getTickCount() -- pega o tempo
    local fim = inicio + timer -- conta
    local tempoDecorrido = tempo - inicio -- conta
    local duracao = fim - inicio -- mais conta
    local progresso = tempoDecorrido / duracao -- resultado da contas
    if (progresso > 1) then -- verificação
		progresso = 1
    end
  -- no interpolate ele requer no min. 8 argumentos 
  -- start: (onde começa) 
  -- end: (onde termina)
  -- progresso: o tempo que leva para ele ir do inicio ao fim
  -- animation: o tipo de animação
  --                                                 arg1,  arg2,  arg3,  arg4,  arg5,  arg6,    arg7,    arg8
    --    3 variaveis                        start:   x     y      z   end: x     y      z     progresso  animation
    local varX1, varY1, varZ1 = interpolateBetween (varX1, varY1, varZ1, varX2, varY2, varZ2, progresso, animation) 
    --                                               
    return varX1, varY1, varZ1 -- retorna as posições para as variaveis
end

-- EventAdded             nome evento      elemento evento   nome da função
function isEventHandlerAdded( sEventName, pElementAttachedTo, func )
    if type( sEventName ) == 'string' and isElement( pElementAttachedTo ) and type( func ) == 'function' then
         local aAttachedFunctions = getEventHandlers( sEventName, pElementAttachedTo )
         if type( aAttachedFunctions ) == 'table' and #aAttachedFunctions > 0 then
              for i, v in ipairs( aAttachedFunctions ) do
                   if v == func then
                    return true
               end
          end
     end
    end
    return false
end

--------------------------------------------------------- funções uteis -------------------------------------------------------------------

Não estou com muito tempo pra explicar mas o código é esse ai. Leia as linhas comentadas!

Se vc entender o básico de logica acho que consegue entender oq tentei passar...

Quanto ao que vc me mandou no pv, desculpa mas não costumo ajudar assim. Prefiro soltar os códigos aqui, tanto para outras pessoas que tenham a mesma duvida ou até mesmo para outras pessoas que já entendam melhor que eu vir e melhorar o código.

Espero ter ajudado, caso tenha duvidas pode perguntar o quanto quiser que tentarei lhe ajudar

@Mopped

Edited January 1, 2020 by Eder

Mopped · January 1, 2020

Oi, Eder, boa tarde. O painel está se multiplicando assim que se entra/sai do carro, e está com alguns problemas...

Aqui está o código do script, (eu tirei a parte que tem esse painel para colocar a desse código que vc mandou)

local screenW,screenH = guiGetScreenSize()
local resW, resH = 1366,768
local x, y = (screenW/resW), (screenH/resH)
local components = { "area_name", "radio", "vehicle_name" }

local font1 = dxCreateFont('files/fonts/font.ttf', 37, false);
local font2 = dxCreateFont('files/fonts/font.ttf', 25, false);
local font3 = dxCreateFont('files/fonts/font3.ttf', 20, false);
local font4 = dxCreateFont('files/fonts/font3.ttf', 25, false);
local font5 = dxCreateFont('files/fonts/font.ttf', 25, false);
local fontprice = dxCreateFont('files/fonts/pricedownbl.ttf', 25, false);
local font10 = dxCreateFont('files/fonts/font10.ttf', 25, false);
local font11 = dxCreateFont('files/fonts/font11.ttf', 25, false);


function kyubo()
    if (not isPlayerMapVisible()) then
        local money = ("%008d"):format(getPlayerMoney(getLocalPlayer())) 
        local job = getElementData(getLocalPlayer(), "Emprego") or "Desempregado"
        local cargo = getElementData(localPlayer, "DNL:Cargo") or "Civil"
        local level = getElementData(getLocalPlayer(), "Level") or 0
        local banco = ("%008d"):format(getElementData(getLocalPlayer(), "Bank:Royal")) or 0
        local xp = getElementData(getLocalPlayer(), "LSys:EXP") or 0
        local fome = getElementData(getLocalPlayer(), "AirNewSCR_Fome")
        local sede = getElementData(getLocalPlayer(), "AirNewSCR_Sede")
        local showammo1 = getPedAmmoInClip (localPlayer,getPedWeaponSlot(localPlayer))
	    local showammo2 = getPedTotalAmmo(localPlayer)-getPedAmmoInClip(localPlayer)
	    local showammo3 = getPedTotalAmmo(getLocalPlayer())
	    local clip = getPedAmmoInClip (getLocalPlayer())
	    local weapon = getPedWeapon ( getLocalPlayer() )
        local arma = getWeaponNameFromID ( weapon )
        local color1 = tocolor(0,255,0,90)
        local Sono = getElementData(getLocalPlayer(), "sono")

        local vehicle = getPedOccupiedVehicle( getLocalPlayer() )
        
        local time = getRealTime()
        local hours = time.hour
        local minutes = time.minute
        local seconds = time.second
        local years = time.year + 1900 
        local month = time.month + 1 
        local day = time.monthday

    if (hours >= 0 and hours < 10) then
        hours = "0"..time.hour
    end
    if (minutes >= 0 and minutes < 10) then
    	minutes = "0"..time.minute
    end
    if (seconds >= 0 and seconds < 10) then
    	seconds = "0"..time.second
    end



       dxDrawText(job, x*1495, y*110, x*1026, y*90, tocolor(255, 255, 255, 255), x*0.60, fontprice, "center", "center", false, false, false, false, false)
        dxDrawText('Level: '..level, x*1490, y*185, x*1026, y*90, tocolor(255, 255, 255, 255), x*0.60, fontprice,"center", "center", false, false, false, false, false)
        dxDrawText('EXP: '..xp, x*1490, y*220, x*1026, y*90, tocolor(255, 255, 255, 255), x*0.60, fontprice,"center", "center", false, false, false, false, false)
        dxDrawText(''..money, x*1505, y*275, x*1026, y*90, tocolor(144,238,144), x*0.70, fontprice, "center", "center", false, false, false, false, false)
        dxDrawText(''..banco, x*1505, y*325, x*1026, y*90, tocolor(30, 144, 255, 255), x*0.70, fontprice, "center", "center", false, false, false, false, false)
        dxDrawText(""..hours..":"..minutes..":"..seconds.."", x*1498, y*380, x*1026, y*90, tocolor(255, 255, 255, 255), x*0.45, font10, "center", "center", false, false, false, false, false)
        dxDrawText(""..day.."/"..month.."/"..years.."", x*1498, y*420, x*1026, y*90, tocolor(255, 255, 255, 255), x*0.40, font10, "center", "center", false, false, false, false, false)
        dxDrawText('KMKRP', x*1445, y*-10, x*1026, y*90, tocolor(255, 255, 255, 255), x*0.70, font3, "center", "center", false, false, false, false, false) 
        dxDrawText('#', x*1360, y*-10, x*1026, y*90, tocolor(255, 255, 255, 255), x*0.70, font10, "center", "center", false, false, false, false, false)   
        dxDrawImage(x*1153, y*597, x*210, y*134, "files/images/interface.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)
        dxDrawImage(x*1275, y*-4, x*80, y*85, "files/images/logo.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)
        dxDrawImage(x*1185, y*196, x*24, y*24, "files/images/card.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)
         dxDrawImage(x*1185, y*172, x*24, y*24, "files/images/money.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)
         ------------------- a parte do código estava aqui, eder -------------

        dxDrawText("Arma: "..arma.. " || Munição: " ..tostring (showammo1).." / "..tostring (showammo2), x*216, y*1480, x*132, y*20, tocolor(255, 255, 255, 255), 0.40, font10, "center", "center", false, false, false, false, false)

    end
end

    --------------------------------------------------------- funções uteis -------------------------------------------------------------------

    -- interpolate       posX   posY   posZ   posX1  posY1  posX1   tick   tempo  tipo de animação
    function interpolate(varX1, varY1, varZ1, varX2, varY2, varZ2, tick1, timer, animation)
        local tick2 = getTickCount()
        local fim = tick1 + timer
        local tempoDecorrido = tick2 - tick1
        local duracao = fim - inicio 
        local progresso = tempoDecorrido / duracao
        if (progresso > 1) then
    		progresso = 1
    	end
        local varX1, varY1, varZ1 = interpolateBetween (varX1, varY1, varZ1, varX2, varY2, varZ2, progresso, animation) 
        return varX1, varY1, varZ1
    end

    -- EventAdded             nome evento      elemento evento   nome da função
    function isEventHandlerAdded( sEventName, pElementAttachedTo, func )
        if type( sEventName ) == 'string' and isElement( pElementAttachedTo ) and type( func ) == 'function' then
             local aAttachedFunctions = getEventHandlers( sEventName, pElementAttachedTo )
             if type( aAttachedFunctions ) == 'table' and #aAttachedFunctions > 0 then
                  for i, v in ipairs( aAttachedFunctions ) do
                       if v == func then
                        return true
                   end
              end
         end
        end
        return false
    end

    --------------------------------------------------------- funções uteis -------------------------------------------------------------------


function setHud()
    addEventHandler("onClientRender", getRootElement(), kyubo)
    setPlayerHudComponentVisible("armour", false)
    setPlayerHudComponentVisible("wanted", false)
    setPlayerHudComponentVisible("weapon", false)
    setPlayerHudComponentVisible("money", false)
    setPlayerHudComponentVisible("health", false)
    setPlayerHudComponentVisible("clock", false)
    setPlayerHudComponentVisible("breath", false)
    setPlayerHudComponentVisible("ammo", false)
    setPlayerHudComponentVisible("radar", false)

    for _, component in ipairs( components ) do
        setPlayerHudComponentVisible( component, false )
    end
end
addEventHandler("onClientResourceStart", getResourceRootElement(getThisResource()), setHud)

function removeHud()
    setPlayerHudComponentVisible("armour", true)
    setPlayerHudComponentVisible("wanted", true)
    setPlayerHudComponentVisible("weapon", true)
    setPlayerHudComponentVisible("money", true)
    setPlayerHudComponentVisible("health", true)
    setPlayerHudComponentVisible("clock", true)
    setPlayerHudComponentVisible("breath", true)
    setPlayerHudComponentVisible("ammo", true)
end

addEventHandler("onClientResourceStop", getResourceRootElement(getThisResource()), removeHud)


function convertNumber ( number )   
    local formatted = number   
    while true do       
        formatted, k = string.gsub(formatted, "^(-?%d+)(%d%d%d)", '%1.%2')     
        if ( k==0 ) then       
            break   
        end   
    end   
    return formatted 
end

O lugar certo a se por isso, é dps de todos esses "local" não é?

ou você recomenda que no lugar de por no próprio client da hud eu crie um arquivo .Lua específico só pra isso? Desde já, agradeço ^^

De primeira ele faz a animação certinha, sobe de boa, mas quando você entra/sai do carro pela 2 vez, ele começa com esse problema de multiplicar esses paineis e o FPS fica muito baixo

@Eder

Developer. · January 1, 2020

Hm, estranho essa parte de ficar duplicando, pois tem a verificação e a remoção do evento mas enfim.

Tente o código abaixo.

Obs: na hora de copiar clique neste botão > http://prntscr.com/qi9y1p

Assim é certeza que você copiou o código corretamente!

local screenW,screenH = guiGetScreenSize()
local resW, resH = 1366,768
local x, y = (screenW/resW), (screenH/resH)
local font1 = dxCreateFont('files/fonts/font.ttf', 37, false);
local font2 = dxCreateFont('files/fonts/font.ttf', 25, false);
local font3 = dxCreateFont('files/fonts/font3.ttf', 20, false);
local font4 = dxCreateFont('files/fonts/font3.ttf', 25, false);
local font5 = dxCreateFont('files/fonts/font.ttf', 25, false);
local fontprice = dxCreateFont('files/fonts/pricedownbl.ttf', 25, false);
local font10 = dxCreateFont('files/fonts/font10.ttf', 25, false);
local font11 = dxCreateFont('files/fonts/font11.ttf', 25, false);

function hud()
    if (not isPlayerMapVisible()) then
        local money = ("%008d"):format(getPlayerMoney(getLocalPlayer())) 
        local job = getElementData(getLocalPlayer(), "Emprego") or "Desempregado"
        local cargo = getElementData(localPlayer, "DNL:Cargo") or "Civil"
        local level = getElementData(getLocalPlayer(), "Level") or 0
        local banco = ("%008d"):format(getElementData(getLocalPlayer(), "Bank:Royal")) or 0
        local xp = getElementData(getLocalPlayer(), "LSys:EXP") or 0
        local fome = getElementData(getLocalPlayer(), "AirNewSCR_Fome")
        local sede = getElementData(getLocalPlayer(), "AirNewSCR_Sede")
        local showammo1 = getPedAmmoInClip (localPlayer,getPedWeaponSlot(localPlayer))
	    local showammo2 = getPedTotalAmmo(localPlayer)-getPedAmmoInClip(localPlayer)
	    local showammo3 = getPedTotalAmmo(getLocalPlayer())
	    local clip = getPedAmmoInClip (getLocalPlayer())
	    local weapon = getPedWeapon ( getLocalPlayer() )
        local arma = getWeaponNameFromID ( weapon )
        local color1 = tocolor(0,255,0,90)
        local Sono = getElementData(getLocalPlayer(), "sono")
        local vehicle = getPedOccupiedVehicle( getLocalPlayer() )
        
        local time = getRealTime()
        local hours = time.hour
        local minutes = time.minute
        local seconds = time.second
        local years = time.year + 1900 
        local month = time.month + 1 
        local day = time.monthday
    if (hours >= 0 and hours < 10) then
        hours = "0"..time.hour
    end
    if (minutes >= 0 and minutes < 10) then
    	minutes = "0"..time.minute
    end
    if (seconds >= 0 and seconds < 10) then
    	seconds = "0"..time.second
    end
       dxDrawText(job, x*1495, y*110, x*1026, y*90, tocolor(255, 255, 255, 255), x*0.60, fontprice, "center", "center", false, false, false, false, false)
        dxDrawText('Level: '..level, x*1490, y*185, x*1026, y*90, tocolor(255, 255, 255, 255), x*0.60, fontprice,"center", "center", false, false, false, false, false)
        dxDrawText('EXP: '..xp, x*1490, y*220, x*1026, y*90, tocolor(255, 255, 255, 255), x*0.60, fontprice,"center", "center", false, false, false, false, false)
        dxDrawText(''..money, x*1505, y*275, x*1026, y*90, tocolor(144,238,144), x*0.70, fontprice, "center", "center", false, false, false, false, false)
        dxDrawText(''..banco, x*1505, y*325, x*1026, y*90, tocolor(30, 144, 255, 255), x*0.70, fontprice, "center", "center", false, false, false, false, false)
        dxDrawText(""..hours..":"..minutes..":"..seconds.."", x*1498, y*380, x*1026, y*90, tocolor(255, 255, 255, 255), x*0.45, font10, "center", "center", false, false, false, false, false)
        dxDrawText(""..day.."/"..month.."/"..years.."", x*1498, y*420, x*1026, y*90, tocolor(255, 255, 255, 255), x*0.40, font10, "center", "center", false, false, false, false, false)
        dxDrawText('KMKRP', x*1445, y*-10, x*1026, y*90, tocolor(255, 255, 255, 255), x*0.70, font3, "center", "center", false, false, false, false, false) 
        dxDrawText('#', x*1360, y*-10, x*1026, y*90, tocolor(255, 255, 255, 255), x*0.70, font10, "center", "center", false, false, false, false, false)   
        dxDrawImage(x*1153, y*597, x*210, y*134, "files/images/interface.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)
        dxDrawImage(x*1275, y*-4, x*80, y*85, "files/images/logo.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)
        dxDrawImage(x*1185, y*196, x*24, y*24, "files/images/card.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)
         dxDrawImage(x*1185, y*172, x*24, y*24, "files/images/money.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)
        dxDrawText("Arma: "..arma.. " || Munição: " ..tostring (showammo1).." / "..tostring (showammo2), x*216, y*1480, x*132, y*20, tocolor(255, 255, 255, 255), 0.40, font10, "center", "center", false, false, false, false, false)
    end
end

local up = {
    [1] = {y*634},
    [2] = {y*677},
    [3] = {y*718},
}

local down = {
    [1] = {y*426},
    [2] = {y*464},
    [3] = {y*502},
}

function onVeh()
    local x1, y1, z1 = interpolate(0, up[1][1], 0, 0, down[1][1], 0, inicio2, 1000, "Linear")
    local x2, y2, z2 = interpolate(0, up[2][1], 0, 0, down[2][1], 0, inicio2, 1000, "Linear")
    local x3, y3, z3 = interpolate(0, up[3][1], 0, 0, down[3][1], 0, inicio2, 1000, "Linear")
   
    dxDrawImage(x*54, y1, x*36, y*36, "files/images/comida.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)        
    dxDrawRectangle(x*100, y1, x*150, y*35, tocolor(0, 0, 0, 140), false)    
    dxDrawRectangle(x*100, y1, x*150/100*fome, y*35, tocolor(255, 165, 0), false)

    dxDrawImage(x*54, y2, x*36, y*36, "files/images/sede.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)              
    dxDrawRectangle(x*100, y2, x*150, y*35, tocolor(0, 0, 0, 140), false)
    dxDrawRectangle(x*100, y2, x*150/100*sede, y*35, tocolor(16, 102, 231, 200), false)

    dxDrawImage(x*54, y3, x*36, y*36, "files/images/iconeSONO.png", 0, 0, 0, tocolor(255, 255, 255, 255), false) 
    dxDrawRectangle(x*100, y3, x*150, y*35, tocolor(0, 0, 0, 140), false)
    dxDrawRectangle(x*100, y3, x*150/100*Sono, y*35, tocolor(138, 43, 226, 200), false)
end

function onFoot()
    if inicio then
        local x1, y1, z1 = interpolate(0, down[1][1], 0, 0, up[1][1], 0, inicio, 1000, "Linear") -- animação retangulo 1
        local x2, y2, z2 = interpolate(0, down[2][1], 0, 0, up[2][1], 0, inicio, 1000, "Linear") -- animação retangulo 2
        local x3, y3, z3 = interpolate(0, down[3][1], 0, 0, up[3][1], 0, inicio, 1000, "Linear") -- animação retangulo 3

        dxDrawImage(x*54, y1, x*36, y*36, "files/images/comida.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)        
        dxDrawRectangle(x*100, y1, x*150, y*35, tocolor(0, 0, 0, 140), false)    
        dxDrawRectangle(x*100, y1, x*150/100*fome, y*35, tocolor(255, 165, 0), false)

        dxDrawImage(x*54, y2, x*36, y*36, "files/images/sede.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)              
        dxDrawRectangle(x*100, y2, x*150, y*35, tocolor(0, 0, 0, 140), false)
        dxDrawRectangle(x*100, y2, x*150/100*sede, y*35, tocolor(16, 102, 231, 200), false)

        dxDrawImage(x*54, y3, x*36, y*36, "files/images/iconeSONO.png", 0, 0, 0, tocolor(255, 255, 255, 255), false) 
        dxDrawRectangle(x*100, y3, x*150, y*35, tocolor(0, 0, 0, 140), false)
        dxDrawRectangle(x*100, y3, x*150/100*Sono, y*35, tocolor(138, 43, 226, 200), false)
    else
        dxDrawImage(x*54, y*634, x*36, y*36, "files/images/comida.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)        
        dxDrawRectangle(x*100, y*634, x*150, y*35, tocolor(0, 0, 0, 140), false)    
        dxDrawRectangle(x*100, y*634, x*150/100*fome, y*35, tocolor(255, 165, 0), false)

        dxDrawImage(x*54, y*677, x*36, y*36, "files/images/sede.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)              
        dxDrawRectangle(x*100, y*677, x*150, y*35, tocolor(0, 0, 0, 140), false)
        dxDrawRectangle(x*100, y*677, x*150/100*sede, y*35, tocolor(16, 102, 231, 200), false)

        dxDrawImage(x*54, y*718, x*36, y*36, "files/images/iconeSONO.png", 0, 0, 0, tocolor(255, 255, 255, 255), false) 
        dxDrawRectangle(x*100, y*718, x*150, y*35, tocolor(0, 0, 0, 140), false)
        dxDrawRectangle(x*100, y*718, x*150/100*Sono, y*35, tocolor(138, 43, 226, 200), false)
    end
end
addEventHandler("onClientRender", root, onFoot, false)

function onVehEnter(p)
    if p == getLocalPlayer() then
        if (not inicio2) then
            inicio2 = getTickCount()
            addEventHandler("onClientRender", root, onVeh, false)
            if isEventHandlerAdded( 'onClientRender', root, onFoot) then
                removeEventHandler('onClientRender', root, onFoot, false)
            end
            if inicio then
                inicio = nil
            end
        end
    end
end
addEventHandler ("onClientVehicleEnter", root, onVehEnter)

function onVehExit(p)
    if p == getLocalPlayer() then
        if (not inicio) then
            inicio = getTickCount()
            addEventHandler("onClientRender", root, onFoot, false)
            if isEventHandlerAdded( 'onClientRender', root, onVeh) then
                removeEventHandler('onClientRender', root, onVeh, false)
            end
            if inicio2 then
                inicio2 = nil
            end
       end
    end
end
addEventHandler ("onClientVehicleExit", root, onVehExit)

local components = { "area_name", "radio", "vehicle_name" }
local hud_components = {"armour", "wanted", "weapon", "money", "health", "clock", "breath", "ammo", "radar"}

function setHud()
    addEventHandler("onClientRender", getRootElement(), hud)
    for _, hud_component in ipairs( hud_components) do
        setPlayerHudComponentVisible( hud_component, false )
    end
    for _, component in ipairs( components ) do
        setPlayerHudComponentVisible( component, false )
    end
end
addEventHandler("onClientResourceStart", getResourceRootElement(getThisResource()), setHud)

function removeHud()
    for _, hud_component in ipairs( hud_components) do
        setPlayerHudComponentVisible( hud_component, true )
    end
end
addEventHandler("onClientResourceStop", getResourceRootElement(getThisResource()), removeHud)

function interpolate(varX1, varY1, varZ1, varX2, varY2, varZ2, inicio, timer, animation)
    local tempo = getTickCount()
    local fim = inicio + timer
    local tempoDecorrido = tempo - inicio
    local duracao = fim - inicio
    local progresso = tempoDecorrido / duracao 
    if (progresso > 1) then
		progresso = 1
    end
    local varX1, varY1, varZ1 = interpolateBetween (varX1, varY1, varZ1, varX2, varY2, varZ2, progresso, animation) 
    return varX1, varY1, varZ1
end

function isEventHandlerAdded( sEventName, pElementAttachedTo, func )
    if type( sEventName ) == 'string' and isElement( pElementAttachedTo ) and type( func ) == 'function' then
         local aAttachedFunctions = getEventHandlers( sEventName, pElementAttachedTo )
         if type( aAttachedFunctions ) == 'table' and #aAttachedFunctions > 0 then
              for i, v in ipairs( aAttachedFunctions ) do
                   if v == func then
                    return true
               end
          end
     end
    end
    return false
end

function convertNumber ( number )   
    local formatted = number   
    while true do       
        formatted, k = string.gsub(formatted, "^(-?%d+)(%d%d%d)", '%1.%2')     
        if ( k==0 ) then       
            break   
        end   
    end   
    return formatted 
end

Edited January 1, 2020 by Eder

Mopped · January 2, 2020

Agora ele está mostrando apenas o ícone da fome (que no caso acredito que está mostrando esse pq seja o primeiro)

E a Rectangle que indica a fome/sede do jogador:

local fome = getElementData(getLocalPlayer(), "AirNewSCR_Fome")

local sede = getElementData(getLocalPlayer(), "AirNewSCR_Sede")

não está contando, apenas é um quadrado sem nada, sem função.

Não é problema com as imagens, eu já verifiquei... porém antes desse código as imagens estavam funcionando normalmente, nada na pasta das imagens foi mexido...

Edited January 2, 2020 by Mopped
Adicionei a imagem que não havia clcado

Developer. · January 2, 2020

3 minutes ago, Mopped said:

Agora ele está mostrando apenas o ícone da fome (que no caso acredito que está mostrando esse pq seja o primeiro)

E a Rectangle que indica a fome/sede do jogador:

local fome = getElementData(getLocalPlayer(), "AirNewSCR_Fome")

local sede = getElementData(getLocalPlayer(), "AirNewSCR_Sede")

não está contando, apenas é um quadrado sem nada, sem função.

Qual o erro no debug?

Mopped · January 2, 2020

Developer. · January 2, 2020

Só copiar os três getElementData (fome, sede, sono)

E colar dentro das funções onVeh e onFoot, tipo assim -> http://prntscr.com/qiagk7

Mopped · January 2, 2020

Cara, vc me ajudou muito... se me permite, uma última pergunta:

Caso eu queira adicionar uma interface (no caso um background para esse painel de fome/sede/sono), onde eu devo mudar no código para que ele faça a animação junto com os rectangles e os drawimage??

O código que eu queria colocar para que faça a animação junto é esse:

            dxDrawImage(x*48, y*565, x*210, y*134, "files/images/interface.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)

Edited January 2, 2020 by Mopped

Developer. · January 2, 2020

16 hours ago, Mopped said:
Cara, vc me ajudou muito... se me permite, uma última pergunta:

Caso eu queira adicionar uma interface (no caso um background para esse painel de fome/sede/sono), onde eu devo mudar no código para que ele faça a animação junto com os rectangles e os drawimage??

O código que eu queria colocar para que faça a animação junto é esse:
            dxDrawImage(x*48, y*565, x*210, y*134, "files/images/interface.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)

Bom para você fazer isto tem alguns passos a serem seguidos vamos lá:

1- posições: nesse "fundo" temos as posições:

x = 48

y = 565

w = 210

h = 134

O importante desses números todos é a posição y ou seja o 565, que é onde deverá ocorrer a animação. Se você viu as linhas comentadas acho que sabe do que estou falando!

2 - Valores em tabela: Temos duas tabelas, a tabela onde tem a posição do radar ( up ) e a outra onde tem as posições acima do radar ( down )

Primeiro vamos adicionar o valor na tabela ( up ) dessa forma:

local up = {
    [1] = {y*634},
    [2] = {y*677},
    [3] = {y*718},
    [4] = {y*565}, -- valor y do dxDrawImage
}

Ok, temos o valor na primeira tabela. Agora vamos a segunda:

Como eu não tenho o valor exato de onde ficaria vamos ter que fazer um conta simples, para obtê-lo

Para isso eu pego o valor Y do primeiro retângulo menos o valor Y do "fundo"

ficaria assim 634 - 565 o resultado é 69 px ( px é pixels)

Agora, na tabela ( down ) o que temos que fazer é subtrair o valor do primeiro retângulo menos a nossa diferença:

local down = {
    [1] = {y*426},
    [2] = {y*464},
    [3] = {y*502},
}

426 - 69 que é igual a 357 px ( px é pixels)

e fica assim a tabela 2 ( down )

local down = {
    [1] = {y*426},
    [2] = {y*464},
    [3] = {y*502},
    [4] = {y*357},
}

Agora que obtemos os dois valores vamos as funções.

3 - Variáveis e interpolate: Perceba que para cada retângulo temos um interpolate novo, isto se deve ao fato de que cada retângulo possui sua própria posição.

Nas duas functions ( onVeh e onFoot ) teremos que adicionar novos interpolates

Vamos fazer assim:

onVeh:

    local x1, y1, z1 = interpolate(0, up[1][1], 0, 0, down[1][1], 0, inicio2, 1000, "Linear")
    local x2, y2, z2 = interpolate(0, up[2][1], 0, 0, down[2][1], 0, inicio2, 1000, "Linear")
    local x3, y3, z3 = interpolate(0, up[3][1], 0, 0, down[3][1], 0, inicio2, 1000, "Linear")
    local x4, y4, z4 = interpolate(0, up[4][1], 0, 0, down[4][1], 0, inicio2, 1000, "Linear") -- interpolate do dxDrawImage (o fundo)

onFoot:

        local x1, y1, z1 = interpolate(0, down[1][1], 0, 0, up[1][1], 0, inicio, 1000, "Linear")
        local x2, y2, z2 = interpolate(0, down[2][1], 0, 0, up[2][1], 0, inicio, 1000, "Linear")
        local x3, y3, z3 = interpolate(0, down[3][1], 0, 0, up[3][1], 0, inicio, 1000, "Linear")
        local x4, y4, z4 = interpolate(0, down[4][1], 0, 0, up[4][1], 0, inicio, 1000, "Linear") -- interpolate do "fundo"

Criamos 6 novas variáveis, 3 em cada function, agora vamos adicionar o dxDrawImage:

4 - Adicionando o dx: pegamos o dx que você tem e colocamos ele ~~ACIMA~~ dos demais dessa forma:

OBS: DX FUNCIONAM COMO CAMADAS

ex: Se temos um retângulo e embaixo desse retângulo temos uma imagem, a imagem irá cobrir, irá se sobrepor ao retângulo!

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

5 - Adicionando a animação: Aqui iremos apagar o valor x*565 do dxDrawImage e substituir pela variável y4, dessa forma:

dxDrawImage(x*48, y4, x*210, y*134, "files/images/interface.png", 0, 0, 0, tocolor(255, 255, 255, 255), false)

Motivo: como dito anteriormente variáveis possuem valores ( ex: oi = tchau, se eu der print(oi) o que aparecerá no console é a palavra "tchau").

Quando eu tiro o valor y*565 e substituo pela variável y4 o que estou fazendo é colocar a animação no dxDrawImage ( o fundo).

Obs: Não se esqueça de adicionar o interpolate e o dx nas duas functions onVeh e onFoot!!

Feito todos esses passos, esta pronto! Agora temos um fundo com animação.

Caso não entenda alguma parte leia novamente! rs, mas caso ainda reste duvidas só perguntar.

@Mopped

Edited January 2, 2020 by Eder

Mopped · January 2, 2020

Caraca, tu é um anjo! Muito obrigado.

Imagem hud responsiva de acordo com o radar

Recommended Posts

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members