Jump to content

[HELP] fading on image switch


85242

Recommended Posts

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 by 85242
Link to comment
  • Discord Moderators

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.

  • Like 1
Link to comment

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?

Link to comment

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 by Overkillz
  • Thanks 1
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...