Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
24. November 2012

It is quite common to want to rotate one point relative to another the location of another point.  This math recipe looks at exactly this process.

 

Just the math

angle = (angle ) * (Math.PI/180); // Convert to radians

var rotatedX = Math.cos(angle) * (point.x - center.x) - Math.sin(angle) * (point.y-center.y) + center.x;

var rotatedY = Math.sin(angle) * (point.x - center.x) + Math.cos(angle) * (point.y - center.y) + center.y;

 

return new createjs.Point(rotatedX,rotatedY);

 

Description

The angle conversion is entirely dependant on your math libraries.  In the case of JavaScript's Math library ( and the standard C++ libraries ), cos and sign expect the angles to be expressed in radians.  As you can see, the conversion formula is quit simple.

As to the math, the rotated location of the X value is found by taking the cos of the angle to rotate by, multiplied by the distance between the X value of the point you want to rotate and the point to rotate around minus the sin of the angle multiplied by the distance between the points, then finally add the x location of the point.  The calculation for rotating in the Y direction is basically identical, except the sin and cos calculations are swapped and you subtract instead of adding.

One thing to keep in mind here is the rotation is relative to the current position not the total rotation.  For example, if you are currently at 90 degrees and want to rotate to 135 degrees, you would use an angle of 45, not 135.

 

Rotation around another point

Complete code

<!DOCTYPE html>

<html>

<head>

    <script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>

    <script>

        var ball1,ball2;

        var stage;

 

        document.addEventListener('DOMContentLoaded', demo,false);

 

        function rotatePoint(point, center, angle){

            angle = (angle ) * (Math.PI/180); // Convert to radians

            var rotatedX = Math.cos(angle) * (point.x - center.x) - Math.sin(angle) * (point.y-center.y) + center.x;

            var rotatedY = Math.sin(angle) * (point.x - center.x) + Math.cos(angle) * (point.y - center.y) + center.y;

 

            return new createjs.Point(rotatedX,rotatedY);

        }

 

        function demo(){

            stage = new createjs.Stage("theCanvas");

 

            var g = new createjs.Graphics();

            g.setStrokeStyle(1);

            g.beginFill(createjs.Graphics.getRGB(0,0,255));

            g.drawCircle(0,0,30);

            ball1 = new createjs.Shape(g);

            ball2 = new createjs.Shape(g);

 

            ball1.x = stage.canvas.width/2;

            ball1.y = stage.canvas.height/2;

 

            ball2.x = stage.canvas.width/2;

            ball2.y = 30;

 

            stage.addChild(ball1);

            stage.addChild(ball2);

            //And go...

            stage.update();

 

            // onFrame will be called each "tick". Default is 50ms, or 20FPS

            createjs.Ticker.addListener(onFrame);

        }

 

        function onFrame(elapsedTime) {

            // Convert from milliseconds to fraction of a second

            var delta = elapsedTime /1000;

 

            // Rotate by 90 degrees per second, or 1 full rotation per 4 seconds.

            var rotateBy = 90 * delta;

 

            // Current position of ball2

            var ballPosition = new createjs.Point(ball2.x,ball2.y);

 

            // Updated position rotated by... um... rotateBy value

            var rotatedPosition = rotatePoint(ballPosition,

                                    new createjs.Point(ball1.x,ball1.y),

                                    rotateBy);

 

            // Update ball's position to the newly rotated coordinates

            ball2.x = rotatedPosition.x;

            ball2.y = rotatedPosition.y;

            stage.update();

        }

    </script>

 

</head>

<body>

<canvaswidth=400height=400id="theCanvas"style="background-color:black"/>

</body>

</html>

Programming


22. November 2012

This recipe takes a look at the concept of velocity.  At first glance you might think velocity… oh, that’s speed.  But that isn't quite all of it. 

Velocity is simply put, something with speed and a direction. You can use velocity for hundreds of game related tasks, firing a bullet, flying a spaceship, etc.  As part of the recipe, we will also look at normalizing update speed using elapsed time, so the code runs the same on various machines.

 

Let's start with a very simple form, velocity along a single axis.

 

Just the math

var delta = elapsedTime /1000;

jetSprite.y = jetSprite.y - (speed * delta);

