resize the sprites by dragging the corner

0 favourites
  • 11 posts
From the Asset Store
Simple resize and rotate events for any sprite, quick and easy event sheet that you can use for your own projects.
  • Hi, I would like to resize the sprites in game by dragging the corner of the sprite while maintaining its proportions, as you do in the editor by holding down Shift, does anyone know how to do it?

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • I did an example like this for someone, you can scale the sprite there.

    I think this will show you the way.

    File c3p

  • I did an example like this for someone, you can scale the sprite there.

    I think this will show you the way.

    File c3p

    Thank you very much, it's not exactly how I wanted but it's a good start to work on it, I ask you one thing, at the moment when I release the touch the object remains enlarged, when I go to change the size again but it goes back to how it was originally to start editing from how I left it, do you know how this could be resolved? I can't find a way to see the actual scale value of the sprite, or to pass it into a variable to keep it stored

  • You can check the sprite properties (.ImageHeight) and (.Height) to see how much the width has been increased, and you can do the same with the height. The rest is math.

  • I can't seem to open the link so I have no idea if this is similar or not, but here is one way to do it.

    dropbox.com/scl/fi/igcw9hcfb9uy3esjxsga7/aspect_resize_handles.capx

  • Absolutely Epic! Thanks so much R0J0hound!

  • Like I said it's perfect, but I tried to understand the code and I couldn't, could you explain to me what's happening? It's probably a question of mathematics that I don't know?

  • Sure.

    When dragging a handle it limits the motion to be along a line.

    Line equation:

    Y=slope*(x-x0)+y0

    Slope calculation uses the ratio of height to width.

    Slope = changeInY/changeInX = originalHeight/originalWidth

    The slope of the line should be negative for two of the points so I did

    (int(mid(“2002”,self.iid,1))-1)

    But either of these would be the same

    ((Self.iid=0 | self.iid=3)?1:-1)

    (int((Self.iid+1)/2)%2*2-1)

    Basically converting the index 0-3 to a negative or positive in a specified way.

    0123 -> 0110 -> 1,-1,-1,1

    The handles are laid out like this:

    0-1
     /
    2-3

    We also need to access the opposite handle to calculate the new size and position, as well as using it for x0,y0 in the line equation. In construct you can do sprite(i).x to access any instance by iid. And if we use 3-i you’ll get the opposite one:

    0123 -> 3210

    Then the new size would be the absolute value of the difference between the current handle and the opposite handle. The new position would be the midpoint.

    Finally the last event positions all the handles around the box that aren’t being dragged.

    I was trying to make it compact as possible so those iid tricks are a bit hard to read. The less terse way could look like this:

    //make a family with the handles
    
    var slope=0
    
    handle: on drag start
    pick family instance 3-handle.iid
    -- set slope to (sprite.y-family.y)/(sprite.x-family.x)
    
    handle is dragging
    pick family instance 3-handle.iid
    -- handle: set y to slope*(self.x-family.x)+family.y
    -- sprite: set size to abs(handle.x-family.x), abs(handle.y-family.y)
    -- sprite: set position to (handle.x+family.x)/2, (handle.y+family.y)/2
    
    pick handle instance 0
    handle is not dragging
    -- set pos to sprite.bboxLeft, sprite.bboxTop
    
    pick handle instance 1
    handle is not dragging
    -- set pos to sprite.bboxRight, sprite.bboxTop
    
    pick handle instance 2
    handle is not dragging
    -- set pos to sprite.bboxLeft, sprite.bboxBottom
    
    pick handle instance 3
    handle is not dragging
    -- set pos to sprite.bboxRight, sprite.bboxBottom

    It uses a family to pick the opposite handle and is more verbose about how the other handles are positioned. The slope just uses the starting size more or less. However it has a failure case if the size starts at 0,0 then the slope would be NaN. That would have to be handled.

  • Thanks for the accurate explanation, unfortunately as I imagined I lack the notions of mathematics and I only understand the theory a little. XD

    Sorry if I take this opportunity to ask you one last thing, I noticed that if I reflect the sprite and then try to enlarge it, it is reflected again as it was originally, is there a simple way to avoid this?

    edit actually in the second way I can understand everything better, I will try to create one like this too, but to keep it in a code the most compact one is better

  • I opted to just have it work without flipping or mirroring. Hence the abs. One solution could be to record the sign of the width and height of the sprite into variable and apply that again when setting the sign. There may be a more compact way to do it though.

  • Ok I did it, thank you very much!

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)