How to slide an object? Or send it to position?

  • #1, by nerdSunday, 23. September 2018, 11:37 6 years ago
    Hi I'm trying visionaire. Was wondering how to slide an object, let's say I have an animated cloud and I want it to move from A to B...


    Forum Fan

    147 Posts


  • #2, by afrlmeSunday, 23. September 2018, 13:41 6 years ago
    A'llo,

    You should create the cloud as an animation as it's much easier to move than objects. Object movement is offset based whereas animations can be moved to absolute positions.

    There are also multiple methods for moving objects & animations, but the simplest method is the to() tweening function as you can specify the time it takes to get from the starting position to the target position as well as specify easing & make it loop &/or loop forwards then backwards (pendulum) when it gets to the target position.

    Here's a quick example of how you could have a cloud move from a starting position, to an end position, then loop from the start again...

    local cloud = ActiveAnimations["cloud"]
    
    cloud:to(10000, { AnimationCurrentPosition = {x = -1000, y = cloud.AnimationCurrentPosition.y} }, easeLinearInOut, true, false)

    In the example above we are moving a cloud from the starting position to -1000 pixels over 10000ms (10 seconds) with linear easing (default easing) & once it reaches the target position it will loop back to the starting position & make its way across the scene again.

    Other alternatives are to increment the position of the animation via an execute a script action part that you create inside of the animation frame. Another method would be to use a mainLoop event handler & increment/decrement the position via that.

    Quick note #1: you need to make sure you set the animation to loop infinitely & also the animation should be assigned as the default animation of the scene object you created the animation under.

    Quick note #2: if you want to get a bit more creative with sliding objects around scenes, then you should look into math.random or the random value action part as it will allow you to create more dynamic content. For example, you could change the target position or the amount of time in which it should take to get from the starting position to the target position.

    Imperator

    7278 Posts

  • #3, by nerdSunday, 23. September 2018, 13:52 6 years ago
    A'llo,

    You should create the cloud as an animation as it's much easier to move than objects. Object movement is offset based whereas animations can be moved to absolute positions.

    There are also multiple methods for moving objects & animations, but the simplest method is the to() tweening function as you can specify the time it takes to get from the starting position to the target position as well as specify easing & make it loop &/or loop forwards then backwards (pendulum) when it gets to the target position.

    Here's a quick example of how you could have a cloud move from a starting position, to an end position, then loop from the start again...

    local cloud = ActiveAnimations["cloud"]
    
    cloud:to(10000, { AnimationCurrentPosition = {x = -1000, y = cloud.AnimationCurrentPosition.y} }, easeLinearInOut, true, false)

    In the example above we are moving a cloud from the starting position to -1000 pixels over 10000ms (10 seconds) with linear easing (default easing) & once it reaches the target position it will loop back to the starting position & make its way across the scene again.

    Other alternatives are to increment the position of the animation via an execute a script action part that you create inside of the animation frame. Another method would be to use a mainLoop event handler & increment/decrement the position via that.

    Quick note #1: you need to make sure you set the animation to loop infinitely & also the animation should be assigned as the default animation of the scene object you created the animation under.

    Quick note #2: if you want to get a bit more creative with sliding objects around scenes, then you should look into math.random or the random value action part as it will allow you to create more dynamic content. For example, you could change the target position or the amount of time in which it should take to get from the starting position to the target position.
    Thank you, I got another question. I'd need a way to scale an object based on a variable value, how can I achieve it? Basically it for an health bar

    Forum Fan

    147 Posts

  • #4, by afrlmeSunday, 23. September 2018, 14:19 6 years ago
    There's actually a masking system in place, but it's buggy in the current version. Hopefully Simon will fix that in the next version.

    It's not possible to adjust x,y scale independently of images or animations, however you could use the Lua draw functions to draw in a rectangle in a solid color with x width & y height. I don't remember how the draw system works off the top of my head though - ah wait, I had a little look into it.

    graphics.addDrawFunc("draw()", 0)
    function draw()
        graphics.drawBox(200, 200, 300, 40, 0x0000ff, 1)
    end

    graphics.drawBox(x, y, width, height, color, alpha)


    Quick note: RGB order of colors is incorrect for whatever reason. Instead of RGB it is GBR, so red = 0000ff instead of ff0000. Also you need to include 0x in front of the hex color value.

    Alpha should be a decimal value from 0 to 1. 0.5 for example would be 50% opacity.

    Imperator

    7278 Posts

  • #5, by stothewSunday, 23. September 2018, 14:28 6 years ago
    Hi!

    the ActiveAnimations has only one int for scaling. (AnimationSize) so there is no easy way to scale an image only on X. (i guess)

    I would register a new draw function and draw a colored box for a healthbar.

    graphics.addDrawFunc("draw()", 1)
    function draw()
    graphics.drawBox(x, y, w, h, color, alpha)
    end

    Forum Fan

    127 Posts

  • #6, by afrlmeSunday, 23. September 2018, 14:35 6 years ago
    Jinx. grin

    Imperator

    7278 Posts

  • #7, by nerdSunday, 23. September 2018, 14:40 6 years ago
    I m not a programmer, posting in this forum with captchas is making curse as never befor, does it gonna look like this ok?

    </div>
    if Values["MC_health"].Int == 100
    then
    graphics.addDrawFunc("draw()", 0)
    function draw()
        graphics.drawBox(200, 200, 300, 40, 0x0000ff, 1)
    
    else
    
    if Values["MC_health"].Int == 50
    then
    graphics.addDrawFunc("draw()", 0)
    function draw()
        graphics.drawBox(200, 200, 150, 40, 0x0000ff, 1)
    
    end end
    
    




    Forum Fan

    147 Posts

  • #8, by afrlmeSunday, 23. September 2018, 14:42 6 years ago
    captcha code? I don't have one on here. I think there may be one for members with less than x posts as a anti-spam preventative, but sure, I also wish the captcha would bugger off too - 2 step verification as well & anti-cheat in games.

    No, something more like this...

    if Values["MC_health"].Int > 50 then
    
        graphics.addDrawFunc("draw()", 0)
        function draw()
            graphics.drawBox(200, 200, 300, 40, 0x0000ff, 1)
        end
    
    elseif Values["MC_health"].Int > 0 and Values["MC_health"].Int <= 50 then
    
        graphics.addDrawFunc("draw()", 0)
        function draw()
            graphics.drawBox(200, 200, 150, 40, 0x0000ff, 1)
        end
    
    end

    but that's not a very efficient solution. It would be better to use some math to calculate the health bar width based on the value.

    Imperator

    7278 Posts

  • #9, by stothewSunday, 23. September 2018, 14:55 6 years ago
    I´m not sure about this but wouldn´t this register the draw function again and again? Since the draw function is called every frame this would get very expensive soon wink

    Forum Fan

    127 Posts

  • #10, by nerdSunday, 23. September 2018, 14:59 6 years ago
    captcha code? I don't have one on here. I think there may be one for members with less than x posts as a anti-spam preventative, but sure, I also wish the captcha would bugger off too - 2 step verification as well & anti-cheat in games.

    No, something more like this...

    if Values["MC_health"].Int > 50 then
    
        graphics.addDrawFunc("draw()", 0)
        function draw()
            graphics.drawBox(200, 200, 300, 40, 0x0000ff, 1)
        end
    
    elseif Values["MC_health"].Int > 0 and Values["MC_health"].Int <= 50 then
    
        graphics.addDrawFunc("draw()", 0)
        function draw()
            graphics.drawBox(200, 200, 150, 40, 0x0000ff, 1)
        end
    
    end

    but that's not a very efficient solution. It would be better to use some math to calculate the health bar width based on the value.
    Perfect it works.
    "but that's not a very efficient solution. It would be better to use some math to calculate the health bar width based on the value."
    I've no idea how to do it, can I humbly ask you the code?

    Forum Fan

    147 Posts

  • #11, by afrlmeSunday, 23. September 2018, 15:01 6 years ago
    I´m not sure about this but wouldn´t this register the draw function again and again? Since the draw function is called every frame this would get very expensive soon wink
    It doesn't really matter, you are just replacing the draw function inside of the table, but you can create the function that registers the draw function outside of the loop.

    Something along the lines of this...
    local health
    graphics.addDrawFunc("draw()", 0)
    
    function drawHealthBar()
     health = (Values["MC_health"].Int / 100) * 300
     -- + --
     function draw() graphics.drawBox(200, 200, health, 40, 0x0000ff, 1) end
    end
    
    registerEventHandler("mainLoop", "drawHealthBar")


    Imperator

    7278 Posts