Throw a ball with a sling physics Flash tutorial

August 16th update: 2nd part released by Kevin Ward

Here it comes the first tutorial about some strange ways to use ball physics in a game, as said in the rules of Jay is Games competition. We have to create something original and physics related at the same time.

We’ll learn how to throw a ball with a sling.

In order to throw a ball with a sling, you need a ball and a sling. We can define a sling as an elastic connecting two points.

So I am going to create the ball and the points in Flash in this way:

Sling physics

Then, in the first frame, this is the actionscript:

Line 1: Placing the first of the two sling nodes in the stage

Line 2: Placing the second sling

Line 3: Placing the ball

Line 4: Creating the empty movieclip where we will draw the elastic

Lines 5-7: Routine to drag the ball

Lines 8-10: Routine to release the ball. You already saw this code in the Creation of the engine behind “Nodes” game with Flash tutorial.

And in only ten lines we have a draggable ball and a sling without elastic. Time to have an aspirin and make the elastic. Or somethins similar, of course…

Let’s define the basics: we want the elastic to bend if the ball is moved below sling points.

Line 11: Beginning of the script to be executed at every frame for the elastic object

Line 12: Clearing the movieclip

Line 13: Setting the line style to a green, two pixel thick line

Line 14: Placing the pen on the center of the first sling. If you aren’t familiar with draw commands, read Create a flash draw game like Line Rider or others – part 1 tutorial.

Line 15: Determining if the ball bends the elastic. That 182 means nodes _y position (200) minus ball radius (18), that means that the ball is below sling points

Lines 16-18: Calculating the distance between the center of the ball and the center of the left sling point, using the Pythagorean theorem.

Line 19: Having the distance, using the Pythagorean theorem again to calculate the length of the elasitc, that will touch the ball forming an angle of 90 degrees with the radius. You’ll understand why after reading the next line.

Line 20: Determining the angle between the ball and the left sling point as seen a million times with trigonometry. Refer to Create a flash draw game like Line Rider or others – part 3 tutorial for some trigonometry hints.

But in this case you will notice it’s not the well-known code Math.atan2(dist_y, dist_x) but there is another Math.asin(18/distance_from_sling). What is it?

Math.asin(x) returns the arc sine for the number specified in the parameter x, in radians. The arc sine is the inverse of the sine. I have to add the angle due to the arc sine to find a spot along ball circumference where a line long distance_from_sling pixels connects the circumference to the center of the left sling.

One picture will mess your head more than a thousand words:

Sling

That’s why we used the Pythagorean theorem to calculate the elastic length and why we involved tha arcsin function.

Line 21: Drawing a line as long as elastic_length with an angle inclination using trigonometry.

Line 23: If the ball is not bending the elastic, just draw a straight line from one sling point to another

Lines 25-35: Same thing for the right sling point

And now we have our elastic bending.

Of course it’s a fake because the elastic does not roll around the ball, but it’s just a game…

You may say there are some lines and controls I can delete, since (as example) being the two sling nodes at the same _y position is not necessary to perform the check twice, but I need to keep them separated at the moment because I plan to make the sling points draggable.

We will need to determine the angle and force of fire, and we’ll see it in another tutorial (coming very soon of course! the competition has begun!), but I think you should have an hint with the next movie, where I simply connected the two “elastic” ends with the center of the ball.

As you can see in the movie (and in the previous picture), the angle between one part of the elastic and the radius going to it is always 90 degress. And that arc that is forming, that seems to grow as much as you draw the ball… do you have the solution? Write it as a comment and you’ll have a post dedicated to your discovery.

Meanwhile, take all the flas and give me FB (feedback)

