Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-21 20:23:19 +00:00
Code Issues Projects Releases Packages Wiki Activity

Start of the Virtual Joystick plugin.

Browse source 
Fixes to Point.angle.
This commit is contained in:
Richard Davey 2014-05-07 16:35:08 +01:00
parent 21b47b3904
commit 281e84ee9b
4 changed files with 167 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

157
plugins/VirtualJoystick.js Normal file
View file

@ -0,0 +1,157 @@
/**
* A Virtual Joystick
*/
Phaser.Plugin.VirtualJoystick = function (game, parent) {
Phaser.Plugin.call(this, game, parent);
this.x = 0;
this.y = 0;
this.limit = 10;
this.baseCircle;
this.baseBMD;
this.nubBMD;
this.base;
this.nub;
this.baseCenter;
this.nubCenter;
this.isDragging = false;
this.distance = 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) {
if (typeof diameter === 'undefined') { diameter = 80; }
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();
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.baseBMD.circle(radius, radius, radius, 'rgb(255, 0, 0)');
this.nubBMD.circle(radius, radius, (radius) - 4, 'rgb(0, 255, 0)');
// Base
this.base = this.game.add.sprite(x, y, this.baseBMD);
this.base.anchor.set(0.5);
// Nub
this.nub = this.game.add.sprite(x, y, this.nubBMD);
this.nub.anchor.set(0.5);
this.nub.inputEnabled = true;
this.nub.events.onInputDown.add(this.startDrag, this);
this.nub.events.onInputUp.add(this.stopDrag, this);
this.game.input.setMoveCallback(this.move, this);
this.isDragging = false;
this.distance = 0;
this.limit = radius;
this.limitPoint = new Phaser.Point();
this.m = new Phaser.Point();
this.prev = new Phaser.Point(x, y);
}
Phaser.Plugin.VirtualJoystick.prototype.startDrag = function () {
this.isDragging = true;
this.distance = 0;
this.angle = 0;
};
Phaser.Plugin.VirtualJoystick.prototype.stopDrag = function () {
this.isDragging = false;
this.distance = 0;
this.angle = 0;
this.nub.x = this.base.x;
this.nub.y = this.base.y;
this.prev.set(this.base.x, this.base.y);
};
Phaser.Plugin.VirtualJoystick.prototype.move = function (pointer, x, y) {
if (!this.isDragging)
{
return;
}
this.m.set(x, y);
this.distance = Phaser.Point.distance(this.base, this.m, true);
this.angle = Phaser.Point.angle(this.base, this.m) * 180 / Math.PI;
this.angle = this.game.math.wrapAngle(this.angle + 180, false);
Phaser.Circle.circumferencePoint(this.testCircle, this.angle, true, this.testPoint);
Phaser.Circle.circumferencePoint(this.baseCircle, this.angle, true, this.limitPoint);
// If the pointer is outside the baseCircle then we don't need to set the sprite like this
if (this.baseCircle.contains(x, y))
{
this.nub.x = x;
this.nub.y = y;
}
else
{
// this.nub.position.set(this.limitPoint.x, this.limitPoint.y);
this.nub.x = this.limitPoint.x;
this.nub.y = this.limitPoint.y;
}
// if (this.distance < this.limit)
// {
// }
// else
// {
// this.nub.x = this.limitPoint.x;
// this.nub.y = this.limitPoint.y;
// }
};
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('x: ' + this.m.x + ' y: ' + this.m.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)');
};

7
src/core/PluginManager.js
View file

@ -48,7 +48,7 @@ Phaser.PluginManager.prototype = {
*
* @method Phaser.PluginManager#add
* @param {object|Phaser.Plugin} plugin - The Plugin to add into the PluginManager. This can be a function or an existing object.
* @param {...*} parameter - Additional parameters that will be passed to the callback.
* @param {...*} parameter - Additional parameters that will be passed to the Plugin.init method.
* @return {Phaser.Plugin} The Plugin that was added to the manager.
*/
add: function (plugin) {
@ -59,8 +59,7 @@ Phaser.PluginManager.prototype = {
// Prototype?
if (typeof plugin === 'function')
{
// plugin = new plugin(this.game, this._parent);
plugin = new plugin(this.game, this, args);
plugin = new plugin(this.game, this);
}
else
{
@ -117,7 +116,7 @@ Phaser.PluginManager.prototype = {
// Allows plugins to run potentially destructive code outside of the constructor, and only if being added to the PluginManager
if (typeof plugin['init'] === 'function')
{
plugin.init();
plugin.init.apply(plugin, args);
}
return plugin;

4
src/geom/Circle.js
View file

@ -170,7 +170,7 @@ Phaser.Circle.prototype = {
* Returns a Point object containing the coordinates of a point on the circumference of the Circle based on the given angle.
* @method Phaser.Circle#circumferencePoint
* @param {number} angle - The angle in radians (unless asDegrees is true) to return the point from.
* @param {boolean} asDegrees - Is the given angle in radians (false) or degrees (true)?
* @param {boolean} [asDegrees=false] - Is the given angle in radians (false) or degrees (true)?
* @param {Phaser.Point} [out] - An optional Point object to put the result in to. If none specified a new Point object will be created.
* @return {Phaser.Point} The Point object holding the result.
*/
@ -471,7 +471,7 @@ Phaser.Circle.intersects = function (a, b) {
* @method Phaser.Circle.circumferencePoint
* @param {Phaser.Circle} a - The first Circle object.
* @param {number} angle - The angle in radians (unless asDegrees is true) to return the point from.
* @param {boolean} asDegrees - Is the given angle in radians (false) or degrees (true)?
* @param {boolean} [asDegrees=false] - Is the given angle in radians (false) or degrees (true)?
* @param {Phaser.Point} [out] - An optional Point object to put the result in to. If none specified a new Point object will be created.
* @return {Phaser.Point} The Point object holding the result.
*/

7
src/geom/Point.js
View file

@ -287,7 +287,9 @@ Phaser.Point.prototype = {
*/
angle: function (a) {
return Math.atan2(this.x * a.y - this.y * a.x, this.x * a.x + this.y * a.y);
return Math.atan2(a.y - this.y, a.x - this.x);
// return Math.atan2(this.x * a.y - this.y * a.x, this.x * a.x + this.y * a.y);
},
@ -571,7 +573,8 @@ Phaser.Point.equals = function (a, b) {
*/
Phaser.Point.angle = function (a, b) {
return Math.atan2(a.x * b.y - a.y * b.x, a.x * b.x + a.y * b.y);
// return Math.atan2(a.x * b.y - a.y * b.x, a.x * b.x + a.y * b.y);
return Math.atan2(a.y - b.y, a.x - b.x);
};