12 Replies Latest reply on Jan 1, 2008 5:06 PM by VarioPegged

    Rotation calculation


      wanted to ask how are the X and Y of a object being calculated after a rotation of one angle is done on that object.... the pattern of its logic perhaps..

      Below is the sample of a X and Y calculated respectively of an object that was rotated by 1 angle each time that started from 489 to 189.

      btw using the mx:Rotate ...

      485 - 189
      485 - 188
      486 - 188
      486 - 187
      486 - 186
      487 - 186
      487 - 185
      487 - 184
      488 - 183
      488 - 183
      489 - 182
      489 - 181
      489 - 181
      490 - 180
      490 - 179
      491 - 179
      491 - 178
      492 - 178

      has anyone understood the logic pattern of X and Y ?

        • 1. Rotation calculation
          Varangian Level 1
          anyone maybe messed around with the mx:Rotate ? I really need to know this. I'm using Math.Round to round up but still the logic doesn't seem to make any sense. I thought it was turning by one pixel at a time but doesn't seem so.
          • 2. Re: Rotation calculation
            VarioPegged Level 2
            You probably mean rotation of one "degree", right? Look at RotateInstance.as in the framework source to see how the x and y values are calculated.

            • 3. Re: Rotation calculation
              Varangian Level 1
              Hello VarioPegged,

              thanks ... didn't came up to my mind... not used to open source.

              I'm viewing a bit the code.... what does the onTweenUpdate mean?!
              • 4. Rotation calculation
                VarioPegged Level 2
                onTweenUpdate() is a method that gets called when the tween effect updates the target. A tweenUpdate event is dispatched while the tween effect is running. Tween is a term used in animation (short for in-between: it's the motion or effect of your target between the effect start and effect end).

                Can you describe exactly what it is you're trying to do?

                • 5. Re: Rotation calculation
                  Varangian Level 1

                  basically I am moving an object and rotating an object at the same time using mx:Move and mx:Rotate respectively. basically it's like a ship turning (that's what it does).....

                  I want to make it like rotating by one angle at time and moving by 1 at the same time. This i'm using effectEnd="" event on each mx:Rotate and mx:Move.

                  The rotation calculation wasn't clear (the result of x and y) of an object after it has been rotated, as you can see the logic pattern before, so that's why I asked how it is being done as I need to do this logic movement on the server as well.

                  Thanks! hope you understood something :) you seem to be the only reading my thread. :)
                  • 6. Rotation calculation
                    VarioPegged Level 2
                    If I understand correctly what you're trying to do, the resulting move and rotate will look wrong.

                    Assuming we're looking at a ship from a bird's eye view and we're watching it turn, its movement along x and y coordinates is really along an arc or curved path, not linearly like you would get from a Move effect. If you're moving linearly and rotating it at the same time, it'll just look like it's skidding, not very realistic.

                    What you probably want to do is create the movement and rotation in ActionScript.

                    If you use a pure circle or part of a circle along which you want the ship to move and rotate it accordingly, you can define the x and y coordinates with trigonometry.

                    Let's say you move it along an arc which is a quarter circle (a 90 degree arc or PI/2) from somewhere in the middle of the screen towards the top and turning left. Another way to look at the path of the ship is to imagine the ship attached to the point of the minute-hand of a clock that runs counter-clockwise. You want the movement to be defined as if the minute-hand is moving from the 3 o'clock to the 12 o'clock position (counter-clockwise), a 90 degree arc.

                    You can calculate the xy coords by incrementing your angle by 1 degree, but this won't translate to the xy coords moving by 1 pixel from the previous position.

                    In my example, the start position of the ship object's x coord is the center point of the circle plus the radius of the circle, while the y coord is the center point of the circle. I'm using arbitrary numbers and no access keywords for the variables and functions...

                    var ship:Ship //whatever custom display object you have for your ship

                    var centerPosX:Number = 300; //center position x coord of imaginary circle path
                    var centerPosY:Number = 300; //center position y coord of imaginary circle path
                    var radius:Number = 100;
                    var angleChange:int = 1;
                    var angleEnd:int = 90;

                    ship.x = centerPosX + radius; // x coordinate of ship at start
                    ship.y = centerPosY; //y coordinate of ship at start
                    ship.rotation = -90; //start rotation of ship - facing top of the screen depending on the rest rotation of the object

                    function calculatePositionandRotation():void
                    if (angleChange <= angleEnd)
                    ship.x = (Math.cos(toRadians(angleChange))*radius) + centerPosX;
                    ship.y = centerPosY - (Math.sin(toRadians(angleChange))*radius);
                    ship.rotation = -(90 + angleChange); //not using dynamic direction here
                    if (angleChange = angleEnd)
                    myTimer.removeEventListener(TimerEvent.TIMER, calculatePositionandRotation)

                    function toRadians(value:int):Number
                    return value*Math.PI/180;

                    Then you can create the animation by firing a timer event maybe every 50 ms which will make the animation last about 50 x 90 = 4500 ms (4.5 seconds) ...

                    var myTimer:Timer = new Timer(50);
                    myTimer.addEventListener(TimerEvent.TIMER, calculatePositionandRotation);

                    I don't have time to test this code, but it should work the way I understand you want your ship movement and rotation to behave.

                    • 7. Rotation calculation
                      Varangian Level 1
                      Hello VarioPegged again,

                      yes that's I'm doing. that's why I'm moving by 1 and rotating by 1 angle at a time. What I did is make an event effectEnd on each mx:Move and mx:Rotate so ones rotates by 1 and the other moves by 1 until the position is reached. That sort of shows that it is being turned by an arc....

                      Thanks for that calculation (And I will try it out) ... however I need to do it on the server not on the client, so as to match the X and Y. That's why I'm getting to view that RotateInstance.cs you told me about....
                      • 8. Re: Rotation calculation
                        VarioPegged Level 2

                        OK, although I must admit I'm not following what you mean by having to "match the X and Y". How are you doing it on the server?

                        FWIW, you could also get the same effect using *just* mx:Rotate as I manually described in my previous post. The originX and originY of mx:Rotate allows you to provide an offset to have an object rotate around a specified point in an arc.

                        • 9. Rotation calculation
                          Varangian Level 1
                          ok let me try my best to expalian ....English is really not my best.

                          match the X and Y. I'm changing the position of the "ship" of X and Y when rotating. every time it moves 1 pixel and rotates I have to check on the server. Now since that the mx:Rotate modifies the X and Y, I have to replicate the same on the server.

                          got it?

                          Yes I'm using originX and originY, using the center of the ship as the pivot.
                          • 10. Re: Rotation calculation
                            VarioPegged Level 2
                            Varangian, your English is just fine...;) I understand better now that you've explained it in a little more detail.

                            Since mx:Rotate apparently causes problems for you, why not create a Sprite object and make the ship object a child of it. Then you can apply just the Move to the Sprite to match the x and y position, while you only apply a Rotate effect to the ship. So, the ship will move along with the sprite, because it is a child of Sprite, but you're only checking the Sprite's x and y position, which will allow you to match it on the server.

                            • 11. Re: Rotation calculation
                              Varangian Level 1
                              sorry.... what is exactly a sprite?
                              • 12. Re: Rotation calculation
                                VarioPegged Level 2
                                Hi Varangian,

                                Check the Flex documentation for info on the Sprite class. There are plenty of examples as well.