Skip to content

Commit

Permalink
improve touch input setup
Browse files Browse the repository at this point in the history
  • Loading branch information
@KilledByAPixel
KilledByAPixel committed Jun 25, 2023
1 parent 2e555f7 commit 4ce9233
Show file tree
Hide file tree
Showing 6 changed files with 314 additions and 270 deletions.
145 changes: 78 additions & 67 deletions engine/engine.all.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2200,34 +2200,40 @@ const isTouchDevice = window.ontouchstart !== undefined;
if (isTouchDevice)
{
// override mouse events
let wasTouching, hadTouch, mouseDown = onmousedown, mouseUp = onmouseup;
let wasTouching, mouseDown = onmousedown, mouseUp = onmouseup;
onmousedown = onmouseup = ()=> 0;

// handle all touch events the same way
ontouchstart = ontouchmove = ontouchend = (e)=>
// setup touch input
ontouchstart = (e)=>
{
e.button = 0; // all touches are left click
// fix mobile audio, force it to play a sound on first touch
zzfx(0);

// check if touching and pass to mouse events
const touching = e.touches.length;
if (touching)
// handle all touch events the same way
ontouchstart = ontouchmove = ontouchend = (e)=>
{
// fix mobile audio, force it to play a sound on first touch
hadTouch || zzfx(0, hadTouch=1);
e.button = 0; // all touches are left click

// set event pos and pass it along
e.x = e.touches[0].clientX;
e.y = e.touches[0].clientY;
wasTouching ? onmousemove(e) : mouseDown(e);
}
else if (wasTouching)
mouseUp(e);
// check if touching and pass to mouse events
const touching = e.touches.length;
if (touching)
{
// set event pos and pass it along
e.x = e.touches[0].clientX;
e.y = e.touches[0].clientY;
wasTouching ? onmousemove(e) : mouseDown(e);
}
else if (wasTouching)
mouseUp(e);

// set was touching
wasTouching = touching;
// set was touching
wasTouching = touching;

// must return true so the document will get focus
return true;
// must return true so the document will get focus
return true;
}

return ontouchstart(e);
}
}

Expand All @@ -2247,64 +2253,69 @@ function touchGamepadCreate()
touchGamepadButtons = [];
touchGamepadStick = vec2();

let hadTouch;
ontouchstart = ontouchmove = ontouchend = (e)=>
// setup touch input
ontouchstart = (e)=>
{
// clear touch gamepad input
touchGamepadStick = vec2();
touchGamepadButtons = [];

const touching = e.touches.length;
if (touching)
{
// fix mobile audio, force it to play a sound on first touch
hadTouch || zzfx(0, hadTouch=1);
// fix mobile audio, force it to play a sound on first touch
zzfx(0);

// set that gamepad is active
isUsingGamepad = 1;
touchGamepadTimer.set();

if (paused)
ontouchstart = ontouchmove = ontouchend = (e)=>
{
// clear touch gamepad input
touchGamepadStick = vec2();
touchGamepadButtons = [];

const touching = e.touches.length;
if (touching)
{
// touch anywhere to press start when paused
touchGamepadButtons[9] = 1;
return;
// set that gamepad is active
isUsingGamepad = 1;
touchGamepadTimer.set();

if (paused)
{
// touch anywhere to press start when paused
touchGamepadButtons[9] = 1;
return;
}
}
}

// get center of left and right sides
const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
const buttonCenter = mainCanvasSize.subtract(vec2(touchGamepadSize, touchGamepadSize));
const startCenter = mainCanvasSize.scale(.5);
// get center of left and right sides
const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
const buttonCenter = mainCanvasSize.subtract(vec2(touchGamepadSize, touchGamepadSize));
const startCenter = mainCanvasSize.scale(.5);

// check each touch point
for (const touch of e.touches)
{
const touchPos = mouseToScreen(vec2(touch.clientX, touch.clientY));
if (touchPos.distance(stickCenter) < touchGamepadSize)
// check each touch point
for (const touch of e.touches)
{
// virtual analog stick
if (touchGamepadAnalog)
touchGamepadStick = touchPos.subtract(stickCenter).scale(2/touchGamepadSize).clampLength();
else
const touchPos = mouseToScreen(vec2(touch.clientX, touch.clientY));
if (touchPos.distance(stickCenter) < touchGamepadSize)
{
// 8 way dpad
const angle = touchPos.subtract(stickCenter).angle();
touchGamepadStick.setAngle((angle * 4 / PI + 8.5 | 0) * PI / 4);
// virtual analog stick
if (touchGamepadAnalog)
touchGamepadStick = touchPos.subtract(stickCenter).scale(2/touchGamepadSize).clampLength();
else
{
// 8 way dpad
const angle = touchPos.subtract(stickCenter).angle();
touchGamepadStick.setAngle((angle * 4 / PI + 8.5 | 0) * PI / 4);
}
}
else if (touchPos.distance(buttonCenter) < touchGamepadSize)
{
// virtual face buttons
const button = touchPos.subtract(buttonCenter).direction();
touchGamepadButtons[button] = 1;
}
else if (touchPos.distance(startCenter) < touchGamepadSize)
{
// virtual start button in center
touchGamepadButtons[9] = 1;
}
}
else if (touchPos.distance(buttonCenter) < touchGamepadSize)
{
// virtual face buttons
const button = touchPos.subtract(buttonCenter).direction();
touchGamepadButtons[button] = 1;
}
else if (touchPos.distance(startCenter) < touchGamepadSize)
{
// virtual start button in center
touchGamepadButtons[9] = 1;
}
}

return ontouchstart(e);
}
}