if(jetSprite.y < -(jetSprite.image.height/2))

    jetSprite.y = stage.canvas.height;

 

 

Description

One of the problems with dealing with speed is that different computers and devices run at different speeds.  You can't simply update a sprite's location in a loop, because that loop will run at a different speed on every machine.  Therefore we need a value to normalize the movement by.  In the case of EaselJS, our event loop is passed a value elapsedTime, containing the number of milliseconds that have elapsed since it was last called.  What we want to do is convert this value from milliseconds to fractions of a second, which we do by dividing it by 1000.

Next we update our sprites movement in the y direction by subtracting ( since Y decreases as it goes towards the top of the canvas ) speed * delta from the current Y value.  Our speed is a per second value, so a speed of 50 means we want to move 50 pixels over the course of a second.  By multiplying the speed against the time the previous frame took to complete as a fraction of a second, we essentially increment by little pieces that over the course of a second should add up to our total speed.

Let's take a look with real world numbers.  Let's say that last frame took 100ms to complete, or 1/10th of a second.  100/1000 = 0.1.  Now we multiply our speed of 50 by 0.1 and see that we should update by 5 pixels this frame.  Assuming the game continues to run about 100ms per frame, that means after 10 frames, a second will have elapsed and we will have moved the desired amount.  The nice part is, the movement is now tied to actual time elapsed instead of processing speed.

The rest is simply a matter of checking to see if our game sprite went off the top of the screen and if it has, we send it back to the starting position.

Velocity along a single axis

Controls:

Click top half the canvas to increase speed
Click lower half to decrease the speed
Arrow up/ Arrow down to increase/decrease speed

The Complete Code

<!DOCTYPE html>

<html>

<head>

    <script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>

    <script>

        var jetSprite;

        var stage;

        // Speed is total pixels moved in a second

        var speed = 50;

        document.addEventListener('DOMContentLoaded', demo,false);

        document.onkeydown = function(e){

            switch(e.keyCode)

            {

                case 38: // up arrow

                    speed += 10;

                    break;

                case 40: // down arrow

                    speed -= 10;

                    break;

            }

        }

        function demo(){

            stage = new createjs.Stage("theCanvas");

            // When the user clicks mouse, if the on the top half, increase speed

            // If clicked on the bottom half, reduce speed.  Yes, it will go in reverse eventually

            stage.onMouseDown = function(e){

                if(e.stageY < 200)

                    speed += 50;

                else

                    speed -= 50;

            }

            // Create and configure our jet sprite. regX/Y set the pivot point, we center it

            jetSprite = new createjs.Bitmap("jetsprite.png");

            jetSprite.regX =91; //Hardcode image widths because HTML sucks and fires onLoad

            jetSprite.regY =120;//well before onLoad is well, loaded.

            jetSprite.x = stage.canvas.width/2;

            jetSprite.y = stage.canvas.height;

            stage.addChild(jetSprite);

            //And go...

            stage.update();

            // onFrame will be called each "tick". Default is 50ms, or 20FPS

            createjs.Ticker.addListener(onFrame);

        }

        function onFrame(elapsedTime) {

            // Convert from milliseconds to fraction of a second

            var delta = elapsedTime /1000;

            jetSprite.y = jetSprite.y - (speed * delta);

            if(jetSprite.y < -(jetSprite.image.height/2))

                jetSprite.y = stage.canvas.height;

            stage.update();

        }

    </script>

</head>

<body>

<canvas width=400 height=400 id="theCanvas"style="background-color:black"/>

</body>

</html>

 

 

 

So velocity along an axis is remarkably easy, but not entirely useful if you want to travel in different directions.  You can of course move along both axis independently, but this quickly becomes annoying, especially when you want to deal with multiple sprites positions relative to each other.  A much better way to express the direction component of velocity than using an axis is to use an angle.

 

Just the Math

var delta = elapsedTime /1000;

var velocityX = Math.cos((angleAdjustment + angle) * Math.PI / 180) * (speed * delta);

var velocityY = Math.sin((angleAdjustment + angle) * Math.PI / 180) * (speed * delta);

jetSprite.rotation = angle;

jetSprite.x = jetSprite.x + velocityX;

