[HELP] fading on image switch

[85242]

hello how can i add fading effect on every image switch?

local textures = {}

for i=1, 4 do
    textures[i] = dxCreateTexture("img/bg" .. i .. ".png") or "img/bg" .. i .. ".png" -- apply a fallback in case of failing
end


local backgroundTexture = textures[1]
function random() 
    backgroundTexture = textures[math.random(4)]
end


setTimer( random, 3000, 0 )
local angle = 0


local function draw() 
    dxDrawImage(0, 0, screenSize.x, screenSize.y, backgroundTexture, angle, 0, -120)
end

 

Edited September 1, 2020 by 85242

[Zango]

Do you want to fade two images with each other? Or fade the current image to nothing and then fade the next image from nothing?

Use alpha in tocolor to fade it. (red, green, blue, alpha).

dxDrawImage(0, 0, screenSize.x, screenSize.y, backgroundTexture, angle, 0, -120, tocolor(255, 255, 255, 255))

To fade it a bit

dxDrawImage(0, 0, screenSize.x, screenSize.y, backgroundTexture, angle, 0, -120, tocolor(255, 255, 255, 100))

Now you need to add or subtact a bit of alpha every render. If you add 1 alpha, the effect will take 255 frames, so about 4 seconds at 60 FPS.

Let me know if you need code/explanation.

[85242]

i want to make fade effect on every image switch like this:
https://i.imgur.com/OA08JvD.mp4

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

function fadeImages()
      
    if (Images[1][2] > 0) then
       Images[1][2] = Images[1][2]-1; 
    end
      
    if (Images[2][2] < 255) then
       Images[2][2] = Images[2][2]+1;
    end
      
	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

but it's only work with 2 images, i have 4 images.
can you help me with the code?

[Overkillz]

NOT TESTED

I just build my own method due to I don't feel confortable with your way.

Here you have 

local showImage = 1
local switchTick = getTickCount()
local interval = 3000 --Image duration (Including fade)

local images = {
	{path = "image1", alpha = 0},
	{path = "image2", alpha = 0},
	{path = "image3", alpha = 0},
	{path = "image4", alpha = 0},
}

function drawImages()
	if getTickCount() - switchTick > interval then
		showImage = showImage + 1
		if showImage > #images then
			showImage = 1
		end
		switchTick = getTickCount()
	end
	for i,k in ipairs(images) do
		if i == showImage then
			k.alpha = math.min(k.alpha+30,255)
		else
			k.alpha = math.max(k.alpha-30,0)
		end
		if k.alpha > 0 then --This will AVOID to draw not visible images (CPU USAGE REDUCTION)
			dxDrawImage(0,0,500,500,k.path,0,0,0,tocolor(255,255,255,k.alpha))
		end
	end
end
addEventHandler("onClientRender",root,drawImages)

 

Edited September 2, 2020 by Overkillz