August 16th update: 2nd part released by Kevin Ward

  • Another awesome tutorial!

    I’ve always wondered how this was done after playing the slingstar game on teagames. Their rope bends round the ball but I think your solution looks fine as it is.

    Looking forward to seeing how to fling the ball!

    Thanks!

  • Dean

    The download link is broken.

  • Emanuele Feronato

    Fixed

    Thank you.

  • Pingback: squareCircleZ » More game math()

  • Izy

    This one’s really cool.

    I think I have it figured out.

    var ball:MovieClip = _root.attachMovie(“ball”, “ball”, 2, {_x:275, _y:100});
    var elastic:MovieClip = _root.createEmptyMovieClip(“elastic”, 1);
    var point1:MovieClip = _root.attachMovie(“sling”, “point1”, 3, {_x:100, _y:200});
    var point2:MovieClip = _root.attachMovie(“sling”, “point2”, 4, {_x:450, _y:200});

    var gravity = 0.1;

    var angle1:Number = 0;

    var angle2:Number = 0;

    var radius:Number = 13.0; // Or whatever half the width of your ball is.

    var released:Boolean = true;

    var forced:Boolean = false;

    var acc:Object = {x:0,y:0};
    var vel:Object = {x:0,y:0};

    _root.onMouseDown = function() {

    ball._x = _root._xmouse;
    ball._y = _root._ymouse;
    ball.startDrag();
    _root.released = false;
    vel.x = 0;
    vel.y = 0;
    }

    _root.onMouseUp = function() {

    ball.stopDrag();
    _root.released = true;

    }

    ball.onPress = function() {

    ball.startDrag();
    _root.released = false;
    vel.x = 0;
    vel.y = 0;
    }

    ball.onRelease = function() {

    ball.stopDrag();
    _root.released = true;

    }

    _root.onEnterFrame = function() {

    elastic.clear();
    elastic.lineStyle(5, 0x00EE00);

    if (released) {

    ball._x = vel.x;
    ball._y = vel.y;

    }

    if (ball._y >= 187) {

    forced = true;

    var x1:Number = ball._x-point1._x;
    var y1:Number = ball._y-point1._y;

    var x2:Number = point2._x-ball._x;
    var y2:Number = point2._y-ball._y;

    var distance1:Number = Math.sqrt(x1*x1 y1*y1);
    var distance2:Number = Math.sqrt(x2*x2 y2*y2);

    _root.angle1 = Math.atan2(y1,x1);
    _root.angle2 = Math.atan2(y2,x2);

    var xOffset:Number = Math.cos(angle1 Math.PI/2)*radius;
    var yOffset:Number = Math.sin(angle1 Math.PI/2)*radius;

    var xOffset2:Number = Math.cos(angle2 Math.PI/2)*radius;
    var yOffset2:Number = Math.sin(angle2 Math.PI/2)*radius;

    elastic.moveTo(point1._x, point1._y);
    elastic.lineTo(ball._x xOffset, ball._y yOffset);

    elastic.moveTo(point2._x, point2._y);
    elastic.lineTo(ball._x xOffset2, ball._y yOffset2);

    }
    else {

    forced = false;
    elastic.moveTo(point1._x, point1._y);
    elastic.lineTo(point2._x, point2._y);

    }
    acc.x = 0;
    acc.y = 0;
    acc.y = gravity;

    if (released && forced) {

    acc.x = distance1*Math.sin(angle2)/1000;
    acc.y = -distance1*Math.cos(angle1)/1000;

    acc.x = distance2*Math.sin(angle1)/1000;
    acc.y = -distance2*Math.cos(angle2)/1000;

    }

    if (released) {

    vel.x = acc.x;
    vel.y = acc.y;

    }

    }

  • Izy

    It looks like it doesn’t print the plus sign. I guess I’ll have it to e-mail you.

  • Pingback: Throw a ball with a sling physics Flash tutorial: Part 2 by Kevin Ward at Emanuele Feronato()

  • cod

    im having some problems please help me :D
    in the first script 1.
    attachMovie(“sling”, “sling_1”, _root.getNextHighestDepth(), {_x:20, _y:200});
    2.
    attachMovie(“sling”, “sling_2”, _root.getNextHighestDepth(), {_x:480, _y:200});
    3.
    attachMovie(“ball”, “ball”, _root.getNextHighestDepth(), {_x:250, _y:100});
    4.
    _root.createEmptyMovieClip(“elastic”, _root.getNextHighestDepth());
    5.
    ball.onPress = function() {
    6.
    startDrag(this);
    7.
    };
    8.
    ball.onRelease = function() {
    9.
    stopDrag();
    10.
    };

    its not working there is supposed to be 2 slings right but there is nothing but one and when i check the script it says script has no errors

    please help me im a newbie to flashbut i know the basics

  • Frederik J

    Yo need to go to your library. Right click on the slings, and press linkage. The you enable “Export for Actionscript”. Make sure you do it at both of them.

  • This_Guy_is_a_Newbie_in_Flash

    thank u very much

    btw how can u make it launch when u let go of the
    mouse button

    again THANK U

  • Hey…. I’m from India, fresher in Game development. I’m using As3 platform. could you please do me a favor, I’m creating a game like toss the turtle(http://www.kongregate.com/games/Foreverkul/toss-the-turtle)
    . I got stuck in the portion of shooting of turtle from the gun. Totally confused with the gravity, speed etc. I have a powerbar in the game scene to shoot the turtle from the gun. Other features like hitting and bouncing with obstacles working good. Only problem is shooting of turtle from the gun. I did this with my concept. It works not perfectly, but when the turtle hits the ground it can bounce and move very much.