Klick – Klick – Code
Lustige Basteleien mit Scratch für die ganze Familie
Mit der visuellen Programmierumgebung Scratch lassen sich ohne Programmierkenntnisse kinderleicht Spiele und interaktive Geschichten zusammenbauen. In der aktuellen Version klappt das auch auf Tablets.
Mit Scratch programmiert man, indem man bunte Bausteine aneinanderschiebt: Sie enthalten Schleifen, Verzweigungen und Anweisungen. Wir zeigen anhand von zwei Projekten, wie kinderleicht man damit erste Erfolge feiert. Machen Sie sich zunächst mit dem Programmaufbau und dem Scratch-Prinzip vertraut. Unser erstes Projekt unterstützt Sie dabei. Anschließend erkunden Sie eine der neuen Erweiterungen: Eine Anbindung an Google Translate kombiniert mit der Sprachausgabe. In Windeseile basteln Sie einen eigenen Hosentaschenübersetzer. Der Nachwuchs hilft je nach Alter beim Auswählen der Blöcke oder indem er bestimmt, wie die im Projekt vorkommenden Figuren und Hintergründe aussehen sollen.
Zum Kasten: Der c’t-Tipp für Kinder und Eltern
Um Scratch-Projekte zu bearbeiten, benötigen Sie einen aktuellen Webbrowser. Falls Sie mit einem Tablet arbeiten, sollten Sie auf eine Displaygröße von mindestens 10 Zoll achten. Wenn Sie die Scratch-Startseite aufrufen, starten Sie den Editor, indem Sie auf „Entwickeln“ klicken. Einfacher gehts, wenn Sie ein Lesezeichen mit der Adresse des Editors anlegen (ct.de/yerk). Obwohl Scratch ohne Konto funktioniert, empfiehlt es sich, eines anzulegen. Dann können Sie Ihre Projekte online speichern und später am Smartphone abspielen.
Editor und Code-Blöcke kennenlernen
Im linken Bereich des Editors befinden sich die verschiedenfarbigen Code-Blöcke. Sie sind in acht Kategorien einsortiert. In zwei weiteren Reitern am oberen Rand finden Sie Kostüme beziehungsweise Hintergründe und Klänge – dazu später mehr. Im mittig gelegenen Skriptfenster puzzeln Sie Ihre Skripte aus den Blöcken zusammen. Der rechte Fensterbereich ist zweigeteilt: Auf der oberen Bühne zeigt Scratch eine Vorschau des Projekts an. Mit den drei Knöpfen rechts oberhalb des Bühnenbereichs stellen Sie die Größe der Bühnenansicht beziehungsweise die Vollansicht ein. Unter dem Bühnenbereich zeigt Scratch Elemente wie Figuren, deren Eigenschaften und die Bühne samt Bühnenbilder, die im Programm vorkommen.
Scratch startet immer mit einem leeren Skriptfenster und der Scratch-Katze auf weißem Hintergrund. Alle Objekte lassen sich mithilfe der Blöcke programmieren, indem man die Code-Schnipsel an- und untereinander fügt. Anders als bei textuellen Programmiersprachen bleiben einem Tippfehler erspart. Das ist insbesondere für jüngere Kinder hilfreich. Vor unsinnigen Kombinationen schützt eine visuelle Programmiersprache indes nicht.
Es gibt verschiedene Blockarten in Scratch: Befehlsblöcke, Kontrollblöcke, Ereignisblöcke und Blöcke, die einen Ergebniswert liefern. Wenn Objekte ihr Aussehen oder ihre Position verändern sollen, benötigt man Befehlsblöcke. Mit diesen kann man zum Beispiel die Katze vorwärts laufen und sie miauen lassen. Kontrollblöcke sind für den logischen Aufbau eines Skripts zuständig. Sie umklammern andere Code-Bausteinchen. Ereignisblöcke benötigt man, um das Skript zu starten: Die Figur soll sich beispielsweise erst dann vorwärts bewegen, wenn der Nutzer die Leertaste auf der Tatstatur drückt.
Scratch ausprobieren: Ein erstes Projekt
Für ein erstes Projekt nutzen Sie die vorhandene Figur: Die Katze soll sich 50 Schritte vorwärts bewegen, wenn man sie anklickt beziehungsweise antippt. Suchen Sie in der Kategorie Ereignis den „Wenn diese Figur angeklickt wird“-Block und ziehen Sie ihn in das Skriptfenster. Das ist der Startbaustein. Als Nächstes benötigen Sie aus der Kategorie Bewegung den Block „gehe 10er Schritt“. Ziehen Sie ihn unter den Startblock. Sobald Sie einen grauen Schatten hinter dem Puzzleteil sehen, können Sie es loslassen. Es rastet automatisch ein. Klicken oder tippen Sie auf die Katze und schauen Sie ihr zu, wie sie sich nach rechts bewegt. Hier kann selbst der jüngste Nachwuchs mitmachen: Sie zeigen auf den richtigen Block, der Nachwuchs puzzelt und stupst das Kätzchen an.
Bisher hat sich das Objekt jedoch nur um zehn Schritte vorwärtsbewegt. Geben Sie im Zahlenfeld des Blocks 50 ein. Testen Sie erneut, was mit der Katze passiert, wenn Sie sie anstupsen. Alternativ können Sie sich an Ihrer ersten Schleife versuchen. In der Kategorie Steuerung finden Sie den Block „wiederhole 10 mal“. Er sieht aus wie eine nach rechts geöffnete Klammer. Ziehen Sie den Block zwischen die beiden schon vorhandenen Code-Blöcke. Die Klammer umschließt den „gehe 10er Schritt“-Block. Jetzt würde die Katze allerdings 100 Schritte laufen! Ändern Sie daher den Wert des Schleifenblocks auf 5.
Es gibt noch eine weitere Variante, mit der man das Kätzchen 50 Schritte nach rechts laufen lassen kann. Als Startblock kommt wieder der „Wenn diese Figur angeklickt wird“-Block zum Einsatz. Darunter ziehen Sie aus der Kategorie Bewegung den „ändere x um 10“-Block. Ändern Sie den Wert auf 50 oder fügen wieder eine Schleife ein.
Wo liegt der Unterschied in beiden Varianten? Beim ersten Versuch läuft die Figur immer in die eingestellte Richtung. Die zweite Variante verrückt die Figur um den angegebenen Wert auf der x-Achse. Unter der Bühne sehen Sie die aktuelle x- und y-Position der Figur. Eine Besonderheit: Der Ursprung liegt in der Mitte der Bühne und nicht links unten. Die Bühne ist 480 Pixel breit und 360 Pixel hoch, links unten befindet sich also die Koordinate –240/–180. Falls Ihnen die Katze mal entwischen sollte, setzen Sie die Werte wieder auf null, und schon erscheint die Figur in der Mitte der Bühne. Sie können alternativ den Bewegungsblock „gehe zu x:0 y:0“ verwenden. Falls im Block andere Werte stehen sollten, tragen Sie die gewünschten Werte ein. Ein Klick oder Tipp auf den Block führt diesen einmalig aus. Somit können Sie für jeden Block testen, was er bewirkt, ohne ihn ins Skriptfenster ziehen zu müssen.
Die Bewegungsrichtung einer Figur muss nicht ihrer Blickrichtung entsprechen. Sie lässt sich frei definieren. Das zugehörige Eingabefeld befindet sich unter der Bühne. Zu Beginn steht dort in unserem Beispiel ein Wert von 90. Damit befindet sich für die Katze der rechte Bühnenrand in Blickrichtung. Nach einem Klick auf das Eingabefeld erscheint ein Auswahlkreis, mit dem man die Richtung festlegen kann. Das funktioniert für Werte zwischen 0 und 180 (im Uhrzeigersinn) beziehungsweise –1 und –179 (gegen den Uhrzeigersinn). Alternativ tippt man den gewünschten Wert in das Feld. Wenn für die Katze der untere Bühnenrand in Blickrichtung liegen soll, würde sie auf diese Weise auf dem Kopf stehen. Um das zu verhindern, klickt man den durchgestrichenen Pfeil an. Testen Sie verschiedene Richtungen. Wie lauten zum Beispiel die Einstellungen, wenn die Figur weiterhin nach rechts blicken, aber der linke Bühnenrand für sie in Laufrichtung liegen soll?
Kostüme und eine Stimme für die Katze
Zum Abschluss der ersten Übung soll die Katze animiert werden und nach jedem Schritt miauen. Wechseln Sie im linken Menü auf den Reiter Kostüme. Dort sehen Sie, dass die Figur zwei sogenannte Kostüme besitzt. Dabei handelt es sich nicht nur um Bekleidung, sondern um unterschiedliche Posen oder Accessoires. Eine Figur kann zwar mehrere Kostüme besitzen, aber immer nur eines auf der Bühne tragen. Wenn Sie beide im Wechsel anklicken, sehen Sie eine ganz simple Animation: Es scheint, als würde das Kätzchen laufen. In diesem Menü können Sie im integrierten Editor nicht nur das Aussehen der Figur verändern – ihr sozusagen ein neues Kostüm anziehen –, sondern es auch um unterschiedliche Posen ergänzen. Die einzelnen Körperpartien der Katze lassen sich problemlos auseinandernehmen und neu in Pose setzen. Wie wäre es mit einer blauen Katze? Sie können außerdem weitere Kostüme hinzufügen, indem Sie unten links auf den Kreis mit dem stilisierten Katzengesicht klicken. Alternativ laden Sie eigene Bilder hoch (JPG, PNG, SVG) oder nehmen ein Foto auf.
Weiter geht es im Skriptfenster. In der Kategorie Aussehen befindet sich der Block „wechsle zum nächsten Kostüm“. Ziehen Sie diesen unter den bereits vorhandenen Bewegungsblock. Falls Sie mit der Schleife gearbeitet haben, muss der neue Block mit in die Klammer. Wenn Sie die Katze jetzt antippen, läuft sie nach rechts – wenn auch etwas ungelenk.
Damit die Katze miaut, wählen Sie aus der Kategorie Klang den Block „spiele Klang Miau ganz“. Achtung: Dieser Befehl blockiert das erneute Ausführen des „Wenn diese Figur angeklickt“-Skripts so lange, bis der Klang vollständig abgespielt ist. Flüssiger klappt es mit dem Block „spiele Klang Miau“. Spielen Sie mit unterschiedlichen Kombinationen herum, um die Unterschiede zu entdecken.
Falls Ihnen das Miauen nicht gefällt, können Sie dem Kätzchen eine andere Stimme zuordnen. Klicken Sie im linken Menü auf den Reiter „Klänge“. Dort steht ein einfacher Soundeditor zur Verfügung. Mit diesem können Sie das Stimmmodell trimmen und mit Effekten versehen. Stellen Sie doch mal eine Roboter-Stimme ein. Über den blauen Button unten links fügen Sie weitere Klänge hinzu. Eine quakende Katze hört man auch nicht alle Tage. Sie können zudem eigene Audiodateien hochladen (AIFF, AU, MP3 und WAV). Wenn Sie mit einem Tablet arbeiten oder der Rechner über ein angeschlossenes Mikrofon verfügt, können Sie in Scratch sogar eigene Aufnahmen anfertigen.
Der Taschenübersetzer
Zugegeben, Übersetzer-Apps gibt es viele. Und sie bringen zumeist viel mehr Sprachen und Optionen mit. Aber sie sind eben nicht selbst konstruiert.
Der Übersetzer in diesem Beispiel soll den eingegebenen Text nicht nur in der Fremdsprache anzeigen, sondern ihn auch per Sprachausgabe vorlesen. Im Urlaub bleiben Tablet und Rechner getrost im Hotel – für den Live-Betrieb genügt das Smartphone. Sie benötigen allerdings eine Internetverbindung, nicht nur für Scratch selbst, sondern auch für Übersetzung und Text-to-Speech-Funktion. Das Projekt taugt zudem für die Urlaubsvorbereitung, um gängige Sätze zu üben. Bereit zum Scratchen?
Starten Sie ein neues Projekt. Klicken Sie unten auf das blaue Kästchen, um Scratch mit Erweiterungen auszustatten: Fügen Sie „Text zu Sprache“ und „Übersetzen“ hinzu. Beide Elemente zeigt Scratch nun unter den Standardkategorien an.
Jetzt geht es an den Code für das Übersetzerprogramm. Ziehen Sie das Ereignis „Wenn diese Figur angeklickt wird“ ins Skriptfenster. Nun müssen Sie die Ausgangssprache für die Sprecherstimme definieren. In der Kategorie Text-zu-Sprache gibt es dafür den Block „setze Sprache auf …“. Ziehen Sie ihn unter den Startblock. Aus derselben Kategorie folgt der Block „sage …“. Ändern Sie den Text in „Was soll ich übersetzen?“. Zeit für einen ersten Testlauf: Schalten Sie die Lautsprecher ein und tippen Sie das Kätzchen an.
Bisher fehlt noch ein Eingabefeld, in das Sie den zu übersetzenden Text eintippen. Sie benötigen einen „frage … und warte“-Block. Er versteckt sich in der Kategorie Fühlen. Ziehen Sie ihn ans Ende des Skripts und ändern Sie den Text in „Was soll ich übersetzen?“. Testen Sie Ihr Skript erneut. Jetzt zeigt die Katze die Frage in einer Sprechblase und Sie erhalten ein Textfeld. Scratch speichert Ihre Eingabe als Antwortwert. Diesen Wert benötigen Sie im weiteren Skript.
Weiter geht es mit der Übersetzung. Derzeit ist noch eine deutsche Sprecherstimme eingestellt. Um das zu ändern, ziehen Sie den „setze Sprache auf …“-Block ans Ende des Skripts. Anschließend stellen Sie die gewünschte Fremdsprache ein. Wählen Sie aus der Kategorie Aussehen den „sage …“-Block, um später eine visuelle Textausgabe zu erhalten. Anstelle eines vorgefertigten Texts soll der übersetzte Antwortwert aus der vorherigen Texteingabe erscheinen. Ziehen Sie aus der Kategorie Übersetzen den Block „Übersetze … nach …“ in das Textfeld des „sage …“-Blocks. In der Kategorie Fühlen finden Sie den unter dem „frage …“-Block den zugehörigen „Antwort“-Block. Ziehen Sie diesen in das Textfeld des Übersetzen-Blocks. Damit Sie auch wissen, wie das Wort oder der Satz in der Fremdsprache klingt, fehlt noch eine Sprachausgabe: Greifen Sie sich aus der Kategorie Text-zu-Sprache den „sage …“-Block. Klicken Sie mit der rechten Maustaste auf den Übersetzer-Block, duplizieren Sie ihn und ziehen Sie das Duplikat in das Textfeld. Sie haben soeben Ihren ersten verschachtelten Code-Abschnitt zusammengebaut: Ein guter Zeitpunkt, um auszuprobieren, ob alles korrekt funktioniert. Testen Sie verschiedene Begriffe und Sprachkombinationen. Lassen Sie die deutsche Frage zum Beispiel von einem französischsprachigen Sprecher vorlesen.
Falls Sie langsam genug von der Katze haben, suchen Sie der Figur ein anderes Kostüm aus – zum Beispiel die Landesflagge der eingestellten Fremdsprache. Falls Sie Begriffe nicht nur in eine Sprachrichtung übersetzen lassen wollen, basteln Sie einen bidirektionalen Übersetzer. Rechts neben dem Skriptfenster fügen Sie weitere Figuren zu Ihrem Programm hinzu und löschen vorhandene. Mittels Rechtsklick duplizieren Sie die Figur samt zugehörigem Code. Passen Sie noch jeweils Kostüme sowie Spracheinstellungen an – zum Beispiel Flaggen in der jeweiligen Ausgangssprache. Schon können Sie sich mit Ihrer Urlaubsbekanntschaft unterhalten.
Jetzt gilt es noch, den Übersetzer – ohne Editor – auf das Smartphone oder Tablet zu bekommen. Jedes online gespeicherte Scratch-Projekt können Sie im Webbrowser öffnen: Nutzen Sie die Web-Adresse ohne „/editor“. Maximieren Sie die Ansicht für eine schönere Darstellung. Spätestens, wenn Sie auf die Sprachausgabe von „Was soll ich übersetzen?“ mithilfe der Spracheingabefunktion Ihrer Bildschirmtastatur antworten, fühlen Sie sich ein wenig wie auf der Enterprise – oder endlich im Urlaub angekommen.
Animierte Urlaubskarte
Wenn Sie ohnehin gerade im Urlaub sind, verschicken Sie dieses Mal doch eine animierte Urlaubspostkarte. Knipsen Sie mit Ihrem Smartphone oder Tablet ein Foto vom Strand, einer Sehenswürdigkeit oder einem Wochenmarkt! Das wird der Hintergrund beziehungsweise das neue Bühnenbild Ihres nächsten Scratch-Projekts. Fügen Sie Figuren hinzu, denen Sie weitere Urlaubsfotos als Kostüme zuordnen. Nehmen Sie für jede Figur Audiodateien auf, zum Beispiel Umgebungsgeräusche oder einen fröhlichen Urlaubsgruß der Kinder. Jetzt fehlen nur noch Skripte für die einzelnen Figuren. Zusätzlich könnten Sie noch ein Skript einbauen, das einen Erklärtext auf den Bildschirm zaubert und per Sprachausgabe vorliest. Damit wissen Daheimgebliebene, dass sie mit der Karte herumspielen sollen: Fertig ist die animierte Urlaubskarte. Auch Einladungskarten lassen sich mit Scratch gestalten. Scratchen Sie drauflos! (apoi@ct.de)
Scratch-Editor: ct.de/yerk