Benutzer-Werkzeuge

Webseiten-Werkzeuge


api:documentation:gng:start

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
api:documentation:gng:start [2022/06/21 15:15] – [Mögliche Parameterwerte der Methode SondertasteGedrückt] Martin Pabstapi:documentation:gng:start [2023/06/11 15:09] (aktuell) Martin Pabst
Zeile 1: Zeile 1:
 ====== Graphics'n Games-API des Cornelsen-Verlages ====== ====== Graphics'n Games-API des Cornelsen-Verlages ======
-<WRAP center round info 80%> +<WRAP center round info 70%> 
-Die Autoren der [[https://informatikschulbuch.de/|Informatik-Bücher des Cornelsen-Verlages für bayerische Gymnasien]] haben eine API geschrieben, die es auf einfache Weise ermöglicht, kleine Spiele zu Programmieren. Diese API heißt "Graphics and Games". Sie wurde von den Buchautoren in den Programmiersprachen Java, Python und Swift implementiert. Damit die Beispiele der Cornelsen-Bücher auch in der Online-IDE lauffähig sind, habe ich die Java-Version der Graphics and Games-API nach Typescript portiert. \\ +Die Autoren der [[https://informatikschulbuch.de/|Informatik-Bücher des Cornelsen-Verlages für bayerische Gymnasien]] haben eine API geschrieben, die es auf einfache Weise ermöglicht, kleine Spiele zu programmieren. Diese API heißt "Graphics and Games". Sie wurde von den Buchautoren in den Programmiersprachen Java, Python und Swift implementiert. Damit die Beispiele der Cornelsen-Bücher auch in der Online-IDE lauffähig sind, habe ich die Java-Version der Graphics and Games-API nach Typescript portiert. \\ 
   * Die Vorlagen für die Buchaufgaben finden Sie [[https://informatikschulbuch.de/jahrgangsstufe-9-uebersicht/objektorientierte-modellierung-und-programmierung/|hier auf der Website der Buchautoren]].   * Die Vorlagen für die Buchaufgaben finden Sie [[https://informatikschulbuch.de/jahrgangsstufe-9-uebersicht/objektorientierte-modellierung-und-programmierung/|hier auf der Website der Buchautoren]].
   * Hier die [[http://gng4java.informatikschulbuch.de/package-summary.html|Dokumentation der Java-Variante der Graphics and Games-API als JavaDoc]].   * Hier die [[http://gng4java.informatikschulbuch.de/package-summary.html|Dokumentation der Java-Variante der Graphics and Games-API als JavaDoc]].
  
-Im Folgenden eine Beschreibung, wie die Graphics and Games-API in der Online IDE bzw. der Embedded-IDE aktiviert wird sowie eine kurze Dokumentation der API. Ich kenne die API selbst nur aufgrund der [[http://gng4java.informatikschulbuch.de/package-summary.html|JavaDoc-Beschreibung der Buchautoren]] und der Aufgaben im Buch. Entsprechend erhebt die Dokumentation unten keinen Anspruch auf Vollständigkeit oder Korrektheit. +Im Folgenden eine Beschreibung, wie die Graphics and Games-API in der Online IDE bzw. der Embedded-IDE aktiviert wird sowie eine kurze Dokumentation der API. **Ich kenne die API selbst nur aufgrund der [[http://gng4java.informatikschulbuch.de/package-summary.html|JavaDoc-Beschreibung der Buchautoren]] und der Aufgaben im Buch. Entsprechend erhebt die Dokumentation unten keinen Anspruch auf Vollständigkeit oder Korrektheit.** 
   * Eine einführende Beschreibung der API ist mir nicht bekannt. Falls Sie eine kennen, schreiben Sie mir bitte, ich verlinke sie gerne!   * Eine einführende Beschreibung der API ist mir nicht bekannt. Falls Sie eine kennen, schreiben Sie mir bitte, ich verlinke sie gerne!
-  * Falls Sie unten Fehler finden oder Verbesserungsbedarf, schreiben Sie mir bitte. Vielleicht gibt es sogar jemanden unter Ihnen, die/der es übernehmen möchte, das Kapitel unten zu überarbeiten/vervollständigen? Ich würde mich freuen!+  * Falls Sie unten Fehler finden oder Verbesserungsbedarf, **schreiben Sie mir bitte**. Vielleicht gibt es sogar jemanden unter Ihnen, die/der es übernehmen möchte, das Kapitel unten zu überarbeiten/vervollständigen? Ich würde mich freuen!
 </WRAP> </WRAP>
  
Zeile 52: Zeile 52:
 <HTML> <HTML>
  
-<div class="java-online" style="height: 350px; width: 70%" data-java-online="{'withBottomPanel': false, 'id': 'gng1', 'libraries':['gng']}">+<div class="java-online" style="height: 350px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'gng1', 'libraries':['gng']}">
  
 <script type="text/plain" title="Test1.java"> <script type="text/plain" title="Test1.java">
Zeile 70: Zeile 70:
   * Das **Rechteck** ist 100 Pixel breit, 100 Pixel hoch und achsenparallel. Seine Linke obere Ecke befindet sich bei (10/10). Drehpunkt ist sein Diagonalenschnittpunkt. Die Methode ''PositionSetzen(x,y)'' verschiebt das Rechteck so, dass seine **linke obere Ecke** am Punkt ''x/y'' zu liegen kommt.   * Das **Rechteck** ist 100 Pixel breit, 100 Pixel hoch und achsenparallel. Seine Linke obere Ecke befindet sich bei (10/10). Drehpunkt ist sein Diagonalenschnittpunkt. Die Methode ''PositionSetzen(x,y)'' verschiebt das Rechteck so, dass seine **linke obere Ecke** am Punkt ''x/y'' zu liegen kommt.
   * Der **Kreis** hat einen Radius von 50 Pixel, sein Mittelpunkt (= Drehpunkt) befindet sich bei (60/60). Die Methode ''PositionSetzen(x,y)'' verschiebt den Kreis so, dass sein **Mittelpunkt** am Punkt ''x/y'' zu liegen kommt.   * Der **Kreis** hat einen Radius von 50 Pixel, sein Mittelpunkt (= Drehpunkt) befindet sich bei (60/60). Die Methode ''PositionSetzen(x,y)'' verschiebt den Kreis so, dass sein **Mittelpunkt** am Punkt ''x/y'' zu liegen kommt.
-  * Die Eckpunkte des **Dreiecks** haben die Koordinaten ''60/10'', ''110/110'' und ''10/110''. Das Dreieck ist also gleichschenklig, aber nicht gleichseitig. Drehpunkt ist der Punkt ''60/60''. Die Methode ''PositionSetzen(x/y)'' verschiebt das Dreieck so, dass der Punkt des Dreiecks, der vorher bei ''60/10'' lag (also die obere Spitze), danach bei ''x/y'' liegt.+  * Die Eckpunkte des **Dreiecks** haben die Koordinaten ''60/10'', ''110/110'' und ''10/110''. Das Dreieck ist also gleichschenklig, aber nicht gleichseitig. **Drehpunkt** ist der Punkt ''60/60''. Die Methode ''PositionSetzen(x/y)'' verschiebt das Dreieck so, dass der Punkt des Dreiecks, der vorher bei ''60/10'' lag (also die **obere Spitze**), danach bei ''x/y'' liegt.
   * Das Text-Objekt schreibt initial "Text" ungefähr in die linke obere Ecke.   * Das Text-Objekt schreibt initial "Text" ungefähr in die linke obere Ecke.
  
Zeile 123: Zeile 123:
 <HTML> <HTML>
  
-<div class="java-online" style="height: 350px; width: 70%" data-java-online="{'withBottomPanel': false, 'id': 'gng3', 'libraries':['gng']}">+<div class="java-online" style="height: 350px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'gng3', 'libraries':['gng']}">
  
 <script type="text/plain" title="Test1.java"> <script type="text/plain" title="Test1.java">
Zeile 184: Zeile 184:
 ===== Die Klasse Figur ===== ===== Die Klasse Figur =====
 <WRAP center round tip 60%> <WRAP center round tip 60%>
-Ein Objekt der Klasse ''Figur'' besteht aus beliebig vielen Dreiecken, Rechtecken und Ellipsen besteht. Es kann - ähnlich einer Gruppierung in einem vektororientierten Grafikprogramm - als ganzes verschoben, gedreht oder gestreckt werden. Zudem kann ermittelt werden, ob es mit anderen graphischen Objekten kollidiert. \\ \\  +Ein Objekt der Klasse ''Figur'' besteht aus beliebig vielen Dreiecken, Rechtecken und Ellipsen. Es kann - ähnlich einer Gruppierung in einem vektororientierten Grafikprogramm - als Ganzes verschoben, gedreht oder gestreckt werden. Zudem kann ermittelt werden, ob es mit anderen graphischen Objekten kollidiert. \\ \\  
-Ein Objekt der Klasse Figur kann - in Maßen - auch animiert werden. Dazu ist es jedoch nötig, für jeden Animationsschritt alle Bestandteile der Figur zu löschen und neu zu zeichnen.+Ein Objekt der Klasse Figur kann - in Maßen - auch animiert werden. Dazu ist es jedoch nötig, für jeden Animationsschritt alle Bestandteile der Figur zu löschen und neu zu zeichnen. \\  \\   
 +Die Idee hinter der Klasse ''Figur'' ist, eine Unterklasse zu erstellen und mit Methoden zu versehen, die die einzelnen Animationsbilder zeichnen. Durch Überschreiben der Methoden ''TasteGedrückt'', ''SondertasteGedrückt'' und ''Mausgeklickt'' kann man auf Tastatur- und Mausereignisse reagieren. Die Methode ''AktionAusführen'' wird periodisch vom Taktgeber aufgerufen. Durch Überschreiben lässt sich also eine Game Loop-artige Programmierung realisieren.
 </WRAP> </WRAP>
 +
 +==== Beispiel: Mit den Cursortasten steuerbares Männchen ====
 +<HTML>
 +
 +<div class="java-online" style="height: 350px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'gng4', 'libraries':['gng']}">
 +
 +<script type="text/plain" title="Test1.java">
 +SystemTools.setSpeed(-1);
 +println("Steuern Sie das Männchen mit den Cursortasten!");
 +var m = new Männchen();
 +m.nachLinksSchauen();
 +
 +
 +class Männchen extends Figur {
 +
 +   void nachLinksSchauen() {
 +      EigeneFigurLöschen();
 +      FigurteilFestlegenRechteck(-20, -20, 40, 80, "blau");
 +      FigurteilFestlegenEllipse(-40, -40, 80, 80, "gelb");
 +      FigurteilFestlegenDreieck(0, -80, 30, -30, -30, -30, "rot");
 +      FigurteilFestlegenEllipse(-20, -15, 7, 7, "schwarz");
 +   }
 +
 +   void nachRechtsSchauen() {
 +      EigeneFigurLöschen();
 +      FigurteilFestlegenRechteck(-20, -20, 40, 80, "blau");
 +      FigurteilFestlegenEllipse(-40, -40, 80, 80, "gelb");
 +      FigurteilFestlegenDreieck(0, -80, 30, -30, -30, -30, "rot");
 +      FigurteilFestlegenEllipse(20, -15, 7, 7, "schwarz");
 +   }
 +
 +   void verschieben(int dx, int dy) {
 +      PositionSetzen(XPositionGeben() + dx, YPositionGeben() + dy);
 +   }
 +
 +   @Override void SonderTasteGedrückt(int taste)
 +   {
 +      if(taste == 37)
 +      {
 +         nachLinksSchauen();
 +         verschieben(-10, 0);
 +      }
 +      else
 +      {
 +         if(taste == 38)
 +         {
 +            verschieben(0, -10);
 +         }
 +         else
 +         {
 +            if(taste == 39)
 +            {
 +               nachRechtsSchauen();
 +               verschieben(10, 0);
 +            }
 +            else
 +            {
 +               if(taste == 40)
 +               {
 +                  verschieben(0, 10);
 +               }
 +            }
 +         }
 +      }
 +   }
 +}
 +</script>
 +</div>
 +
 +</HTML>
 +
 +==== Attribute der Klasse Figur ====
 +
 +<WRAP center round info 80%>
 +  * **int winkel**: Blickrichtung der Figur in Grad. 0° entspricht nach rechts, 90° nach oben usw.
 +  * **int größe**: "Größe" der Figur, wobei der Wert 100 der ursprünglichen Größe (ungestreckt) entspricht.
 +  * **boolean sichtbar**: ist genau dann true, wenn die Figur sichtbar ist.
 +</WRAP>
 +
 +
 +==== Methoden der Klasse Figur ====
 +
 +<WRAP center round info 80%>
 +  * **void GrößeSetzen(int größe)**: Setzt die Größe der Figur (d.h. streckt sie entsprechend). ''größe == 100'' entspricht der ursprünglichen Größe der Figur.
 +  * **void Drehen(int winkel)**: Dreht die Figur um den angegebenen Winkel im Grad. Positive Werte bewirken eine Drehung entgegen dem Uhrzeigersinn.
 +  * **void Gehen(int länge)**: Verschiebt die Figur um die angegebene Länge (in Pixeln) in die aktuelle Blickrichtung. Die initiale Blickrichtung ist nach rechts. Sie kann durch die Methode Drehen verändert werden.
 +  * **void PositionSetzen**: Verschiebt die Figur so, dass ihr Anker an der angegebenen Position zu liegen kommt. Der "Anker" ist der Nullpunkt der ''FigurTeilFestlegen''...-Methodenaufrufe unten.
 +  * **void ZumStartpunktGehen()**: Entspricht der Anweisung ''PositionSetzen(100, 200)''.
 +  * **void WinkelSetzen(int winkel)**: Dreht die Figur so, dass der Blickwinkel der Figur in die angegebene Richtung zeigt. 0° => nach rechts (initial), 90°: => nach oben, usw..
 +  * **int WinkelGeben()**: Gibt den Blickwinkel der Figur zurück.
 +  * **int XPositionGeben()**: Gibt die X-Position der Figur zurück.
 +  * **int YPositionGeben()**: Gibt die Y-Position der Figur zurück.
 +  * **void SichtbarkeitSetzen(boolean sichtbarkeit)**: Macht die Figur sichtbar (''sichtbarkeit == true'') bzw. unsichtbar.
 +  * **void GanzNachVornBringen()**: Setzt das Grafikobjekt vor alle anderen.
 +  * **void GanzNachHintenBringen()**: Setzt das Grafikobjekt hinter alle anderen.
 +  * **void NachVornBringen()**: Setzt das Grafikobjekt eine Ebene nach vorne.
 +  * **void NachHintenBringen()**: Setzt das Grafikobjekt eine Ebene nach hinten.
 +  * **void EigeneFigurLöschen()**: Löscht die eigene - mittels der Methoden ''FigurTeilFestlegen...'' gezeichnete Figur und ersetzt sie durch die initiale Dreiecksfigur.
 +  * **boolean Berührt()**: Gibt genau dann true zurück, wenn die Figur mit einem graphischen Objekt kollidiert.
 +  * **boolean Berührt(string farbe)**: Gibt genau dann true zurück, wenn die Figur mit einem graphischen Objekt der angegebenen Farbe kollidiert.
 +  * **boolean Berührt(Object objekt)**: Gibt genau dann true zurück, wenn die Figur mit dem übergebenen graphischen Objekt kollidiert.
 +  * **void FigurteilFestlegenDreieck(int x1, int y1, int x2, int y2, int x3, int y3, String farbe)**: Erzeugt ein neues, dreieckiges Element und fügt es der Figur hinzu. x1/y1, x2/y2 und x3/y3 sind die drei Eckpunkte des Dreiecks. Die Koordinaten sind relativ zum 'Anker' der Figur, der initial auf der Position (100/200) liegt.
 +  * **void FigurteilFestlegenEllipse(int x, int y, int breite, int höhe, String farbe)**: Erzeugt eine Ellipse und fügt sie der Figur hinzu. x/y ist die linke obere Ecke der bounding box der Ellipse (d.h. des kleinsten achsenparallelen umgebenden Rechtecks), ''breite'' und ''höhe'' sind die doppelten Radien in x- bzw. y-Richtung. Die Koordinaten sind relativ zum 'Anker' der Figur, der initial auf der Position (100/200) liegt.
 +  * **void FigurteilFestlegenRechteck(int x, int y, int breite, int höhe, String farbe)**: Erzeugt ein achsenparalleles Rechteck und fügt es der Figur hinzu. x/y ist die linke obere Ecke des Rechtecks. Die Koordinaten sind relativ zum 'Anker' der Figur, der initial auf der Position (100/200) liegt.
 +  * **void AktionAusführen()**: Diese Methode wird vom Taktgeber aufgerufen. Sie kann überschrieben und mit eigenen Anweisungen gefüllt werden, die dann in periodischen Zeitabständen immer wieder ausgeführt werden. \\ :!: **Wichtig:** Der Taktgeber startet erst nach Aufruf von ''Zeichenfenster.TaktgeberStarten()''.
 +  * **void TasteGedrückt(char taste)**: Diese Methode wird aufgerufen, wenn der Benutzer eine Nicht-Sondertaste drückt. Übergeben wird das Zeichen, das der gedrückten Taste entspricht. Diese Methode kann überschrieben und so mit eigenen Anweisungen gefüllt werden, damit das eigene Programm auf Tastendrucke reagieren kann.
 +  * **void SonderTasteGedrückt(int taste)**: Diese Methode wird aufgerufen, wenn der Benutzer eine Sondertaste drückt. Übergeben wird das Zeichen, das der gedrückten Taste entspricht. Diese Methode kann überschrieben und so mit eigenen Anweisungen gefüllt werden, damit das eigene Programm auf Tastendrucke reagieren kann. Zur Kodierung der Sondertasten sie Abschnitt 'Kodierung der Sondertasten' auf dieser Seite.
 +  * **void MausGeklickt(int x, int y, int anzahl)**: Diese Methode wird aufgerufen, wenn die linke Maustaste (irgendwo im Zeichenbereich, nicht nur auf dem graphischen Objekt) gedrückt wurde. 
 +</WRAP>
 +
 +===== Zeichenfenster, Taktgeber =====
 +<WRAP center round tip 80%>
 +Das Zeichenfenster besitzt statische Methoden zur Steuerung des Taktgebers, zum Auslesen der geometrischen Daten der Malfläche und zum Registrieren von Aktionsempfängern, in denen Man Anweisungen hinterlegen kann, die auf Tastendrucke, Mausklicks und Taktimpulse des Taktgebers reagieren.
 +</WRAP>
 +
 +==== Methoden der Klasse Zeichenfenster ====
 +<WRAP center round info 80%>
 +  * **static int MalflächenBreiteGeben()**: Gibt die Breite der Zeichenfläche in Pixeln zurück.
 +  * **static int MalflächenHöheGeben()**: Gibt die Höhe der Zeichenfläche in Pixeln zurück.
 +  * **static void TaktgeberStarten()**: Startet den Taktgeber
 +  * **static void TaktgeberStoppen()**: Stoppt den Taktgeber
 +  * **static void TaktdauerSetzen(int dauer)**: Setzt die Taktdauer des Zeitgebers in Millisekunden
 +  * **static void AktionsEmpfängerEintragen(AktionsempfaengerNeu)**: Trägt einen Aktionsempfänger ein (Observer-Pattern)
 +  * **static void AktionsEmpfängerEntfernen(Aktionsempfaenger alt)**: Trägt einen Aktionsempfänger wieder aus (Observer-Pattern)
 +</WRAP>
 +
 +==== Beispiel 1: Einfacher Timer durch Implementieren des Interfaces Aktionsempfänger ====
 +<HTML>
 +
 +<div class="java-online" style="height: 350px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'gng4', 'libraries':['gng']}">
 +
 +<script type="text/plain" title="Test1.java">
 +SystemTools.setSpeed(-1);
 +Zeichenfenster.AktionsEmpfängerEintragen(new Zeitanzeige());
 +Zeichenfenster.TaktdauerSetzen(1000);
 +Zeichenfenster.TaktgeberStarten();
 +println("Sie können diesen Timer mit der Taste s starten und stoppen.");
 +while(true);
 +
 +
 +class Zeitanzeige implements Aktionsempfaenger {
 +   
 +   GText textfeld = new GText();
 +   int zeit = 0;
 +  boolean running = true;
 +
 +   Zeitanzeige() {
 +      textfeld.TextGrößeSetzen(100);
 +    textfeld.TextSetzen("Bitte warten...");
 +   }
 +
 +  public void Ausführen() {
 +    if(running) {
 +      zeit++;
 +        textfeld.TextSetzen(zeit + " Sekunden");
 +    }
 +  }
 +
 +  public void Taste(char taste) {
 +    if(taste == 's') {
 +      running = !running;
 +    }
 +    if(running) {
 +      println("Gestartet!", Color.green);
 +    } else {
 + println("Gestoppt!", Color.red);
 +  }
 +  }
 +
 +  public void SonderTaste(int taste) {
 + //TODO: Methode füllen
 +  }
 +
 +  public void Geklickt(int x, int y, int anzahl) {
 + //TODO: Methode füllen
 +  }
 +
 +}
 +</script>
 +</div>
 +
 +</HTML>
 +
 +
 +
 +
 +==== Beispiel 2: Einfacher Timer durch Erben von der Klasse Ereignisbehandlung ====
 +
 +<HTML>
 +
 +<div class="java-online" style="height: 350px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'gng5', 'libraries':['gng']}">
 +
 +<script type="text/plain" title="Test2.java">
 +SystemTools.setSpeed(-1);
 +Zeichenfenster.TaktdauerSetzen(200);   // Taktdauer in ms
 +Zeichenfenster.TaktgeberStarten();
 +
 +Test t = new Test();
 +
 +while (true);
 +
 +
 +
 +class Test extends Ereignisbehandlung {
 +   
 +   int n = 0;
 +
 +   public void TaktImpulsAusführen() {
 +      println(n++);
 +   }
 +   
 +   /**
 +   * Die folgenden drei Methoden können bei Bedarf ebenfalls
 +   * überschrieben werden:
 +   */
 +   public void TasteGedrückt(char taste);
 +
 +   public void SonderTasteGedrückt(int taste);
 +
 +   public void MausGeklickt(int x, int y, int anzahl);
 +
 +}
 +
 +</script>
 +</div>
 +</HTML>
  
api/documentation/gng/start.1655817312.txt.gz · Zuletzt geändert: 2022/06/21 15:15 von Martin Pabst

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki