Zum Hauptinhalt springen
Version: 24L

Game Basics - Sterne Fangen

Die Funktionalität der mit einem * markierten Abschnitte sollten in Eurem Spiel enthalten sein.

0. Vorbereitung *

Auf OneDrive einen neuen Ordner 12_game erstellen und diesen in VS Code öffnen. Dort ein neues Programm erstellen, bspw. mit dem Namen 01_game.py

1. Spieler *

Das erste Spiel startet mit der bekannten Ausgangslage.

Code laufen lassen und schauen ob alles funktioniert

from smartphone_connector import *
device = Connector('https://io.gbsl.website', 'FooBar')
device.configure_playground(
width=100,
height=180,
origin_x=50,
origin_y=0,
color=Colors.BLACK
)

# der weitere Code wird hier eingefügt...

device.disconnect()

2. Sterne *

Der Stern wird als Text-Zeichen mitgegeben. Damit nur der Stern angezeigt wird, werden keine color oder border_color Parameter übergeben.

Der Stern soll vom oberen Rand des Bildschirms nach unten fallen. Wie?

device.add_circle(
text='★',
font_color=Colors.GOLD,
font_size=10,
pos_x=0,
pos_y=180,
radius=3
)

3. Controller *

Achtung!!: Für die Kontrolle werden die Beschleunigungssensoren des Smartphones ausgelesen. Deshalb sollte für diesen Schritt jeweils auf dem Smartphone https://io.gbsl.website aufgerufen werden und die Option "Stream Acceleration" angeschaltet werden.

Nun soll das Rechteck kontrollierbar werden. Dazu schreiben wir eine ähnliche Logik wie beim interaktiven Zeichnen mit den Turtles. Auch hier starten wir wieder eine asynchrone Subscription.

Vorerst wird nur das Grundgerüst erstellt, die Funktion tut aktuell aber noch nichts.

Wichtig Der eingefügte Code muss oberhalb von device.wait() eingefügt werden.

Aufgabe:

  • Überprüfe ob beim Starten des Programms im Terminal in hoher Frequenz "Controller Update" ausgegeben wird.
  • Verwende einen deutschen Funktionsnamen für die Update Funktion.
def on_update():
print('Controller Update')


device.subscribe_async(on_update, 0.05)

device.wait()

4. Highscore *

Der aktuelle Score wird als Text angezeigt. Nach der Konfiguration des Playgrounds fügen wir dem Spiel einen Highscore hinzu.

device.add_text(
pos_x=-40,
pos_y=160,
font_color='white',
font_size=2,
text='Score: 3'
)

4.1 Stern berührt den Boden *

Sobald ein Objekt den Spielfeldrand berührt/überlappt wird eine Nachricht an das laufende Python-Programm geschickt.

Mit device.on('overlap', overlap_function) kann die Nachricht an die Funktion overlap_function in unserem Programm weitergeleitet werden.

Jedes Mal wenn ein Stern den Boden berührt, soll ein Punkt abgezogen werden.

Aufgabe: Was passiert aktuell, wenn:

  • ein Monster den Boden berührt?
  • der Spieler (weisser Balken) den Spielfeldrand berührt?
def overlap_function(data: BorderOverlapMsg):
global score
score = score - 1
device.update_text(
id='score',
text=f'Score: {score}'
)


device.on('border_overlap', overlap_function)

4.2 Zufällige Stern-Symbole

Kapitel 4.2.1

Sollen unterschiedliche Emojis/Bilder für die Sterne zum Einsatz kommen, brauchen wir zwei Dinge:

  • Eine Liste welche alle Sterne, Emojis oder Namen der Bilder entählt.
  • Eine Möglichkeit, ein Zufälliges Element aus einer Liste auszuwählen.

Übrigens: Eine Liste von Symbol-Zeichen kann bspw. unter https://utf8-chartable.de gefunden werden.

Bemerke:

  • Mit choice kann ein zufälliges Element einer Liste abgefragt werden.
  • Passen Sie ihre Existierende Funktion fürs Hinzufügen von Sternen an, es braucht keine neue...
from random import choice
star_symbols = ['✩', '✪', '✫', '✬', '✭', '✮', '✯', '✶', '✺']


def add_star():
symbol = choice(star_symbols)
device.add_circle(
text=symbol,
font_color=Colors.GOLD,
# ...
)

5. Monster *

Nun haben wir ein funktionierendes Spiel, aber es ist noch nicht so anspruchsvoll.

Deshalb soll dem Spiel ein Hindernis eingebaut werden - weniger regelmässig als die Sterne sollen Monster herunterfallen. Monster fallen schneller und ziehen Leben ab, wenn sie den Controller erwischen. Fallen sie aus dem Spielfeld heraus, dann entsteht kein Schaden.

Versuche analog zu den Sternen, eine automatische Monster-Erzeuger zu machen.

def add_monster():
...

6. Tastensteuerung *

Je nach Spiel ist eine Tastensteuerung besser geeignet als die Kontrolle über die Beschleunigungs-Daten des Smartphones. Zudem haben viele Laptops keine Beschleunigungssensoren, so dass wir dort ohnehin eine alternative Kontroll-Möglichkeit brauchen. Um das zu bewerkstelligen, fangen wir die Tastenanschläge ab.