jetSprite.y = jetSprite.y + velocityY;

if(jetSprite.y < -(jetSprite.image.height/2))

    jetSprite.y = stage.canvas.height;

if(jetSprite.x > stage.canvas.width+(jetSprite.image.width/2) ||

        jetSprite.x < 0-(jetSprite.image.width/2)){

    jetSprite.y = stage.canvas.height;

    jetSprite.x = stage.canvas.width/2;

}

 

 

Description

Logic in this example is very similar to the linear velocity example.  Of course, first we need to determine what how many pixels to move by in the X and Y address.  To figure this out, we solve X and Y separately.

The X component is found by taking the Cos of the angle in radians.  We convert a value to radians by multiplying it by pi/180.  The angle adjustment is to account for the fact our sprite was drawn as though 0 is straight up, while the math treats 0 as being to the right.  At this point we have the direction of the x coordinate to travel in our given angle, we now need to figure out the amount to travel in that direction.  This is determined by multiplying the speed by the delta.  Remember the delta is the amount of time as a fraction of a second that our frame takes to run, so if our game is running at 100ms a frame, it's value is .10.  So for the jet to travel at a total of 50 pixels per second, its going to travel 5 pixels this frame. 

To solve the Y component, its virtually an identical process, but this time we figure out the y direction by taking the Sin of the angle instead.  We then update our X and Y values by the newly calculated velocity values. 

Now in addition to being able to leave the top of the screen, it is also possible for our sprite to leave the right or left side of the screen, so we check to make sure the sprite hasn't exited in those directions either.  If it has, we send it back to where it started.

Angled Velocity

In addition to the above controls you can now:
Press left and right arrows to turn

 

** Be sure to click to focus the canvas for input may not be received.

The Complete Code

<!DOCTYPE html>

<html>

<head>

    <script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>

    <script>

        var jetSprite;

        var stage;

        // Speed is total pixels moved in a second

        var speed = 50;

        // angle to travel, with 0 being straight up the Y-axis

        var angle = 45;

        // Angle adjustment to make 0 up to match how our sprite was drawn.

        var angleAdjustment = -90;

        document.addEventListener('DOMContentLoaded', demo,false);

        document.onkeydown = function(e){

           switch(e.keyCode)

           {

               case 37: // left arrow

                   angle-=5;

                   break;

               case 38: // up arrow

                   speed += 10;

                   break;

               case 39: // right arrow

                   angle+=5;

                   break;

               case 40: // down arrow

                   speed -= 10;

                   break;

           }

        }

        function demo(){

            stage = new createjs.Stage("theCanvas");

            // When the user clicks mouse, if the on the top half, increase speed

            // If clicked on the bottom half, reduce speed.  Yes, it will go in reverse eventually

            stage.onMouseDown = function(e){

                if(e.stageY < 200)

                    speed += 50;

                else

                    speed -= 50;

            }

            // Create and configure our jet sprite. regX/Y set the pivot point, we center it

            jetSprite = new createjs.Bitmap("jetsprite.png");

            jetSprite.regX =91; //Hardcode image widths because HTML sucks and fires onLoad

            jetSprite.regY =120;//well before onLoad is well, loaded.

            jetSprite.x = stage.canvas.width/2;

            jetSprite.y = stage.canvas.height;

            stage.addChild(jetSprite);

            //And go...

            stage.update();

            // onFrame will be called each "tick". Default is 50ms, or 20FPS

            createjs.Ticker.addListener(onFrame);

        }

        function onFrame(elapsedTime) {

            // Convert from milliseconds to fraction of a second

            var delta = elapsedTime /1000;

            var velocityX = Math.cos((angleAdjustment + angle) * Math.PI / 180) * (speed * delta);

            var velocityY = Math.sin((angleAdjustment + angle) * Math.PI / 180) * (speed * delta);

            jetSprite.rotation = angle;

            jetSprite.x = jetSprite.x + velocityX;

            jetSprite.y = jetSprite.y + velocityY;

            if(jetSprite.y < -(jetSprite.image.height/2))

                jetSprite.y = stage.canvas.height;

            if(jetSprite.x > stage.canvas.width+(jetSprite.image.width/2) ||

                    jetSprite.x < 0-(jetSprite.image.width/2)){

                jetSprite.y = stage.canvas.height;

                jetSprite.x = stage.canvas.width/2;

            }

            stage.update();

        }

    </script>

