interpolateBetween and rendering problem

Dzsozi (h03) · November 29, 2016

Hello! I am doing a pager script for my project for missions and other notifications. The first part of it works perfectly, it appears with an animation, text comes in and goes away, and the variable changes but instead of animating away it just disappears, and I don't understand why. I have been looking through the code for like 20 mins and I can't find the problem. Could somebody help me with this please? I just want it to go away with the same style of animation when it appears.

local pagerPosX, pagerPosY, pagerSizeX, pagerSizeY = 0, 20, 200, 100
local pagerStartTick = 0
local pagerStopTick = 0
local startShowingPager = false
local screenRenderTarget = dxCreateRenderTarget(pagerSizeX, pagerSizeY, true)
local str = nil
local textWidth = nil
local startAt = nil
local stopAt = nil
local speed = nil


function sendPagerNotification(message)
	if message and tostring(message) then
		pagerStartTick = getTickCount()
		pagerStopTick = pagerStartTick + 1000
		startShowingPager = true
		str = message
		textWidth = dxGetTextWidth(str, 1, "pricedown")
		startAt = pagerSizeX+100
		stopAt = pagerPosX-50-textWidth
		speed = 2.5
		playSoundFrontEnd(49)
	else
		return false
	end
end

function drawPager()
	--if str ~= nil then
		if startShowingPager == true then
			local now = getTickCount()
			local elapsedTime = now - pagerStartTick
			local duration = pagerStopTick - pagerStartTick
			local progress = elapsedTime / duration
			local pagerPosX = interpolateBetween(
			-pagerSizeX,0,0,
			125,0,0,
			progress, "InOutQuad"
			)
			
			local screenSizeMultiplierX, screenSizeDistanceY = 20, 15
			local screenPosX, screenPosY, screenSizeX, screenSizeY = pagerPosX+screenSizeMultiplierX, pagerPosY+screenSizeDistanceY, pagerSizeX-screenSizeMultiplierX*2, 40

			local buttonSizeX, buttonSizeY = pagerSizeX/6, pagerSizeY/4
			local buttonPosX, buttonPosY = pagerPosX+pagerSizeX/2-buttonSizeX/2, screenPosY+screenSizeY+10

			local dotSize = 10
			local dotPosX, dotPosY = buttonPosX+buttonSizeX/2-dotSize/2, buttonPosY+buttonSizeY/2-dotSize/2

			local brandText = "vicePAGE"
			local brandPosX, brandPosY = pagerPosX+10, pagerSizeY	

			dxDrawRectangle(pagerPosX, pagerPosY, pagerSizeX, pagerSizeY, tocolor(0,0,0,225))
			dxDrawText(brandText, brandPosX, brandPosY, 0, 0, tocolor(100,100,100,255), 1, "default", "left", "top", false, false, false, true)
			
			dxDrawRectangle(screenPosX, screenPosY, screenSizeX, screenSizeY, tocolor(175,200,125,255))
			exports.vice_util:dxDrawBorder(screenPosX, screenPosY, screenSizeX, screenSizeY, 4, tocolor(100,100,100,255))
			
			dxDrawRectangle(buttonPosX, buttonPosY, buttonSizeX, buttonSizeY, tocolor(100,100,100,255))
			dxDrawRectangle(dotPosX, dotPosY, dotSize, dotSize, tocolor(255,0,0,255))
			
			dxSetRenderTarget(screenRenderTarget, true)
			startAt = startAt - speed
			if startAt > stopAt then
				dxDrawText(str, startAt, screenSizeY, 0, 0, tocolor(0,0,0,255), 1, "pricedown", "left", "top", false, false, false, true)
			else
				--outputChatBox("most tűnik el")
				startShowingPager = false
			end
			dxSetRenderTarget()
			
			dxDrawImage(screenPosX, screenPosY-pagerSizeY/3, pagerSizeX-40, pagerSizeY, screenRenderTarget)
		else
			local now = getTickCount()
			local elapsedTime = now - pagerStartTick
			local duration = pagerStopTick - pagerStartTick
			local progress = elapsedTime / duration
			local pagerPosX = interpolateBetween(
			125,0,0,
			-pagerSizeX,0,0,
			progress, "InOutQuad"
			)
			
			local screenSizeMultiplierX, screenSizeDistanceY = 20, 15
			local screenPosX, screenPosY, screenSizeX, screenSizeY = pagerPosX+screenSizeMultiplierX, pagerPosY+screenSizeDistanceY, pagerSizeX-screenSizeMultiplierX*2, 40

			local buttonSizeX, buttonSizeY = pagerSizeX/6, pagerSizeY/4
			local buttonPosX, buttonPosY = pagerPosX+pagerSizeX/2-buttonSizeX/2, screenPosY+screenSizeY+10

			local dotSize = 10
			local dotPosX, dotPosY = buttonPosX+buttonSizeX/2-dotSize/2, buttonPosY+buttonSizeY/2-dotSize/2

			local brandText = "vicePAGE"
			local brandPosX, brandPosY = pagerPosX+10, pagerSizeY	

			dxDrawRectangle(pagerPosX, pagerPosY, pagerSizeX, pagerSizeY, tocolor(0,0,0,225))
			dxDrawText(brandText, brandPosX, brandPosY, 0, 0, tocolor(100,100,100,255), 1, "default", "left", "top", false, false, false, true)
			
			dxDrawRectangle(screenPosX, screenPosY, screenSizeX, screenSizeY, tocolor(175,200,125,255))
			exports.vice_util:dxDrawBorder(screenPosX, screenPosY, screenSizeX, screenSizeY, 4, tocolor(100,100,100,255))
			
			dxDrawRectangle(buttonPosX, buttonPosY, buttonSizeX, buttonSizeY, tocolor(100,100,100,255))
			dxDrawRectangle(dotPosX, dotPosY, dotSize, dotSize, tocolor(255,0,0,255))
		end
	--else
	--	return false
	--end
