A Flash Developer Resource Site

Results 1 to 5 of 5

Thread: [AS3] Rotation with smooth snap

  1. #1
    Senior Member random10122's Avatar
    Join Date
    Mar 2002
    Location
    Sheffield, UK
    Posts
    1,747

    [AS3] Rotation with smooth snap

    Hmm, i have been puzzling over this for a few hours too long. I am trying to create a smooth snapping motion for a rotated object.. that would act a little like magnetism. So that if the rectangle in the graphic was within a certain amount of degrees of 0, 90, 180, 270 it would smoothly rotate / snap to those angles.

    Hope this is clear...
    Attached Images Attached Images

    fracture2 - the sequel
    fracture - retro shooter
    blog - games, design and the rest

    "2D is a format, not a limitation" -Luis Barriga

  2. #2
    Student
    Join Date
    Apr 2001
    Location
    -
    Posts
    4,756
    ...probably from the shortest neighbour direction
    PHP Code:
    dir Math.floor( (rotation 90/2) / 90)*90 90/2
    or something like that,- but because of the nasty 360°/0° transition you will have some situation when tweening will result in a useless full circle or more spin- there is another brainer for that but step by step.

  3. #3
    Senior Member Pazil's Avatar
    Join Date
    Sep 2006
    Location
    Ontario, Canada
    Posts
    913
    I figured this out in about 2 minutes! I'm impressed with myself! :P
    Anyways, this just smoothly rotates the movieclip to the nearest 90 degree angle step.
    You can modify exact changes by modding the vars at the top, and it's only 14 lines of actual code (including even the braces), but I just threw in a bunch of comments to make sure I explained it clearly enough...

    Anyways, the code:
    Code:
    my_mc._rotation = 4;
    // Easing controls how fast it will rotate to the position (The smaller the number, the slower.)
    var easing:Number = 0.05;
    // Step controls which steps you want to snap to. You wanted it to snap to every 90 degree, but you can change this to every 45, etc.
    var step:Number = 90;
    // Snapping controls how far the degree needs to be away from the exact step for it to snap in place.
    var snapping:Number = 5;
    
    onEnterFrame = function ()
    {
    	// rotation variable holds temporary info to see how far away it is from the nearest step.
    	var rotation = my_mc._rotation / step;
    	// The nearest step
    	var snap = Math.round( rotation );
    	// Difference between rotation and the nearest step (I remultiply the results by the step value to get the difference in degrees)
    	var rotationDifference = ( snap - rotation ) * step;
    	// Check if difference is close enough
    	if ( Math.abs( rotationDifference ) <= snapping )
    	{
    		// Rotate ovaloid by the easing increment
    		my_mc._rotation += rotationDifference * easing;
    	}
    }
    I set the my_mc's rotation at the beginning just for testing purposes...

    P.
    Last edited by Pazil; 11-29-2008 at 09:58 PM.
    WIP-ZOMBIES

    I love vegetarians! More meat for the rest of us!

  4. #4
    Senior Member random10122's Avatar
    Join Date
    Mar 2002
    Location
    Sheffield, UK
    Posts
    1,747
    Pazil,

    Thanks a lot, very clearly and logically explained! I have implemented it where i wanted to (just had to change a few things to get it in Box2D, ie. radians etc).

    fracture2 - the sequel
    fracture - retro shooter
    blog - games, design and the rest

    "2D is a format, not a limitation" -Luis Barriga

  5. #5
    Senior Member Pazil's Avatar
    Join Date
    Sep 2006
    Location
    Ontario, Canada
    Posts
    913
    Glad I could help!
    WIP-ZOMBIES

    I love vegetarians! More meat for the rest of us!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center