Mit Construct 2 haben Sie eine gute Wahl getroffen! Beginnen wir nun mit der Erstellung unseres ersten HTML5 Spiels. Wir werden das 'Ghost Shooter' Demo erstellen. Bitte klicken sie hier, um sich einen genaueren Einblick zu verschaffen. Die Spielfigur kann mit der Maus oder den Pfeiltasten bewegt werden und schießt mithilfe der Maus Monster ab. Sie werden alles lernen, was zur Erstellung eines einfachen Spiels notwendig ist - von den Layern (Ebenen) bis hin zum Event (Ereignis) System!
Achtung: Bitte stellen Sie keine Fragen in den Kommentaren zu diesem Tutorial! Stattdessen schauen Sie auf unserem Forum nach, um dort die bestmöglichsten Antworten auf Ihre Fragen zu erhalten.
Alternative Tutorials
Es gibt noch eine andere Einführung: How to make a platform game (Wie erstelle ich ein Plattform-Spiel) , die Ihnen dabei hilft ein Jump-and-Run Plattformspiel anstelle eines Top-Down Shooters zu erstellen. Sie können mit jedem dieser beiden Anleitungen beginnen, wir empfehlen aber beide fertigzustellen, um eine Vorstellung über beide Spieltypen zu bekommen!
Es gibt auch ein How to make an Asteroids clone in under 100 events (Wie erstelle ich einen Asteroiden Klon mit weniger als 100 Events) von Kyatric, das etwas fortgeschrittener aber sehr detailliert erklärt ist.
Construct 2 installieren
Falls Sie sich noch keine Kopie des letzten Releases von Construct 2 heruntergeladen haben, so können Sie dies hier nachholen. Der Construct 2 Editor läuft nur unter Windows, aber die Spiele, die Sie damit erstellen, laufen auch auf dem Mac, Linux oder dem iPad. Construct 2 benötigt für die Installation keine besonderen Benutzerrechte. Es ist auch tragbar und kann daher sogar auf einem USB Memory Stick installiert weden, damit Sie es immer dabei haben!
Der erste Start
Sie haben nun Construct 2 installiert und gestartet. Klicken Sie auf den File (Datei) Button und wählen Sie New (Neu).
Im New Project (Neues Projekt) Dialog können Sie alles so belassen wie es ist. Klicken Sie einfach auf Create project (Projekt Erstellen). Construct 2 wird das gesamte Projekt in einer einzigen Datei mit der Endung .capx für uns ablegen. Sie sollten nun ein leeres Layout vor sich haben - Die Design Ansicht auf welcher Sie Objekte erstellen und ablegen werden. Dies könnte der Level eines Spiels oder die Seite für das Menü sein. In anderen Anwendungen wurde dies möglicherweise als room, scene oder frame bezeichnet.
Objekte einfügen
Gekachelter Hintergrund
Wir benötigen für den Anfang eine Kachel für den gekachelten Hintergrund. Das Tiled Background (gekachelter Hintergrund) Objekt wird dies für uns erledigen. Vorerst beachten Sie folgendes Bild. Es ist unsere Hintergrund Textur - Klicken Sie mit der rechten Maustaste darauf und speichern Sie Diese mit Ziel speichern unter (oder Grafik speichern unter) auf Ihrem Computer.
Jetzt machen Sie einen Doppel-Klick an einer Stelle im Layout um ein neues Objekt einzufügen. (Später, wenn alles voll ist, können Sie auch auf die rechte Maustaste klicken und danach insert a new objekt (Neues Objekt einfügen) wählen, um so ein neues Objekt einzufügen).
Sobald das insert new object (Neues Objekt einfügen) Dialogfenster erscheint, fügen Sie bitte durch einen Doppel-Klick auf das Tiled Background Objekt dieses ein.
Ein Fadenkreuz erscheint, welches Ihnen anzeigt, wo das Objekt platziert wird. Klicken Sie irgendwo in die Mitte des Layouts. Nun öffnet sich der Grafik Editor mit dem Sie die Texture die sie kacheln möchten laden und bearbeiten können. Wir importieren nun die Datei, die wir voher gespeichert haben. Klicken Sie auf das Ordner-Symbol um ein Textur-Bild von der Festplatte zu laden. Suchen Sie nach dem Ort wo Sie Ihre Datei gespeichert haben und wählen Sie Diese aus.
Schließen Sie den Grafik Editor indem Sie auf das X in der rechten oberen Ecke klicken. Falls Sie nach dem Speichern gefragt werden, dann tun Sie dies bitte! Nun sollten Sie Ihr gekacheltes Hintergrund Objekt im Layout sehen. Ändern Sie nun dessen Größe so, daß es das ganze Layout bedeckt. Prüfen Sie, ob das Hintergrund Objekt selektiert ist. Ist dies geschehen, zeigt die Properties Bar (Eigenschaften Leiste) auf der linken Seite alle Einstellungen des Objektes wie dessen Größe in Size und dessen Position an. Geben Sie bei Position 0,0 ein (die linke obere Ecke des Layouts), und bei Size 1280, 1024 (die Größe des Layouts).
Schauen wir uns nun an, was wir so erstellt haben. Drücke Strg und benutze Mausrad nach unten um heraus zu zoomen. Sie können stattdessen aber auch wiederholt oben auf View - Zoom out klicken. Ebenso können Sie die die mittlere Maustaste drücken um die Ansicht zu verschieben. Ganz nett, oder? Ihr gekachelter Hintergrund sollte nun das ganze Layout bedecken:
Drücke Strg zusammen mit 0 oder klicke auf View -Zoom to 100% um wieder die 1:1 Ansicht zu erhalten.
(Wenn Sie ungeduldig sind wie ich, dann klicken Sie auf das kleine 'Start' Symbol in der Titelleiste des Fensters - es sollte sich ein Browser öffnen der das gekachelte Layout zeigt! Wau!)