Original source of this tutorial can be found here.

Anfänger Tutorial für Construct 3 in deutsch - Teil 2

Events

Nachdem der erste Teil des Tutorials abgeschlossen ist verwenden wir nun „Events“ um den Sprites Spieler, Monster, Kugel, Explosion ein logischen Verhalten zu geben.

Klicke auf „Event Sheet 1

Screenshot: Event sheet Tab

Events bestehen aus Kriterien und Befehlen, z.B.:
Kriterium: Wenn „Kugel berührt Monster“
dann
Befehl: „Zerstöre Monster“

Wir beginnen nun mit deinem ersten Event:

Führe einen Doppelklick auf einem freien Feld in Event Sheet aus. Wähle "System" aus und wähle anschließend „Every Tick“.

Screenshot: Add condition System Screenshot: Every tick

Every Tick“ bedeutet, dass der nun folgende Befehl jedes Mal ausgeführt wird, wenn der Bildschirm sich aktualisiert. Dies geschieht üblicherweise 60 Mal pro Sekunde (sofern die Prozessorlast dies erlaubt).

Nun geben wir den Befehl an, welcher so häufig ausgeführt werden soll: Rotiere den Spieler in Richtung des Mauszeigers.

Klicke auf Add Action und wähle Player:

Screenshot: Add action Player Screenshot: Add System condition

Im nachfolgenden Fenster wähle „Set angle toward position“. Im darauffolgenden Fenster müssen nun die „Expressions“ eingegeben werden die festlegen, wohin der Spieler zeigen soll. In unserem Fall ist dies für
X „Mouse.X“
und für
Y „Mouse.Y“.

Auch Berechnungen können in den Expressions durchgeführt werden, z.B. 2*Mouse.X +50.

Sollte eine Fehlermeldung erscheinen „Mouse is not an object name“ dann muss, wie am Ende des ersten Teils dieses Tutorials beschrieben die Maus als Objekt noch hinzugefügt werden.

Screenshot: Event 1 für Player

Starte nun die Vorschau (schwarzes Dreieck am oberen Rand in der Mitte). Mit den Pfeiltasten der Tastatur kannst du nun den Spieler (aufgrund der 8 Direction Behavior) steuern. Wegen der Event-Logik wird sich der Spieler nun immer in Richtung des Mauszeigers orientieren.

Nun fügen wir das nächste Event hinzu: Der Spieler soll eine Kugel abfeuern können.

Klicke also in dem Event Sheet auf „Add event“, wähle anschließend als Condition:
Mouse
On clickLeft clicked.
Wähle zu diesen Event zunächst “Add action” und wähle anschließend in dem Dialogfenster:
PlayerSpawn another object → wähle die Kugel aus.
Das Event sollte also folgendermaßen aussehen:

Screenshot: Event 2 für Player

Wenn du möchtest kann du nun die Vorschau starten und mit einem Mausklick Kugeln abfeuern. Allerdings starten die Kugeln von der Mitte des Spielers aus. Nun modifizieren wir das Spiel, so dass die Kugel aus dem Ende der Waffe des Spielers erzeugt wird.

Klicke in der Project Bar den Spieler mit der rechten Maustaste an und wähle „Edit animations“.

Screenshot: Animation bearbeiten

Alternativ kannst du im Layout auch den Spieler mit einen Doppelklick auswählen.
Nun öffnet sich der Image Editor. Klicke auf das „Edit the image points“ Symbol, welches einem Fadenkreuz ähnlich ist.

Screenshot: Image Editor, Edit the image points

Nun öffnet sich ein weiteres Fenster mit einer Liste der „Image Points“.

Screenshot: Image Editor, Image point list

Bisher befindet sich nur der Ursprung (engl. Origin) in der Liste. Klicke auf das Pluszeichen um einen neuen Punkt hinzuzufügen. Wähle nun diesen neuen Image Punkt an und klicke in dem Bild des Spielers auf das Ende der Waffe. Achte darauf, dass du nicht ausversehen den Image-Ursprung verschiebst. Dieser soll in der Mitte des Spieler-Sprites bleiben.

Screenshot: Player mit image point

Schließe nun den Image Editor und wechsle zum Event Sheet zurück.

Wähle die von dir bereits erstellt Aktion „Spieler Spawn Kugel“ mit einen Doppelklick an. Ändere nun dem Imagepunkt auf 1 (Imagepunkt 0 ist immer der Ursprung des Sprites. Dieser muss aber nicht zwangsläufig in der Mitte liegen).
Nun wird die Kugel nicht mehr in der Spielermitte starten. Man hat nun den Eindruck, dass die Kugel den Lauf der Waffe verlässt.

