From 6edd23f25fda55b730bf2ffeab48cdc3f08edf2f Mon Sep 17 00:00:00 2001 From: Nathan DECHER Date: Mon, 6 Apr 2020 11:49:36 +0200 Subject: [PATCH] added joystick guide (closes #17) --- assets/config.json | 4 +-- src/js/input.js | 61 ++++++++++++++++++++++++++++++++++++++++------ src/less/hud.less | 6 +++++ 3 files changed, 62 insertions(+), 9 deletions(-) diff --git a/assets/config.json b/assets/config.json index 58ce63d..e7ec356 100644 --- a/assets/config.json +++ b/assets/config.json @@ -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, diff --git a/src/js/input.js b/src/js/input.js index ed280f4..a2fdc30 100644 --- a/src/js/input.js +++ b/src/js/input.js @@ -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( diff --git a/src/less/hud.less b/src/less/hud.less index b3e16ff..51ea54a 100644 --- a/src/less/hud.less +++ b/src/less/hud.less @@ -31,4 +31,10 @@ transform: translate(-50%, -50%); opacity: .5; } + + .joystickOverlay { + pointer-events: none; + transform: translate(-50%, -50%); + opacity: .5; + } }