Programmieren leicht gemacht - adäquate Modelle für den Einsatz im Unterricht/ Das erste Szenario

Aus Wikibooks
Zur Navigation springen Zur Suche springen

Das erste Szenario[Bearbeiten]

Öffnen eines Projekts[Bearbeiten]

Anhand des Szenarios „Shape“ wollen wir verstehen, wie Szenarien aufgebaut sind und wie darin eigene Modifikationen vorgenommen werden können. Dazu müssen wir erstmals das Szenario öffnen. Dazu klicken wir in der Menü-Leiste auf „Project“ und wählen dann den Eintrag „Open...“ aus:


ProgrLeiGem Greenfoot ShapeSzenario oeffnen.png

Nun wählen wir das Szenario „shapes“ aus und bestätigen unsere Wahl durch „open“. Folgendes Fenster sollte am Bildschirm geöffnet werden:


ProgrLeiGem Greenfoot ShapeSzenario.png

Hinzufügen von Objekten[Bearbeiten]

Dieser Welt sind allerdings noch keine Objekte hinzugefügt. Dies wollen wir natürlich ändern. Dazu klicken wir in der Klassenansicht mit der rechten Maustaste auf die Triangle-Klassse. Im sich öffnenden Pop-up-Menü wählen Sie nun den Eintrag „new Triangle()“ aus und klicken Sie an einer beliebigen Stelle in der leeren Welt. Wie Sie sehen, haben Sie soeben ein schwarzes Dreieck, d.h. ein Objekt, erzeugt und dieses der Welt hinzugefügt:


ProgrLeiGem Greenfoot ShapeSzenario newTriangle.png


ProgrLeiGem Greenfoot ShapeSzenario Triangle.png

Es gibt auch eine Möglichkeit, mehrere Objekte einer Klasse schneller einzügen: Halten Sie dafür die Shift-Taste gedrückt, während Sie mit der Maus an beliebige Positionen in der Welt klicken. Bei jedem dieser Klicks wird ein neues Objekt der ausgewählten Klasse erzeugt.

Versuchen Sie nun auf dieselbe Art mehrere Objekte unterschiedlicher Klassen in die Welt einzufügen:


ProgrLeiGem Greenfoot ShapeSzenario Objekte.png

Starten der Simulation[Bearbeiten]

Klicken Sie nun auf „Run“, um die Simulation zu starten; dabei werden alle act-Methoden der einzelnen involvierten Klassen aufgerufen. In unserem Szenario bewegen sich alle Kreise ein wenig nach links. Um die Simulation schrittweise auszuführen, klicken Sie einfach auf den Act-Button.

Klicken Sie mit der rechten Maustaste auf ein beliebiges Objekt. In dem sich öffnenden Menü werden alle für dieses Objekt zur Verfügung stehenden Methoden aufgelistet. Wählen Sie zum Beispiel den Eintrag „void changeSize(int newSize)“ aus, um die Größe dieses Objekts zu ändern:


ProgrLeiGem Greenfoot ShapeSzenario changeSize.png

Um einen Blick auf bestimmte Eigenschaften eines Objekts zu werfen, klicken Sie wiederum mit der rechten Maustaste darauf und wählen Sie aus dem sich öffnenden Menü den Eintrag „inspect“ aus:


ProgrLeiGem Greenfoot ShapeSzenario Inspector.png


Das Editor-Fenster[Bearbeiten]

Um Veränderungen bei den einzelnen Methoden vorzunehmen, führen Sie einfach einen Doppeklick auf die entsprechende Klasse aus. Daraufhin öffnet sich ein Editorfenster, in dem Sie einfach die gewünschten Modifikationen vornehmen können:


ProgrLeiGem Greenfoot ShapeSzenario editor.png

Um die Farbe des Dreiecks zu verändern, ersetzen wir den entsprechenden Eintrag im Konstruktor durch „color = Color.RED“:


ProgrLeiGem Greenfoot ShapeSzenario ColorRED.png

Nun müssen wir den modifizierten Code kompilieren, damit die durchgeführten Änderungen auch übernommen werden. Dazu klicken wir im Hauptfenster auf den Button „Compile all“:


ProgrLeiGem Greenfoot ShapeSzenario CompileAll.png

Die Welt wird darauf neu erzeugt, sodass die bereits eingefügten Objekte gelöscht werden. Nun fügen wir einige Objekte der Klasse „Triangle“ ein, um zu überprüfen, ob die von uns vorgenommene Farbänderung auch wirklich übernommen wurde.


ProgrLeiGem Greenfoot ShapeSzenario TriangleRED.png

Um mit Hilfe dieses Szenarios komplexe geometrische Objekte anzufertigen, nehmen wir noch einige Änderungen in den einzelnen Methoden vor:

Wir öffnen die Klasse „Square“ und wollen dort die Größe und die Farbe des Quadrats ändern. Dazu ändern wir die entsprechenden Zeilen im Konstruktor folgendermaßen ab:

size=15;
color=Color.CYAN;

Nun wollen wir der Methode act() noch einige Dinge hinzufügen, damit beim Ausführen der Simulation auch genügend Bewegung und Veränderung sichtbar wird. Die Ausgangsfarbe des Objekts soll schrittweise dunkler werden. Bei jedem Aufruf der act-Methode soll weiters die Größe des Objekts um 10 Pixel erhöht werden. Um dies zu gewährleisten, müssen der act-Methode folgende Zeilen hinzugefügt werden:

public void act()
{
    Color darker = Color.darker();
    size+=5;
    changeSize(size);
    changeColor(darker);
}

Nun öffnen wir noch die Klasse „Triangle“ und nehmen dort im Konstruktor folgende Modifikationen vor:

