Tastatureingaben

In diesem Tutorial werde ich erklären, wie man mit Tastatureingaben arbeitet und welche Wege es gibt, diese zu verarbeiten. Es gibt so viele verschiedene Möglichkeiten mit Tastatureingaben zu arbeiten, dass es kaum möglich sein wird hier wirklich jeden Aspekt zu erläutern. Die wichtigsten und grundlegendsten Eigenschaften werden hier allerdings erklärt.

Wie beim Programmieren üblich, gibt es zahlreiche Wege um etwas zu erreichen. Wenn Du also später noch weitere Vorschläge haben solltest, dann zögere nicht und füge sie hier mit ein :) ! Solltest Du andererseits den Code hier nicht 100%ig verstehen, dann gerate nicht in Panik! Es gibt noch zahlreiche andere Tutorials, die dir dabei helfen, die grundlegenden Dinge der Programmierung in JavaScript zu verstehen.

Der einfachste Weg die Funktionsweise von Tasteneingaben zu visualisieren ist, dabei einfach an Schalter und Knöpfe zu denken. Für unser erstes Beispiel werden wir den einfachsten verwenden, einen Knopf. Denke einfach mal an deine Türklingel. Du drückst rauf, es klingelt, du lässt los, es hört auf zu Klingeln.

Erstelle eine neue 2D Szene und füge einen neuen Font hinzu. Als Nächstes ziehst Du das Text-Objekt in die leere Szene. Schreibe hier irgendetwas rein (Beispielsweise: „Drücke R“).

Als nächstes benennen wir das Text-Objekt in 'txt_klingel' um. Da die standard Hintergrundfarbe von DX Studio Schwarz ist sollten wir bei dem Font noch eine andere, etwas hellere, Farbe wählen. Aber auch nicht zu hell, da sie auch auf einem weißen Untergrund im Editor sichtbar sein sollte. Ein helles Grau ist hier empfehlenswert.

Es gibt vielerlei Stellen, in denen wir unser Script abhängig von den Informationen, Objekten oder Szenen platzieren und ausführen können. In diesem Script wollen wir, dass der Benutzer in der Lage ist, jederzeit die Taste 'R' zu drücken um dann Einfluss auf das Textobjekt zu nehmen. Also schreiben wir das Script auf der Szenen-Ebene (Beim Script-Editor rechts unten im Dokumentenbaum 'scene_1.dxscene' wählen).

Klicke auf den JavaScript-Button und schreibe folgenen Code:

function onKeyChange(anyKey)
{
    if (anyKey.keyId=="r")
    {
        if(anyKey.keyDown)
	{
	    objects.txt_klingel.text="DING!";
	}
	else
	{
	    objects.txt_klingel.text="DONG!";
	}
     }
}

Erläuterung: Die 'onKeyChange'-Funktion wird jedes mal initialisiert, sobald eine Taste gedrückt oder losgelassen wird. Um das zu umgehen gibt es in DX Studio die Möglichkeit zu prüfen, welche Taste gedrückt wurde. Das Objekt an das wir den Wert der Taste übergeben, nennen wir 'anyKey'.

Für unsere Klingel nutzen wir die 'R'-Taste. Also prüfen wir als erstes, ob es die 'R'-Taste war, die den Funktionsaufruf initialisiert hat. Der folgende Befehl sagt „Wenn die Taste, die gedrückt oder losgelassen wurde 'R' war, dann führe folgenden Code aus“:

if(anyKey.keyId=="r") 

Der nächste Teil sagt, „Wenn die 'R'-Taste gedrückt und gehalten wird, dann führe folgenden Code aus“. Was den Text unserer Klingel in „DING!“ ändert.

if(anyKey.keyDown)

Was also wenn dir 'R'-Taste losgelassen wurde? DX Studio wird durch den Code gehen und denken: „OK, es war die 'R'-Taste, die gedrückt oder losgelassen wurde, aber sie wird momentan nicht gedrückt.“ Also wird der Text in „DONG!“ geändert.

An dieser Stelle kannst Du das Projekt ruhig schon mal starten. Gleich als erstes sollte dort „Drücke R“ stehen. Sobald Du 'R' drückst und gedrückt hältst, steht dort „DING!“. Wenn Du wieder loslässt steht dort „DONG!“.

