Animación al pasar el mouse como la del menú de MTA

[Anzo]

¿Qué se puede usar para que al pasar el mouse por un dx sobre-salga el texto,rectangle, como en el menú de MTA?

Quiero hacer una animación similar a la del Menú de MTA

Para al pasar el cursor se que se puede usar isMouseInPosition, pero para la animación, ¿qué puedo usar?

[Bc#]

getTickCount

Ejemplo de un progreso lineal con getTickCount;

local start = getTickCount() 
local progress=0 
  
addEventHandler("onClientRender", root, function()  
    if progress<5 then 
            progress = getTickCount() - start 
    end 
    dxDrawText("Olakase", 100,100,0,0,white,"default",progress) 
end) 

PD: no lo testie así que no esta exento de bugs

[Anzo]

getTickCount

Ejemplo de un progreso lineal con getTickCount;

local start = getTickCount() 
local progress=0 
  
addEventHandler("onClientRender", root, function()  
    if progress<5 then 
            progress = getTickCount() - start 
    end 
    dxDrawText("Olakase", 100,100,0,0,white,"default",progress) 
end) 

PD: no lo testie así que no esta exento de bugs

No funciona, le intente cambiando algunas cosas al dxText pero nada, pero, ¿para que sirve exactamente getTickCount? nunca lo he usado y nunca entendi para que sirve muy bien.

Otra pregunta, ¿cómo puedo se puede hacer una animación con getTickCount?

[Bc#]

getTickCount es un contador de tiempo en milisegundos, por eso si tomas un punto de inicio y haces un progreso en un onClientRender puedes usarlo para crear una animacion.

En palabras sencillas, para tu animacion necesitas que una variable aumente su valor linealmente, por lo que te viene bien la funcion. Intenta comprender el funcionamiento mas que el script en si.

PD: si quieres una animacion un poco mas compleja debes usar getEasingValue

[Anzo]

Probé haciendo una animación con interpolateBetween y getEasingValue,si funcionaron bien solo que con getEasingValue el texto llega hasta donde debe llegar y luego se devuelve, con interpolateBetween el texto llega y se queda allí.

local x,y = guiGetScreenSize() 
local start = getTickCount() 
  
function anims() 
local progress = (getTickCount()-start)/3000 
local animacion = interpolateBetween(0,0,0,1,0,1,progress,"InOutQuad") 
    dxDrawText("sss",  0, 0, x-600+animacion*491, 305,  tocolor(255, 255, 255, animacion*255), 2.00, "default", "center", "center", false, false, false, true, true) 
end 
addEventHandler("onClientRender", root, anims) 
  
--Con getEasingValue 
  
function anims2() 
local progress = (getTickCount()-start)/3000 
local animacion = getEasingValue(progress,"InOutQuad") 
    dxDrawText("sss",  0, 0, x-600+animacion*491, 305,  tocolor(255, 255, 255, animacion*255), 2.00, "default", "center", "center", false, false, false, true, true) 
end 
addEventHandler("onClientRender", root, anims2) 
  

Otra cosa es que no se donde poner el isMouseInPosition para que salga la animación, normalmente lo pongo después del width y height pero solo lo he usado con cosas como cambiar el color al pasar el cursor.

[Tomas]

Lo único que él quiere es agrandar un poco el texto y mover los otros, ¿para qué tanta cosa?

[Anzo]

Ayuda(?

[Bc#]

dxGetFontHeight

dxGetTextWidth

[Anzo]

dxGetFontHeight

dxGetTextWidth

¿Un ejemplo de como usar eso para la animación que quiero hacer?, yo use los ejemplos de la wiki pero no cambia nada.

[Bc#]

dxGetFontHeight

dxGetTextWidth

¿Un ejemplo de como usar eso para la animación que quiero hacer?, yo use los ejemplos de la wiki pero no cambia nada.

Valla aplicándose con el ingles, en la wiki sale todo explicado y con ejemplos. Eso te da el largo y alto de un texto, te sirve para cuando pasas el puntero del mouse encima. Lo que pedias mas arriba.

[Anzo]

Bueno, después de unas horas leyendo la wiki para entender un poco para que sirve y leyendo posts viejos para darme una idea de como hacer una animación con eso, no logré hacer nada. (okno)

Lo que tengo es esto:

local scale = 1 
local ScaleC = scale 
local maxScale = 3  
local font = "default-bold" 
local texto = "Esto es un texto" 
local step = 0.1 --velocidad del texto para llegar a la fuente 5 
local incremento = true  
  
function test() 
dxDrawText(texto, 280, 275, 374, 289, tocolor(255, 255, 255, 255), 1.00, "default", "left", "top", false, false, false, false, false) 
  
if isMouseInPosition(280,275,374,289) then 
    if incremento == true then 
    ScaleC = ScaleC + step 
        if ScaleC > maxScale then 
        ScaleC = maxScale 
        incremento = false 
    end 
        local width = dxGetTextWidth(texto,ScaleC,font) 
        local height = dxGetFontHeight(ScaleC,font) 
        dxDrawText(texto, 280, 275, width, height, tocolor(255, 255, 255, 255), ScaleC, font, "left", "top", false, false, false, false, false) 
    else 
     
    ScaleC = ScaleC - step 
    if ScaleC < scale then 
      ScaleC = scale 
      incremento = false 
     
    end 
    dxDrawText(texto, 280, 275, width, height, tocolor(255, 255, 255, 255), ScaleC, font, "left", "top", false, false, false, false, false)   
end 
    end  
end 
addEventHandler("onClientRender", root, test) 

Funciona bien, pero no del todo, al pasar el cursor por el texto sale la animación, pero luego se regresa al texto de nuevo cuando debería quedarse hasta donde llego hasta que yo saque el cursor del texto para que vuelva al texto original, no sé si me explico.

Otra cosa es que sale la animación solo una vez, si pasas el cursor por el texto saldrá la animación, pero si lo pasas por segunda vez, no aparecerá la animación.

PD: Si no entienden lo que digo, pueden probar el código en su servidor.

[MisterQuestions]

Bien esto se complico más de lo que en realidad es... Así que ten.. un código más simple.

Tal vez no sea la mejor opción pero debería funcionar.

* No lo he testeado.

  
local scale = 1 
local scaleSpeed = 0.25 
local maxScale = 2 
local minScale = 1 
  
function magicRender() 
    if isMouseInPosition(x,y,sx,sy) then --Checamos si esta en la posición para aumentar la escala, si no pues... solamente la baje lol. 
        scale = math.min(maxScale,scale + scaleSpeed) -- min nos debería de dar la maxScale cuando scale + scaleSpeed sea mayor que el máximo.. 
    else 
        scale = math.max(minScale,scale - scaleSpeed) -- max nos debería de dar el minScale si es menor. 
    end 
  
    dxDrawText("blah",x,y,x + sx,y + sy,tocolor(255, 255, 255, 255), scale, "default", "left", "top", false, false, false, false, false) -- solo dibujalo y ya está. 
     
end 
addEventHandler("onClientRender",root,magicRender) 
  

[Anzo]

Bien esto se complico más de lo que en realidad es... Así que ten.. un código más simple.

Tal vez no sea la mejor opción pero debería funcionar.

* No lo he testeado.

  
local scale = 1 
local scaleSpeed = 0.25 
local maxScale = 2 
local minScale = 1 
  
function magicRender() 
    if isMouseInPosition(x,y,sx,sy) then --Checamos si esta en la posición para aumentar la escala, si no pues... solamente la baje lol. 
        scale = math.min(maxScale,scale + scaleSpeed) -- min nos debería de dar la maxScale cuando scale + scaleSpeed sea mayor que el máximo.. 
    else 
        scale = math.max(minScale,scale - scaleSpeed) -- max nos debería de dar el minScale si es menor. 
    end 
  
    dxDrawText("blah",x,y,x + sx,y + sy,tocolor(255, 255, 255, 255), scale, "default", "left", "top", false, false, false, false, false) -- solo dibujalo y ya está. 
     
end 
addEventHandler("onClientRender",root,magicRender) 
  

Justo lo que quería hacer, muchas gracias.

Mm, ¿Cómo puedo hacer eso mismo para un dxDrawRectangle?, los Rectangle no usan font así que no tengo idea...

Intente así:

local scaleSpeed = 1 
local maxScale = 310 
local minScale = 1 
  
function magicRender() 
    if isMouseInPosition(200, 336, 233, 354) then --Checamos si esta en la posición para aumentar la escala, si no pues... solamente la baje lol. 
        maxScale = math.min(maxScale,maxScale + scaleSpeed) -- min nos debería de dar la maxScale cuando scale + scaleSpeed sea mayor que el máximo.. 
    else 
        maxScale = math.max(minScale,maxScale - scaleSpeed) -- max nos debería de dar el minScale si es menor. 
    end 
    
    dxDrawRectangle(200, 336, maxScale, 56,tocolor(255, 255, 255, 255), false) -- solo dibujalo y ya está. 
    
end 
addEventHandler("onClientRender",root,magicRender) 

Pero solo hace que el Rectangle vaya bajando su ancho hasta llegar a 0 (como si estuvieras quemado y te vaya bajando la vida) almenos eso me sirve para algo .

[MisterQuestions]

Puedes hacer que la escala sea de 1 y un porcentaje mínimo, y solo multiplicas el tamaño del rectangulo * escala.