Consturct2 Menü und Gravitation

Aus Debacher-Wiki
Zur Navigation springenZur Suche springen

Die vorliegende Anleitung soll eine Reihe kleiner Techniken zeigen, die man im Zusammenhang mit Construct2 gebrauchen kann:

  • Menüs
  • Gravitation

Spielbare Version

die .capx-Datei


Vorgestellt wird alles an der gleichen Anwendung, für die die folgenden 6 Abbildungen benutzt werden (Quelle für die Abbildungen ist http://openclipart.org/)

Startbild.png

Hintergrund.png

Kaefer.png KleinerStein.png GrosserStein.png

Untergrund.png

Spielbare Version

die .capx-Datei

Das Menü

Ein Menü ist einfach nur ein Layout, welches auf z.B. ein Mausereignis hin ein anderes Layout aufruft. Das Menü-Layout muss dann in Construct2 auch als Start-Layout eingetragen werden. Wir erstellen also ein neues leeres Projekt und ändern seinen Namen in hole_den_Kaefer. Die Größenvorgaben lassen wir unverändert.

Wir benennen nur das Layout-Sheet in Menü um und das Event-Sheet in Menü Events (rechts im Projects-Fenster mit der rechten Maustaste klicken und dann rename wählen). Dann fügen wir das Startbild ein (Doppelklick ins Layout-Fenster -> Sprite und dann im Image-Editor die Abbildung startbild.png wählen). Das Bild wird dann so verschoben, dass seine Position bei 320, 240 liegt, genau im Arbeitsbereich. Das entstandene Objekt hat den Namen Sprite bekommen, wir benennen es in Startbild um.

Nun fügen wir noch ein Mausobjekt ein, dazu müssen wir auf weißen Hintergrund klicken, nicht auf das Bild. Unter Layers benennen wir die Ebene in Hintergund um und sperren sie auch gleich, indem wir auf das Schloss-Symbol klicken. Dann fügen wir eine neue Ebene ein, nennen sie Texte und machen sie zur aktiven Ebene.

Nun folgen zwei Text-Objekte, eines für die Überschrift und eines als Menüpunkt zum Anklicken. Das Ganze sollte dann folgendermaßen aussehen.

Hol den kaefer1.png

Bevor wir sinnvoll Ereignisse behandeln können brauchen wir noch ein Layout und ein Event-Sheet für das Spiel. Also, im Reiter Projects mit der rechten Maustaste auf Layouts klicken und Add Layout wählen. Das Angebot auch gleich ein Event-Sheet mit anzulegen Spart viele weitere Schritte. Das Layout wird dann in Spiel umbenannt, das Event-Sheet in Spiel Events.

Sollte der Tab Spiel Events im mittleren Fenster fehlen, so kann man ihn mit einem Doppelklick auf Spiel Events rechts im Bereich Properties hinzufügen. Im Layout Spiel können wir gleich das Bild Hintergrund.png als Sprite einfügen, das Sprite umbenennen und das Bild auf 320,240 positionieren.

Hol den kaefer2.png

Menü Events

Die Events für ein Menü sind recht einfach zu erstellen. Wir gehen in das Sheet Menü Events und fügen dort ein Event ein.

Event: Mouse -> on object clicked -> left clicked, SpielStarten
Action: System -> goto Layout -> Spiel

Das war es schon, das Menü funktioniert und wenn man den entsprechenden Text anklickt, dann wird das Spiel mit dem noch etwas einsamen Hintergrund angezeigt.

Naja, beim Ausprobieren kann es störend sein, dass sich der Mauscursor beim Überfahren des Menütextes nicht verändert. Aber das kann man leicht ergänzen.

Event: Mouse -> Cursor is over object -> SpielStarten
Action: Mouse -> Set cursor style -> Hand

Diese Veränderung muss man dann aber auch wieder aufheben.

Event: Mouse -> Cursor is over object -> SpielStarten , Invert
Action: Mouse -> Set cursor style -> Normal

Das Zurücksetzen müssen wir natürlich auch vor dem Wechsel des Layouts auch noch einfügen.

Hol den kaefer3.png

Das Spiel mit Physics

Im nächsten Schritt wollen wir im Sheet Spiel einige Klötzchen stapeln. Dazu sichern wir die Ebene mit dem Hintergrund und fügen eine neue Ebene Spiel ein. In diese Ebene laden wir ein Sprite mit der Grafik kleinerStein.png. Den Stein positionieren wir irgendwo vor dem Hintergrund. Wenn wir das Spiel nur starten passiert eigentlich nichts weiter.

Wir bringen dem Stein nun erst einmal bei, dass er beim Anklicken mit der Maus verschwindet.

Event: Mouse -> on object clicked -> left click, kleinerStein
Action: kleinerStein -> Destroy

Nun kann man also den Stein anklicken und er verschwindet.Im nächsten Schritt soll der Stein ein "Gewicht" bekommen. Dazu klicken wir links im Fenster bei den Properties von kleinerStein auf Add / Edit Behaviors, klicken im folgenden Fenster auf das Plus und wählen Physics.

Hol den kaefer4.png

Wenn wir jetzt erneut das Spiel starten, dann sehen wir, dass der Stein fällt und zwar ins Bodenlose. Wir müssen seiner Welt also einen festen Untergrund geben. Dazu ist die Abbildung Untergrund.png gedacht, die wir als Sprite einfügen und relativ weit nach unten setzen.

Auch der Untergrund bekommt ein Physics-Beahavior, hier stellen wir dann aber unter Properties den Wert von Immovable auf Yes ein, sonst verschwindet auch der Untergrund. Mit dieser Änderung bleibt der Stein auf dem Untergrund liegen. Nun klonen wir den Stein (Strg-Taste und Mouse-Ziehen) und stapeln drei Kopien übereinander, es können ruhig Lücken bleiben.

Wenn man jetzt das Spiel startet, dann kippeln die Steine, der Turm wird schief.

Hol den kaefer5.png

Das hängt mit der Eigenschaft (Propertie) Collision Mask zusammen. Die ist normalerweise auf Use collison polygon eingestellt. Dieses Polygon müsste man aber im Image Editor aber erst passen erstellen. Bei rechteckigen Objekten ist es einfacher hier auf Bounding box umzustellen.

Hinweis: für diese Änderung müssen alle Steine markiert sein, dazu am besten rechts unter Objects alle Instanzen der Klasse aktivieren.

Hol den kaefer6.png

Nun bildet sich beim Starten des Spiels ein ordentlicher Stapel, aus dem man mit der Maus einzelne Steine entfernen kann.

Nun fügen wir noch ein Sprite mit der Abbildung grosserStein.png ein und geben auch diesem Stein ein entsprechendes Verhalten. Dann kommt noch ein Sprite mit der Abbildung kaefer.png (der Käfer sollte kein Mausereignis zum Zerstören bekommen, das wäre nicht tierfreundlich, aber Physics-Behavior braucht auch er).

Dann ordnen wir die Objekte folgendermaßen an.

Hol den kaefer7.png

Wenn man jetzt einzelne Steine unter den Käfer entfernt, dass sieht man den Effect vom Graphic-Behavior sehr deutlich. Der Käfer kann sogar auf dem Rücken landen.

Damit man für einen erneuten Spieldurchlauf nicht die ganze Seite neu laden muss, fügen wir noch ein Keybord Objekt ein und dann das folgende Event.

Event: -> Keyboard -> on key pressed -> Leertaste
Action: Sytem -> goto layout -> Menü

Nun muss man nur die Leertaste drücken, um wieder im Menü zu landen.

Hol den kaefer8.png