Spielsteuerung: Bewegung, Beschleunigung etc.

Nun wie könnte eine Spielsteuerung aussehen? Diese Frage stellen sich viele von uns, wenn Sie ein Spiel umsetzen möchten. Hierbei gibt es viele verschiedene Ansätze – sie haben jedoch alle meist eines gemeinsam und zwar eine Spielfigur von A nach B zu bewegen. Meist geschieht dies mit Hilfe der Tastatur oder der Maus. Wir wollen uns im vorliegenden Fallbeispiel auf eine Tastatursteuerung festlegen. Diese Steuerung sollte so umgesetzt werden, dass eine Erweiterung oder Modifikation möglichst einfach umzusetzen ist und die Anpassung für diverse Spielprinzipien ermöglicht.

Aufbau der Bühne

Nun ist es soweit sich um die Umsetzung zu kümmern. Wie wir sehen befindet sich auf der Bühne eine Spielfigur in Form einer Filmsequenz und ein Spielfeldrahmen, welcher lediglich als optische Ergänzung genutzt wird. In der Actions Ebene befinden sich die wesentlichen Anweisungen für die Steuerung. Um die Spielfigur, sprich die Filmsequenz auf der Bühne, steuern zu können benötigen wir einen Instanznamen.

Wir weisen der Filmsequenz den Instanznamen „mc“ zu natürlich ist jeder andere Instanzname der sich an die Regeln für die Bezeichner hält genauso gut geeignet. Also ein Instanzname, wie „mc_spielfigur“ oder „figur“ wäre ebenfalls zulässig. Spätestens hier sollten wir noch erwähnen, dass zur Umsetzung der Steuerung das neue Eventmodell aus Flash MX verwendet wird. Solltet Ihr eine Flash 5 taugliche Steuerung benötigen, findet Ihr diese im Beispielpaket oder auf der Website www.flashstar.de

Erste Schritte – Ausgangswerte

// Spielfigur (als Objekt erzeugen)
spielfigur = new Object();

// Spielfigur (Ausgangswerte setzen)
spielfigur.init = function (clip) {
with (clip) {
m axTempo = 8;
t empoH = 0;
t empoV = 0;
}
}

Wie man sieht, wird ein Objekt Spielfigur erzeugt. Dies erleichtert das Ansprechen der Spielfigur Funktionen. Die Variablen, die für die Steuerung benötigt werden, sind maxTempo, tempoH und tempoV. Die Variablen maxTempo legt die maximal Geschwindigkeit der Spielfigur fest. Natürlich kann der Wert nach belieben angepasst werden. Die Variable tempoH enthält den Wert für die Bewegung auf der horizontalen Achse (links-rechts) und tempoV für die Bewegung auf der vertikalen Achse (hoch-runter). Wie man sieht wurden die Ausgangswerte für tempoH und tempoV auf null gesetzt, d.h. das die Spielfigur zu beginn still steht. Die Anweisung with() sorgt dafür, dass sämtliche Variablenwerte sich auf unsere Spielfigur beziehen. An der Position, an der sich z.Z. noch der Parameter „clip“ befindet, wird beim Aufruf der Funktion init() der Instanzname unserer Spielfigur übergeben. Wir werden im Verlauf des Tutorials nochmals darauf zu sprechen kommen.

Umsetzung der Steuerung

Zur Umsetzung der Steuerung sollten drei Punkte berücksichtigt werden:

– Bewegen der Spielfigur
– Beschleunigen der Spielfigur
– Abbremsen der Spielfigur

Die Umsetzung der einzelnen Punkte für die Steuerung erlaubt es uns, die Steuerung möglichst einfach modifizieren zu können.

spielfigur.steuern = function (clip) {
with (clip) {
//1. Bewegung
_x += tempoH;
_y += tempoV;

//2. Beschleunigen
// Rechts
if (Key.isDown(Key.RIGHT) && tempoH < maxTempo) tempoH += 1.0;
// Links
if (Key.isDown(Key.LEFT) && tempoH > -maxTempo) tempoH -= 1.0;
// Oben
if (Key.isDown(Key.UP) && tempoV > -maxTempo) tempoV -= 1.0;
// Unten
if (Key.isDown(Key.DOWN) && tempoV < maxTempo) tempoV += 1.0; //3. Abbremsen
// Rechts
if (tempoH > 0.0) tempoH -= 0.25;
// Links
if (tempoH < 0.0) tempoH += 0.25;
// Oben
if (tempoV < 0.0) tempoV += 0.25;
// Unten
if (tempoV > 0.0) tempoV -= 0.25;
}
}

Wie man sieht ist jede Bewegungsrichtung sowohl für die Beschleunigung als auch für das Abbremsen der Spielfigur Schritt für Schritt umgesetzt worden. Die Eigenschaften _x und _y sorgen für die eigentliche Bewegung der Spielfigur auf der Bühne (Spielfläche). Der Beschleunigungsfaktor von 1.0 kann natürlich nach bedarf angepasst werden, das gleiche gilt für den Abbremsfaktor 0.25.

Ausführung der Steuerung

Kommen wir noch zur Ausführung der Funktion für die Steuerung. Sowohl die Funktion init() als auch die Funktion steuern() muss ausgeführt werden. Die Funktion init() lediglich einmal um die Ausgangswerte zu setzen und die Funktion steuern(), so lange der Film läuft.

spielfigur.init(mc);

this.onEnterFrame = function () {
spielfigur.steuern(mc);
}

Wie wir sehen, wird der Instanzname der Spielfigur als Parameterwert übergeben. Die beiden Funktion verarbeiten diesen jeweils an den Stellen im Code, an denen sich der Parameter „clip“ befindet. Das Event onEnterFrame sorgt dafür, dass die Funktion steuern() permanent ausgeführt wird und jede Änderung berücksichtigt und sofort umsetzt.

Spielfeldbegrenzung

Was nun noch fehlt ist eine Spielfeldbegrenzung bzw. eine Möglichkeit die Spielfigur daran zu hindern sich aus dem Sichtbaren Bereich zu bewegen und auf nimmer wiedersehen zu verschwinden. Hier haben wir eine mögliche Umsetzung.

// Spielfeldbegrenzung
// Rechts
if (_x >= 550) _x = 20;
// Links
if (_x <= 10) _x = 540;
// Oben
if (_y >= 400) _y = 20;
// Unten
if (_y <= 10) _y = 390;
}

Diese Codezeilen müssen der Funktion steuern() hinzugefügt werden. Die Werte wurden für eine Bühne mit den Dimensionen 550×400 verwendet. Natürlich kann ohne weiteres auch das Stage-Objekt verwendet werden, welches in Flash MX eingeführt wurde.

// Spielfeldbegrenzung mit Stage-Objekt
// Rechts
if (_x >= 550) _x = _width;
// Links
if (_x <= 10) _x = Stage.width;
// Oben
if (_y >= 400) _y = _height;
// Unten
if (_y <= 10) _y = Stage.height;
}

Diese Umsetzung stellt eine dynamische und flexible Lösung dar, da wir uns nicht mehr um die Bühnen Dimensionen kümmern müssen.

Fazit

Wie man sieht sollte eine Spielsteuerung Schrittweise umgesetzt werden, so dass die Erweiterung möglichst keine grossen Probleme bereitet. Mit Hilfer dieser Vorlage einer Spielsteuerung lassen sich sicher weitere Varianten realisieren!

Ein Tipp von: Matthias Kannengiesser, bearbeitet und aktualisiert von: Designer in Action

Kommentieren

Ich akzeptiere die Datenschutzerklärung.