/** * A Virtual Joystick * @class Phaser.Plugin.VirtualJoystick */ 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.buttonA; this.buttonB; this.buttonC; this.baseCenter; this.nubCenter; this.isDragging = false; this.angle = 0; this.distance = 0; this.force = 0; this.deltaX = 0; this.deltaY = 0; this.speed = 0; this.pointer = null; this.callbackID = -1; }; 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, baseDiameter, stickDiameter, limit, baseColor, stickColor) { if (typeof x === 'undefined') { x=this.game.stage.width/6; } if (typeof y === 'undefined') { y=this.game.stage.height-this.game.stage.height/5; } if (typeof baseDiameter === 'undefined') { baseDiameter = 140; } if (typeof stickDiameter === 'undefined') { stickDiameter = 100; } if (typeof limit === 'undefined') { limit = Math.floor(baseDiameter / 2); } if (typeof baseColor === 'undefined') { baseColor = 'rgba(255, 0, 0, 0.5)'; } if (typeof stickColor === 'undefined') { stickColor = 'rgba(0, 255, 0, 0.7)'; } this.x = x; this.y = y; this.isDragging = false; this.limit = limit; this.limitPoint = new Phaser.Point(x, y); this.location = new Phaser.Point(x, y); var radius = Math.floor(baseDiameter / 2); var nr = Math.floor(stickDiameter / 2); this.baseCircle = new Phaser.Circle(x, y, baseDiameter); this.baseBMD = this.game.make.bitmapData(baseDiameter, baseDiameter); this.nubBMD = this.game.make.bitmapData(stickDiameter, stickDiameter); this.baseBMD.circle(radius, radius, radius, baseColor); this.nubBMD.circle(nr, nr, nr, stickColor); // Base this.base = this.game.make.sprite(x, y, this.baseBMD); this.base.anchor.set(0.5); // Nub (stick) this.nub = this.game.make.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); }; Phaser.Plugin.VirtualJoystick.prototype.start = function () { this.game.stage.addChild(this.base); this.game.stage.addChild(this.nub); if (this.callbackID > -1) { this.game.input.deleteMoveCallback(this.callbackID); } this.callbackID = this.game.input.addMoveCallback(this.move, this); this.isDragging = false; this.distance = 0; this.speed = 0; this.force = 0; this.deltaX = 0; this.deltaY = 0; this.nub.x = this.base.x; this.nub.y = this.base.y; this.base.visible = true; this.nub.visible = true; this.limitPoint.set(this.base.x, this.base.y); this.location.set(this.base.x, this.base.y); }; Phaser.Plugin.VirtualJoystick.prototype.stop = function () { // if (this.nub.parent === null || this.base.parent === null) // { // return; // } this.base.visible = false; this.nub.visible = false; this.nub.x = this.base.x; this.nub.y = this.base.y; this.nub.input.enabled = false; this.game.stage.removeChild(this.base); this.game.stage.removeChild(this.nub); if(this.buttonA){ this.game.stage.removeChild(this.buttonA); } if(this.buttonB){ this.game.stage.removeChild(this.buttonB); } if(this.buttonC){ this.game.stage.removeChild(this.buttonC); } this.game.input.deleteMoveCallback(this.callbackID); }; //Phaser.Plugin.VirtualJoystick.prototype.resize = function (x, y, baseDiameter, stickDiameter, limit, baseColor, stickColor) { // this.stop(); // // this.init(arguments) // // this.start(); //}; Phaser.Plugin.VirtualJoystick.prototype.startDrag = function (nub, pointer) { this.isDragging = true; this.pointer = pointer; 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); this.deltaX = Math.cos(this.game.math.degToRad(this.angle)); this.deltaY = Math.sin(this.game.math.degToRad(this.angle)); }; Phaser.Plugin.VirtualJoystick.prototype.stopDrag = function (nub, pointer) { console.log('stopDrag'); 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.deltaX = 0; this.deltaY = 0; this.limitPoint.set(this.base.x, this.base.y); }; Phaser.Plugin.VirtualJoystick.prototype.move = function (pointer, x, y) { if (!this.isDragging) { return; } var _location = new Phaser.Point(x,y); var _distance = Phaser.Point.distance(this.limitPoint,_location, true); if (_distance > this.limit) { //超出了返回的点击事件,不处理 多点触摸的时候很有用 //console.log("超出了返回的点击事件,不处理"); return; } this.location.set(x, 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); if (this.distance < this.limit) { this.limitPoint.copyFrom(this.location); } else { this.baseCircle.circumferencePoint(this.angle, true, this.limitPoint); } this.nub.position.set(this.limitPoint.x, this.limitPoint.y); this.deltaX = Math.cos(this.game.math.degToRad(this.angle)); this.deltaY = Math.sin(this.game.math.degToRad(this.angle)); }; /** * 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(this.deltaX * speed, this.deltaY * speed); } return sprite; }; Phaser.Plugin.VirtualJoystick.prototype.update = function () { if (this.isDragging && (!this.pointer.isDown || !this.pointer.withinGame)) { this.stopDrag(); } }; Phaser.Plugin.VirtualJoystick.prototype.addButton = function (x,y,key,callback, callbackContext, upFrame, downFrame) { var button = this.game.add.button(x, y, key, callback, callbackContext, upFrame,upFrame, downFrame,upFrame); button.anchor.setTo(0.5, 0.5); //button.scale.setTo(0.8, 0.8); //button.fixedToCamera = true; //our buttons should stay on the same place 跟下面这种方式可以2选一 this.game.stage.addChild(button); //this.buttons.push(button); return button; }; Phaser.Plugin.VirtualJoystick.prototype.addButtonByKey = function (key,callback,callbackContext) { if(key=="buttonA"){ if (this.buttonA){ return this.buttonA; } var x=this.game.stage.width-this.game.stage.width/3; var y=this.game.stage.height-this.game.stage.height/5; var upFrame='button1-up'; var downFrame='button1-down'; this.buttonA = this.game.add.button(x, y, "generic", callback, callbackContext, upFrame,upFrame, downFrame,upFrame); this.buttonA.onInputDown.add(callback, callbackContext); this.buttonA.anchor.setTo(0.5, 0.5); this.game.stage.addChild(this.buttonA); return this.buttonA; }else if(key=="buttonB"){ if (this.buttonB){ return this.buttonB; } var x=this.game.stage.width-this.game.stage.width/4; var y=this.game.stage.height-this.game.stage.height/3; var upFrame='button2-up'; var downFrame='button2-down'; this.buttonB = this.game.add.button(x, y, "generic", callback, callbackContext, upFrame,upFrame, downFrame,upFrame); this.buttonB.anchor.setTo(0.5, 0.5); this.game.stage.addChild(this.buttonB); return this.buttonB; }else if(key=="buttonC"){ if (this.buttonC){ return this.buttonC; } var x=this.game.stage.width-this.game.stage.width/6; var y=this.game.stage.height-this.game.stage.height/5; var upFrame='button3-up'; var downFrame='button3-down'; this.buttonC = this.game.add.button(x, y, "generic", callback, callbackContext, upFrame,upFrame, downFrame,upFrame); this.buttonC.anchor.setTo(0.5, 0.5); this.game.stage.addChild(this.buttonC); return this.buttonC; } };