In welchen Situationen das von Nutzen wäre? Sagen wir mal, Du entwickelst einen Shooter in dem der Spieler eine Waffe trägt und beim Drücken der Space-Taste schießen kann. Wenn der Spieler nun die Taste gedrückt hält, könnte man eine Art „Auto-Fire“ Modus integrieren. So schießt man nicht nur pro Tastendruck einmalig, sondern solang man die Taste gedrückt hält.

Dieses Beispiel orientiert sich an einen Lichtschalter. Du kannst Ihn entweder ein- oder ausschalten. Wenn Du den Schalter umschaltest, geht das Licht entweder an oder aus. Du brauchst also nicht am Lichtschalter stehen zu bleiben und die ganze Zeit den Lichtschalter drücken, damit das Licht an bleibt (Falls doch, solltest Du eventuell deinen Vermieter konsultieren).

Um das auszuprobieren, können wir das Script so lassen wie es ist. Wir fügen nur ein weiteres Font-Objekt hinzu und nennen es „txt_lichtschalter“ und schreiben in die Textbox „Drücke L“. Um es etwas hervorzuheben, machen wir es einfach mal gelb. Für diese Art von Schalter benötigen wir eine Variable, die den aktuellen Status des Schalters festhält (an/aus). Also schreiben wir an oberste Stelle(über die 'onKeyChange'-Funktion von dem Script folgendes:

var lightOn=false;

Im 'onKeyChange'-Script fügen nun folgenden Code hinzu:

if (anyKey.keyId=="l")
{
    if(anyKey.keyDown)
    {
        lightOn=!lightOn;
    }
 
    if(lightOn)
    {
        objects.txt_lichtschalter.text="ON";
    }
    else
    {
        objects.txt_lichtschalter.text="OFF";
    }
}

Erläuterung: Der erste Teil sollte uns bekannt vorkommen. Wenn die 'L'-Taste gedrückt wird, wird der rest vom Code ausgeführt. Solbald die 'L'-Taste gedrückt wird, stellen wir die 'lightOn'-Variable also auf das Gegenteil von dem was sie gerade ist um. Wenn sie also gerade true ist, wird sie auf false gestellt und umgekehrt.

Der letzte Schritt bei dieser Art der Verarbeitung von Tastartureingaben ist es, unseren Schalter auch zu benutzen. Deshalb wird der Text des Text-Objektes auf „ON“ gestellt wenn 'lightOn' auf true steht, und auf 'OFF' wenn diese auf false steht. Eine sinnvolle Verwendung dafür wäre zum Beispiel ein Inventar-Fenster zum ein- und ausblenden oder eben Gegenstände, die man ein- und ausschalten kann.

Jetzt gibt es noch eine weitere, häufig verwendete Art die in diesem Tutorial nähe gebracht wird. Diese muss man sich vorstellen wie die Taste eines Video-/Musik-Abspielgerätes, man drückt die Taste einmal und das Gerät springt an und interessiert sich nicht mehr dafür, ob die Taste losgelassen wurde.

Füge dafür noch ein 'Text'-Objekt in deiner Szene hinzu, ändere die Farbe und benenne es in „txt_taste“ um. In die entsprechende Textbox schreiben wir „Drücke Enter“.

Füge nun den folgenden Code deiner 'onKeyChange'-Funktion hinzu.

if (anyKey.keyId=="enter")
{
    if(anyKey.keyDown)
    {
        objects.txt_taste.text="Start.";
    }
}

Der Anfang ist der Gleiche, den wir bereits kennen: Wenn die 'Enter'-Taste gedrückt oder losgelassen wird, dann fahre fort. Danach prüfen wir lediglich, ob die Taste gedrückt wurde. Ob sie losgelassen wird, interessiert uns nicht. Wenn die Taste nun also gedrückt wird, ändern wir den Text in „Start“.

Diese Variante kannst in Situationen wie „Drücke -space- um fortzufahren“ oder „Drücke Enter um mehr zu sehen“ verwenden. Zudem könnte sich das auch zum Bestätigen von Texteingaben als nützlich erweisen.