Jump to content

How can i animate a gui?


Recommended Posts

  • Replies 52
  • Created
  • Last Reply

Top Posters In This Topic

If you use 'onClientRender', like Michael says, it makes the animation a LOT smoother (and nicer) than with a setTimer.

Here's an example of how to do it:

windowX1, windowY1 = -200, 500 
    -- start position of the window (not on the screen) 
  
windowX2, windowY2 = 200, 500  
    -- position where window should slide to (on the screen) 
  
windowXdifference, windowYdifference = windowX2-windowX1, windowY2-windowY1  
    -- distance between startposition and position where the window should slide to 
  
windowW, windowH = 200, 300 
    -- width and height of the window 
  
slideTime = 500 
    -- time the slide takes 
  
window = guiCreateWindow ( windowX1, windowY1, windowW, windowH, "Your window", false ) 
    -- create the window using the values you just set 
  
-------------------------------------------------- 
  
function slideMenuIn () 
    renderSlide = true 
        -- set renderSlide variable to true 
  
    slideMenuInTimer = setTimer ( function() renderSlide = false end, 500, 1 ) 
        -- set a timer that, when slide-time is passed, sets the renderSlide back to false 
end 
    -- execute this function when the window should be slided in 
  
-------------------------------------------------- 
  
function render () 
    if renderSlide and slideMenuInTimer and isTimer ( slideMenuInTimer ) then 
        -- if renderSlide variable is true and the timer exists (timer made in slideMenuIn() ) 
  
        local timeLeft, amountLeft, amount = getTimerDetails ( slideMenuInTimer ) 
            -- timeLeft how much time is left before the timer runs out of time 
  
        local slideIndex = timeLeft/slideTime 
            -- calculate the index/fraction (part/total) 
  
        local windowX = windowX1 + windowXdifference * slideIndex 
        local windowY = windowY1 + windowYdifference * slideIndex 
            -- calculate new x- and y-position 
  
        guiSetPosition ( window, windowX, windowY, false ) 
            -- set window position       
    end 
end 
addEventHandler ( "onClientRender", getRootElement(), render ) 
    -- execute function 'render' when a new frame is rendered 

I hope I explained it well enough. This is how I do it, it works well. I don't know of an easier way.

Link to comment
If you use 'onClientRender', like Michael says, it makes the animation a LOT smoother (and nicer) than with a setTimer.

Here's an example of how to do it:

windowX1, windowY1 = -200, 500 
    -- start position of the window (not on the screen) 
  
windowX2, windowY2 = 200, 500  
    -- position where window should slide to (on the screen) 
  
windowXdifference, windowYdifference = windowX2-windowX1, windowY2-windowY1  
    -- distance between startposition and position where the window should slide to 
  
windowW, windowH = 200, 300 
    -- width and height of the window 
  
slideTime = 500 
    -- time the slide takes 
  
window = guiCreateWindow ( windowX1, windowY1, windowW, windowH, "Your window", false ) 
    -- create the window using the values you just set 
  
-------------------------------------------------- 
  
function slideMenuIn () 
    renderSlide = true 
        -- set renderSlide variable to true 
  
    slideMenuInTimer = setTimer ( function() renderSlide = false end, 500, 1 ) 
        -- set a timer that, when slide-time is passed, sets the renderSlide back to false 
end 
    -- execute this function when the window should be slided in 
  
-------------------------------------------------- 
  
function render () 
    if renderSlide and slideMenuInTimer and isTimer ( slideMenuInTimer ) then 
        -- if renderSlide variable is true and the timer exists (timer made in slideMenuIn() ) 
  
        local timeLeft, amountLeft, amount = getTimerDetails ( slideMenuInTimer ) 
            -- timeLeft how much time is left before the timer runs out of time 
  
        local slideIndex = timeLeft/slideTime 
            -- calculate the index/fraction (part/total) 
  
        local windowX = windowX1 + windowXdifference * slideIndex 
        local windowY = windowY1 + windowYdifference * slideIndex 
            -- calculate new x- and y-position 
  
        guiSetPosition ( window, windowX, windowY, false ) 
            -- set window position       
    end 
