figured out that “clicking” with a finger works fine out-of-the-box, e.g. for UMG buttons but touch-movement is not working by default…
here is some hacky solution for this which gets Touch-Start, -Move and -End events working in Widget-Blueprints on Mobile (touch) and Desktop (mouse) HTML5 with UE4.23 (without engine-source modification, sorry no multi-touch):
in the UE_4.23\Engine\Build\HTML5\project_template.js add this, e.g. at line 103:
const touchableElement = document.getElementById('canvas');
touchableElement.addEventListener('touchstart', registerTouch);
function registerTouch(event)
{
const mouseDownEvent = new MouseEvent('mousedown', {});
event.target.dispatchEvent(mouseDownEvent);
touchableElement.removeEventListener('touchstart', registerTouch);
touchableElement.addEventListener('touchmove', handleTouchMove);
}
function handleTouchMove(event)
{
// Handle touch move event
event.preventDefault();
// Create and dispatch corresponding mousemove event
const mouseMoveEvent = new MouseEvent('mousemove', {
clientX: event.touches[0].clientX,
clientY: event.touches[0].clientY,
});
event.target.dispatchEvent(mouseMoveEvent);
touchableElement.addEventListener('touchend', handleTouchEnd);
}
function handleTouchEnd(event)
{
event.preventDefault();
// Create and dispatch corresponding mouseup event
const mouseUpEvent = new MouseEvent('mouseup', {});
event.target.dispatchEvent(mouseUpEvent);
touchableElement.removeEventListener('touchend', handleTouchEnd);
}
in the Widget-Blueprint, overwrite the OnMouseDown, -Move and -Up functions, with their code like this:
The handleTouchMove and handleTouchEnd do overwrite the default click-behaviour and resets it when releasing the finger. In BP we though need to skip the first move-event (due to wrong move value), but we use i to manually process the MouseDown (since the default click behaviour is overwritten).
The method above does not work on Desktop (mouse), so we use a registerTouch event to enable the above Touch behaviour only when a TouchStart was detected in the Javascript. For some reason the first TouchStart event always returns the top-left-corner of the game-canvas for the MouseDown event (instead of the real touch-location…). since this seems always like x=7.163 (on android mobile-portrait and -landscape and windows edge) we can exploit this to enable the Touch-mode in Blueprint only when a TouchStart was triggered once (otherwise the default mouse-behaviour stays as is).
very weird, but so far it gets the job done…