</head>

<body>

<canvas width=400 height=400 id="theCanvas"style="background-color:black"/>

</body>

</html>

See Also

To actually understand WHY you use the cos to solve X and sin to solve Y, check out the following.

SOHCAHTOA.  It's a simple mnemonic device, one I learned almost 20 years ago and I still remember to this day, it is how you solve each angle using the different sides of a triangle:

Sin = Opposite over the Hypotenuse   Cos = Adjacent over the Hypotenuse  Tan = Opposite over Adjacent == SOHCAHTOA

http://www.mathwords.com/s/sohcahtoa.htm

Fundamentally this is all trigonometry in action, you can learn a hell of a lot at the Kahn Academy

http://www.khanacademy.org/math/trigonometry

Programming


20. November 2012

After a fairly long beta, PlayStation Mobile 1.0 SDK has finally reached 1.0.

The following is the full text of the official press release:

Tokyo, November 20, 2012–Sony Computer Entertainment Inc. (SCE) today announced that it initiates the PlayStation®Mobile Developer Program which includes the official version of PlayStation®Mobile SDK*1 from today, in an effort to further expand the world of PlayStation® on open operating system-based devices*2 through PlayStation®Mobile.

Allowing a wider range of developers to create dedicated content for PlayStation Mobile, the PlayStation®Mobile Developer Program becomes available in Japan, United States, Canada, United Kingdom, France, Germany, Italy, Spain, Australia. The forthcoming phased roll out will start from Hong Kong and Taiwan and with more countries and regions to follow. This program enables developers to distribute easily their content through PlayStation®Store*3 on a commercial basis and market their games to millions of dedicated gamers with PlayStation™Certified*4 devices and PlayStation®Vita. The license agreement fee is 7,980 yen annually*5.

After receiving the feedback from developers who have used the open beta version since this April, the official version of PlayStation®Mobile SDK enhances its system stability. Along with the technical support from SCE through the developers forum where developers can exchange useful information, developers are also be able to seamlessly continue to develop content which was created with the open beta version.

(Please refer to the special site link for more detailed information)

https://psm.playstation.net/portal/


SCE will further accelerate the expansion of PlayStation™Certified devices and continue to collaborate with content developers to drive the delivery of compelling entertainment experiences through PlayStation®Mobile.

*1 A set of development tools and software libraries for PlayStation®Mobile.

*2 As of November 20, Android based PS Certified devices and PS Vita.

*3 Users can download vast digital content including games through PlayStation Store for PS3, PSP, PS Vita and PS Certified devices.

*4 The license program to expand PlayStation®Mobile, dedicated for portable hardware manufacturers. SCE will not only license logos but also provide necessary development support. Please kindly refer to the URL for the line-up of PS Certified devices.

http://www.playstation.com/psm/certified.html

*5 The fee is for the Japanese market. The fee differs by countries and regions. After closing the license agreement, developers are able to use PlayStation®Mobile SDK and conduct verification on PS Certified devices and PS Vita to distribute their content on PS Store.


About Sony Computer Entertainment Inc.

Recognized as the global leader and company responsible for the progression of consumer-based computer entertainment, Sony Computer Entertainment Inc. (SCEI) manufactures, distributes, develop and markets the PlayStation®2 (PS2®) computer entertainment system, the PSP® (PlayStation®Portable) handheld entertainment system, the PlayStation®3 (PS3®) computer entertainment system and the PlayStation®Vita (PS Vita) portable entertainment system. SCEI has revolutionized home entertainment since they launched PlayStation in 1994. PS2® further enhances the PlayStation legacy as the core of home networked entertainment. PSP® is a handheld entertainment system that allows users to enjoy 3D games with high-quality full-motion video and high-fidelity stereo audio. PS3® is an advanced computer system, incorporating the powerful Cell Broadband Engine and RSX processors. PS Vita is an ultimate portable entertainment system that offers a revolutionary combination of rich gaming and social connectivity within a real world context. SCEI also delivers the PlayStation® experience to open operating systems through PlayStation®Mobile, a cross device platform. Headquartered in Tokyo, Japan, SCEI, along with its affiliated companies, Sony Computer Entertainment America LLC., and Sony Computer Entertainment Europe Ltd., and its division companies, Sony Computer Entertainment Japan and Sony Computer Entertainment Asia develops, publishes, markets and distributes hardware and software, and manages the third party licensing programs for these platforms in the respective markets worldwide