Nun folgt ein neues Event in dem mehrere Aktionen vorhanden sind. Füge ein neues Event hinzu.
Wähle als Bedingung:
Bullet → On collision with another object → Monster

Und wähle als Action:
Monster → Destroy
und füge in das gleiche Event als Action hinzu:
Bullet → Spawn another object → Explosion
und
Bullet → Destroy

Screenshot: Event 3 für Monster

Starte die Spielevorschau und du wirst bei Abschuss eines Monsters feststellen, dass um die Explosion ein schwarzer Rand erkennbar sein wird. Dies liegt daran, dass das Bild der Explosion über dem Hintergrund gezeigt wird.

Screenshot: Explosion mit Rand

Um dieses Problem zu beheben wähle in der Project Bar die Explosion aus. Setze in den Properties im Abschnitt Effects den Blend Mode auf additiv. Dies bedeutet, dass nun der RGB Farbcode für jedes Pixel addiert wird. Da der Farbcode für schwarz (0,0,0) ist, werden schwarze Pixel den Hintergrund nicht verändern.

Screenshot: Explosion mit blendmode additiv

Um den Schwierigkeitsgrad des Spiels zu erhöhen geben wir im Event Sheet den Monstern weitere Logiken.

  • Das Monster soll sich beim Spielstart in eine zufällige Richtung bewegen
  • Wandert ein Monster außerhalb des Layout soll es sich in Richtung des Spielers bewegen

Füge dafür folgenden zwei Events hinzu:

Screenshot: Event 4 für Monster

Nun modifizieren wir die Monster und geben ihnen Gesundheit, so dass sie erst nach 5 Treffern zerstört werden. Wähle die Monster an und füge in der Properties Bar eine „Instance variable“ hinzu.

Screenshot: Instance variable hinzufügen

Benenne diese Variable als „Health“ und gib als Initialwert „5“ ein.

Screenshot: Add instance variable health

Nun modifizieren wir das Event Bullet on Collision with Monster. Klicke die Aktion Monster Destroy an und wähle nach einem Rechtsklick Replace action.

Screenshot replace action

Wähle dann
MonsterSubstract from (in der Instance Variablen Kategorie) → Health
und gib eine +1 ein.

Wird ein Monster nun von einer Kugel getroffen so wird für dieses Monster der Wert der Instance Variablen Health um 1 verringert. Der Wert der nicht getroffenen Monster bleibt unverändert.

Damit ein Monster zerstört wird wenn die Gesundheit 0 (oder kleiner) ist füge noch folgendes Event hinzu (Nutze Bedingung: MonsterCompare instance variable):

Screenshot: Event 6 Monster

Starte die Vorschau und prüfe ob ein Monster nach 5 Treffern zerstört wird.

Punkte zählen

Nun soll der Spieler Punkte für seine Leistung erhalten. Man könnte nun dem Spieler eine Instant Variable „Score“ geben. Dies hätte allerdings den Nachteil, dass dann der Wert direkt an dem Objekt „Spieler“ hängt. Würde der Spieler zerstört werden wäre auch der „Score“ nicht mehr vorhanden.

Um die Anzahl der zerstörten Monster zu zählen füge stattdessen eine „Globale Variable“ ein. Auf den Inhalt der Globalen Variablen kann stets weiterhin zugegriffen werden, selbst wenn man das Layout wechseln würde.

Im Event Sheet fügen wir also mit einem Rechtsklick eine Globale Variable hinzu und benennen diese „Score“. Der „Initial Value“ ist der Wert den diese Globale Variable hat, wenn das Spiel gestartet wird. Dieser soll in unseren Fall 0 sein.

Screenshot: Globale Varibale hinzufügen Screenshot: Einstellungen für Globale Varibale Score

Die Globale Variable erscheint nun in der obersten Zeile in dem Event Sheet, in welchem diese erstellt wurde.

Screenshot: Globale Varibale Score im Eventsheet

Damit der Score um +1 erhöht wird fügen wir eine dritte Aktion unter der Bedingung „Health des Monsters gleich 0 oder kleiner“ ein:
System → Add to → Score → 1

Screenshot: Event 7 für Monster

Punktzahl im Spiel anzeigen

Damit die Punktzahl dem Spieler nicht verborgen bleibt soll nun ein Text verwendet werden, mit welchem die Punktzahl angezeigt wird.

