Quelltext der Seite Consturct2 Menü und Gravitation

Die vorliegende Anleitung soll eine Reihe kleiner Techniken zeigen, die man im Zusammenhang mit Construct2 gebrauchen kann:
* Menüs
* Gravitation

[http://www.debacher.de/construct2/kaefer/ Spielbare Version] 

[http://www.debacher.de/construct2/kaefer/hol_den_kaefer.capx 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/)

[[Datei:Startbild.png]]

[[Datei:Hintergrund.png]]

[[Datei:Kaefer.png]]  [[Datei:KleinerStein.png]]  [[Datei:GrosserStein.png]]

[[Datei:Untergrund.png]]

[http://www.debacher.de/construct2/kaefer/ Spielbare Version] 

[http://www.debacher.de/construct2/kaefer/hol_den_kaefer.capx 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.

[[Datei:Hol den kaefer1.png|600px]]

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.

[[Datei:Hol den kaefer2.png|600px]]

===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.

[[Datei: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.

[[Datei: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. 

[[Datei:Hol den kaefer5.png|600px]]

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.

[[Datei: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.

[[Datei:Hol den kaefer7.png|600px]]

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.

[[Datei:Hol den kaefer8.png]]