Codinget/Snek
1
0
Fork 0
Code Issues 11 Pull requests Releases Activity

added joystick guide (closes #17)

Browse source
This commit is contained in:
Nathan DECHER 2020-04-06 11:49:36 +02:00
parent 0578bfb6ad
commit 6edd23f25f
3 changed files with 62 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/config.json
View file

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

61
src/js/input.js
View file

@ -49,10 +49,8 @@ const handleCrosspad=(() => {
let useOverlay=false;
let enabled=false;
const displayOverlay=() => {
if(hud) {
if(useOverlay && enabled) hud.appendChild(cross);
else hud.removeChild(cross);
}
if(useOverlay && enabled) hud.appendChild(cross);
else hud.removeChild(cross);
};
config.watchB('input.touchscreen.crosspad.overlay', (k, v) => {
useOverlay=v;
@ -80,8 +78,7 @@ const handleCrosspad=(() => {
return {
touchstart: fn,
touchmove: fn,
init,
fini
init, fini
};
})();
@ -96,24 +93,74 @@ const handleKeyboard={
};
const handleJoystick=(() => {
let cvs=document.createElement('canvas');
cvs.classList.add('joystickOverlay');
let ctx=cvs.getContext('2d');
let enabled=false;
let useOverlay=false;
let center={
x: 0,
y: 0
};
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=() => {
enabled=true;
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) => {
deadzone=v;
displayOverlay();
});
config.watchB('input.touchscreen.joystick.overlay', (k, v) => {
useOverlay=v;
displayOverlay();
});
return {
init,
init, fini,
touchstart: e => {
center.x=e.touches[0].clientX;
center.y=e.touches[0].clientY;
displayOverlay();
},
touchmove: e =>
handleAngleMagnitude(

6
src/less/hud.less
View file

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