public Triangle()
{
   width=90;
   height=90;
   color=new Color(250,40,80);
   draw();
  }

Zur act-Methode fügen wir Folgendes hinzu:

public void act()
{
  Color brighter=color.brighter();
  width-=5;
  height-=5;
  changeSize(width, height);
  changeColor(brighter);
}

Nun müssen noch alle Klassen kompiliert werden, um danach nach Einfügen der relevanten Objekte in die Welt die Simulation starten zu können.

Änderung der Klassenbilder[Bearbeiten]

Wir wollen nun auch die Klassenbilder der einzelnen Klassen gemäß ihres wirklichen Erscheinungsbildes ändern. Dazu klicken wir mit der rechten Maustaste auf die jeweilige Klasse und wählen aus dem sich öffnenden Menü den Eintrag „Set image...“ aus:


ProgrLeiGem Greenfoot ShapeSzenario SetImage.png

In dem sich öffnenden Fenster wählen wir nun das gewünschte Bild aus und bestätigen unsere Wahl.


ProgrLeiGem Greenfoot ShapeSzenario Hintergrund.png


Die Änderungen werden sofort in der Klassenansicht deutlich:


ProgrLeiGem Greenfoot ShapeSzenario Klassenansicht2.png


Hinzufügen einer eigenen Klasse[Bearbeiten]

Als Abschluss wollen wir eine Klasse „Polygon“ hinzufügen. Dazu klicken wir mit der rechten Maustaste auf die Klasse „Actor“ und wählen in dem sich öffnenden Menü den Eintrag „New subclass...“ aus:


ProgrLeiGem Greenfoot ShapeSzenario Subclass.png

Daraufhin öffnet sich ein Fenster, in dem Sie den gewünschten Klassennamen und das Erscheinungsbild für die Klassenansicht auswählen können. Dabei kann man auch ein eigenes Bild als Klassenbild hinzufügen:


ProgrLeiGem Greenfoot ShapeSzenario Polygon.png

Die neue Klasse wurde nun schon hinzugefügt und wird dementsprechend auch in der Klassenansicht angezeigt, allerdings wird sie noch grau schraffiert dargestellt, da ihr erst entsprechende Methoden hinzugefügt werden müssen.


ProgrLeiGem Greenfoot ShapeSzenario Klassenansicht.png

Dazu öffnen Sie nun den Editor der Klasse „Polygon“. Der Einfachheit halber beschränken wir uns im Folgenden nur auf einige ganz elementare Methoden. Zuerst müssen wir der Klasse einen geeigneten Konstruktor hinzufügen und die Variablendeklaration vornehmen:

   private Color color;
   private int width;
   private int height;
   private int anzahl=0;
public Polygon()
{
  width=60;
  height=100;
  color=Color.MAGENTA;
  draw();
 }

Dazu müssen wir der Klasse noch die Methode draw() hinzufügen, die unser gewünschtes Polygon erstellen soll:

public void draw() 
{
  GreenfootImage im = new GreenfootImage(width, height);
  im.setColor(color);
  int[] x_coord = {0, 0 , width, width, (width/3), (width/3), width-10,width -10,(width/3),(width/3)};                           
  int[] y_coord = {height, 0, 0, (height/4), (height/4),(height/2), (height/2), height - 30, height - 30, height};
  im.fillPolygon(x_coord, y_coord, x_coord.length);
  setImage(im);
 }

Damit wir die von uns erstellte Klasse auch fehlerlos kompilieren können, müssen wir am Anfang der Klasse noch die nötigen Packete einbinden:

import java.awt.Color;
import java.awt.Graphics;
import java.awt.image.BufferedImage;

Nun wollen wir die act-Methode noch ein wenig modifizieren. Beim Ausführen der Simulation soll sich die Farbe des Polygons ändern. Zusätzlich soll es zuerst horizontal und dann vertikal gespiegelt werden. Dafür fügen wir der Klasse noch zwei weitere Methoden mirrorHorizontal() und mirrorVertical() hinzu:

public void mirrorHorizontal() 
{
 GreenfootImage im = new GreenfootImage(width, height);
 im.setColor(color);
 int[] x_coord = {0, 0 , width, width, (width/3), (width/3), width-10,width -10,(width/3),(width/3)};
 int[] y_coord = {height, 0, 0, (height/4), (height/4),(height/2), (height/2), height - 30, height - 30, height };                            
 im.fillPolygon(x_coord, y_coord, x_coord.length);
 im.mirrorHorizontally();
 setImage(im);
}


public void mirrorVertical() 
{
 GreenfootImage im = new GreenfootImage(width, height);
 im.setColor(color);
 int[] x_coord = {0, 0 , width, width, (width/3), (width/3), width-10,width -10,(width/3),(width/3)};                            
 int[] y_coord = {height, 0, 0, (height/4), (height/4),(height/2), (height/2), height - 30, height - 30, height };
 im.fillPolygon(x_coord, y_coord, x_coord.length);
 im.mirrorVertically();
 setImage(im);
}

Der act-Methode fügen wir nun Folgendes hinzu:

public void act() 
{
    if (anzahl % 2 == 0)
   {
       color=Color.BLUE;
       mirrorHorizontal();
    }
    else 
   {
       color=color.MAGENTA;
       mirrorVertical();
    }
 anzahl++;
}    

Nun können wir, nachdem wir alles kompiliert haben, ein Objekt dieser Klasse „Polygon“ unserer Welt hinzufügen und danach die Simulation starten:

ProgrLeiGem Greenfoot ShapeSzenario blau.png

ProgrLeiGem Greenfoot ShapeSzenario magenta.png