Scratch-Einstiegskurs – Bühnenbilder und Texte
In diesem fünften und vorerst letzten Tutorial des Scratch-Einstiegskurses gestaltest du eine eigene kleine Geschichte mit Figuren, die sprechen und sich auf unterschiedlichen Bühnenbildern bewegen.
In dieser Blog-Serie sind bereits andere Tutorials erschienen. Ich empfehle dir, diese zu erst durchzuarbeiten, bevor du mit diesem fünften und letzten Tutorial des Scratch-Einstiegskurses beginnst.
- Tutorial 1: Automatische Bewegungen
- Tutorial 2: Bewegung mit der Tastatur
- Tutorial 3: Bewegung mit der Maus
- Tutorial 4: Töne und Klänge
Ausprobieren
Bevor du nun selbst mit dem Programmieren beginnst, kannst du wie gewohnt erst einmal ausprobieren, wie das Programm funktioniert. Starte das Programm dafür über die kleine grüne Flagge.
Kurzanleitung
Zur vollständigen Anleitung wechseln
Mit der Kurzanleitung gelingt dir der schnelle Start in die Programmierung deiner eigenen kleinen Geschichte. Falls du eine ausführlichere Anleitung benötigst, dann schau dir einfach die vollständige Anleitung für das Scratch Programm am Ende dieser Seite an.
Öffne nun den Programmcode des Beispielprogrammes. Du kannst dafür den folgenden Link benutzen: https://scratch.mit.edu/projects/636514187/editor/.
Im Programmcode des Beispielprogrammes findest du alle benötigen Programmsequenzen, um deine eigene Geschichte zu gestalten. Achte dabei wie immer auf die Kommentare, die dir den Einsatz der verschiedenen Scratch Bausteine genauer erklären. Beachte, dass du diesmal sowohl den Programmcode für deine Figuren als auch für das Bühnenbild übernehmen musst.
Nun bist du dran. Überlege dir eine eigene Geschichte. Wähle mindestens drei unterschiedliche Bühnenbilder und zwei Figuren aus, die Teil dieser Geschichte sind. Nutze beim Programmieren die verschiedenen Farben deiner Bühnenbilder, um deine Figur damit interagieren zu lassen.
Wenn du alle Code-Blöcke in dein eigenes Programm übernommen hast, dann kannst du dieses über das kleine grüne Flaggen-Symbol starten.
Überprüfe nun, ob dein Programm funktioniert, wie von dir erwartet. Kannst du deine Figuren durch die Geschichte führen bzw. die Geschichte erzählen lassen? Klappt der Wechsel der Bühnenbilder? Falls nicht alles klappt, wie erwartet, dann nutze doch die vollständige Anleitung am Ende dieses Beitrages, um Schritt für Schritt durch die Erstellung deiner Scratch Geschichte geführt zu werden.
Bist du noch auf der Suche nach einer kleinen Herausforderung für deine Geschichte? Dann versuche doch noch ein paar der folgenden Ideen umzusetzen:
- Baue deine Geschichte zum Kinofilm um
- ergänze einen Vorspann und einen Abspann für deine Geschichte, indem du eigene Bühnenbilder zeichnest
- lass‘ deine Geschichte automatisch abspielen, ohne das eine Person die Figuren mit der Maus oder der Tastatur steuern muss
- Ergänze passende Töne und Klänge in deiner Geschichte
Gut gemacht! Du hast nun alle Programmbausteine kennengelernt, die du benötigst um kleine Geschichten und Spiele zu erstellen. Du kannst nun:
- eigene Figuren zeichnen oder vorhandene Figuren integrieren
- mit mehreren Bühnenbildern arbeiten
- Figuren automatisch, mit der Tastatur oder mit der Maus bewegen
- Töne und Klänge erklingen lassen
- Figuren mit Text „sprechen“ lassen
- sich dein Programm mit Variablen verschiedene Sachen „merken“ lassen
Ab sofort sind deiner Phantasie keine Grenzen mehr gesetzt und du kannst dir nun eigene Geschichten und Spiele ausdenken!
Vollständige Anleitung
Schritt 1: Geschichte ausdenken
In diesem Tutorial wirst du dir eine eigene Geschichte ausdenken. Überlege dir deshalb, mit welchen Figuren du arbeiten möchtest und welche Abenteuer deine Figuren bestreiten sollen. Die Geschichte sollte so gestaltet sein, dass diese an mindestens drei verschiedenen Orten spielt und mindestens zwei Figuren daran teilhaben. Wenn du deine Geschichte noch umfangreicher gestalten möchtest, ist das natürlich nicht verboten, sondern gern gesehen. 🙂
Wenn du mit deinen Vorüberlegungen fertig bist, dann kannst du nun wie gewohnt ein neues Projekt in Scratch öffnen. Nutze dafür einfach den folgenden Link:
Schritt 2: Bühnenbilder einbinden
In deiner Geschichte wirst du das erste Mal mit mehreren Bühnenbildern arbeiten. Das geht ganz einfach. Wähle dir zunächst über die Bühnenbild-Auswahl rechts unten dein erstes Bühnenbild aus:
Nach dem du auf die Schaltfläche „Hintergrund wählen“ geklickt hast, öffnet sich die Übersicht aller vorhandenen Bühnenbilder. Wähle dir eines der Bilder aus und klicke es an.
Nachdem du das Bühnenbild ausgewählt hast, bist du im „Bühnenbild-Modus“. Du erkennst das an verschiedenen Dingen. Zum einen ist der Bühnenbild-Bereich rechts unten nun farbig umrandet:
Zum anderen steht dir links bei den Programmierblöcken der Bereich „Bewegung“ nicht zur Verfügung. Außerdem gibt es den Reiter „Kostüme“ nicht. Stattdessen gibt es jedoch einen Reiter „Hintergrundbilder“.
Achtung: Falls du nicht im Bühnenbild-Modus bist, kannst du ganz einfach dahin gelangen. Dafür musst du nur rechts unten im Bereich „Bühne“ dein Hintergrundbild kurz anklicken.
Nun solltest du noch zwei weitere Bühnenbilder ergänzen. Dafür gehst du genau so vor, wie du beim Einfügen des ersten Bühnenbildes vorgegangen bist: Klicke die Bühnenbild-Schaltfläche an und wähle dir ein weiteres passendes Bühnenbild aus. Wenn du damit fertig bist, wechsle in den Reiter „Hintergrundbilder“. Dieser sollte nun so oder ähnlich aussehen:
Du siehst nun deine Hintergrundbilder sowie ein zusätzliches Hintergrundbild mit dem Namen „Hintergrund1“. Dabei handelt es sich um den Standard-Hintergrund. Dieser wird zusammen mit der Katze beim Erstellen eines neuen Scratch Programmes immer automatisch eingefügt. Du kannst das Standard-Hintergrundbild löschen, indem du es anklickst und anschließend das kleine Papierkorbsymbol verwendest.
Schritt 3: Bühnenbild programmieren
Als nächstes werden wir den benötigten Programmcode für das Bühnenbild einfügen. Das ist ziemlich einfach. Wechsle dafür zunächst in den Reiter „Skripte“ deines Bühnenbildes.
Nun kannst du den folgenden, recht übersichtlichen Code ergänzen:
Der Programmcode sorgt dafür, dass du zum Start-Hintergrund deiner Geschichte wechselst, sobald dein Scratch Programm gestartet wird. Wähle hier das Bühnenbild aus der Liste aus, das in deiner Geschichte als erstes angezeigt werden soll.
Schritt 4: Figuren auswählen
Nun wird es Zeit die Figuren auszuwählen, die Teil deiner Geschichte sein sollen. Unsere Beispiel-Geschichte handelt von einem Ritter auf der Suche nach seiner Prinzessin. Du kannst aber gern in deiner Geschichte eigene andere Figuren nutzen. Wir löschen zunächst die Standard-Figur der Katze über das kleine Papierkorbsymbol und nutzen anschließend die Figurenauswahl, um eine passende Figur herauszusuchen.
Nach dem die erste Figur eingefügt wurde, wird auf dem gleichen Weg noch eine zweite Figur ergänzt. Im Anschluss sollte deine Programmieroberfläche nun in etwa so aussehen:
Wenn du möchtest, kannst du nun noch anpassen, wie groß deine Figuren sein sollen und in welche Richtung diese beim Start deiner Geschichte schauen sollen. Klicke dafür die gewünschte Figur in der Figurenübersicht an und verändere anschließend die Einstellungen für Größe und/oder Richtung.
Schritt 5: erste Figur programmieren – Vorbereitung der Figur
Wähle nun deine erste Figur aus, indem du diese in der Figurenübersicht anklickst. Im Fall unserer Beispielgeschichte ist diese Figur der Ritter.
Füge nun den folgenden Programmcode in dein Programm ein:
Der Codeblock „gehe zu x: -164 y: -83“ platziert die Figur an einer Startposition in der unteren linken Ecke. Wenn deine Figur an einer anderen Stelle starten soll, musst du die Werte für x und y entsprechend anpassen. Mit dem Block „setze Richtung auf 90 Grad“ wird dafür gesorgt, dass die Figur zu Beginn des Programmes nach rechts schaut. Wenn deine Figur stattdessen nach links schauen soll, musst du den Wert für die Richtung auf „-90“ setzen.
Schritt 6: erste Figur programmieren – Rand beachten
Während der gesamten Geschichte kann die erste Figur – also in unserem Fall den Ritter – mit der Maus über das Bühnenbild bewegt werden. Damit die Figur das Bühnenbild aber niemals über den Rand hinaus verlassen kann, muss dein Programm dies verhindern. Achte wieder darauf, dass du in der Figurenübersicht die richtige Figur ausgewählt hast und ergänze dann den folgenden Code:
Schritt 7: erste Figur im ersten Bühnenbild programmieren
Nun folgt die Programmierung deiner Figur im ersten Bühnenbild. Dafür musst du ganz schön viel Programmcode ergänzen. Du kannst diesen für deine Figur übernehmen, ich erkläre dir im Anschluss Schritt für Schritt, was die einzelnen Programmabschnitte machen:
Der Block „warte bis Bühnenbild[Name] = Castle 2“ sorgt dafür, dass der nachfolgende Programmcode erst ausgeführt wird, wenn das entsprechende Hintergrundbild sichtbar ist. Wichtig ist, dass du hier statt „Castle 2“ den exakten Namen deines ersten Bühnenbildes schreibst. Wenn du dir nicht mehr sicher bist, wie dieser lautet, kannst du die Bühnenbildübersicht anklicken und dir deine Hintergründe noch einmal im Reiter „Hintergrundbilder“ anschauen. Vergiss anschließend nicht zurück in die Programmieroberfläche deiner ersten Figur zu wechseln, indem du die Figur in der Figurenübersicht anklickst.
Mit den beiden Blöcken „sage … für 2/4 Sekunden“ kannst du deine Figur nun Text sprechen lassen. Sei hier kreativ und erzähle deine eigene Geschichte.
Anschließend programmierst du die Bewegung deiner Figur. Dafür musst du zunächst eine „wiederhole fortlaufend“-Schleife um den nachfolgenden Programmcode spannen. Der erste Teil des darin enthaltenen Codes sorgt dafür, dass sich die Figur bei Mausklick bewegt:
Der zweite Teil des enthalten Programmcodes steuert den Wechsel des Hintergrundbildes aus. Für unser erstes Bühnenbild („Castle 2“) gilt, sobald eine bestimmte Farbe berührt wird, wechselt das Bühnenbild zum zweiten Hintergrund („Castle 1“). Außerdem wird die Figur automatisch auf die Startposition für den zweiten Hintergrund platziert. (gehe zu x: -164 y: -83) Mit dem Programmcode „stoppe dieses Skript“ sorgen wir außerdem dafür, dass die Figur erst einmal nicht mehr per Mausklick weiterbewegt werden kann.
Wähle für dein Programm einen eigenen Bereich deines ersten Hintergrundbildes, bei dem der Wechsel zum zweiten Bild erfolgt. Falls dir die Auswahl der Farbe nicht so einfach fällt, kannst du auch die Pipette nutzen. Klicke dafür auf das Farbfeld des Blockes „wird Farbe … berührt“ und anschließend auf das Pipettensymbol. Deine Programmoberfläche wird nun etwas abgedunkelt und du kannst im Vorschaubild deines Programmes oben rechts auf die Stelle mit der gewünschten Farbe klicken. Diese wird nun automatisch im Block eingefügt.
Schritt 8: erste Figur im zweiten Bühnenbild programmieren
Als nächstes wird nun der Programmcode für das zweite Hintergrundbild programmiert. Dieser Programmcode ist dem Programmcode aus Schritt 7 sehr ähnlich. Am Anfang wird wieder gewartet, bis das richtige Bühnenbild aktiv ist. Wichtig ist, dass du hier die Bezeichnung „Castle 1“ mit dem Namen deines zweiten Bühnenbildes ersetzt.
Auch in diesem Programmcode folgt anschließend ein wenig Geschichte und Textausgabe. An dieser Stelle kannst du die Geschichte gern nach deinen Vorstellungen anpassen. Dann wird wieder die Bewegung deiner Figur beim Klicken der Maustaste und der Wechsel zum dritten Bühnenbild programmiert. Suche dir auch hier wieder eine passende Farbe aus, die deine Figur berühren soll.
Schritt 9: erste Figur im letzten Bühnenbild programmieren
Nun fehlt nur noch der Programmcode für das dritte und letzte Bühnenbild. In unserem Beispielprogramm ist dieser ganz einfach, denn der Ritter hat nun seine Prinzessin gefunden und spricht seine Freude darüber aus. Wichtig ist nur, dass zu Beginn wieder gewartet wird, bis das dritte Bühnenbild aktiv ist. Ersetze auch hier wieder den Namen „Castle 3“ durch den Namen deines Bühnenbildes.
Falls du in deiner Geschichte noch mehr Hintergrundbilder einbauen möchtest, dann kannst du das natürlich gern tun. Lehne deinen Programmcode dafür einfach an den Code der Schritte 8 bzw. 9 an.
Schritt 10: zweite Figur programmieren
Als letztes programmieren wir nun noch die zweite Figur. In unserem Beispiel ist das die Prinzessin, die der Ritter am Ende seiner Suche findet. Sorge zunächst dafür, dass deine zweite Figur aktiv ist, indem du diese in der Figurenübersicht anklickst.
Deine Programmieroberfläche sollte nun wieder leer sein, da wir bisher keinen Programmcode für die zweite Figur geschrieben haben. Du kannst nun einen beliebigen Programmcode für deine zweite Figur ergänzen. Für unsere Prinzessin gestalten wir den Programmcode so, dass die Prinzessin zunächst versteckt wird und erst auf dem dritten und letzten Bühnenbild erscheint.
Der Scratch Programmcode für die Prinzessin ist dabei in zwei Abschnitte unterteilt. Im ersten Abschnitt wird die Figur an einer Startposition platziert. Dabei wird auch dafür gesorgt, dass die Prinzessin in die richtige Richtung schaut und das passende Kostüm trägt. Wichtig ist, dass die Figur mit dem Block „verstecke dich“ versteckt wird. Das sorgt dafür, dass die Prinzessin auf den ersten beiden Bühnenbildern nicht sichtbar ist.
Der weitere Programmcode wartet nun darauf, dass der Ritter das letzte Bühnenbild erreicht. Sobald es soweit ist, zeigt sich die Figur und drückt ihre Freude durch einen kurzen Aufruf und einen Wechsel ihres Kostüms aus.
Geschafft!
An dieser Stelle hast die Programmierung deiner eigenen kleinen Geschichte geschafft! Herzlichen Glückwunsch – das ist eine tolle Leistung! Wenn du möchtest, kannst du noch beliebige weitere eigene Bühnenbilder und/oder Figuren ergänzen und so deine Geschichte weiter ausgestalten.
