added joystick guide (closes #17)

Nathan DECHER 5 years ago
parent 0578bfb6ad
commit 6edd23f25f
  1. 4
      assets/config.json
  2. 61
      src/js/input.js
  3. 6
      src/less/hud.less

@ -1,8 +1,8 @@
{ {
"input.touchscreen.crosspad.enabled": true, "input.touchscreen.crosspad.enabled": false,
"input.touchscreen.crosspad.overlay": true, "input.touchscreen.crosspad.overlay": true,
"input.touchscreen.joystick.enabled": false, "input.touchscreen.joystick.enabled": true,
"input.touchscreen.joystick.overlay": true, "input.touchscreen.joystick.overlay": true,
"input.touchscreen.joystick.deadzone": 10, "input.touchscreen.joystick.deadzone": 10,

@ -49,10 +49,8 @@ const handleCrosspad=(() => {
let useOverlay=false; let useOverlay=false;
let enabled=false; let enabled=false;
const displayOverlay=() => { const displayOverlay=() => {
if(hud) { if(useOverlay && enabled) hud.appendChild(cross);
if(useOverlay && enabled) hud.appendChild(cross); else hud.removeChild(cross);
else hud.removeChild(cross);
}
}; };
config.watchB('input.touchscreen.crosspad.overlay', (k, v) => { config.watchB('input.touchscreen.crosspad.overlay', (k, v) => {
useOverlay=v; useOverlay=v;
@ -80,8 +78,7 @@ const handleCrosspad=(() => {
return { return {
touchstart: fn, touchstart: fn,
touchmove: fn, touchmove: fn,
init, init, fini
fini
}; };
})(); })();
@ -96,24 +93,74 @@ const handleKeyboard={
}; };
const handleJoystick=(() => { const handleJoystick=(() => {
let cvs=document.createElement('canvas');
cvs.classList.add('joystickOverlay');
let ctx=cvs.getContext('2d');
let enabled=false;
let useOverlay=false;
let center={ let center={
x: 0, x: 0,
y: 0 y: 0
}; };
let deadzone; let deadzone;
const displayOverlay=() => {
if(!enabled || !useOverlay) return hud.removeChild(cvs);
cvs.width=cvs.height=4*deadzone+120;
hud.appendChild(cvs);
ctx.clearRect(0, 0, cvs.width, cvs.width);
ctx.strokeStyle='black';
ctx.lineWidth=1;
ctx.beginPath();
const rad=2*deadzone+50;
ctx.moveTo(rad*Math.cos(Math.PI/4)+cvs.width/2, rad*Math.sin(Math.PI/4)+cvs.width/2);
ctx.lineTo(rad*Math.cos(Math.PI/4+Math.PI)+cvs.width/2, rad*Math.sin(Math.PI/4+Math.PI)+cvs.width/2);
ctx.moveTo(rad*Math.cos(-Math.PI/4)+cvs.width/2, rad*Math.sin(-Math.PI/4)+cvs.width/2);
ctx.lineTo(rad*Math.cos(-Math.PI/4+Math.PI)+cvs.width/2, rad*Math.sin(-Math.PI/4+Math.PI)+cvs.width/2);
ctx.stroke();
ctx.strokeStyle='gray';
ctx.lineWidth=2;
ctx.beginPath();
ctx.ellipse(cvs.width/2, cvs.width/2, deadzone, deadzone, 0, 0, Math.PI*2);
ctx.stroke();
ctx.lineWidth=3;
ctx.beginPath();
ctx.ellipse(cvs.width/2, cvs.width/2, deadzone*2+50, deadzone*2+50, 0, 0, Math.PI*2);
ctx.stroke();
cvs.style.left=center.x+'px';
cvs.style.top=center.y+'px';
};
const init=() => { const init=() => {
enabled=true;
deadzone=config.getN('input.touchscreen.joystick.deadzone'); deadzone=config.getN('input.touchscreen.joystick.deadzone');
useOverlay=config.getB('input.touchscreen.joystick.overlay');
displayOverlay();
};
const fini=() => {
enabled=false;
displayOverlay();
}; };
config.watchN('input.touchscreen.joystick.deadzone', (k, v) => { config.watchN('input.touchscreen.joystick.deadzone', (k, v) => {
deadzone=v; deadzone=v;
displayOverlay();
});
config.watchB('input.touchscreen.joystick.overlay', (k, v) => {
useOverlay=v;
displayOverlay();
}); });
return { return {
init, init, fini,
touchstart: e => { touchstart: e => {
center.x=e.touches[0].clientX; center.x=e.touches[0].clientX;
center.y=e.touches[0].clientY; center.y=e.touches[0].clientY;
displayOverlay();
}, },
touchmove: e => touchmove: e =>
handleAngleMagnitude( handleAngleMagnitude(

@ -31,4 +31,10 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
opacity: .5; opacity: .5;
} }
.joystickOverlay {
pointer-events: none;
transform: translate(-50%, -50%);
opacity: .5;
}
} }

Loading…
Cancel
Save