end 
addEventHandler ( "onClientRender", getRootElement(), render ) 
    -- execute function 'render' when a new frame is rendered 

I hope I explained it well enough. This is how I do it, it works well. I don't know of an easier way.

Client_anim contains it all, use it.

Link to comment

Still doesn't work :/

  
function updateLocations ( location ) 
for i=0, guiGridListGetRowCount(locationsList)do 
   if(guiGridListGetItemText(locationsList,i,1)==location)then 
    guiGridListRemoveRow(locationsList,i) 
    local row2 = guiGridListAddRow ( locationsList ) 
    guiGridListSetItemText ( locationsList, row2, 1, location, false, false ) 
    elseif(guiGridListGetItemText(locationsList,i,1)~=location)then 
    local row2 = guiGridListAddRow ( locationsList ) 
    guiGridListSetItemText ( locationsList, row2, 1, location, false, false ) 
    end 
end 
end 
  

Now it shows it like this;

cheese

LS

LS

dwd

dwd

dwd

But there is only one dwd in the DB and 2 LS and one Cheese, But i want it to only show one LS one Cheese and one dwd, For some reason it doesn't and i don't have a clue why its showing 3 dwd's :P

Link to comment

You've added a row even when it's the same text, try this:

function updateLocations ( location ) 
for i=0, guiGridListGetRowCount(locationsList)do 
   if(guiGridListGetItemText(locationsList,i,1)==location)then 
    guiGridListRemoveRow(locationsList,i) 
    elseif(guiGridListGetItemText(locationsList,i,1)~=location)then 
    local row2 = guiGridListAddRow ( locationsList ) 
    guiGridListSetItemText ( locationsList, row2, 1, location, false, false ) 
    end 
end 
end 

Link to comment

When the GUI is created it triggers a server event that returns the locations to that function, The server side all works fine. Then the gui will be destroyed later when its closed, Only reason for this is because i want to keep the GUI up to date each time a player spawns if there is a new location added to the GUI it will show or is there an easier way to do that?

Link to comment

try this:

function updateLocations ( location ) 
for i=0, guiGridListGetRowCount(locationsList)do -- loop through the gridlist 
    if(location~=guiGridListGetItemText(locationsList,i,1))then --if the location name is not inside the gridlist then 
    guiGridListSetItemText ( locationsList, guiGridListAddRow ( locationsList ), 1, location, false, false ) -- add a row and set it by the location name 
    end 
end 
end 

Link to comment

Haha i can't see why it wouldn't :P its pretty annoying though and ok thanks man

  
function updateLocations ( location ) 
for i=0, guiGridListGetRowCount(locationsList)do -- loop through the gridlist 
    if(location~=guiGridListGetItemText(locationsList,i,1))then --if the location name is not inside the gridlist then 
    guiGridListSetItemText ( locationsList, guiGridListAddRow ( locationsList ), 1, location, false, false ) -- add a row and set it by the location name 
    outputChatBox("Type: "..type(location).." added : "..location)  
    elseif(location==guiGridListGetItemText(locationsList,i,1))then 
        outputChatBox("Type: "..type(location).." removed : "..location)  
    end 
end 
end 
  

Using it like this outputs like;

Type: string added : LS

Type: string added : Cheese

Type: string removed : Cheese

Type: string removed : LS

Type: string added : LS

Type: string removed : LS

Type: string added : dwd

Type: string added : dwd

Type: string added : dwd

Type: string removed : dwd

Edited by Guest
Link to comment
Guest Guest4401

Dunno if this will be useful or not:

function isTextInGridList(gridlist,column,text) 
    if gridlist and column and text then 
        local rows = (guiGridListGetRowCount(gridlist) or 1) 
        for row = 0,rows do 
            if text == guiGridListGetItemText(gridlist, row, column) then 
                return true 
            end 
        end 
        return false 
    end 
    return false 
end 

Usage:

isTextInGridList(locationsList, 1, "myText") 
-- returns true if text was found otherwise false 

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...