###

PlayStation and PS3 are registered trademarks or trademarks of Sony Computer Entertainment Inc. Xperia is a trademark or a registered trademark of Sony Mobile Communications AB. "Sony Tablet" is a trademark of Sony Corporation. All other trademarks are property of their respective owners.

The developer portal is now live as well.

 

The release is a bit of a double edged sword, as now if you want to deploy to a hardware device, you need to pay the annual fee.  Make sure you are in a supported market area before you upgrade from .99.2!

 

Sony also released the following graphic which explains the program's development process:

There is also an expanded FAQ.

 

Of course, if you have no prior experience with PlayStation Mobile, this site has a number of tutorials to get you started!


19. November 2012

 

Over on the PlayStation Mobile forums, a user asked:

For example, if I had a 100 x 100 image, I could use the source rectangle to  draw, say, the left part of the image 50 x 100.  This is useful when I have two images that represent the same object, e.g. a fancy progress meter, one light, the other dark.  SpriteUV has Quad which allows me to stretch and skew the image, but not crop.

Am I missing something? If not, what are my options?

 

My answer wasn’t a short one, so I decided to essentially turn it in to a tutorial post in and of itself.  So, if you want to learn how to do this, or how UV coordinates work in the first place, read on!

 

The answer is, yes, you can very much do this with PSM Studio, but the way might not be completely intuitive.  Each sprite has a TRS set ( Translation/Rotation/Scale ) that represents its UV coordinates within its textures.    Essentially when you work with a SpriteTile, it’s handling all this magic for you.  The good news is, you can manipulate the UV values of a SpriteUV to accomplish exactly the effects described in the question above.  If what you are looking to do is create a sprite sheet animation however, there is a much better way.

 

Alright, let’s jump right in with some code:

 

using System;
using Sce.PlayStation.Core;
using Sce.PlayStation.Core.Graphics;
using Sce.PlayStation.Core.Input;
using Sce.PlayStation.HighLevel.GameEngine2D;
using Sce.PlayStation.HighLevel.GameEngine2D.Base;

namespace Test
{
    public class AppMain
    {
        public static void Main (string[] args)
        {
            Director.Initialize();
            Scene scene = new Scene();
            scene.Camera.SetViewFromViewport();
            
            SpriteUV sprite = new SpriteUV(new TextureInfo("/Application/watch.png"));
            sprite.Scale = new Vector2(Director.Instance.GL.Context.Screen.Width,
                                       Director.Instance.GL.Context.Screen.Height);
            sprite.Schedule((dt) => {
                var g = GamePad.GetData(0);
                if((g.Buttons & GamePadButtons.Up) == GamePadButtons.Up){
                    // Top left
                    sprite.UV.S = new Vector2(0.5f,0.5f);
                    sprite.UV.T = new Vector2(0.0f,0.5f);
                }
                else if((g.Buttons & GamePadButtons.Left) == GamePadButtons.Left){
                    // Bottom left
                    sprite.UV.S = new Vector2(0.5f,0.5f);
                    sprite.UV.T = new Vector2(0.0f,0.0f);
                }
                else if ((g.Buttons & GamePadButtons.Down) == GamePadButtons.Down){
                    // Bottom right                
                    sprite.UV.S = new Vector2(0.5f,0.5f);
                    sprite.UV.T = new Vector2(0.5f,0.0f);
                }
                else if ((g.Buttons & GamePadButtons.Right) == GamePadButtons.Right){
                    // Top right
                    sprite.UV.S = new Vector2(0.5f,0.5f);
                    sprite.UV.T = new Vector2(0.5f,0.5f);
                }
                else if((g.Buttons & GamePadButtons.Cross) == GamePadButtons.Cross){
                    // Back to full screen
                    sprite.UV.S = new Vector2(1.0f,1.0f);
                    sprite.UV.T = new Vector2(0.0f,0.0f);
                }
            },0);
            
            scene.AddChild(sprite);
            Director.Instance.RunWithScene(scene);
        }
    }
}

 

