Phaser 039 – Game Controler für mobile Geräte

Bisher funktionierte die Game-Steuerung über Pfeiltasten der Tastatur. Verschwendung pur, denn Phaser-Games eignen sich vorzüglich für mobile Geräte. Hier baue ich das UFO Game um, damit es per Tablet oder Smartphone gesteuert werden kann.

Spielsteuerung für mobile Geräte

Spielsteuerung für mobile Geräte

Hier geht es zum Game das mit Touchscreens gesteuert werden kann. Der Übersicht halber, um den Quellcode auf das wesentliche zu beschränken, kann es in diesem Fall nur mit Touchscreen gesteuert werden!

Oder aber mit Mausklicks auf die Buttons, was natürlich kaum Sinn macht in einem Spiel wo schnell und viel navigiert werden muss. Es spricht in der Praxis nichts dagegen Tastaturtasten zu belegen und zusätzlich Buttons für den Touchscreen zu verwenden.

Die Buttons – Grafik

Die Buttons selbst sind natürlich wieder PNG-Dateien, um Transparenzen darstellen zu können. Ein Button besteht aus zwei Teilen. Ein auf dem Game angezeigter inaktiver Button, wenn er gedrückt wird erscheint eine zweite Darstellung.

In Inkscape habe ich daher eine Arbeitsfläche von 80×40 Pixeln mit einem Button links und einem rechts erstellt. Das Ganze wird in Phaser dann als Spritesheet behandelt. Das bedeutet, die Grafiken werden ausgetauscht, je nachdem ob man den Button drückt, oder los lässt.

Buttongrafik

Buttongrafik

function preload ()

Um die Buttons anzuzeigen, müssen die Grafiken wie immer erst einmal geladen werden. Das geschieht wie immer in der function preload (). Die Grafik wird als Spritesheet behandelt, wodurch sie bei Aktionen ausgewechselt werden können.

function create ()

Die Änderungen in der function create () sind überschaubar begreifen. Es muss festgelegt werden das bei Knopfdruck das UFO fliegen soll.

Zum Anderen soll das UFO in seiner Fahrt wieder stoppen, sobald die Taste losgelassen wird. Das muss extra definiert werden, denn sonst fliegt es weiter, auch wenn der Finger vom Button genommen wurde.

Das wird für alle 4 Richtungen definiert und eingetragen (rechts, links, nach oben und unten).

function update ()

Die function update () bleibt fast gleich, ausser das die Functionen left, right, up und down in die IF-Abfragen in die eingetragen werden.

Script- Copy & Paste

 

Tip: Was im Bild unten gleich auffällt ist, das ein Game entsprechend seiner Bedienung aufgebaut werden sollte. In diesem Fall habe ich es einfach umfunktioniert und die vorhandene Fläche genutzt. Im Ernstfall ist es ratsam, sich beim designen, schon im Vorfeld Gedanken zu machen, damit die Spielsteuerung keine wichtigen Spielinhalte abdeckt.

Spielsteuerung für mobile Geräte

Spielsteuerung für mobile Geräte

Das könnte Dich auch interessieren...

Translate »