Original source of this tutorial can be found here.

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

Willkommen bei Construct 3! Wir starten mit der Erstellung eines ersten Spiels, einem kleinen Shooter. Alles was du dafür benötigst wirst du hier erlernen, von Layern bis zum Event-System.

Auch wenn eine deutsche Übersetzung von Construct 3 verfügbar ist empfiehlt ARA Games Germany die englische Version von Construct 3. Wenn du komplexere Spiele baust wirst du eventuell die Community um Hilfe bitten und falls du Screenshots zeigen möchtest sollte die Community diese verstehen.

Los geht's

Du kannst Construct 3 ohne Download in deinem Browser starten:
https://editor.construct.net/.

Wir empfehlen Google Chrome, Firefox, Safari oder Microsoft Edge in einer aktuellen Version zu verwenden. Der Internet Explorer von Microsoft wird nicht unterstützt.

Der Browser bzw. das Gerät auf welchem programmiert werden soll muss zudem WebGL unterstützen, was in der Regel der Fall ist.

Es besteht auch die Möglichkeit Construct offline zu betreiben. Um dies einzurichten muss zunächst Construct im Browser (am besten Chrome) geöffnet werden. Wenn Construct fertig geladen ist und die Nachricht erscheint, dass nun auch Offline gearbeitet werden kann, führe folgenden Schritt aus:

Windows/Linux: Chrome Menü (auch die 3 vertikal angeordneten Punkte) → weitere Toolszu Desktop hinzufügen.

Wird Chrome OS oder Android verwendet kann auf ähnliche Weise verfahren werden.

Beginne mit einem neuen Projekt

Starte ein neues Projekt. Im darauf folgenden Dialogfenster kannst du dem Projekt einen Namen geben. Ansonsten muss hier nichts weiter getan werden. Das Preset SD Landscape 16:9 mit 854 x 480 Pixel bleibt also ausgewählt. Dies ist nun die Größe des Bildausschnittes, welcher später beim Spielen sichtbar ist.

Klicke auf Create (ARA Games Germany empfiehlt die englische Version von Construct 3) und das neue leere Projekt sollte etwa so aussehen:

In der Mitte siehst du die Layout Ansicht. Hier können Objekte erzeugt und positioniert werden, welche im späterem Verlauf die Spieler deines Spiels sehen werden.

Als erstes fügen wir einen "Tiled Background" ein. Dies bedeutet, dass ein Bild mehrfach nebeneinander als Hintergrund angezeigt wird. Als Hintergrund für das erste Spiel kannst du folgendes Bild verwenden (rechte Maustaste zum Speichern des Bildes verwenden).

Führe einen Doppel-Klick (alternativ rechte Maustaste → Insert new object) auf einer freien Stelle in deinem Layout aus um ein neues Objekt zu erstellen. Im darauf erscheinenden Dialogfenster führe einen Doppel-Klick auf Tiled Background aus.


Der Mauszeiger wird zum Fadenkreuz. Klicke nun etwa in die Mitte des freien Layouts. Der "Image Editor" öffnet sich. Dort kannst du nun das zuvor gespeicherte Hintergrundbild einladen.

Screenshot: Load Image

Schließe den "Image Editor" durch Mausklick auf das X in der rechten oberen Ecke. Der Tiled Background sollte nun erscheinen. Allerdings ist das gesamte Layout noch nicht mit dem Hintergrund bedeckt. Wähle den Tiled Background mit einem Mausklick auf dem Layout an. In der "Properties Bar" links vom Layout kannst du nun Parameter des Objektes sehen und ändern. Ändere die Position auf "0, 0". Die Koordinate "0, 0" ist dabei die obere linke Ecke. Setze die Size auf 1708 x 960. Diese Größe sollte der Größe deines Layouts entsprechen.

Screenshot: object properties tiled background

Das Layout sollte nun ganzflächig bedeckt sein. Durch das Drücken der Strg-Taste auf der Tastatur und das gleichzeitige drehen des Mausrades kannst du in das Layouts hinein- oder herauszoomen. Durch das Drücken der mittleren Maustaste kann die Ansicht des Layout verschoben werden.

Screenshot: gezommter Hintergrund

Für Ungeduldige: Drücke auf den Preview-Knopf (schwarzes Dreieck oberen Zeile). Das Vorschaufenster öffnet sich. Sollte eine Fehlermeldung Popup Blocked erscheinen klicke auf "Try again". Das Hintergrundbild bedeckt das Layout ganzflächig. Schließe das Vorschaufenster nun wieder.

Damit der Hintergrund nicht ausversehen geändert wird sollte dieser gesperrt werden. Führe dazu einen Rechtsklick auf den "Tiled background" aus und wähle Lock → Lock selection.

Nun wollen wir weitere Objekte hinzufügen. Speichere die folgenden vier Bilder und übersehe dabei das Schussprojektil "bullet" nicht:

Bilder Spieler Bild Monster  Bilder Kugel Bild Explosion