Run this code and you will see:

full

 

Now press an arrow key ( here is the results for UP ) and you will see a fraction of the original texture:

topleft

Press X to go back to the full texture dimensions.

 

So… what’s happening here?

 

First off, we Initialize our Director singleton, create a Scene and set the camera up to match the device screen dimensions.  We then create a SpriteUV and TextureInfo in a single line, loading an image of the famous Watchmen logo.  We then scale the sprite to also match the dimensions of the screen.

 

It’s in the Schedule lambda the bulk of our UV manipulation logic takes place.  As you can see, we get the GamePad state, and handle the user pressing the d-pad or X button ( S key on simulator ).  In the event the user presses a direction button, we manipulate the sprite’s UV.S and UV.T values depending on which direction the user pressed, as indicated by the comment in each if statement.  If the user presses the X button, we set the UV.S and UV.T values back to full size and the origin respectively.  Finally we add the sprite to the scene, then run the scene.

 

The heart of this example is the UV property, which is a TRS object.  If the term UV is unfamiliar to you, they are simply texture coordinates on a face.  They are called UV simply because there are two coordinates, U and V. The UV values  describe how a texture is mapped to a polygon face.  U and V values go from 0 to 1 and start in the bottom left corner of an image.  This means (0,0) is the bottom left corner of the texture, (1,1) is the top right coordinate of the texture while (0.5,0.5) is the very center of the texture.

 

So, using the SpriteUV.UV property, we can alter the Translation ( position ), Rotation and Scale of the selection within SpriteUV’s texture that is going to be drawn.  Think of these values as describing the location of a select box within the texture that are going to be copied and drawn as the texture.  Here is a bad diagram to attempt to explain what’s happening.

 

image

 

The background is our SpriteUV texture.  By default the UV.T is (0,0), meaning drawing will start from the bottom left.  By default the UV.S values will be (1,1), meaning no scaling will occur.  Using these defaults, when we draw our sprite, the entire image will be drawn.

 

Now consider the blue selection rectangle.  This has a UV.T value of (0.3,0.3) and a UV.S value of (0.5,0.5) …. okay… my drawing to scale kind sucked, just imagine that the blue rectange was a quarter of the entire image size.  These values mean that at position 0.3,0.3… or 30% right and 30% up from the origin in the bottom left, we start our selection.  Due to our S(cale) value of (0.5,0.5) it means our selection size is half the height and half the width of the texture.  In this example we are not making use of TR.R(otation).

 

Therefore, assuming the following diagram was to scale, with a Translation UV value of 0.3, 0.3 and Scale UV value of 0.5 and 0.5, when we draw our texture we will see:

image

 

And that is how you can use UV values to draw a portion of a sprite’s texture.  You may notice that SpriteUV has a pair of properties, FlipU and FlipV.  All these do is reverse the direction of the U or V coordinate, for example, flipping U would make (0,0) be at the bottom right of the image instead of the bottom left.

 

You can download the complete archive here.  Obviously the Watchman logo is protected under copyright and cannot be used commercially in any way whatsover, period, ever. For real.

Programming


18. November 2012

This recipe looks at how to rotate one sprite relative to another point.  In this example, we rotate a jet sprite to face the position of the mouse.

 



Mouse over the application to your right to see how the centred sprite follows the mouse cursor.  You may need to tap the screen to focus the mouse. As you move the mouse you can see the angle between the sprite and the mouse cursor.  The X and Y values represent the current location of the mouse on the HTML canvas.  You may notice that 0/360 degrees is to right hand side, this is a side effect of the Atan2 method.

 

 

Just The Math 

var angle = Math.atan2(stage.mouseY - jetSprite.y, stage.mouseX - jetSprite.x );

angle = angle * (180/Math.PI);

Description

