dxDrawImage Rotate

[ikvindmooi]

Hello guys,

I'm trying to make a panel where you can rotate a circle image when you click space key

so I have this image

dxDrawImage(689, 280, 116, 115, "circlebar.png", 21) 

I want like when you click on 'space' the image will rotate like 90 degrees.

I tried some ways by my own with rot = 21+90 and stuff but it didn't work. I don't know how to attach the bindkey with the rotation anyone can help me out?

Thanks.

[Dealman]

Just use variables, simple. Here's 2 examples you can use;

-- Method 1 
local exampleVariable = 21 
  
function ExampleCode() 
    dxDrawImage(689, 280, 116, 115, "circlebar.png", exampleVariable) 
end 
  
-- Change the variable "exampleVariable" to something else 
  
-- Method 2 
local shouldRotate = false 
  
function ExampleCode() 
    if(shouldRotate == false) then 
        dxDrawImage(689, 280, 116, 115, "circlebar.png", 21) 
    elseif(shouldRotate == true) then 
        dxDrawImage(689, 280, 116, 115, "circlebar.png", 90) 
    end 
end 
  

Edit:

Woot 1000th post

[ikvindmooi]

I was looking for the second methode, thanks it worked, but this one is only with 2 options i want 3/4 options like it's go in a circle, i guess you can't do that with this because there's just 2 options, true and false.

I got this so far,

local shouldRotate = false 
function drawpanel() 
    if(shouldRotate == false) then 
        dxDrawImage(689, 280, 400, 400, "circle.png", 21) 
    elseif(shouldRotate == true) then 
        dxDrawImage(689, 280, 400, 400, "circle.png", 90) 
    end 
end 
  
function drawcircle() 
    if (shouldRotate == false) then 
    shouldRotate = true 
    else 
    shouldRotate = false 
    end 
end 
bindKey ( "Z", "down", drawcircle) 
  

[Dealman]

Of course you can if you just make more variables. I'm assuming this circle is a loading thing? Wouldn't you want it to rotate smoothly rather than 90 degrees each time?

[ikvindmooi]

Yes that would be better, but it's not a loading thing, I'm just trying to make like a game where you need to find the right path. like when you click on it it turns a bit

something like this:

but instead of the pieces sliding it will turn and you need to find the right way.

EDIT:

Offtopic: Is it possible to add different scale's in dxDrawText? Like at the text part the first letters will be bigger then the rest, or i need to make two different texts

[IIYAMA]

local circleRotation = 21  
addEventHandler("onClientRender",root, 
function () 
    dxDrawImage(689, 280, 116, 115, "circlebar.png", circleRotation) 
end) 
  
bindKey("backspace","down", -- see next line > 
function (key,keyState) -- key = "backspace", keyState = "down"(if "both" it can be "down" or "up") 
    circleRotation = (circleRotation+90)%360  
    -- % <<< 456%360 = 96 (removes a  value till the rest value remains, which is lower than that ) 
end) 

Ik kan het ook op zijn Nederlands/Belgisch uitleggen, mocht je er niks van snappen.

[iAxel]

Example

  
local Rotate = 0 
  
function Draw() 
    dxDrawImage(x, y, w, h, 'img.png', Rotate) 
end 
addEventHandler('onClientRender', root, Draw) 
  
function Bind(key) 
    if (key == 'num_add') then 
        Rotate = Rotate + 30 
    elseif (key == 'num_sub') then 
        Rotate = Rotate - 30 
    end 
end 
bindKey('num_add', 'down', Bind) 
bindKey('num_sub', 'down', Bind) 
  

UPD: I'm sorry IIYAMA are already helped you

[ikvindmooi]

Thanks guys!

@IIYAMA

Ik snap het al door de voorbeelden, alsnog bedankt.

[ikvindmooi]

I do have one more question. I do have the panel working, but this looks kinda ugly when it's changing directly. I want it like going smooth. I guess I have to use timers for that but I don't know how to imply that in the script. Like it adds +5 for 3/4 seconds then stop every time I click the button. Anyone can help me?

EDIT:

I fixed the part that it's going more smooth but now it doesn't stop. it keeps rotating.

function onPanelRegisterButtonClicked( btn, state ) 
    if btn ~= "left" or state ~= "up" then return end 
    setTimer ( function lol() 
    rot1 = (rot1 + 5)%360 
    end, 300, 0.001 )    
end 
addEventHandler("onClientGUIClick", lu, onPanelRegisterButtonClicked, false) 

EDIT2: NVM I fixed it myself with setTimer and killTimer

[IIYAMA]

Smooth animations can be done with onClientRender.

Untested, but this might give you an idea how this can be working.

local animationEnd = 0 
local startRotation  
local isRenderingAnimation = false 
local changeRotateSmoothFunction  
changeRotateSmoothFunction = function () 
    local timeNow = getTickCount() 
    local factor = 1-((animationEnd - timeNow)/300) -- calculate the factor based on future time. 
    if factor < 1 then 
        rot1 = (startRotation + (5*factor))%360 
    else 
        rot1 = startRotation+5 -- set at the end to the correct rotation 
        removeEventHandler("onClientRender",root,changeRotateSmoothFunction) -- remove the event handler. 
        isRenderingAnimation = false -- set the variable to false, so you can render an animation again. 
    end 
end 
  
function onPanelRegisterButtonClicked( btn, state ) 
    if btn ~= "left" or state ~= "up" then return end 
     
    if not isRenderingAnimation then  
        animationEnd = getTickCount()+300 -- timeNow + 300 ms = futureTime 
        startRotation = rot1 -- save the start of the animation. 
        addEventHandler("onClientRender",root,changeRotateSmoothFunction) -- add an render event handler. 
        isRenderingAnimation = true -- use a variable to check if you are rendering 
    end 
     
end 
addEventHandler("onClientGUIClick", lu, onPanelRegisterButtonClicked, false)