end
addEventHandler("onClientRender", root, drawPager)

sendPagerNotification("a")

What is the problem, why it doesn't use the animation when the startShowingPager variable is false?

pa3ck · November 30, 2016

The way I always do animations like this, I check if the endTime in your case the variable pagerStopTick is less than or equal to now (endTime <= getTickCount()), if it is, that means the interpolation is over and you can either have a timer to start the fade out animation or start the animation right away. In order to do that, you have to save the state in a variable. You are on the right track, but you forgot to update the startTime again, which means the progress is already over before starting (because of the startTime + endTime already elapsed). I have exactly the same thing implemented in the custom camera fade topic you created so you might want to take a look at the way I worked it out.

Simple0x47 · November 30, 2016

You could try by replacing the duration time by a defined one at your choose like 500. It's the best way of making the animations have the same duration. If that doesn't work I'd recommend to you to use some debug methods. ( outputDebugString or outputChatBox for getting values of the vars ).

Dzsozi (h03) · November 30, 2016

3 hours ago, pa3ck said:

The way I always do animations like this, I check if the endTime in your case the variable pagerStopTick is less than or equal to now (endTime <= getTickCount()), if it is, that means the interpolation is over and you can either have a timer to start the fade out animation or start the animation right away. In order to do that, you have to save the state in a variable. You are on the right track, but you forgot to update the startTime again, which means the progress is already over before starting (because of the startTime + endTime already elapsed). I have exactly the same thing implemented in the custom camera fade topic you created so you might want to take a look at the way I worked it out.

I tried to copy the method of your script from the other topic but I don't really get it how should it work and why it does not work.

local pagerPosX, pagerPosY, pagerSizeX, pagerSizeY = 0, 20, 200, 100
local pagerStartTick = 0
local pagerStopTick = 0
local startShowingPager = false
local screenRenderTarget = dxCreateRenderTarget(pagerSizeX, pagerSizeY, true)
local str = nil
local textWidth = nil
local startAt = nil
local stopAt = nil
local speed = nil


function sendPagerNotification(message)
	if message and tostring(message) then
		pagerStartTick = getTickCount()
		pagerStopTick = pagerStartTick + 1000
		startShowingPager = true
		str = message
		textWidth = dxGetTextWidth(str, 1, "pricedown")
		startAt = pagerSizeX+100
		stopAt = pagerPosX-50-textWidth
		speed = 2.5
		playSoundFrontEnd(49)
	else
		return false
	end
end

