How to make a Platform game

6

Index

Taggé

Contributeurs

Statistiques

40,967 visites, 56,063 vues

Outils

Partager

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 11 Jan, 2017. Last updated 25 Feb, 2019

Einen Layer hinzufügen

Nun gut, jetzt möchten wir ein paar mehr Objekte beifügen. Jedoch selektieren wir noch immer unbeabsichtigt das Hintergrundbild, bis wir es gesperrt haben, was es nicht mehr selektierbar werden lässt. Das Layering-System kann uns dabei zur Seite stehen.

Layouts können aus mehreren layern bestehen, welche wir zur Gruppierung von Objekten verwenden können. Stell dir Layer als aufeinandergelegte Glasscheiben vor, mit jeweils darauf gemalten Objekten. Damit kannst du Objekte auf einfache Art arrangieren, welche Objekt auf welchen aufliegen sollen; Layer können versteckt werden, verriegelt, können mit Parallax-Effekten versehen werden und haben noch weitere Eigenschaften. Beispielsweise wollen wir in diesem Spiel alles auf dem gekachelten Hintergrund darstellen, damit wir einen daraufliegenden Layer für unsere anderen Objekte erstellen können.

Um Layer zu verwalten, klick den Layers tab, welcher sich normalerweise neben der Project bar befindet:

Du musst Layer 0 in der Liste sehen (Construct 2 zählt von Null aufwärts, da diese Methode in der Programmierung am besten funktioniert). Selektiere diesen, klick das Stift-Icon, nenne den Layer in Background um, da es unser Hintergrund-Layer ist. Klick das grüne 'add' Icon, um einen neuen Layer für unsere Objekte hinzuzufügen. Nennen wir diesen Main.

Zu guter Letzt verriegeln wir den Layer Background, indem wir das Schloss-Symbol daneben klicken. Das bedeutet, dass wir nichts mehr in diesem Layer anklicken können. Das ist besonders bei unserem gekachelten Hintergrund praktisch, welcher schnell mal ungewollt selektiert werden würde. Jedoch kannst du daran Änderungen vornehmen, indem du wieder auf das Schloss klickst, um es zu entriegeln.

Die Kontrollkästen erlauben es uns ebenfalls, Layer zu verstecken, was wir jetzt jedoch nicht machen müssen. Deine Layer bar sollte nun wie folgt aussehen:

In Ordnung, stell sicher, dass der 'Main' Layer in der Layer bar selektiert ist. Das ist wichtig - der selektierte Layer ist der aktive Layer. Alle neu hinzugefügten Objekte gehen in den aktiven Layer. Wäre dieser also nicht selektiert, würden sie in den falschen Layer eingefügt werden. Der aktive Layer wird in der Status bar angezeigt und erscheint ebenfalls bei Erstellung eines neuen Objekts in einem Tooltip - es lohnt sich also, ein Auge darauf zu behalten.

Tiles hinzufügen

Der Jungel Platformer hat ein Tileset in der Datei Tiles\Tiles.png. Wir importieren diese in ein Sprite Objekt und nutzen dies als ein Tile Objekt.

Wie du es für den gekachelten Hintergrund tatest, doppelklicke eine Stelle im Layout, um ein neues Objekt einzufügen. Diesmal wähle Sprite. Der Mauszeiger wandelt sich wieder in ein Fadenkreuz. Klick irgendwo in die Mitte der Ansicht.

Der Image Editor öffnet sich diesmal aufgrund der Möglichkeit, Sprites animieren zu können, mit zusätzlichen Fenstern. Jedoch wird diese nicht abgespielt - dessen Geschwindigkeit wird 0 sein. In jedem Frame der Animation werden wir einen anderen Tile haben, was es uns ermöglicht, mit Änderung der Frames zu bestimmen, welcher Tile erscheint.

Rechtsklicke eine Stelle im Animation Frames Fenster zu deiner Unteren und wähle Import sprite strip.... Dies lässt uns Gitter aus Bildern zu Animationen schneiden, was ebenfalls mit Tile maps funktioniert.