Würden wir nun einfach ein Textobjekt irgendwo auf dem Spielfeld platzieren würde die Position des Textes mitwandern, wenn der Spieler sich bewegt (aufgrund der „Scroll To“ Eigenschaft des Spielers. Damit die Position fest bleibt fügen wir einen weiteren Layer in dem selben Layout ein.

Layer sind übereinander gestapelte Schichten auf denen Objekte platziert werden können. In der Layers Bar, typischer Weise in der unteren rechten Ecke des Bildschirmes, ist bisher nur der Layer 0 vorhanden.

Screenshot: Layers Bar

Nach einem Rechtsklick in dieses Feld wähle „Add layer at top“ und benenne den Layer „HUD“(Abkürzung für „Heads-Up Display“).

Wähle nun den neuen Layer HUD an. Nun werden alle weiteren eingefügten Objekte automatisch in diesem Layer zugeordnet. Selbstverständlich kann man den Layer eines Objektes später auch noch ändern, was aber stets ein zusätzlicher Aufwand ist.

Da der HUD-Layer immer in der selben Position verbleiben soll, unabhängig davon wie die Ansicht des Layers 0 (mit dem Spieler) ist nehmen wir eine Einstellungen in der Properties Bar vor. Die Layer Eigenschaften können verändert werden, wenn du zuletzt den Layer HUD in der Layer Bar angeklickt hast.

Mit Parallax kann die Rate eingestellt werden, mit welcher ein Layer sich verschiebt, wenn die Ansicht geändert wird. Setze den Wert Parallax auf „0 x 0“. Somit ist der Wert für die X- und Y-Achse auf 0 gesetzt.

Screenshot: Layer properties Parallax

Wechsel nun zum Layout zurück, in welchem wir schon die bisherigen Spielelement Spieler, Kugel, Monster eingefügt wurden. Führe einen Doppelklick aus und wähle als neu einzufügendes Objekt „Text“.

Platziere den Text in der oberen linken Ecke des Layouts. Da der schwarze Text schwer lesbar ist wähle in der Properties Bar für den Textbold“ (fettgedruckt), „italic“ (kursiv) und yellow (gelb).

Vergrößere das Textfeld, so dass ausreichend Platz ist um genügend Text einzufügen. Nur Wörter, welche vollständig in das Textfeld passen werden angezeigt. Daher sollte das Textfeld stets ausreichend groß sein.

Screenshot: Textfeld mit Punktzahl platzieren

Um nun noch den richtigen Textinhalt einzufügen, nämlich den Wert der Globalen Variablen „Score“, muss wieder in das Event Sheet gewechselt werden.

Füge in der Bedingung „Every Tick“ eine neue Aktion ein:
Text Set Text
und gebe:
"Punkte: " & Score
ein. Zwischen den Anführungszeichen liegt ein festgelegter, nicht variabler Text. Das Wort Score ist der Name der Globalen Variablen. Das & setzt aus beiden Teilen einen Text zusammen. Starte nun die Vorschau. Sollte die Punktzahl nicht zu sehen sein prüfe in der Properties Bar, ob der Layer des Text auf "HUD" steht und nicht auf "Layer 0".

Das Spiel ist nun fast fertig. Allerdings hat der Spiele bisher nur die Möglichkeit die Monster zu erlegen, welche beim Spielstart schon existiert haben. Hat er diese zerstört, so gibt es nichts mehr zu tun.

Erstelle weitere Monster

Daher fügen wir eine weitere Bedingung mit zugehöriger Aktion ein:
Bedingung: SystemEvery X seconds3
Action: System Create ObjectMonster → Layer 0 (also der Layer in dem das Spiel stattfindet, nicht das HUD) → X: LayoutWidth +100, Y: random (LayoutHeight)

Dadurch wird alle 3 Sekunden ein Monster 100 Pixel rechts neben dem sichtbaren Layout erzeugt. Die Höhe ist auf einer zufälligen Höhe zwischen 0 Pixeln und der Layouthöhe.

Um einen fairen Kampf zu gewährleisten bekommen die Monster noch die Möglichkeit den Spieler zu zerstören:
Bedingung: MonsterOn collision with another objectPlayer
Action: PlayerDestroy

Fertig ist das erste Spiel

Die Construct-Datei des Spiels kann auf der Construct 3 Webseite ebenfalls geöffnet werden:
https://editor.construct.net/#open=ghost-shooter-tut

Um den Schwierigkeitsgrad des Spiels und von Construct 3 noch zu erhöhen kannst du z.B. folgende Ideen umsetzen:

  • Mit jedem zerstörtem Monster werden die anderen Monster etwas schneller oder bekommen mehr Lebenspunkte
  • Entwerfe einen „Game Over“ Bildschirm. Füge dazu ein weiteres Layout ein und nutze dazu die Aktion „Go to layout“ um zwischen den Layouts zu springen.