First we get the distance between the sprite and the mouse.  This is obtained simply by subtracting the mouse location from the sprite location.  We then take the atan2 of the resulting coordinates.  One warning with atan2, the parameters are (y,x) not (x,y)!  Atan2 will return the angle, with a few gotchas.  First off, the angle is returned in radians.  Depending on your graphic library, you may need to convert to degrees to perform a rotation ( such as the case with EaselJs ).  If your language/library of choice doesn't have a RadiansToDegrees function, the formula is simply degrees = radiansToConvert * (180 divided by Pi).  Keep in mind, Pi (π 3.14159____ ) represents half a circle, so 2π is a complete circle( 360 degrees ), 1/2π is 90 degrees, etc.
 
Second, the angle is relative to the positive X axis, meaning that 0 degrees is pointing right.  If you look at the full source code to the example, you will notice that the source image itself actually points up, so we increase the angle by 90 degrees to adjust for orientation of the jet sprite image.  Also, depending on origin your graphic library uses, you may need to flip the sign in the y direction.
 
One other side effect of atan2 is it returns the results as a value range of -180 to 180.  If you want the value to be 0 to 360, perform the following:
 

if(angle < 0)

{

    angle = 360 - (-angle);

}

 

The Complete Code

<!DOCTYPE html>

<html>

<head>

    <script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>

    <script>

 

    var jetSprite;

    var stage;

    var textOut;

 

    function demo(){

        stage = new createjs.Stage("theCanvas");

 

        // onFrame will be called each "tick". Default is 50ms, or 20FPS

        createjs.Ticker.addListener(onFrame);

 

        // Create and configure our jet sprite. regX/Y set the pivot point, we center it

        jetSprite = new createjs.Bitmap("jetsprite.png");

        jetSprite.regX = jetSprite.image.width/2;

        jetSprite.regY = jetSprite.image.height/2;

        jetSprite.x = stage.canvas.width/2;

        jetSprite.y = stage.canvas.height/2;

 

        //Now we create a Text object, used for displaying some debug details

        textOut = new createjs.Text("Debug","24px Arial","red");

        textOut.x = 5;

        textOut.y = 5;

        textOut.maxWidth = 390;

 

        //All the worlds a stage after all... add our sprite and text to it

        stage.addChild(jetSprite);

        stage.addChild(textOut);

 

        //And go...

        stage.update();

    }

 

    function onFrame(elapsedTime) {

        var angle = Math.atan2(stage.mouseY - jetSprite.y, stage.mouseX - jetSprite.x );

        angle = angle * (180/Math.PI);

 

        // The following if statement is optional and converts our angle from being

        // -180 to +180 degrees to 0-360 degrees.  It is completely optional

        if(angle < 0)

        {

            angle = 360 - (-angle);

        }

 

        textOut.text = "X:" + stage.mouseX + " Y:" + stage.mouseY + " angle:" + Math.round(angle);

 

        // Atan2 results have 0 degrees point down the positive X axis, while our image is pointed up.

        // Therefore we simply add 90 degrees to the rotation to orient our image

        // If 0 degrees is to the right on your image, you do not need to add 90

        jetSprite.rotation =90 + angle;

 

        stage.update();

    }

    </script>

</head>

<body onload="demo()">

    <canvaswidth=400pxheight=400pxid="theCanvas"style="background-color:black"/>

</body>

</html>

 

See Also

http://gamedev.stackexchange.com/questions/14602/what-are-atan-and-atan2-used-for-in-games

 

 

Additions and Edits

The results of Atan2 can be a bit confusing, depending on the way your brain works.  In the full source code, you can see that I add 90 degrees to the rotation angle.  This is because the image ( and my mindset ) view 0 degrees as being up the positive Y axis.  Of course, this is completely arbitrary.

 

Consider for a moment the philosophical question "where does a circle begin?".  The answer completely depends on who you ask.  If you ask me, 0 degrees is up.  If you ask atan2, 0 degrees is to the right.  Consider the following diagram:

Jet on Cartesian plane

 

As you can see, the position atan2 considers to be zero is offset 90 degrees from the position I consider ( and have drawn my art according to ) to be 0 degrees.  Fortunately the answer is as simple as adding 90 degrees to the angle during rotations.  Of course, you could simply draw your art as if 0 degrees was along the positive X axis and you won't have any problems.

Programming


GFS On YouTube

See More Tutorials on DevGa.me!

Month List