Ein 'Datei öffnen' Dialog erscheint. Wähle Tiles\Tiles.png aus dem Sprite-Paket. Construct 2 muss dann wissen, wie viele Tiles das Bild beinhaltet. Du wirst sehen, dass Tiles.png ein 12x12 Gitter aus Tiles hat. Gib 12 und12 ein, dann bestätige mit OK.

Gib Construct 2 einen Moment, um die Tiles auszuschneiden. Jetzt solltest du alle 144 Tiles als Frames der Animation importiert haben! Den ersten, leeren Frame brauchen wir nicht mehr und können ihn mit einem Rechtsklick darauf und der Wahl von delete löschen.

Du kannst das Fenster Animation Frames vergrößern, um einen besseren Überblick der Tiles zu erhalten. Ebenfalls kannst du eine Stelle mit rechter Maustaste anklicken und die Thumbnail-größe nach deinem Belieben hin ändern.

Normalerweise beträgt die Animationsgeschwindigkeit 5, was bedeutet, dass Tiles ihre Gestalt kontinuierlich ändern. Wir wollen jedoch, dass Tiles auf ihrem aktuellen Frame bleiben, also stellen wir sicher, dass die Animationsgeschwindigkeit 0 ist. Wähle die Default Animation im Animations Fenster.

Die Properties Bar zeigt nun Eigenschaften der Animation. Ändere die Speed Eigenschaft auf 0.

Jetzt ändern die Tiles nicht mehr ihre Darstellung - sie verharren auf dem selben Frame. Schließe den Image editor mit einem Klick auf das X-Symbol eines der drei geöffneten Fenster. Dein Sprite Tile sollte nun im Layout sein!

Während es selektiert ist, ändere dessen Name von Sprite zu Tile in der Properties Bar. Es ist stets eine gute Idee, passende Namen für die Objekte zu finden.

Eine Szenerie mit Tiles erzeugen

Beachte, dass der Sprite eine Initial frame Eigenschaft hat. Wir können das dazu nutzen, den aktuellen Frame zu ändern. Selektiere das Tile-Objekt und ändere dessen Initial frame auf 1:

Beachte, dass das Bild sich ändert, um dem Tile die Gestalt des Animations-Frame 1 zu verleihen. Auf diese Weise können wir verschiedene Tiles im Level unterbringen.

Halte Strg gedrückt und ziehe das Tile mit der Maus. Damit erstellst du ein weiteres Tile-Objekt. Wiederhole dies, bis wir 3 Tiles in einer Reihe haben. Selektiere das Mittlere und ändere dessen Initial frame auf 10. Dasselbe tun wir mit dem Rechten, jedoch mit dem Initial frame auf 13. Es sollte nun ungefähr so aussehen:

Bist du nicht sicher, welcher Frame mit welchem Tile übereinstimmt, doppelklicke das Tile-Objekt. Der Image editor mit den Animations-Fenstern öffnet sich, wo du es überprüfen kannst. Merke dir, dass du ein Tile Strg + ziehen kannst, um ein Weiteres derselben Art zu erzeugen, was dir eine erneute Eingabe des Initial frames erspart.

Einrastfunktion aktivieren

Du kannst dich auf Kopfschmerzen einstellen, müssten wir alles per Hand anordnen! Der Einfachheit halber schalten wir das Raster ein. Im oberen Menü klick View und aktiviere Snap to Grid. Die Standardgröße von 32x32 ist in Ordnung. Unsere Tiles sind 128x128 groß, was ein Vielfaches von 32 ist. Das macht es einfach, Tiles aneinander zu stecken mit genug Freiraum beim Positionieren.

Ziehe die Tiles nun ein wenig umher. Sie sollten nun im 32x32 -Gitter einrasten. Jetzt sollte es ein Leichtes sein, die 3 Tiles aneinanderzuheften.

  • 0 Comments

Want to leave a comment? Login or Register an account!