How do I Handle Touch events in DIV over C2 canvas

Get help using Construct 2

Post » Mon Jun 22, 2015 9:59 am

Hi all,

Please note, this is more about HTML/CSS/JavaScript.

Currently busy with a big project, where we have a popup (DIV) over the C2 canvas. The popup works perfectly on desktops, but on mobile you cant scroll the content of the popup....

If I comment out the cr_createRuntime("c2canvas"); statement in the exported index.html file. The touch events works fine.

Seems like C2 is handling the touch events, and preventing it or stopping it from propagation to other HTML elements.

Does anyone know how to solve this?
B
43
S
9
G
7
Posts: 58
Reputation: 7,540

Post » Thu Aug 11, 2016 12:33 pm

I'm not an expert by far on Javascript, but I would suggest by design, that C2 is limiting this interaction - mostly due to the nature of it being "in focus" on any given page. This is to stop things like spacebar making the page scroll down, or other hotkeys interrupting the game/app/whatever.

I'm probably wrong - but I'm going to go with "it probably can't be done"... though @Ashley might have some kind of ninja workaround.

I do find it curious though how you mention it works on desktop but not mobile... so perhaps it is indeed possible. Buggered if I know how to do it though!

~Sol
Tired of crappy file hosts that are crappy? Get DROPBOX - https://db.tt/uwjysXJF
Moderator
B
84
S
34
G
40
Posts: 3,032
Reputation: 30,499

Post » Fri Aug 12, 2016 10:59 am

I think if your project has the touch plugin it listens for and prevents default on all touch events. Otherwise things like page selection, scrolling and pinch-to-zoom happen, which is never wanted in a C2 game.

Unfortunately this does block scrolling to such as in your case. TBH the runtime isn't really designed for that, it basically takes over the whole page. I can think of 2 possible workarounds:
- add touch event listeners with capture, so you get them first, and stop propagation on them so the runtime doesn't see them - but then none of the C2 game's touch events will work
- put the game in an iframe and float any content you want to pop over it in the parent document. Since it's a whole other document you're in full control of touch events.
Scirra Founder
B
403
S
238
G
89
Posts: 24,653
Reputation: 196,143


Return to How do I....?

Who is online

Users browsing this forum: No registered users and 30 guests