GM HTML5 deaktiviert scrollen auf TouchScreens

Psychodelics · 31. Januar 2012, 01:24

Hallo,

ich habe für eine Website eine Map zur Navigation mit GameMaker HTML5 erstellt. Die Map ist etwa 1.000 Pixel breit und 600 Pixel hoch.

Mein Problem ist, dass GameMaker sowohl den Rechtsklick deaktiviert, als auch das Scrollen und Zoomen per Touchscreen. Das mit dem Rechtsklick ist nicht so wichtig, würde es halt nur gerne einschalten, weil es auf der kompletten Website deaktiviert ist.

Das viel größere Übel ist, dass man auf Handies zwar die Map sehen kann, aber nicht scrollen kann, was auf Grund des kleinen Bildschirms unbedingt notwendig ist.
Weiß jemand, wie ich diese Funktionen wieder aktivieren kann. Weil wenn man zufällig in der Mitte der Map landet, ist man gefangen und dann hilft nur noch das Schließen des Browsers

Gruß

SDX · 31. Januar 2012, 14:37

Du willst also ein mit dem GM:HTML5 erstelltes "spiel" in eine existierende Website einbinden? Oder machst du die Website ganz mit dem GM? Hast du mal eben ein beispiel, ich habe kein GM:HTML5. Vllt kann man sich ja was zurecht hacken, und mithilfe von JS die vom "spiel" vorgenommenen Einstellungen wieder zurück setzen.

MfG SDX

Psychodelics · 31. Januar 2012, 20:57

Hi SDX,

ein Beispiel habe ich leider gerade nicht, weil die Seite aktuell noch im Aufbau ist. Du hast es aber genau richtig gesagt. Die Seite ist eine ganz normale Website und mit GameMaker habe ich nur die Map erstellt. Der restliche Content wird vom Server über PHP erzeugt. Gäbe es was daran auszusetzen, auf einer Website mit GameMaker erstellte Sachen zu veröffentlichten? Letztendlich merkt man das ja nicht und außerdem ist das GameMaker HTML5 ja dafür da, oder hab ich da was falsch verstanden?

Gruß

SDX · 31. Januar 2012, 21:52

Ich habe es mir mal angeschaut. Der Runner setzt document.oncontextmenu auf function() { return !1; }
Das verhindert das Kontextmenu. Wenn du es wie default auf null setzt, lässt sich das Kontextmenu öffnen. Ich kann leider nicht sagen, wann genau GM:HTML5 das macht - ich denke aber mal, sobald JS ausgeführt werden kann. Wundert mich doch, wie schlecht sich HTML5 spiele in existierende Seiten einbinden lässt - als wenn es nicht dafür Konzipiert wurde ( nein, kein Sarkasmus hier).

Du musst also in deine Seite ein <script type="text/javascript"> document.oncontextmenu=null; </script> einfügen. Das sollte dagegen helfen.
Was ich bemerkt habe ist, dass GM:HTML5 viele Events abfängt - nicht nur scrollen, zoomen und kontextmenu. So lässt sich zB. auch nicht F5 fürs refreshen nutzen. Ich bin gerade ein bisschen enttäuscht, von YYG. Ist das nicht der ganze sinn dieser Erfindung, dass einbindbar ist?

Wenn du nicht die lust aufbringen kannst (was ich verstehen kann), alle Eventhandler wieder auf normal zu setzten, wäre (ausnahmsweise) ein (sonst von mir so verhasster) iframe die Lösung. Dann kann GM:HTML5 wenigstens nur in seinem Frame rumspinnen.

MfG SDX

Psychodelics · 1. Februar 2012, 00:55

Super danke,

das mit dem Contextmenü ist schon ne gute Sache. Ich werde den automatisch generierten JavaScript Code mal absuchen, die Stelle sollte sich finden lassen. Aber mehr dazu morgen.

Das mit dem iFrame hatte ich bereits so, das Problem ist ja, dass wenn ein Touchscreen genau den Ausschnitt vom iFrame fixiert war es das. Zoomen und Scrollen ist deaktiviert. Meine Überlegung war vielleicht den Doppelklick abzufangen oder die Scroll Funktion per Drag & Slide zu coden. Einfacher wäre natürlich den Mist einfach zu aktivieren. Zu Mal ich bei jedem publish die automatisch generierte JavaScript Datei absuchen und umschreiben muss.

Bin mal gespannt, was ich da alles finden werde.

Danke auf jeden Fall schon mal für den Hinweis mit dem Context Menü.

EDIT:
Kontextmenü aktivieren: In der JavaScript Datei den Befehl "document.body.oncontextmenu=function(){return !1};" entfernen.

Zoom aktivieren: In der von Gamemaker erstellten HTML Datei im Header den Eintrag "<meta name ="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />" löschen.

Scrollen bei TouchScreens: Im GameMaker die Koordinaten vom LeftMousePress an JavaScript weitergeben. Im JavaScript Code reicht dann "window.parent.scrollBy(altMausX-neuMausX,altMausY-neuMausY);".

Das Problem mit F5 ist durch das iFrame behoben, man darf aber scheinbar body keine feste Breite und Höhe geben, weil dann die Position des Klicks auf Handies sonst voll daneben geht.
EDIT2: Das Problem mit der Ungenauigkeit vom Touchscreen kommt anscheinend doch nicht von height and width, sondern von den automatisch generierten Meta-Tags im Header der index.html. Dort sollte man vllt die beiden Zeilen '<meta name="apple-mobile-web-app-capable" content="no" />' und '<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />' entfernen, sofern man das Canvas von GameMaker nicht im Vollbild laufen lässt.

Jetzt scheint alles zu funktionieren :thumbsup:

Benutzer online 1