Expand Down
2 changes: 1 addition & 1 deletion engine/engine.all.min.js
View file

Large diffs are not rendered by default.

145 changes: 78 additions & 67 deletions engine/engine.all.module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2200,34 +2200,40 @@ const isTouchDevice = window.ontouchstart !== undefined;
if (isTouchDevice)
{
// override mouse events
let wasTouching, hadTouch, mouseDown = onmousedown, mouseUp = onmouseup;
let wasTouching, mouseDown = onmousedown, mouseUp = onmouseup;
onmousedown = onmouseup = ()=> 0;

// handle all touch events the same way
ontouchstart = ontouchmove = ontouchend = (e)=>
// setup touch input
ontouchstart = (e)=>
{
e.button = 0; // all touches are left click
// fix mobile audio, force it to play a sound on first touch
zzfx(0);

// check if touching and pass to mouse events
const touching = e.touches.length;
if (touching)
// handle all touch events the same way
ontouchstart = ontouchmove = ontouchend = (e)=>
{
// fix mobile audio, force it to play a sound on first touch
hadTouch || zzfx(0, hadTouch=1);
e.button = 0; // all touches are left click

// set event pos and pass it along
e.x = e.touches[0].clientX;
e.y = e.touches[0].clientY;
wasTouching ? onmousemove(e) : mouseDown(e);
}
else if (wasTouching)
mouseUp(e);
// check if touching and pass to mouse events
const touching = e.touches.length;
if (touching)
{
// set event pos and pass it along
e.x = e.touches[0].clientX;
e.y = e.touches[0].clientY;
wasTouching ? onmousemove(e) : mouseDown(e);
}
else if (wasTouching)
mouseUp(e);

// set was touching
wasTouching = touching;
// set was touching
wasTouching = touching;

// must return true so the document will get focus
return true;
// must return true so the document will get focus
return true;
}

return ontouchstart(e);
}
}

Expand All @@ -2247,64 +2253,69 @@ function touchGamepadCreate()
touchGamepadButtons = [];
touchGamepadStick = vec2();

let hadTouch;
ontouchstart = ontouchmove = ontouchend = (e)=>
// setup touch input
ontouchstart = (e)=>
{
// clear touch gamepad input
touchGamepadStick = vec2();
touchGamepadButtons = [];

const touching = e.touches.length;
if (touching)
{
// fix mobile audio, force it to play a sound on first touch
hadTouch || zzfx(0, hadTouch=1);
// fix mobile audio, force it to play a sound on first touch
zzfx(0);

// set that gamepad is active
isUsingGamepad = 1;
touchGamepadTimer.set();

if (paused)
ontouchstart = ontouchmove = ontouchend = (e)=>
{
// clear touch gamepad input
touchGamepadStick = vec2();
touchGamepadButtons = [];

const touching = e.touches.length;
if (touching)
{
// touch anywhere to press start when paused
touchGamepadButtons[9] = 1;
return;
// set that gamepad is active
isUsingGamepad = 1;
touchGamepadTimer.set();

if (paused)
{
// touch anywhere to press start when paused
touchGamepadButtons[9] = 1;
return;
}
}
}

// get center of left and right sides
const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
const buttonCenter = mainCanvasSize.subtract(vec2(touchGamepadSize, touchGamepadSize));
const startCenter = mainCanvasSize.scale(.5);
// get center of left and right sides
const stickCenter = vec2(touchGamepadSize, mainCanvasSize.y-touchGamepadSize);
const buttonCenter = mainCanvasSize.subtract(vec2(touchGamepadSize, touchGamepadSize));
const startCenter = mainCanvasSize.scale(.5);

// check each touch point
for (const touch of e.touches)
{
const touchPos = mouseToScreen(vec2(touch.clientX, touch.clientY));
if (touchPos.distance(stickCenter) < touchGamepadSize)
// check each touch point
for (const touch of e.touches)
{
// virtual analog stick
if (touchGamepadAnalog)
touchGamepadStick = touchPos.subtract(stickCenter).scale(2/touchGamepadSize).clampLength();
else
const touchPos = mouseToScreen(vec2(touch.clientX, touch.clientY));
if (touchPos.distance(stickCenter) < touchGamepadSize)
{
// 8 way dpad
const angle = touchPos.subtract(stickCenter).angle();
touchGamepadStick.setAngle((angle * 4 / PI + 8.5 | 0) * PI / 4);
// virtual analog stick
if (touchGamepadAnalog)
touchGamepadStick = touchPos.subtract(stickCenter).scale(2/touchGamepadSize).clampLength();
else
{
// 8 way dpad
const angle = touchPos.subtract(stickCenter).angle();
touchGamepadStick.setAngle((angle * 4 / PI + 8.5 | 0) * PI / 4);
}
}
else if (touchPos.distance(buttonCenter) < touchGamepadSize)
{
// virtual face buttons
const button = touchPos.subtract(buttonCenter).direction();
touchGamepadButtons[button] = 1;
}
else if (touchPos.distance(startCenter) < touchGamepadSize)
{
// virtual start button in center
touchGamepadButtons[9] = 1;
}
}
else if (touchPos.distance(buttonCenter) < touchGamepadSize)
{
// virtual face buttons
const button = touchPos.subtract(buttonCenter).direction();
touchGamepadButtons[button] = 1;
}
else if (touchPos.distance(startCenter) < touchGamepadSize)
{
// virtual start button in center
touchGamepadButtons[9] = 1;
}
}

return ontouchstart(e);
}
}

Expand Down
2 changes: 1 addition & 1 deletion engine/engine.all.module.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 4ce9233

Please sign in to comment.