Zum Inhalt springen
Auf die letzten Plätze fertig los - Jetzt dein Ticket für Frankfurt sichern! Jetzt Platz sichern
Mitglied werden

VGSD-Mitglieder zeigen KI-Anwendungsbeispiele Wie Robert Gerlach vor dem Zubettgehen noch schnell ein Spiel programmieren ließ

ChatGPT eignet sich gerade mit dem neuen Modell GPT-4 gut, um auch als Nicht-Programmier-Profi eigene Ideen umzusetzen, Programmieren zu lernen oder sich inspirieren zu lassen. Was vorher Experten vorbehalten war, ist nun auch für Laien zugänglich, während Experten wiederum Dinge tun können, die vorher in derselben Zeit nicht möglich waren.

Einen Highscore von 37 musst du erst mal schaffen! – So sieht das mit ChatGPT innerhalb von zwei Stunden programmierte Spiel aus. Am Ende des Beitrags kannst du es selbst ausprobieren.

Täglich werden neue Anwendungsmöglichkeiten entdeckt und interessante KI-basierte Werkzeuge entwickelt. Als Momentaufnahme und Inspiration für euch teile ich (Robert Gerlach) hier das Beispiel eines komplett mit ChatGPT erstellten kleinen Spiels. Anhand der am Ende des Beitrags verlinkten vollständigen Codes könnt ihr gut nachvollziehen, auf welche Art und Weise man die KI auf dem Weg zum fertigen Programm anleitet. Ihr werdet sehen: Es hört sich wie das Gespräch eines Auftraggebers mit einem Programmierer an.

Die Herausforderung

Meine Idee war, ChatGPT mit dem gerade erschienenen Modell GPT-4 auf die Probe zu stellen. Der Vorgänger 3.5 war schon hilfreich beim Verstehen und Generieren von Code, machte aber oft noch Fehler. Was passiert nun, wenn ich ChatGPT bitte, ein komplettes kleines Browserspiel zu bauen und an meine Wünsche anzupassen, ohne selbst eine Zeile Code zu schreiben? Weitere Vorgabe: Das Ganze sollte nicht länger als 50 Fragen und 2 Stunden dauern, denn es war schon spät am Abend.

Wie kann man KI im beruflichen Umfeld nutzen, um schneller ans Ziel zu kommen? Wie formuliert man Fragen und Befehle und "promptet" so das richtige Ergebnis? Unsere Mitglieder lassen dich an ihrem Wissen und den Ergebnissen ihrer Experimente teilhaben, damit auch du von der stürmischen Entwicklung im Bereich KI profitieren kannst.

Bei meinem Vorgehen habe ich gemerkt: Passt etwas nicht, frage ich ChatGPT nach einer Lösung. Alles, was ich darüber hinaus tue, ist, den Code an passender Stelle einzufügen und evtl. Bilder zu suchen. Wo man den Code "an passender Stelle" einfügt und ausführt, das ist für Laien natürlich nicht klar, aber auch da kann man ChatGPT um Rat fragen. Hier macht es sich gut, Dateien auf dem lokalen Rechner zu speichern. Für kleinere Experimente ist CodePen praktisch.

ChatGPT baut ein Spiel

Meine Anforderung an das Spiel: Es soll mit einem Finger bzw. via Klick spielbar und nicht zu komplex sein. Da bietet sich Flappy Bird an. Ein Vogel flattert durch Röhren, fliegt höher, wenn man klickt und fällt runter, wenn nicht. Trifft er eine Röhre, ist's aus. Da es Tausende Varianten von Flappy Bird gibt, muss ich ChatGPT das Spielprinzip hoffentlich nicht weiter erklären.

Also, ChatGPT, bau mir bitte ein Flappy-Bird Spiel-in HTML, CSS und JavaScript, damit es im Browser läuft:

Ausschnitt des Dialogs mit ChatGPT. Hier aus Gewohnheit in Englisch, Deutsch sollte aber auch gut gehen.

Sieht vielversprechend aus. Die Chat-GPT-Ausgabe brach übrigens nach einigen Zeilen ab. In einem solchen Fall einfach "continue" tippen. Dann geht es nahtlos weiter. Den Code also in Dateien kopieren und im Browser ausführen:

Nicht übel. Der Code läuft und es ist prinzipiell ein Flappy-Bird-Spiel. Das war vor drei Wochen mit GPT-3 noch nicht immer möglich. Nur schön ist es nicht, spielbar auch weniger.

Also packe ich in die nächsten Fragen etwas Feintuning und ein Hintergrundbild. (Hier nur ein Ausschnitt, der gesamte Chat ist unten zu sehen). ChatGPT schlägt ein frei benutzbares von Unsplash vor, komfortabel. Ich muss nur noch runterladen und den Pfad anpassen, damit wir es nicht direkt von den Unsplash Servern laden.

Finetuning

Dann den Code nehmen, an die passende Stelle kopieren. Funktioniert:

Wir brauchen einen Zähler für die Zahl der durchflogenen Röhren. Jedoch, der Code von ChatGPT zählt falsch. Kein Problem:

Auch Maschinen machen Fehler

Der Vogel sollte bei Kollision natürlich explodieren…

💥

… aber, wo bekomm ich Explosions-Grafiken her?

Bildrecherche einfach gemacht

Mehr!

Einige Fragen bzw. Prompts weiter....

Bei Fehlern: einfach fragen. Aber wichtig: ChatGPTs "Gedächtnis" ist auf ein paar tausend Worte beschränkt. Ist die Konversation länger, werden die ersten Nachrichten vergessen. Somit hilft es, ChatGPT gelegentlich an den eigenen Code zu erinnern:

So wirke ich der KI-Demenz entgegen

Das fertige Spiel - Welchen Highscore schaffst du?

Rund 50 Fragen, 1,5 Stunden (und 20 US-Dollar für das "ChatGPT Plus"-Abo mit Zugriff auf GPT-4) später:

Ein netter Start und vor allem eine exzellente Lerngelegenheit, wenn man den Code nicht nur blind kopiert, sondern studiert und sich erklären lässt:

Ach, so geht das, danke!

Die Quellen der Bilder im Spiel:

Weiterführende Tipps

Eine (sehr) kleine Auswahl der jüngsten Entwicklungen:

Was nun?

Oder: Warum überhaupt noch Programmieren lernen? Sollte ich auf Prompt-Engineer oder Kartoffelbauer umschulen? Womöglich.

Aber wenn jeder diese Werkzeuge hat, gibt es immer jemanden, der sie besser zu benutzen weiß und Dinge erschafft, die andere nicht bauen können. Das Produktivitätsniveau von Programmierern und die Messlatte für Programme wurde gerade erhöht und steigt in Zukunft noch weiter. Auch ist noch völlig unklar, was überhaupt möglich sein wird oder wohin das führt. Drum lohnt es sich, sich mit den neuen Werkzeugen auseinanderzusetzen und damit zu spielen, um mitreden und die Lage besser einschätzen zu können. Das Gleiche gilt meines Erachtens auch für Künstler, Copywriter, Übersetzer, Coaches und alle anderen Wissensarbeiter.

Uncut: Das zweistündige Gespräch mit der Maschine in voller Länge

Der gesamte Chat, mit dem das Spiel erstellt wurde:

Neuester Hilfreichster Kontroversester
Kommentar schreiben
Abbrechen

Du möchtest Kommentare bearbeiten, voten und über Antworten benachrichtigt werden?

Jetzt kostenlos Community-Mitglied werden

Zum Seitenanfang

#

#
# #