Resize handles [example]

  • I just came across this - an amazing piece of work. Thank you for sharing!

  • R0J0hound Hey Bud,

    I started to try and work on a multi touch version of this -which I still think may be useful- but it morphed into a gesture to scale problem.

    I was thinking the first two touches -semi-regardless of location- would act as if you were holding two corner handles. Then you could scale the height and width with your touches. I guess it would work like Google maps, but instead of pinch to zoom it would be pinch to scale; without rotation.

    I made a really good attempt at it modifying the zooming example but it got pretty messed up. Curious on your thoughts. THANK!

  • I don't have a multi-touch device but you could try this. Put it before the event that positions the handles. The only conflict you may run into is dragging a handle while doing this.

    global number touchWidth_new=0
    global number touchWidth_old=0
    global number touchHeight_new=0
    global number touchHeight_old=0
    
    touch: on touch 1 start
    

    set touchwidth_old to (touch.xat(1)-touch.xat(0))*cos(sprite.angle) + (touch.yat(1)-touch.yat(0))*sin(sprite.angle)

    set touchheight_old to (touch.xat(1)-touch.xat(0))*cos(sprite.angle+90) + (touch.yat(1)-touch.yat(0))*sin(sprite.angle+90)

    touch: has touch 1

    sprite: pick instance with uid picked

    set touchwidth_new to (touch.xat(1)-touch.xat(0))*cos(sprite.angle) + (touch.yat(1)-touch.yat(0))*sin(sprite.angle)

    set touchheight_new to (touch.xat(1)-touch.xat(0))*cos(sprite.angle+90) + (touch.yat(1)-touch.yat(0))*sin(sprite.angle+90)

    sprite: set width to self.width+touchwidth_new-touchwidth_old

    sprite: set height to self.height+touchheight_new-touchheight_old

    set touchwidth_old to touchwidth_new

    set touchheight_old to touchheight_new[/code:fjvyjdm3]

  • Awesome! I'll work on this and report back. Thanks!

  • Another Example

    Here is a another example/experiment that implements the custom rotation points per sprite and the beginnings of some simple object hierarchy (only one level for now).

    /examples31/custom_hotspot.capx

    https://www.dropbox.com/s/n54xuhxmxvizf ... .capx?dl=1

  • What a wonderful example, thank you very very much R0J0!

  • The touch example as provided was kinda broken. I was able to get it nearly perfect by wrapping some of the provided statements in ABS(). But now I'm running into issues when the two touch points pass each other.

    So if you're trying to make something smaller and you're scaling vertically, once the two touch points pass each other on the y axis it starts, growing even though the touches are still going the same direction. I know this is because of the ABS(), I feel like maybe I should should have used a min() instead or something.

    I'll try to post a capx and a vid later. I think it'll make much more sense.

  • R0J0hound Here's the bug I was talking about:

    Subscribe to Construct videos now

    The two scenarios I'm having trouble getting to work are:

    1.) When scaling smaller vertically, and at minimum size, when the thumb touch points pass each other it should not start growing.

    2.) When scaling smaller vertically, and at not at minimum size, when the thumb touch points pass each other it should continue to shrink.

    Here's my WIP capx based off your previous suggestions: https://www.dropbox.com/s/rhczlfuxbp643 ... .capx?dl=0

    Whatever solution will also work for the same situations horizontally too, but you don't really run into here since it's in landscape. Let me know if you need any other info. THANKS!

    p.s. also if you want to split this off into a different thread I can do that since it's deviated.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • I'm not super familiar with what i did in the example anymore and it's too much trouble for me to use a multitouch device to test but you could possibly do the following. Considering I haven't made any math errors.

    Basically keep track of the current and previous positions of the touches and then use a dot product to get a signed distances in particular directions (parellel and perpendiculat to the box's angle). Basically that's to get the scaling factors in either direction. Next in order to actually scale in those directions I used another dot product like above and then used some trig to get a resulting position. Likely the math could be simplified further if you like.

    global number oldtouch0x=0

    global number oldtouch0y=0

    global number oldtouch1x=0

    global number oldtouch1y=0

    on touch 0

    --- set oldtouch0x to touch(0).x

    --- set oldtouch0y to touch(0).y

    on touch 1

    --- set oldtouch1x to touch(1).x

    --- set oldtouch1y to touch(1).y

    touch id 0 is touching

    --- box: set position to self.x+(touch(0).x-oldtouch0x), self.y+(touch(0).y-oldtouch0x)

    global number ang=0

    global number xscaling=0

    global number yscaling=0

    global number dotn=0

    global number dotd=0

    global dotx=0

    touch id 1 is touching

    --- set dotn to cos(box.angle)*(touch(1).x-touch(0).x)+sin(box.angle)*(touch(1).y-touch(0).y)

    --- set dotd to cos(box.angle)*(oldtouch1x-oldtouch0x)+sin(box.angle)*(oldtouch1y-oldtouch0y)

    --- set dotx to cos(box.angle)*(box.x-touch(0).x) +sin(box.angle)*(box.y-touch(0).y)

    --- set xscaling to dotn/dotd

    --- set dotn to cos(box.angle+90)*(touch(1).x-touch(0).x)+sin(box.angle+90)*(touch(1).y-touch(0).y)

    --- set dotd to cos(box.angle+90)*(oldtouch1x-oldtouch0x)+sin(box.angle+90)*(oldtouch1y-oldtouch0y)

    --- set doty to cos(box.angle+90)*(box.x-touch(0).x) +sin(box.angle+90)*(box.y-touch(0).y)

    --- set yscaling to dotn/dotd

    --- box: set x to touch(0).x+xscaling*dotx*cos(box.angle)+yscaling*doty*cos(box.angle+90)

    --- box: set y to touch(0).y+xscaling*dotx*sin(box.angle)+yscaling*doty*sin(box.angle+90)

    --- box: set size to (self.width*xscaling, self.height*yscaling)

    touch id 0 is touching

    --- set oldtouch0x to touch(0).x

    --- set oldtouch0y to touch(0).y

    touch id 1 is touching

    --- set oldtouch1x to touch(1).x

    --- set oldtouch1y to touch(1).y

  • R0J0hound YOU ARE TRULY A WIZARD!!! <img src="{SMILIES_PATH}/icon_eek.gif" alt=":shock:" title="Shocked"> <img src="{SMILIES_PATH}/icon_eek.gif" alt=":shock:" title="Shocked"> <img src="{SMILIES_PATH}/icon_eek.gif" alt=":shock:" title="Shocked">

    It's close, but not quite working. :/ See video.

    Subscribe to Construct videos now

    Here's the capx I ended up with: https://www.dropbox.com/s/vggk894lm5m8u ... .capx?dl=0 . Any guesses? Everything look close?

    -------

    Also a few mistakes(?) I noticed as I was implementing. I wanted to double check:

    touch id 0 is touching

    --- box: set position to self.x+(touch(0).x-oldtouch0x), self.y+(touch(0).y-oldtouch0x) <-- Should be oldtouch0y

    ==========

    global doty=0 <--Was missing but referenced. I added it in.

    ==========

    global number ang=0 <---- Not used?

    But seriously, thanks so much for all your help! <img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":)" title="Smile">

  • It looks like it stops working, or at least jumps, when it goes to just one touch. Maybe setting the oldtouch value when a touch is released would alleviate that. I think I addressed that in my original capx, but I haven't looked.

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