How to rotate object image?

  • #1, by nmvhMonday, 30. May, 08:28 A month ago
    Hi, here's a simple question: how do I rotate an object image?

    (I'm designing a "rotating bricks" puzzle where the player clicks on a brick, thereby rotating it 90 degrees. All bricks must be aligned correctly for the puzzle to be solved.)


    37 Posts

  • #2, by esmeraldaMonday, 30. May, 10:21 A month ago
    I would use Lua.
    first set the rotation center of your image. By default it is the upper left corner.
     Objects["Brick_1"].RotationCenter = {x=100, y=150}  
      or where your pivot should be 

    turn with
    Objects["name of the object"] to:(delay, {affected field}, easing) 
    the rotation is measured in radian, to convert it to degrees you need the math.rad() function.

    Objects["Brick_1"] to:(500, {Rotation = Objects["Brick_1"].Rotation + math.rad(90)}, easeQuadOut) 

    You can turn objects with components in the engine, but I don't know how to change them during the game. Might be possible with ilios.

    Great Poster

    454 Posts

  • #3, by afrlmeMonday, 30. May, 14:12 A month ago
    The rotation center should actually default to the center of the sprite canvas & not the upper left corner, but you may still have to manually change it due to where you positioned the actual image inside of the image canvas or due to the shape of the image in question.

    Everything else Esmeralda said sounds about right, but easing is optional.

    & we already know what your next question will be... how do I check if all bricks are aligned, correct?

    Anyway, first things first. If you aren't bothered about animating the brick rotation & would prefer to do the puzzle without scripting then you could use values instead & multiple objects. You would need to create each brick for as many rotation positions you want to be able to rotate by, in this case you said 90º, so that would be 4 rotation positions (n, s, e, w), which means 4 scenes objects per brick, 1 value per each brick which should each query a different number between 1 to 4 (they will be used to check if each of the values equal a specific number to check for puzzle solved). Rinse & repeat for the rest of the bricks.

    Everytime you rotate the bricks you should call a called by other action part that checks if each of the values = x value & if they all return true then the puzzle is solved - easier to do that bit with Lua script though.

    As for checking puzzle solved with the animated rotation method, that's a little more complicated as you will need to know which degree value is the correct position for each brick, which is probably best done by creating an array/table & storing the rotation values inside of them so you can iterate through the table to check the rotation values of each of the objects against the table & if one doesn't match then you break (stop the iteration loop from finishing because you know it's not solved).

    local t_brick_rv = {90, 90, 45, 90, 180, 270, 90, 90} - rotation values (need to be in order)
    function checkBrickSolved()
      for i = 1, #t_brick_rv do
       if math.deg(Objects["brick_" .. i].Rotation) ~= t_brick_rv[i] then return false end
       if i == #t_brick_rv and math.deg(Objects["brick_" .. i].Rotation) == t_brick_rv[i] then Conditions["brick_solved"].Value = true end

    I don't know if the function above is correct as I wrote it out off the top of my head & haven't tested it.


    7138 Posts

  • #4, by nmvhMonday, 30. May, 16:48 A month ago
    I thank you both a lot. Just to be really clear: I'll need FOUR different images per brick, one for each rotated position, as there is no "button" for rotating images in Visionaire?

    I'm not ready to "lua" my way ahead just yet.

    My naive assumption was that such a basic graphical manipulation  would be an obvious included feature. But what do I know...

    The checking that the bricks are all aligned (via values and conditions) I had actually already figured out myself (I felt I had to mention that smile).


    37 Posts

  • #5, by afrlmeTuesday, 31. May, 02:21 A month ago
    There is the components tab with the transform option, but like Esmeralda I have no idea if you can update that during runtime as I'm unfamiliar with that section beyond the object movies, as I've not had any reason to use it before.

    I have a feeling you would still need to use scripts or the visual scripting system as there's no action part for calling transform or components yet to my knowledge.

    Also to answer another one of your questions, there could be a simple way implemented for you to rotate objects via an action part, but that would require someone to actually write that action part & share it with you. One of our discord members Lehman is the only one that actually knows how to write action part plugins. He wrote a tutorial on it, but it's a massive wall of text & I can't be bothered trying to wrap my head around it & it's 2am.

    The scripting solution Esmeralda gave you is quite simple. It's only a single line of code to rotate the brick by 90º from the current degree value over 500ms (half a second), but if you don't want to code then you will need to do what I said with the values & 4 images per brick. I suppose you could also use an animation per brick containing 4 frames per animation, but that would also require scripting to force the animation to loop x frame instead of the entire animation. My values method while maybe requiring a bit more work wouldn't even take that long & it's definitely the safest most guaranteed solution out of all the different approaches you could take for the puzzle.

    & in regards to your final paragraph. Well done. I'd lose the conditions though as they just make complex puzzles even more complicated.

    Instead (assuming you don't want to use a scripting solution) you can just use a value & create a called by other action block to call to check if the puzzle is solved & just do something like this...
    set value "bricks_correct" to 0.

    if values "brick1" is 2

    set value "bricks_correct" + 1

    end if

    if values "brick2" is 1

    set value "bricks_correct" + 1

    end if

    if values "brick3" is 4

    set value "bricks_correct" + 1

    end if

    ... etc

    if value "bricks_correct" equals 9 -- whatever total amount of bricks is

    call action "brick_puzzle_solved"

    end if
    It's very crude, for me at least as I tend to use scripting solutions for most things & try to reduce the amount of action parts I need to use because for me personally scripting is just faster than clicking around the editor.


    7138 Posts

  • #6, by nmvhSunday, 12. June, 12:21 2 weeks ago
    Wow, if I can't achieve what I want to do in Visionaire after having been given these answers, then I'm probably a lost case.

    I'll dive into it and even dip my feet in the waters of Lua.

    Thank you so much!


    37 Posts

Write post