Benutzer-Werkzeuge

Webseiten-Werkzeuge


api:documentation:gng:start

Dies ist eine alte Version des Dokuments!


Graphics'n Games-API des Cornelsen-Verlages

Die Autoren der 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.

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 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!
  • 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!

Turtle -> GTurtle

Leider gibt es zwei Namensüberschneidungen zwischen der API der Online-IDE und der Graphics and Games-API.

  • Die Klasse Turtle der Graphics and Games-API heißt in der Online-IDE daher GTurtle.
  • Die Klasse Text der Graphics and Games-API heißt in der Online-IDE daher GText.

Aktivieren der API in der Online-IDE

Da die Klassen der Graphics and Games-API stark unterschiedlichen Konventionen folgen wie die Standardklassen der Online-IDE (Bezeichner von Methoden großgeschrieben, nur ganzzahlige Koordinaten möglich, sehr eingeschränktes Farbschema, …) und sich die Anwendungsbereiche der Bibliotheken stark überschneiden (Klassen für Rechtecke, Kreise, eine Turtle, …) ist es nicht sinnvoll, beide APIs zu mischen. Die Graphics and Games-API ist daher standardmäßig ausgeblendet. Will man sie verwenden, so muss man sie je Workspace einmalig aktivieren:

  1. Rechtsklick auf den Workspace → Einstellungen
  2. Es öffnet sich ein Modales Fenster, das alle möglichen optionalen APIs zeigt. Hier den Haken bei "Graphics and Games-Bibliothek" setzen und mit "OK" bestätigen.

Aktivieren der API in der Embedded-IDE

Möchte man die Graphics and Games-Bibliothek in den Programmierkästen der Embedded-IDE nutzen, so muss bei den Einstellungen das Array "libraries" den Eintrag "gng" besitzen. Hier ein Beispiel:

    <div class="java-online" style="width: calc(80% - 10px); height: 600px; margin-left: 5px" data-java-online="{
        'id': 'abcd',
        'speed': 'max',
        'withFileList': true,
        'hideEditor': false,
        'hideStartPanel': false,
        'libraries': ['gng']
    }">
        <script type="text/plain" title="Test1.java" data-type="java">
            int anzahl = Input.readInt("Wie oft?");
            for(int i = 0; i < anzahl; i++){
                println("Hallo Welt!");
            }
        </script>
    </div>

Koordinatensystem

Das Koordinatensystem der Graphics and Games-API ist 800 Pixel breit und 600 Pixel hoch. Die x-Achse zeigt nach rechts, die y-Achse zeigt nach unten. Der Hintergrund ist immer hellgrau gefärbt.

Grundformen

Die Klassen Rechteck, Dreieck und Kreis für die Grundformen haben jeweils nur einen parameterlosen Konstruktor. Sie erscheinen ohne Rahmen mit der Füllfarbe "rot" und haben folgende Größe/Position:

  • 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.
  • 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.


Gemeinsame Methoden der Grundformen:

  • Verschieben(int x, int y) - verschiebt die Figur um x Pixel nach rechts und y Pixel nach unten
  • Drehen(int winkelInGrad) - dreht die Figur um winkel grad gegen den Uhrzeigersinn ( = mathematisch positive Drehrichtung)
  • PositionSetzen(int x, int y) - verschiebt die Figur so, dass ein ausgezeichneter Punkt (unterschiedlich je nach Figur, siehe oben) danach bei x/y liegt.
  • FarbeSetzen(String farbe) - ändert die Füllfarbe der Figur. Erlaubt sind die unten angegebenen Farbbezeichner.
  • WinkelSetzen(int winkelInGrad) - dreht die Figur relativ zu ihrer initialen Lage um den angegebenen Winkel in Grad gegen den Uhrzeigersinn.
  • SichtbarkeitSetzen(boolean sichtbarkeit) - macht die Figur sichtbar/unsichtbar.
    Bem.: Kollisionen mit unsichtbaren Figuren werden nicht erkannt.
  • Entfernen() - zerstört die Figur
  • GanzNachVornBringen() - bringt die Figur ganz nach vorne. Entsprechen ganzNachHintenBringen
  • NachVorneBringen() - bringt die Figur vor diejenige Figur, die sich gerade eine "Schicht" über ihr befindet.


Gemeinsame Attribute der Grundformen:

  • farbe: String
  • x: int - x-Koordinate des "Ankers" der Figur (siehe oben)
  • y: int - y-Koordinate des "Ankers" der Figur (sihe oben)
  • winkel: int - Richtung der Figur (initial: winkel == 0)
  • größe: int - Der Wert 100 entspricht der initialen Größe.
  • sichtbar: boolean

Besondere Attribute/Methoden der einzelnen Grundformen

Rechteck, Dreieck

Die Klassen Rechteck und Dreieck besitzen die Attribute breite und höhe sowie die Methode GrößeSetzen(int breite, int höhe), mit der sich die beiden setzen lassen.

Kreis

Die Klasse Kreis besitzt das Attribut radius sowie die Methode RadiusSetzen(int radius) zum Ändern desselben.

GText

Die Klasse GText besitzt die Attribute text und textGröße sowie die Methoden TextSetzen und TextGrößeSetzen zum Ändern der beiden. Zusätzlich gibt es noch die Methoden Textvergrößern und Textverkleinern, die die Textgröße ausgehend vom aktuellen Wert nach einem bestimmten Algorithmus verändern (siehe hier).

Die Klasse GTurtle

Die Klasse GTurtle stellt eine Turtlegrafik dar, ähnlich wie bei der Programmiersprache Logo.. Eine Schildkröte ("Turtle") bewegt sich über die Zeichenfläche und führt einen Farbstift mit, der ihren zurückgelegten Weg zeichnet.
Die Turtle wird durch ein gleichschenkliges Dreick dargestellt, dessen spitz zulaufende Ecke in Richtung ihrer Blickrichtung zeigt. Initial befindet sich die Turtle bei der Position (100/200) und schaut nach rechts ( = 0°). Positive Winkeländerungen bedeuten eine Drehung entgegen dem Uhrzeigersinn ( = mathematisch positive Drehrichtung).

Methoden der Turtle:

  • Gehen(int länge) - lässt die Turtle um die angegebene Länge (in Pixeln) nach vorne gehen.
  • Drehen(int winkel) - dreht die Turtle um den angegebenen Winkel (in Pixeln) entgegen dem Uhrzeigersinn.
  • Winkelsetzen(int winkel) - dreht die Turtle so, dass sie - ausgehend von ihrer initialen Blickrichtung - in die durch den Winkel angegebene Richtung blickt.
  • GrößeSetzen(int größe) - ändert nur die Größe des Dreiecks, das die Turtle darstellt. Dabei ist die initiale Größe 40.
  • FarbeSetzen(string farbe) - ändert die Farbe der zukünftig gezeichneten Turtlespur.
api/documentation/gng/start.1654696219.txt.gz · Zuletzt geändert: 2022/06/08 15:50 von Martin Pabst

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki