Ich habe Pong im Kunstunterricht programmieren lassen als Teil einer Unterrichtsreihe. Leider kann ich das Tutorial nicht posten, weil es auf Deutsch ist, deswegen habe ich es hier reinkopiert. Bei mir hat es super funktioniert, die Schüler waren begeistert! Bei Fragen helfe gerne, auch wenn jemand an der ganzen Reihe interessiert ist.
Ich befürchte, dass die Bilder hier nicht richtig angezeigt werden...Einfach melden bei Bedarf!
Viel Spaß
1. Gehe in den Ordner Construct2 und wähle die Anwendung „Construct2“ aus.
2. Klicke überall auf nein oder x, bis das Programm normal geöffnet ist.
3. Beginne ein neues Projekt, indem du in der obigen Menüleiste auf „File“ klickst, dann „New“ und schließlich „New empty project“ wählst.
Jetzt kann es losgehen! Wir beginnen mit dem Spielfeld und dessen Begrenzung.
4. Spielfeldgröße festlegen: Klicke einfach auf den weißen Hintergrund. Links erscheint nun das Fenster „Properties“. Dort gibst du bei „Layout Size“ ein: 854, 480
5. Ein Objekt einfügen: Klicke mit der rechten Maustaste in den weißen Hintergrund. Wähle „Insert new object“. Klicke dann doppelt auf das „Sprite“ Objekt. Dein Cursor sieht jetzt aus wie ein Plus. Klicke einfach auf den weißen Hintergrund.
6. Das Aussehen des Objekts gestalten: Es öffnen sich mehrere Fenster. Wähle am linken Rand des mittleren Fensters („Edit image“) das Füllsymbol (Eimer aus dem Farbe ausläuft). Es öffnet sich ein weiteres Fenster „Color Palette“. Dort wählst du die Farbe Schwarz. Im Fenster „Edit image“ klickst du nun einfach in das große Viereck, sodass es schwarz wird. Dann schließt du das Fenster „Edit image“. Das Viereck erscheint nun auf dem Layout.
7. Objekteigenschaften verändern: Wenn es ausgewählt ist, erscheint links wieder das Fenster „Properties“. Dort änderst du nun folgende Werte (Bestätigung mit Entertaste):
- Name: Wall
- Size: 854, 16
Dem Objekt ein bestimmtes Verhalten zuschreiben: Klicke nun auf „Behaviors“. Es öffnet sich das Fenster „Wall: Behaviors“. Dort klickst du auf das Plus. Im Fenster „Add behavior“ wählst du „Solid“ mit Doppelklick. Schließe nun „Sprite: Behaviors“.
8. Verschiebe den Balken nun an den oberen Bildrand, sodass es aussieht wie auf dem Bild:
9. Copy&Paste schwarzer Balken. (Balken auswählen, Strg und C drücken, Strg und V drücken, dann auf den weißen Hintergrund klicken.)
Verschiebe diesen Balken nun an den unteren Bildrand. Die beiden Balken begrenzen das Spielfeld, der Ball wird später an ihnen abprallen wie an einer Wand.
Jetzt kreieren wir den Spielball.
10. Erstelle ein weiteres schwarzes „Sprite“ Objekt mit folgenden Eigenschaften (siehe Punkt 5-7):
- Name: Ball
- Position: 427, 240
- Size: 16, 16
- Behaviors: Bullet
- Speed: 225
- Bounce off solids: Yes
- Set angle: No
Info: Der Ball bewegt sich mit einer Geschwindigkeit von 225, prallt an soliden Wänden ab und fliegt zurück ins Spielfeld in einem nicht festgelegten Winkel (=angle).
Als nächstes erschaffen wir die beiden Spieler.
11. Erstelle ein weiteres rotes „Sprite“ Objekt. Nachdem du im Fenster „Edit image“ das Viereck rot eingefärbt hast, schließe nicht das Fenster! Siehst du das Fenster „Animation Frames (1)“? Dort klickst du mit der rechten Maustaste in die leere, weiße Fläche. Wähle „Add frame“. Wähle jetzt im Fenster „Color Palette“ die Farbe Blau und klicke im Fenster „Edit image“ in das große Viereck. Ganz links im Fenster „Properties“ veränderst du nun folgenden Wert:
- Speed: 0
Jetzt kannst du das Fenster „Edit image“ schließen. Verändere nun folgende Werte (rotes Viereck muss ausgewählt sein):
- Name: Pad
- Position: 20, 240
- Size: 16, 48
- Behaviors: Solid
Klicke nun auf „Instance variables“. Es öffnet sich das Fenster „Pad: Instance variables“. Klicke auf das Plus. Im Fenster „New instance variable“ gibst du nun folgenden Wert ein:
- Name: Player (Bei „Type“ müsste bereits „Number“ stehen und bei „Initial value“ eine „0“.)
12. Copy&Paste rotes Viereck (siehe Punkt 9). Verändere in der Kopie folgende Werte:
- Angle: 180
- Position: 834, 240
- Player: 1
- Initial frame: 1
Info: Wir erstellen den zweiten Spieler als eine Kopie des ersten mit denselben Eigenschaften, aber um 180° gedreht und in Blau (hatten wir im „Animation frame“ bereits erstellt).
Großartig! Wir können uns den Zwischenstand jetzt schon einmal ansehen. Dazu klicken wir ganz oben in der Leiste des Hauptfensters auf das Symbol für Play, wenn der Cursor darauf zeigt sieht man, dass es „Run Layout“ heißt. Klicke darauf. Es öffnet sich ein Tab im Browser, dort wird später auch das Spiel gespielt. Es müsste jetzt so aussehen, der Ball müsste zwischen den Spielern hin- und herdotzen:
Nachdem wir den Browser wieder geschlossen haben, widmen wir uns den Funktionen der Spieler. Den linken, roten Spieler werden wir später mit den Pfeiltasten nach oben und unten bewegen können, der rechte, blaue Spieler wird automatisch vom Programm gesteuert (wir spielen gegen den PC).
13. a) Wähle den roten Spieler aus und füge folgende Eigenschaft hinzu:
- Behaviors: 8 Directions
b) Dann änderst du folgende Werte:
- Directions: Up & down
- Set angle: no
- Default controls: no
14. Wiederhole Punkt 13b beim blauen Spieler!
15. Klicke mit der rechten Maustaste auf den weißen Hintergrund und erstelle ein „Keyboard“ Objekt.
16. Andere Registerkarte auswählen: Siehst du die Registerkarten an der oberen Leiste? Bisher haben wir in der Registerkarte „Layout“ gearbeitet. Wähle nun „Event sheet“ aus.
17. Ein „Event“ hinzufügen: Klicke auf die hellgraue Schrift „Add event“ (oder doppelklicke auf den Hintergrund oder klicke die rechte Maustaste und wähle dann „Add event“).
Es öffnet sich das Fenster „Add event“. Dort wählst du nun „Keyboard“. Im nächsten Schritt wählst du „Key is down“. Es öffnet sich ein kleineres Fenster, dort klickst du auf <click to choose>. Es öffnet sich ein noch kleineres Fenster. Jetzt drückst du auf deiner Tastatur auf die Pfeiltaste nach oben, sodass im Feld unter „Press a key“ jetzt „Up arrow“ steht. Bestätige mit „Ok“, dann mit „Done“.
18. Klicke mit der rechten Maustaste auf die Fläche zwischen der 1 und dem Tastatursympol.
Wähle dann „Add“ und dann „Add another condition“.
Wähle „Pad“.
Im neuen Fenster („Add condition“) wählst du „Compare instance variable“ (du kannst den Begriff auch in der kleinen Suchleiste rechts oben in diesem Fenster eingeben). Es öffnen sich 2 Fenster, dort änderst du nichts, sondern klickst einfach auf „Done“.
Jetzt klickst du auf „Add action“ (siehe Kreis in der Grafik). Wähle wieder „Pad“, dann wählst du „Simulate control“. Im sich nun öffnenden Fenster ist eine Leiste neben „Control“. Dort wählst du „Up“ (mit „Done“ bestätigen).
19. Klicke mit der linken Maustaste wieder auf die Fläche zwischen der 1 und dem Tastatursymbol. Dadurch wählst du das gesamte Event aus. Es ist nun gelb unterlegt. Copy&Paste!
20. Das gleiche Event erscheint nun mit der Nummer 2 davor. Doppelklicke auf „Up arrow“, klicke dann in der Leiste auf „Up arrow“, dann drückst du auf deiner Tastatur auf die Pfeiltaste nach unten. Bestätige mit „Ok“, dann mit „Done“.
Info: Wir haben den roten Spieler so programmiert, dass er sich nach oben, bzw. unten bewegt, wenn wir die entsprechende Pfeiltaste drücken.
Jetzt doppelklickst du in die Leiste „Simulate 8Direction pressing Up“. Statt „Up“ wählst du jetzt „Down“.
21. Erstelle ein neues Event. Wähle wieder „Pad“, dann wieder „Compare instance variable“. In dem neuen Fenster („Parameters for Pad: Compare instance variable“) änderst du den Wert:
- Value: 1
22. Klicke wieder mit der rechten Maustaste in den Zwischenraum (3-Pad), wähle „Add“, dann „Add sub-event“. Wähle „Pad“, dann „Compare Y“. In dem Fenster „Parameters for Pad: Compare Y“ änderst du folgende Werte:
- Comparison: < Less than
- Y co-ordinate: Ball.Y (das musst du selbst in das Feld schreiben, mit Enter bestätigen)
Rechts in Zeile 4 wählst du „Add action“. Wähle „Pad“, dann „Simulate control“, dann „Down“.
23. Copy&Paste das Sub-event. Doppelklick auf
“Y < Ball.Y” und ändere es in „Y > Ball.Y“, indem du statt „< Less than“ jetzt „> Greater than“ auswählst.
Jetzt doppelklickst du auf „Simulate 8Direction pressing Down“. Statt „Down“ wählst du „Up“.
Info: Wir haben den virtuellen, blauen Gegner so programmiert, dass er versucht, immer auf derselben Höhe zu sein wie der Ball.
Überprüfe nochmal dein vorläufiges Ergebnis mit „Run Layout“ und überprüfe die Bedienung des roten Players. Wenn einer der beiden Spieler verliert, fliegt der Ball aus dem Spielfeld und das Spiel ist beendet. Das wollen wir im letzten Schritt ändern! Der Ball soll nach jedem Verlust erneut in der Mitte des Spielfelds erscheinen.
24. Erstelle ein neues Event. Dieses Mal wählst du „Ball“, dann wählst du „Is outside layout“.
Rechts davon klickst du auf „Add action“, dann „Ball“, dann „Set position“. Ändere die Werte:
- X: 427
- Y: 240
Herzlichen Glückwunsch!
Du hast dein erstes PC-Spiel erstellt! Speichere nun das Projekt ab. Jeder, der Contruct2 installiert hat, kann dieses Spiel über das Internet spielen, wenn du ihm die Projekt-Datei schickst. Er muss dann auf „Run layout“ klicken. Du kannst jederzeit an dieser Datei weiterarbeiten.
Jetzt kannst du vieles varrieren, z.B. die Geschwindigkeit des Balls, die Farben, den Hintergrund oder den zweiten Spieler. Wie wäre es, wenn man ihn mit WASD bedienen könnte anstatt das dem PC zu überlassen?