Jedes dieser Objekte soll ein "Sprite" sein. Sprites sind Bilder welche bewegt, rotiert, skaliert oder auch animiert werden können. Sprites sind ein wesentlicher Bestandteil von Spielen.

Um die Sprites einzufügen verfahre ähnlich wie beim Einfügen des "Tiled Backgrounds". Führe für alle 4 Bilder folgendes aus:

  • Doppelklick auf das Layout (wenn der Hintergrund nicht gesperrt wurde: Rechtsklick → Insert new object).
  • Doppelklick auf Sprite.
  • Die Maus wird zum Fadenkreuz, platziere nun den Sprite irgendwo auf dem Layout.
  • Der Image Editor öffnet sich. Lade das Bild des Spielers (bzw. Monsters, Kugel, Explosion) ein.
  • Schließe den Image Editor.
  • Wähle das Bild an und ändere in den Properties den Namen von "Sprite" auf Player (bzw. Monster, Bullet, Explosion).
Screenshot: Objekt umbenennen

Verschiebe nun die Explosion und die Kugel außerhalb des Layouts. Der Spieler und das Monster sollten sich nicht berühren.

Sprites können auch hinzugefügt werden, wenn Bilddateien per Drag & Drop auf das Layout gezogen werden. Dies kann aber Probleme bereiten, wenn Teile des Bildes durchsichtig sein sollen (so wie dies hier der Fall ist). Im Bildeditor müssten diese Teile des Bildes dann wieder transparent gesetzt werden. Außerdem müssen die Bilder nacheinander und nicht in einem Schritt auf das Layout gezogen werden.

Verhalten hinzufügen:

Mit "Behaviors" können die Sprites Eigenschaften/Verhaltensweisen bekommen. Wähle zunächst den Spieler-Sprite an. Klicke dann bei den Properties "Add/Edit Bahavior" an. Klicke danach auf "Add new behavior".

Screenshot: Verhalten hinzufügen

Construct 3 verfügt über zahlreiche Behaviors. In diesem Tutorial verwenden wir folgende von ihnen:

  • 8 Direction Movement: Damit kann man das Objekt im Spiel mit den Pfeiltasten der Tastatur steuern.
  • Bullet Movement: Ein Objekt bewegt sich gradlinig in Richtung seines angegebenen Winkels.
  • Scroll to: Der Bildschirm folgt einem Objekt. Angewendet auf den Spieler bleibt dieser in der Mitte der Ansicht.
  • Bound to layout: Ein Objekt kann das Layout nicht verlassen. So bleibt z.B. der Spieler stets im Spielfeld.
  • Destroy outside layout: Zerstört ein Objekt, wenn es das Layout verlässt. Dies ist sinnvoll damit z.B. Kugeln, welche das Spielfeld verlassen haben, nicht unendlich lange weiterfliegen und keinen unnötigen Speicherplatz belegen.
  • Fade: Ein Objekt (z.B. Explosion) wir eingeblendet und wieder ausgeblendet. Danach wird das Objekt zerstört.
Screenshot: Verhalten hinzufügen, 8 Direction Movement

Weise dem Spieler zunächst das 8 Direction Movement zu. Klicke anschließend wieder auf "Add new behavior". Füge nun das Behavior "Scroll To" hinzu. Wiederhole diesen Schritt für das Bound To Layout Behavior.

Screenshot: Verhalten des Spielers

Füge den anderen Sprites nun folgende Behavior zu:

  • Kugel: Bullet Movement und Destroy Outside Layout
  • Monster: Bullet Movement (Die Monster sollen sich, ähnlich einer Kugel geradeaus bewegen. Die Monster sind natürlich viel langsamer)
  • Explosion: Fade

Nun können wir die Behaviors einstellen. Wähle dazu zunächst das Monster aus. In den Properties kannst du nun unter Behaviors den Speed von 400 auf 80 (Pixel/s) setzen. Wähle nun die Kugel aus und setze die Geschwindigkeit auf 600.

Screenshot: Eigenschaft Bullet

Ändere nun auch die Fade Behavior der Explosion. Setze "Fade Out" auf 0.5 (verwende als Dezimaltrennzeichen in Construct 3 immer den "." und nicht das ",").

Erzeuge mehr Monster

Damit zum Spielstart mehr als ein Monster vorhanden ist wähle das Monster an und drücke Strg auf der Tastatur und Drag&Drop das Monster Sprite. Erzeuge so ca. 7 neue Monster.

Screenshot: Layout mit Monstern

Füge zum Abschluss des ersten Teils des Tutorials, analog wie bei „Sprites“ oder „Tiled Backgrounds“ noch „Mouse“ und „Keyboard“ ein (Doppelklick auf Layout, dann Doppelklick auf Mouse (bzw. Keyboard). Der Schritt mit Fadenkreuz und Image Editor entfällt).

Im nachfolgenden Teil des Tutorials verwenden wir Events um den Sprites ein logisches Verhalten zu geben. Weiter geht's