Gui Image fade to new image

[knightscript]

Hello, I am trying to make a script that swaps the image on screen for a new one from a table I really am lost and dont have idea what to do next,

local screenW, screenH = guiGetScreenSize()
local randomize2 = math.random ( #Imagens )
local alpha = 255
local current_image = ""
function ImageRender(image,alpha)
	if getElementData (getLocalPlayer(  ),"logedin") == false or getElementData (getLocalPlayer(  ),"logedin") == nil then
		current_image = guiCreateStaticImage(0, 0, screenWidth, screenHeight, tostring(Imagens[image]), false)
		guiMoveToBack( current_image )
		guiSetAlpha(current_image, alpha )
	end
end
addEventHandler("onClientResourceStart", resourceRoot,ImageRender)
function RenderImageSwap()
	if getElementData (getLocalPlayer(  ),"logedin") == false or getElementData (getLocalPlayer(  ),"logedin") == nil then
		if (alpha > 0) then
			newAlpha = alpha < 25
			if (newAlpha < 0) then
				ImageRender(randomize2,255)
			else
				ImageRender(current_image,newAlpha)
			end
		end
	end
end
setTimer( RenderImageSwap, 1000, 0)

This is my code right know, which unfortunately, isnt working at all, does anyone know how to make a fade out an image (set alpha to alpha - 25.5 in a duration of 10 seconds for example) and if it reaches zero, it fades the next one in (set alpha of new image to alpha + 25.5 in a duration of 5 seconds for example)

 

thanks  I really tried my best but I dont know what functions to use, was thinking on getCurrentTick but I dont get how it works

[WorthlessCynomys]

I'm from phone, so I didn't read the code! 

I would put the images and their alpha values in a table, like:

Images = {
{"image1", 255}, 
{"image2", 0}, 
} 

And I would use 2 dxDrawImages using the alpha values attached to the images and I would change the image to be displayed while changing the numbers representing the alpha values. 

Hope that you understand what I try to say. 

[knightscript]

2 minutes ago, WorthlessCynomys said:

I'm from phone, so I didn't read the code! 

I would put the images and their alpha values in a table, like:

Images = {
{"image1", 255}, 
{"image2", 0}, 
} 

And I would use 2 dxDrawImages using the alpha values attached to the images and I would change the image to be displayed while changing the numbers representing the alpha values. 

Hope that you understand what I try to say. 

Thanks, I do understand, what I dont understand is how can I fade out and fade in an image? i cant manage to understand how onclientrender could work

[WorthlessCynomys]

25 minutes ago, knightscript said:

Thanks, I do understand, what I dont understand is how can I fade out and fade in an image? i cant manage to understand how onclientrender could work

onClientRender is an event, you have to handle with addEventHandler.

addEventHandler("onClientRender", root, functionToCall);

In the function it will call:

function fadingImages()
  dxDrawImage(500, 500, 250, 250, "image1.png", 0, 0, 0, tocolor(255, 255, 255, 255), false);
  -- This line will draw the image (image1.png) on your monitor. It's left top corner will be at (500;500) pixel position and it will spread to the right 250 pixels and down 250 pixels. So it's right bottom corner will be at (750;750) pixel position on your screen. To make it transparent, you have to change the 4th, Alpha value in the tocolor function ( R(ed)G(reen)B(lue)A(lpha) ).
end

onClientRender gets called every time your PC refreshes/renders the game. If you play at 60 FPS(Frames per second), it means it gets called 60 times per second.

Now using this knowledge you can make what I recommended:

This code is NOT tested!

Images = {
 {"image1.png", 255},
 {"image2.png", 0},
};

function fadeImages()
      
    -- || This part will do the transparency changes || --
    if (Images[1][2] > 0) then -- If the transparency of the first image is greater than none, we subtract 1 from it's value, making it more transparent.
       Images[1][2] = Images[1][2]-1; 
    end
      
    if (Images[2][2] < 255) then -- If the transparency of the second image is less then full, we add 1 to it's value, making it less transparent.
       Images[2][2] = Images[2][2]+1;
    end
      
    -- Doing the part above, will result in the two images changing each other with a fade effect.
      
    -- || This part will draw the 2 images on top of each other || --
	dxDrawImage(500, 500, 250, 250, Images[1][1], 0, 0, 0, tocolor(255, 255, 255, Images[1][2]), false);
    dxDrawImage(500, 500, 250, 250, Images[2][1], 0, 0, 0, tocolor(255, 255, 255, Images[2][2]), false);
end
addEventHandler("onClientRender", root, fadeImages);

 

Edited August 13, 2018 by WorthlessCynomys
Fix

[knightscript]

7 minutes ago, WorthlessCynomys said:

onClientRender is an event, you have to handle with addEventHandler.

addEventHandler("onClientRender", root, functionToCall);

In the function it will call:

function fadingImages()
  dxDrawImage(500, 500, 250, 250, "image1.png", 0, 0, 0, tocolor(255, 255, 255, 255), false);
  -- This line will draw the image (image1.png) on your monitor. It's left top corner will be at (500;500) pixel position and it will spread to the right 250 pixels and down 250 pixels. So it's right bottom corner will be at (750;750) pixel position on your screen. To make it transparent, you have to change the 4th, Alpha value in the tocolor function ( R(ed)G(reen)B(lue)A(lpha) ).
end

onClientRender gets called every time your PC refreshes/renders the game. If you play at 60 FPS(Frames per second), it means it gets called 60 times per second.

Now using this knowledge you can make what I recommended:

This code is NOT tested!

Images = {
 {"image1.png", 255},
 {"image2.png", 0},
};

function fadeImages()
      
    -- || This part will do the transparency changes || --
    if (Images[1][2] > 0) then -- If the transparency of the first image is greater than none, we subtract 1 from it's value, making it more transparent.
       Images[1][2] = Images[1][2]-1; 
    end
      
    if (Images[2][2] < 255) then -- If the transparency of the second image is less then full, we add 1 to it's value, making it less transparent.
       Images[2][2] = Images[2][2]+1;
    end
      
    -- Doing the part above, will result in the two images changing each other with a fade effect.
      
    -- || This part will draw the 2 images on top of each other || --
	dxDrawImage(500, 500, 250, 250, Images[1][1], 0, 0, 0, tocolor(255, 255, 255, Images[1][2]), false);
    dxDrawImage(500, 500, 250, 250, Images[2][1], 0, 0, 0, tocolor(255, 255, 255, Images[2][2]), false);
end
addEventHandler("onClientRender", root, fadeImages);

 

Thank you so much for explaining this, i will try this and update my comment with the result, one more question not exactly related, is there a way to set a weapons alpha (a gun that i give with giveGun)? thank you

[WorthlessCynomys]

Just now, knightscript said:

Thank you so much for explaining this, i will try this and update my comment with the result, one more question not exactly related, is there a way to set a weapons alpha (a gun that i give with giveGun)? thank you

I have no idea about the gun transparency. If it is possible, then with a little search on WIKI, you'll find a function that can do it.