Joystick updates.

Author: photonstorm

plugins/VirtualJoystick.js

@@ -21,33 +21,38 @@ Phaser.Plugin.VirtualJoystick = function (game, parent) {
 	this.nubCenter;
 
 	this.isDragging = false;
+
+	this.angle = 0;
 	this.distance = 0;
+	this.force = 0;
+	this.deltaX = 0;
+	this.deltaY = 0;
+	this.speed = 0;
 
 };
 
 //	Extends the Phaser.Plugin template, setting up values we need
 Phaser.Plugin.VirtualJoystick.prototype = Object.create(Phaser.Plugin.prototype);
 Phaser.Plugin.VirtualJoystick.prototype.constructor = Phaser.Plugin.VirtualJoystick;
 
-Phaser.Plugin.VirtualJoystick.prototype.init = function (x, y, diameter) {
+Phaser.Plugin.VirtualJoystick.prototype.init = function (x, y, diameter, limit) {
 
 	if (typeof diameter === 'undefined') { diameter = 80; }
+	if (typeof limit === 'undefined') { limit = Math.floor(diameter / 2); }
 
 	this.x = x;
 	this.y = y;
 
 	var radius = Math.floor(diameter / 2);
-
-	this.testCircle = new Phaser.Circle(200, 200, diameter);
-	this.testPoint = new Phaser.Point();
+	var nr = radius - 4;
 
 	this.baseCircle = new Phaser.Circle(x, y, diameter);
 
 	this.baseBMD = this.game.make.bitmapData(diameter, diameter);
-	this.nubBMD = this.game.make.bitmapData(diameter - 4, diameter - 4);
+	this.nubBMD = this.game.make.bitmapData(nr * 2, nr * 2);
 
 	this.baseBMD.circle(radius, radius, radius, 'rgb(255, 0, 0)');
-	this.nubBMD.circle(radius, radius, (radius) - 4, 'rgb(0, 255, 0)');
+	this.nubBMD.circle(nr, nr, nr, 'rgb(0, 255, 0)');
 
 	//	Base
 	this.base = this.game.add.sprite(x, y, this.baseBMD);
@@ -62,36 +67,44 @@ Phaser.Plugin.VirtualJoystick.prototype.init = function (x, y, diameter) {
 	this.nub.events.onInputDown.add(this.startDrag, this);
 	this.nub.events.onInputUp.add(this.stopDrag, this);
 
+	//	Need to find a way to not hog this callback
 	this.game.input.setMoveCallback(this.move, this);
 
 	this.isDragging = false;
+
 	this.distance = 0;
-	this.limit = radius;
+	this.speed = 0;
+	this.force = 0;
+	this.limit = limit;
 	this.limitPoint = new Phaser.Point();
 
-	this.m = new Phaser.Point();
-
-
-	this.prev = new Phaser.Point(x, y);
+	this.location = new Phaser.Point();
 
 }
 
-Phaser.Plugin.VirtualJoystick.prototype.startDrag = function () {
+Phaser.Plugin.VirtualJoystick.prototype.startDrag = function (nub, pointer) {
 
 	this.isDragging = true;
-	this.distance = 0;
-	this.angle = 0;
+
+	this.location.set(pointer.x, pointer.y);
+	this.distance = Phaser.Point.distance(this.base, this.location, true);
+	this.angle = this.game.math.wrapAngle(this.location.angle(this.base, true) + 180);
+	this.force = this.game.math.percent(this.distance, this.limit);
 
 };
 
-Phaser.Plugin.VirtualJoystick.prototype.stopDrag = function () {
+Phaser.Plugin.VirtualJoystick.prototype.stopDrag = function (nub, pointer) {
 
 	this.isDragging = false;
+
 	this.distance = 0;
 	this.angle = 0;
+	this.force = 0;
+
 	this.nub.x = this.base.x;
 	this.nub.y = this.base.y;
-	this.prev.set(this.base.x, this.base.y);
+	
+	this.limitPoint.set(this.base.x, this.base.y);
 
 };
 
@@ -102,38 +115,54 @@ Phaser.Plugin.VirtualJoystick.prototype.move = function (pointer, x, y) {
 		return;
 	}
 
-	this.m.set(x, y);
-
-	this.distance = Phaser.Point.distance(this.base, this.m, true);
+	this.location.set(x, y);
 
-	this.angle = Phaser.Point.angle(this.base, this.m) * 180 / Math.PI;
-	this.angle = this.game.math.wrapAngle(this.angle + 180, false);
+	this.distance = Phaser.Point.distance(this.base, this.location, true);
 
-	Phaser.Circle.circumferencePoint(this.testCircle, this.angle, true, this.testPoint);
-	Phaser.Circle.circumferencePoint(this.baseCircle, this.angle, true, this.limitPoint);
+	this.angle = this.game.math.wrapAngle(this.location.angle(this.base, true) + 180);
 
-	//	If the pointer is outside the baseCircle then we don't need to set the sprite like this
+	this.force = this.game.math.percent(this.distance, this.limit);
 
-	if (this.baseCircle.contains(x, y))
+	if (this.distance < this.limit)
 	{
-		this.nub.x = x;
-		this.nub.y = y;
+		this.limitPoint.copyFrom(this.location);
 	}
 	else
 	{
-		// this.nub.position.set(this.limitPoint.x, this.limitPoint.y);
-		this.nub.x = this.limitPoint.x;
-		this.nub.y = this.limitPoint.y;
+		this.baseCircle.circumferencePoint(this.angle, true, this.limitPoint);
 	}
 
-	// if (this.distance < this.limit)
-	// {
-	// }
-	// else
-	// {
-		// this.nub.x = this.limitPoint.x;
-		// this.nub.y = this.limitPoint.y;
-	// }
+	this.nub.position.set(this.limitPoint.x, this.limitPoint.y);
+
+};
+
+/**
+* Given the speed calculate the velocity and return it as a Point object, or set it to the given point object.
+* One way to use this is: velocityFromAngle(angle, 200, sprite.velocity) which will set the values directly to the sprites velocity and not create a new Point object.
+*
+* @method Phaser.Plugin.VirtualJoystick#setVelocity
+* @param {Phaser.Sprite} sprite - The Sprite to set the velocity on. The Sprite must have a physics body already set. The value will be set into Sprite.body.velocity.
+* @param {number} [minSpeed=0] - The minimum speed the Sprite will move if the joystick is at its default (non-moved) position.
+* @param {number} [maxSpeed=100] - The maximum speed the Sprite will move if the joystick is at its full extent.
+* @return {Phaser.Sprite} The Sprite object.
+*/
+Phaser.Plugin.VirtualJoystick.prototype.setVelocity = function (sprite, minSpeed, maxSpeed) {
+
+    if (typeof minSpeed === 'undefined') { minSpeed = 0; }
+    if (typeof maxSpeed === 'undefined') { maxSpeed = 200; }
+
+    if (this.force === 0 && minSpeed === 0)
+    {
+    	sprite.body.velocity.set(0, 0);
+    }
+    else
+    {
+	    var speed = (maxSpeed - minSpeed) * this.force;
+
+	    sprite.body.velocity.set((Math.cos(this.game.math.degToRad(this.angle)) * speed), (Math.sin(this.game.math.degToRad(this.angle)) * speed));
+    }
+
+    return sprite;
 
 };
 
@@ -143,15 +172,15 @@ Phaser.Plugin.VirtualJoystick.prototype.update = function () {
 
 Phaser.Plugin.VirtualJoystick.prototype.render = function () {
 
-	this.game.debug.text(this.distance, 32, 32);
-	this.game.debug.text(this.angle, 132, 32);
+	this.game.debug.text('force: ' + this.force, 32, 32);
+	// this.game.debug.text(this.distance, 32, 32);
+	// this.game.debug.text(this.angle, 132, 32);
 
-	this.game.debug.text('x: ' + this.m.x + ' y: ' + this.m.y, 32, 64);
+	// this.game.debug.text('x: ' + this.location.x + ' y: ' + this.location.y, 32, 64);
 	// this.game.debug.text('x: ' + this.limitPoint.x + ' y: ' + this.limitPoint.y, 32, 64);
 	// this.game.debug.text('x: ' + this.prev.x + ' y: ' + this.prev.y, 32, 64);
 	// this.game.debug.text(Phaser.Point.distance(this.base, this.prev, true), 32, 96);
 
-	this.game.debug.geom(this.testCircle);
-	this.game.debug.geom(this.testPoint, 'rgb(255,0,0)');
+	this.game.debug.geom(this.limitPoint, 'rgb(255,255,0)');
 
 };

src/gameobjects/BitmapData.js

@@ -858,9 +858,9 @@ Phaser.BitmapData.prototype = {
     * Draws a filled Circle to the BitmapData at the given x, y coordinates and radius in size.
     *
     * @method Phaser.BitmapData#circle
-    * @param {number} x - The x coordinate to draw the Circle at.
-    * @param {number} y - The y coordinate to draw the Circle at.
-    * @param {number} radius - The radius of the Circle.
+    * @param {number} x - The x coordinate to draw the Circle at. This is the center of the circle.
+    * @param {number} y - The y coordinate to draw the Circle at. This is the center of the circle.
+    * @param {number} radius - The radius of the Circle in pixels. The radius is half the diameter.
     * @param {string} [fillStyle] - If set the context fillStyle will be set to this value before the circle is drawn.
     */
     circle: function (x, y, radius, fillStyle) {

src/geom/Point.js

@@ -283,13 +283,21 @@ Phaser.Point.prototype = {
     *
     * @method Phaser.Point#angle
     * @param {Phaser.Point|any} a - The object to get the angle from this Point to.
+    * @param {boolean} [asDegrees=false] - Is the given angle in radians (false) or degrees (true)?
     * @return {number} The angle between the two objects.
     */
-    angle: function (a) {
+    angle: function (a, asDegrees) {
 
-        return Math.atan2(a.y - this.y, a.x - this.x);
+        if (typeof asDegrees === 'undefined') { asDegrees = false; }
 
-        // return Math.atan2(this.x * a.y - this.y * a.x, this.x * a.x + this.y * a.y);
+        if (asDegrees)
+        {
+            return Phaser.Math.radToDeg(Math.atan2(a.y - this.y, a.x - this.x));
+        }
+        else
+        {
+            return Math.atan2(a.y - this.y, a.x - this.x);
+        }
 
     },
 

src/math/Math.js

@@ -1300,6 +1300,34 @@ Phaser.Math = {
 
     },
 
+    /**
+    * Work out what percentage value a is of value b using the given base.
+    *
+    * @method Phaser.Math#percent
+    * @param {number} a - The value to work out the percentage for.
+    * @param {number} b - The value you wish to get the percentage of.
+    * @param {number} [base=0] - The base value.
+    * @return {number} The percentage a is of b, between 0 and 1.
+    */
+    percent: function (a, b, base) {
+
+        if (typeof base === 'undefined') { base = 0; }
+
+        if (a > b || base > b)
+        {
+            return 1;
+        }
+        else if (a < base || base > a)
+        {
+            return 0;
+        }
+        else
+        {
+            return (a - base) / b;
+        }
+
+    },
+
     /**
     * Convert degrees to radians.
     *