Etoys herunterladen =================== Wir benutzen die portable Version von Etoys, die auf Windows, Linux und Mac functioniert. Sie kann [hier](http://www.squeakland.org/content/installers/Etoys-To-Go-5.0.zip) herunter geladen werden. In der heruntergeladenen Datei befindet sich ein Ordner **Etoys-To-Go 5.0.app**. Dieser Ordner muss dorthin kopiert werden, wo die zukünftigen Spiele gespeichert werden sollen. Z.B. auf einen USB-Stick oder in den Dokumente-Ordner. (Es gibt auch Versionen zum Installieren: [squeakland.org](http://www.squeakland.org/download/)) Etoys starten ============= - Im Betriebssystem Windows: In dem Ordner **Etoys-To-Go 5.0.app** befinden sich die Datei **Etoys.exe**. Diese muss doppelt geklickt werden. - Im Betriebssystem Linux: In dem Ordner **Etoys-To-Go 5.0.app** befinden sich die Datei **etoys.sh**. Diese muss ausgeführt werden. - Im Betriebssystem Mac habe ich keine Ahnung. Nach einer Weile öffnet sich dann die Entwicklungsumgebung.  Mit der oberen Leiste von Etoys lohnt es sich zu experimentieren. Die Sprache ändert man, indem man auf  klickt. Ich verwende Deutsch. Im folgenden Bild zeigen Pfeile auf Zahlen und Farben. Diese kann mann auch verändern und sehen, was es für Folgen hat.  Wir werden diese Bausteine im Folgenden benutzen. Pong Projekt anfangen ===================== Pong, weil es Elemente hat, die man in vielen Spielen braucht: - Bewegung - Kollision - Punktestand = Zustand - Tastatur Zuerst machen wir ein neues Projekt.  Pong ==== Pong ist wie Tennis. Auf beiden Seiten befinden sich Schieber der Spieler. Der Ball prallt an den Schiebern ab. Wenn er aber hinter deinen Schieber bis zum Rand kommt, bekommt der Gegner einen Punkt. So ähnlich wird es aussehen:  Teilprobleme, die zusammen das große Problem lösen, wie man Pong baut: - [ein Ball, der sich bewegt](#ballerstellen) - [zwei Schieber, die man steuern kann](#einenschiebererstellen) - [dass der Ball an den Schiebern abprallt](#ballamschieberabprallen) Vielleicht auch auch noch - [Punkteanzeigen für die Spieler](#punktezhlen) Ball Erstellen ============== Also machen wir einen Ball. Form und Farbe sind egal:   klicken, dann kann der Ball mit der Rechten Maustaste angeklickt werden:  Die Halos [Häilos gesprochen], die um den Ball erscheinen, haben auch eine Hilfe und sind nützlich[Das heißt: wenn du viel mit Etoys erreichst, wirst du irgendwann mal alle benutzt haben. Also klicke alle an und sieh was passiert. Unten links ist der Mülleimer.]. Der Pfeil ist die Richtung und der blaue Kreis ist der Drehmittelpunkt. Momentan heißt der Ball aber nicht **Ball** sondern **Zeichnung**. Deswegen wird er umbenannt. Dann wird er später leichter gefunden.  Der Ball ist ein Objekt, das man rumschieben und mit der Maus anfassen kann. Jedes Objekt kann etwas tun. Um das Verhalten zu sehen, muss man in das Objekt reinsehen. Also klicken wir auf das .  Den Ball Bewegen ================ Damit der Ball selbst was macht (hüstel: automatisches, eigenständiges Verhalten), öffnen wir die Kategorie **Skripte**.  In den Skripten (keines da bis jetzt), steckt das eigene Verhalten (keines da bis jetzt). Also muss ein neues Skript her. Anklicken, rausziehen, auf die Welt fallen lassen.  Sobald  über der Welt losgelasssen wird, entsteht . Gleich noch weitere Bestandteile hinzufügen:  Und mir zuliebe nenne ich das, was der Ball tun soll, **bewegen** und füge das Abprallen am Rand hinzu.   befindet sich in der Kategorie **Bewegung**.  Jetzt kann man auf die Uhr  klicken und das Skript läuft automatisch oder man kann es anhalten. Wenn man auf **Normal** klickt, kann man auch einstellen, dass das Skript immer wenn die Maus drüber ist, ausgeführt wird oder einmal, wenn das Projekt geöffnet oder geschlossen wird. Bewegt sich nicht der Ball sondern etwas anderes? Dann könntest du das gemacht haben:  Da steht, dass der **Skripteditor** sich bewegen soll und nicht der Ball. Das passiert, wenn du auf das  vom Skripteditor drückst, also nicht den Ball ausgewählt hast.  Wenn sich der Ball erstmal bewegt, ist 0 keine sehr spannende Richtung. Verändere die Richtung so, dass sie dir gefällt!  30 Grad ist eine Richtung, die mir zusagt. Die Richtung kann auch mit dem grünen Pfeil in der Ballmitte verändert werden. Wenn du die Maus lange auf den Pfeil hältst, sagt er dir, dass du die Umschalttaste beim Klicken ziehen musst, um ihn zu verändern. Das ist die Taste, die Buchstaben groß macht. [Meinen Projektstand Herunterladen](pong-zwischenstaende/Pong.001.pr) Geschwindigkeit Einstellen ========================== Der Ball wackelt und bewegt sich langsam. Man kann die Skriptgeschwindigkeit einstellen, damit er nicht ruckt. Drücke lange auf die Uhr :  Dein Auge nimmt so 30 Bilder/Sekunde wahr. 25 ist also ausreichend für Menschen. Etoys erneuert das Bild 50 Mal/Sekunde, wenn es nicht viel zu tun hat. Du kannst dir anzeigen lassen, wie of Etoys maximal Bewegungen in der Sekunde anzeigen kann. Ein Bild nennt man Frame. Ein Bildschirm zeigt 60 Bilder/Sekunde an, also 60 Frames/Sekunde. Daraus entsteht dann eine flüssige Bewegung.  Das Projekt Speichern =====================   Immer speichern, wenn du das Gefühl hast, etwas geschafft zu haben, was du nicht nochmal neu machen möchtest. Das klappt bei mir ganz gut. Jetzt ist der Projektstand im Ordner **Etoys** gespeichert. Dieser befindet sich neben dem Ordner **Etoys-To-Go 5.0.app**. [Solltest du eine installierte Version haben, ist der Ordner **Etoys** im Dokumente-Verzeichnis.] Alle weiteren Speicherstände werden dort abgespeichert. Wenn du jemandem dein Spiel gibst, gibst du ihm am Besten gleich beide Ordner. Wenn er auch Etoys hat, reicht deine letzte Projekt-Datei, die bei mir gerade **Pong.001.pr** heißt. Die Zahl am Ende wird hochgezählt wenn gespeichert wird. So sieht es gerade bei mir aus:  Einen Schieber Erstellen ======================== Wenn wir erstmal einen Schieber haben, können wir ihn duplizieren. So entsteht später der [zweite Schieber](#zweitenschiebererstellen) schon mit allen den Skripten aus dem ersten Schieber. Weniger Arbeit. Erster Schieber: 1.  Den Schieber malen [wie wir einen Ball gemalt haben](#ballerstellen). 2.  die Größe verändern, 3.  und richtig nennen. Den Schieber bewegen ==================== Das funktioniert wie [den Ball zu bewegen](#denballbewegen), nur ohne abprallen. So soll es dann aussehen:  Wenn Du abprallen mit drin hast, lass es drin. Wenn der Schieber sich irgendwann anders bewegt, könnte es daran liegen. Was auch geht, aber bei größeren Projekten stört, ist, dass der Ball den Schieber bewegt:  Schlecht, weil der Schieber das selbst entscheiden sollte, was er tut. Dann kann man viel leichter herausfinden, warum etwas gerade nicht geht. Geht der Schieber nicht, schaut man beim Schieber.... Ja, der bewegt sich nur nach oben. Aber das soll er nur tun, wenn eine Taste gedrückt wird. Also machen wir zuerst "eine Taste gedrückt wird", und dann machen wir das "wenn". Tastaturanschläge erkennen ========================== Da gemalte Objekte selbst keine Tastaturanschläge erkennen können, holen wir uns ein **Key Press Objekt** [Key Press = Englisch Tasten-Druck].  Dazu klicken wir zuerst auf das , danach ziehen wir den **Objektkatalog** heraus (das heißt Maus über **Objekt Katalog** tun, linke Maustaste drücken, über das Graue gehen, Maustaste loslassen). Dann auf die Kategorie **Dies und das** klicken. Dort ist der **Key press**. Den auch rausziehen. In den KeyPress schauen wir jetzt rein, indem wir  vom Keypress drücken. Man kann es auch oben in der Seitenleiste umbenennen. Objekte sollten immer so heißen, wie das was sie tun/was sie sind. Dieser KeyPress soll den Schieber nach oben bewegen. Die Kategorie Eingabe erreichst du indem du z.B. auf "Tests" oder eine andere Kategorie klickst und die Kategorie **Eingabe** auswählst.  Was verändert sich, wenn du die Taste drückst? So sieht es jetzt bei mir aus. **Ball bewegen** und **SchieberLinks bewegen** liegen rum, ich habe den **SchieberLinksHoch** inspiziert und auf die orange Box  geklickt:  [Speichern?](#dasprojektspeichern) Auf Tasten Testen ================= Der Schieber soll nur bewegt werden, wenn die Taste gedrückt wird. Das macht man mit einem Test. Man braucht dazu  in  oder der Kategorie **Tests**  in der Kategorie **Einfach**  in der Kategorie **Eingabe**  in der Kategorie **Skripte** Um  zu erhalten musst du auf den KeyPress namens **LinkerSchieberHoch** rechts-klicken, das  anklicken und in die Kategorie **Eingabe** gehen.  Danach kannst du  rausziehen. Zusammen stecken und so sieht es dann aus:  Schieber Steuern ================ Es gibt einen Halo namens "duplizieren" . Damit können wir kopieren, was wir schonmal gemacht haben. Damit der Schieber sich nach unten bewegt, muss man den KeyPress duplizieren und den Test auf den Tastendruck. Der Test muss dazu aus dem Skript genommen werden.  Dann benenne ich den anderen KeyPress um zu **LinkerSchieberRunter** und erstellen eine Kachel indem ich auf  drücke.  Mit diesen Dingen kann der Schieber hoch und runter gehen:   LinkerSchieberRunter  LinkerSchieberHoch  zwei mal  diese Kachel mit . Man kann die Kachel **LinkerSchieberRunter** auf die **KachelLinkerSchieberHochs** ziehen und fallen lassen, damit wird ersetzt:  Negative Zahlen eignen sich um Rückwärts zu gehen. Andere Lösungen sind bestimmt auch richtig, solange sich der Schieber in beide Richtungen bewegt. So mache ich das:  [Speichern?](#dasprojektspeichern) Zweiten Schieber erstellen ========================== Der zweite Schieber kann erstellt werden, indem man den einen Schieber dupliziert  oder alles nochmal von [vorn](#einenschiebererstellen) macht. Danach muss man noch mehr duplizieren und ersetzen und dann funktioniert er mit anderen Tasten. Alles haben wir vorher schon gemacht. Die beiden beiden Key-Press-Objekte müssen auch dupliziert werden. Benutze die Kacheln von  zum Ersetzen. Öffne die Kategorie Skripte wenn du den anderen Schieber inspizierst. Ziehe das Skript **bewegen** raus. Schaue, wie wir es [vorher](#schiebersteuern) gemacht haben.  Ball Am Schieber Abprallen ========================== Der Ball soll wie im folgenden Bild am Schieber abprallen, wenn er den Schieber berührt. Die schwarz-weiße Richtung heißt **Schiebers Richtung zu Ball**.  Damit der Ball am Schieber abprallt, muss man die Ball-**Richtung setzen**. Dafür zieht man den Pfeil  raus. Wenn man Werte in einem Skript ändern will, braucht man immer den .  In den Kategorien **Tests**, **Beobachtung** und **Skripte** kann man diese Bauteile erhalten erhalten:   gibt es in  und durch . Immer wenn **SchieberLinks** vorne in der Kachel steht, findet man sie, wenn man auf  vom Objekt namens **SchieberLinks** klickt. Sowas gilt auch für **Ball** und alle anderen Objekte. Für  muss man auf den Ball rechts-klicken,  klicken und in der Kategorie **Einfach** den  rausziehen.  ist im **SchieberLinks**  in der Kategorie **Beobachtung**.  ist in der Kategorie **Tests**. Nun wird die neue Richtung vom Ball gesetzt:   **Punkt** macht keinen Sinn und wird durch **Ball** ersetzt. Damit stecke ich das Abprallen am **SchieberLinks** zusammen.  Das Gleiche kann man noch für den anderen Schieber machen. Diesmal kann man duplizieren  und die Kacheln erstellen mit .  Manchmal prallt der Ball unschön oben oder unten ab und geht ewig hin und her. Das liegt daran, wo die Mitte des Schiebers liegt, da die Richtung von der Mitte aus berechnet wird. Die Mitte kann aber verschoben werden:  Es kommt eine Hilfeblase, wenn die Maus länger über der Mitte ist. Um die Mitte zu verschieben, die Umschalttaste drücken, während die Maus an der Mitte zieht. [Speichern?](#dasprojektspeichern) Punkte Zählen ============= Wenn der Ball hinter einen Schieber kommt, sollen die Punkte für den anderen hochgezählt werden. Wir brauchen dazu ein Text-Objekt.  Dieses kann auch Zahlen anzeigen:   Ich nenne den Text **PunkteRechts**. Den Zahlenwert brauchen wir. Außerdem brauchen wir die Ränder. Die können schöner aussehen. Es sind zwei Rechtecke, die **LinkerRand** und **RechterRand** heißen:  Die Rechtecke gibt es im Lager. Um den Zahlenwert um 1 zu erhöhen, kann man folgendes machen:   Mit diesen Sachen kann man schon eine Punkteanzeige bauen:     Benutze Tests aus . Durch  (mit Rechtsklick auf die Objekte) erhältst du die erforderlichen Kacheln. Nutze die Bausteine aus dem Ball-Skript oder den Kategorien **Tests**, **Beobachtung** und eventuell **Scripte**. So habe ich das gemacht:  Es entsteht ein neues Problem: der Ball hat bei mir gerade 32 Punte vergeben, als er den linken Rand berührt hat. Es sollte aber nur ein Punkt sein. Man kann das Problem lösen, 1. indem man nur 1 Mal den Wert erhöht, solange der Ball den Schieber berührt. Dadurch müsste man sich aber merken, ob man schonmal hochgezählt hat, 2. indem der Ball wieder in die Mitte gesetzt wird. Ich mag Nummer 2. Ball Zurück Setzen ================== Um den Ball zurück in die Mitte zu setzen, braucht man die Position der Mitte. In der Kategorie **Mehr Geometrie** befindet sich die Position des Balles und wenn wir ihn in die Mitte tun, auch die Position der Mitte.  Indem ich den  anfasse, ziehe ich die Zuweisung hinaus und füge sie in das Ball-Skript ein. An zwei Stellen im Skript muss die Position des Balls auf die Mitte gesetzt werden.  Zwischenstand ============= Mein Spiel mit allem, was es hat sieht gerade so aus:  Was kann noch dazu? - Ein Spiel-Starten-Button, der den Punktestand zurück setzt. - Ein Spielende, wenn jemand gewonnen hat. (Mache ich nicht.) [Meinen Projektstand Herunterladen](pong-zwischenstaende/Pong.003.pr) Spiel Starten Button ==================== Aus den Kategorien **Skripte**, **Text** und **Mehr Geometrie** habe ich mir folgendes Skript zusammengebaut:  Den Knopf, der entsteht, wenn ich auf **Knopf, um dieses Skript auszuführen** klicke, tue ich irgendwo hin, wo es gut ausschaut.  [Meinen Projektstand Herunterladen](pong-zwischenstaende/Pong.004.pr) Wie Gehts weiter? ================= Du hast jetzt die Grundlagen zur Programmierung mit EToys. Wenn du [speicherst](#dasprojektspeichern) und dann  drückst, kommst du zurück zur ersten Welt. In  mag ich  aber es gibt auch  Hoffentlich habe ich genug gezeigt, wie man ein eigenes Spiel macht. Was noch interessant sein könnte: - Animationen (finden sich in der Projektgalerie) - Du kannst Bilder reinladen: Fotografieren und in Etoys reinwerfen oder die Kamera im Objektkatalog verwenden. - Neue Sounds machen mit dem Klangrecorder aus dem . - Gravitation (will ich noch erklären) - Variablen - dazu kann ich ein Snake-Tutorial machen. - [Hier finden sich noch mehr Tutorials auf Deutsch.](http://etoysillinois.org/library?tags=Etoys+Kurzanleitungen+2010) - [Wenn du Interesse an anderen Programmiersprachen und Organisationen hast, die dir was beibringen.](http://jugendprogrammiert.weebly.com/) - Volleyball, Autorennen, Ballerspiel, Angry Birds. - Lass mich bitte wissen, was du noch für Ideen hast, damit ich sie hier hin tun kann. Ganz unten erreichst du meine Seite mit einer meiner Email-Adressen.