Vorerst erzeugen wir das Grundgerüst:

  • sobald eine Taste (key) empfangen wird, soll die Nachricht an eine Funktion weitergeleitet werden. Diese Funktion heisst im Beispiel on_key und mit device.on('key', on_key) wird die Weiterleitung der Nachricht festgelegt.
  • on_key macht vorerst noch nicht mehr, als zu überprüfen ob die gedrückte Taste left oder right war und gibt dann im Terminal einen Text aus.

Aufgabe:

  1. Überprüfe ob die Tastenanschläge ankommen und ob im Terminal die Texte ausgegeben werden.
  2. Wie kann nun der weisse Balken aktualisiert werden? (Überlege selber, bevor du zum nächsten Schritt gehst)
def on_key(data: KeyMsg):
if data.key == 'left':
print('Nach links')
elif data.key == 'right':
print('Nach rechts')


device.on('key', on_key)

6.1 Tastensteuerung über Knöpfe

Nicht auf jedem Gerät gibt es eine Tastatur (Tablet, Smartphone). Um Dennoch Tasten verfügbar zu machen, können wir klickbare Elemente auf dem Spielfeld positionieren.

Beachte:

  • Durch clickable=True wird das Rechteck zu einem Klickbaren Knopf.

Aufgabe:

  • Füge auch eine Rechts-Taste mit dem Symbol hinzu.
device.add_square(
id='left',
pos_x=-45,
pos_y=5,
text='⇦',
font_color='white',
border_color='white',
size=10,
clickable=True
)

7. Bilder

Damit Bilder als Hintergrund des Playgrounds oder von Objekten verwendet werden können, müssen diese zuerst an die Website übertragen werden. Dazu muss ein neuer Ordner für alle Bilder erstellt werden. Der Name dieses Ordners muss dann beim Konfigurieren des Playgrounds angegeben werden.

Die Projektstruktur sollte in VS Code also etwa so aussehen:

Achtung: Der Befehl device.configure_playground sollte im gesamten Programm nur einmal aufgerufen werden. Passe also den vorhanden Befehl an.

Bemerke:

  • Mit images= (Mehrzahl) wird der Name des Bilder-Ordners angegeben.
  • Mit image= (Einzahl) wird der Name des Bildes (ohne Dateteiendung!) angegeben, welches als Hintergrund für den Playground verwendet werden soll.
device.configure_playground(
width=100,
height=180,
origin_x=50,
origin_y=0,
color=Colors.BLACK,
images='Bilder',
image='Hintergrund'
)

8. Springen

kapitel 7.14

Um mit einer Spielfigur animiert an eine neue Position zu verschieben, kann die Funktion move_to verwendet werden. Diese Funktion kann mit der via Option gekoppelt werden, so dass bspw. auch Sprungeffekte erzeugt werden können.

Achtung: Diese Option ist nur dann geeignet, wenn während der Animation bzw. während des Sprungs keine andere Positionsaktualisierung vorgenommen wird. Für den Spieler (id = player) ist dies also nicht geeignet. Schaue dazu die zweite Option auf der nächsten Seite.

Bemerke:

  • pos= gibt die Endposition an
  • via= gibt eine Zwischenposition an, via welcher dann zur Endposition gefahren wird.
  • time= gibt die Zeit in Sekunden an, bis die Endposition erreicht wird. Alternativ kann auch mit speed= die Geschwindigkeit angegeben werden, mit welcher die Strecke zurückgelegt wird.

Im Beispiel ist die aktuelle Position mit der End-Position identisch. Durch das via entsteht aber eine Art "Sprung"-Effekt, da zuerst die via-Position erreicht wird.

device.move_to(
id='player',
pos=[player_pos_x, 20],
via=[player_pos_x, 50],
time=1
)

9. Sound

Genau so wie bei den Bildern müssen auch wieder zuerst die Soundtracks (.mp3 Dateien) an die Website geschickt werden. Lade dazu passende Soundtracks herunter (Achtung! Beachte die Lizenzen, nicht alle Lieder & Effekte dürfen heruntergladen werden) und verschiebe Sie in einen Ordner "Sound" in deinem Game-Projekt Ordner.

Viele verschiedene Sound-Tracks können zum Beispiel unter https://www.zapsplat.com kostenlos heruntergalden werden.

Mögliche Sounds mit direktem Download-Link finden sich hier:

Die Projektstruktur sollte in VS Code also etwa so aussehen:

Achtung: Der Befehl device.configure_playground sollte im gesamten Programm nur einmal aufgerufen werden. Passe also den vorhanden Befehl an.

device.configure_playground(
audio_tracks='Sound'
)

10. Levels *

Wie beim Highscore wird zu Beginn ein neues Textfeld für das Level hinzugefügt. Bereits jetzt vergeben wir eine id, damit der Text später aktualisiert werden kann.

Aufgabe: Überprüfe ob das Level angezeigt wird.

device.add_text(
id='level',
pos_x=-40,
pos_y=170,
font_color='white',
font_size=2,
text='Level: 1'
)