Skip to content

Instantly share code, notes, and snippets.

@den-kle den-kle/analog-stick.js forked from phoboslab/gist:3939020
Last active Jan 16, 2018

Embed
What would you like to do?
AnalogStick Plugin for Impact. With fix for scaled Canvas
ig.module(
'plugins.analog-stick'
)
.requires(
'impact.system'
)
.defines(function(){
ig.AnalogStick = ig.Class.extend({
stickSize: 30,
baseSize: 60,
stickColor: 'rgba(255,255,255,0.5)',
baseColor: 'rgba(255,255,255,0.5)',
baseWidth: 3,
pos: {x: 0, y: 0},
input: {x: 0, y: 0},
pressed: false,
angle: 0,
amount: 0,
_touchId: null,
init: function( x, y, baseSize, stickSize ) {
this.pos = {x: x, y: y};
this.baseSize = baseSize || this.baseSize;
this.stickSize = stickSize || this.stickSize;
this.max = this.baseSize - this.stickSize/3;
document.addEventListener( 'touchstart', this.touchStart.bind(this), false );
document.addEventListener( 'touchmove', this.touchMove.bind(this), false );
document.addEventListener( 'touchend', this.touchEnd.bind(this), false );
},
touchStart: function( ev ) {
ev.preventDefault();
if( this.pressed ) { return; }
var internalWidth = parseInt(ig.system.canvas.offsetWidth) || ig.system.realWidth;
var internalHeight = parseInt(ig.system.canvas.offsetHeight) || ig.system.realHeight;
var sx = ig.system.scale * (internalWidth / ig.system.realWidth);
var sy = ig.system.scale * (internalHeight / ig.system.realHeight);
for( var i = 0; i < ev.touches.length; i++ ) {
var touch = ev.touches[i];
var xd = (this.pos.x*sx) - touch.pageX;
var yd = (this.pos.y*sy) - touch.pageY;
if( Math.sqrt(xd*xd + yd*yd) < this.baseSize ) {
this.pressed = true;
this._touchId = touch.identifier;
this._moved( touch );
return;
}
}
},
touchMove: function( ev ) {
ev.preventDefault();
for( var i = 0; i < ev.changedTouches.length; i++ ) {
if( ev.changedTouches[i].identifier == this._touchId ) {
this._moved( ev.changedTouches[i] );
return;
}
}
},
_moved: function( touch ) {
var internalWidth = parseInt(ig.system.canvas.offsetWidth) || ig.system.realWidth;
var internalHeight = parseInt(ig.system.canvas.offsetHeight) || ig.system.realHeight;
var sx = ig.system.scale * (internalWidth / ig.system.realWidth);
var sy = ig.system.scale * (internalHeight / ig.system.realHeight);
var x = touch.pageX - (this.pos.x*sx);
var y = touch.pageY - (this.pos.y*sy);
this.angle = Math.atan2(x, -y);
this.amount = Math.min( 1, Math.sqrt(x*x + y*y)/this.max );
this.input.x = Math.sin(this.angle) * this.amount;
this.input.y = -Math.cos(this.angle) * this.amount;
},
touchEnd: function( ev ) {
for( var i = 0; i < ev.changedTouches.length; i++ ) {
if( ev.changedTouches[i].identifier == this._touchId ) {
this.pressed = false;
this.input.x = 0;
this.input.y = 0;
this.amount = 0;
this._touchId = null;
return;
}
}
},
draw: function() {
var ctx = ig.system.context;
ctx.beginPath();
ctx.arc(
ig.system.getDrawPos(this.pos.x),
ig.system.getDrawPos(this.pos.y),
this.baseSize, 0, (Math.PI * 2), true
);
ctx.lineWidth = this.baseWidth;
ctx.strokeStyle = this.baseColor;
ctx.stroke();
// Input
ctx.beginPath();
ctx.arc(
ig.system.getDrawPos(this.pos.x) + this.input.x * this.max,
ig.system.getDrawPos(this.pos.y) + this.input.y * this.max,
this.stickSize, 0, (Math.PI * 2), true
);
ctx.fillStyle = this.stickColor;
ctx.fill();
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.