Quantcast
Channel: Emanuele Feronato | RSS Feed
Viewing all articles
Browse latest Browse all 2

Throw a ball with a sling physics Flash tutorial: Part 2 by Kevin Ward

$
0
0

Only 2 days. That’s how much time Kevin Ward needed to solve and publish the solution of the problem posted in Throw a ball with a sling physics Flash tutorial.

You may know Kevin for his excellent post about a different approach to create a game like Line Rider, and now he come with the second part of the sling tutorial.

Take your honour, Kevin, you deserve it!!

This is the movie Kevin created:

And this is the actionscript, with comments in some critical parts:

var ball:MovieClip = _root.attachMovie("ball", "ball", 2, {_x:250, _y:100});
var elastic:MovieClip = _root.createEmptyMovieClip("elastic", 1);
var point1:MovieClip = _root.attachMovie("sling", "point1", 3, {_x:50, _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 elasticCoefficient:Number = 0.001;
// This number will affect the stretchiness of the sling.  The greater the number
// the tighter the elastic will be.					
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(3, 0xFF0000);
	if (released) {
		ball._x += vel.x;
		ball._y += vel.y;
	}
	if (ball._y>=187) {
		/* This area differs from the code in the tutorial.
		The reason for that is I didn't read the code, I just looked at the examples.
		I try to gain experience with problem-solving by doing things as close to by myself as possible. */
		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;
		angle1 += Math.sin(radius/distance1);
		angle2 += Math.sin(radius/distance2)*-1;
		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) {
		/* This section applies the force of the sling to the ball in terms of acceleration based on the stretching of
		the sling, in the direction of the displacement, scaled by a coefficient that also encapsulates the mass of 
		the ball. */
		acc.x += distance1*Math.sin(angle2)*elasticCoefficient;
		acc.y += -distance1*Math.cos(angle1)*elasticCoefficient;
		acc.x += distance2*Math.sin(angle1)*elasticCoefficient;
		acc.y += -distance2*Math.cos(angle2)*elasticCoefficient;
	}
	if (released) {
		vel.x += acc.x;
		vel.y += acc.y;
	}
};

This is an excellent solution to the problem, and I think this should be an inspiration for the ball physics Flash game design competition.

Download the source and say “good work Kevin!”.

Want to learn more? Learn by example!

Get the full commented source code of an actual commercial cross platform HTML5 game!!


Viewing all articles
Browse latest Browse all 2

Latest Images

Trending Articles





Latest Images