function drawPager()
	--if str ~= nil then
		local startEndPager, outEndPager
		local pagerOutTick
		local now = getTickCount()
		if startShowingPager == true then
			startEndPager = pagerStartTick + pagerStopTick
			local elapsedTime = now - pagerStartTick
			local duration = startEndPager - pagerStartTick
			local progress = elapsedTime / duration
			local pagerPosX = interpolateBetween(
			-pagerSizeX,0,0,
			125,0,0,
			progress, "InOutQuad"
			)
			
			local screenSizeMultiplierX, screenSizeDistanceY = 20, 15
			local screenPosX, screenPosY, screenSizeX, screenSizeY = pagerPosX+screenSizeMultiplierX, pagerPosY+screenSizeDistanceY, pagerSizeX-screenSizeMultiplierX*2, 40

			local buttonSizeX, buttonSizeY = pagerSizeX/6, pagerSizeY/4
			local buttonPosX, buttonPosY = pagerPosX+pagerSizeX/2-buttonSizeX/2, screenPosY+screenSizeY+10

			local dotSize = 10
			local dotPosX, dotPosY = buttonPosX+buttonSizeX/2-dotSize/2, buttonPosY+buttonSizeY/2-dotSize/2

			local brandText = "vicePAGE"
			local brandPosX, brandPosY = pagerPosX+10, pagerSizeY	

			dxDrawRectangle(pagerPosX, pagerPosY, pagerSizeX, pagerSizeY, tocolor(0,0,0,225))
			dxDrawText(brandText, brandPosX, brandPosY, 0, 0, tocolor(100,100,100,255), 1, "default", "left", "top", false, false, false, true)
			
			dxDrawRectangle(screenPosX, screenPosY, screenSizeX, screenSizeY, tocolor(175,200,125,255))
			exports.vice_util:dxDrawBorder(screenPosX, screenPosY, screenSizeX, screenSizeY, 4, tocolor(100,100,100,255))
			
			dxDrawRectangle(buttonPosX, buttonPosY, buttonSizeX, buttonSizeY, tocolor(100,100,100,255))
			dxDrawRectangle(dotPosX, dotPosY, dotSize, dotSize, tocolor(255,0,0,255))
			
			dxSetRenderTarget(screenRenderTarget, true)
			startAt = startAt - speed
			if startAt > stopAt then
				dxDrawText(str, startAt, screenSizeY, 0, 0, tocolor(0,0,0,255), 1, "pricedown", "left", "top", false, false, false, true)
			else
				--outputChatBox("most tűnik el")
				startShowingPager = false
			end
			dxSetRenderTarget()
			
			dxDrawImage(screenPosX, screenPosY-pagerSizeY/3, pagerSizeX-40, pagerSizeY, screenRenderTarget)
		else
			outEndPager = pagerOutTick + pagerStopTick
			local elapsedTime = now - pagerStartTick
			local duration = outEndPager - pagerStartTick
			local progress = elapsedTime / duration
			local pagerPosX = interpolateBetween(
			125,0,0,
			-pagerSizeX,0,0,
			progress, "InOutQuad"
			)
			
			local screenSizeMultiplierX, screenSizeDistanceY = 20, 15
			local screenPosX, screenPosY, screenSizeX, screenSizeY = pagerPosX+screenSizeMultiplierX, pagerPosY+screenSizeDistanceY, pagerSizeX-screenSizeMultiplierX*2, 40

			local buttonSizeX, buttonSizeY = pagerSizeX/6, pagerSizeY/4
			local buttonPosX, buttonPosY = pagerPosX+pagerSizeX/2-buttonSizeX/2, screenPosY+screenSizeY+10

			local dotSize = 10
			local dotPosX, dotPosY = buttonPosX+buttonSizeX/2-dotSize/2, buttonPosY+buttonSizeY/2-dotSize/2

			local brandText = "vicePAGE"
			local brandPosX, brandPosY = pagerPosX+10, pagerSizeY	

			dxDrawRectangle(pagerPosX, pagerPosY, pagerSizeX, pagerSizeY, tocolor(0,0,0,225))
			dxDrawText(brandText, brandPosX, brandPosY, 0, 0, tocolor(100,100,100,255), 1, "default", "left", "top", false, false, false, true)
			
			dxDrawRectangle(screenPosX, screenPosY, screenSizeX, screenSizeY, tocolor(175,200,125,255))
			exports.vice_util:dxDrawBorder(screenPosX, screenPosY, screenSizeX, screenSizeY, 4, tocolor(100,100,100,255))
			
			dxDrawRectangle(buttonPosX, buttonPosY, buttonSizeX, buttonSizeY, tocolor(100,100,100,255))
			dxDrawRectangle(dotPosX, dotPosY, dotSize, dotSize, tocolor(255,0,0,255))
			
			if outEndPager <= now then
				startShowingPager = false
			end
		end
		
		if tonumber(startEndPager) and startEndPager <= now and startShowingPager == true then
			startShowingPager = false
			outputDebugString("OUT")
			pagerOutTick = now
		end
	--else
	--	return false
	--end
end
addEventHandler("onClientRender", root, drawPager)

sendPagerNotification("a")

pa3ck · November 30, 2016

You are still using the old startTime in the else block, which is pagerStartTick you should update it to getTickCount() where you update the pagerOutTick

Sign In

interpolateBetween and rendering problem

Recommended Posts

Dzsozi (h03)

Link to comment

pa3ck

Link to comment

Simple0x47

Link to comment

Dzsozi (h03)

Link to comment

pa3ck

Link to comment

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Browse

Activity

MTA Network

Social Media