Erstellen eines Lernspiels mit KI-Tools und Azure Static Web Apps (Teil 1)

Haben Sie sich jemals gefragt, wie Spiele das Lernen revolutionieren können? Die Idee, Kreativität, Technologie und Spaß zu vereinen, faszinierte mich und veranlasste mich, ein lehrreiches Visual-Novel-Spiel zu entwickeln. Obwohl es mir an Erfahrung in der Spieleentwicklung mangelte, begann ich diese Reise mit Ren'Py, einer auf Python basierenden Engine für visuelle Romane. Unter Nutzung von KI-Tools für eine beschleunigte Entwicklung und Azure Static Web Apps für die Bereitstellung habe ich einen Prototyp erstellt, der die Codierungsunterstützung von GitHub Copilot lehrt. Ein festliches Dezember-Thema sorgte für zusätzlichen Genuss.

Dieser Beitrag beschreibt meinen Ansatz:

• Spielerstellung mit dem Ren'Py-Framework.
• Nutzung von KI-Tools (GitHub Copilot, Azure OpenAI Service) für schnellere Entwicklung und Generierung visueller Assets.
• Automatisierte Erstellung und Bereitstellung über GitHub Actions und Azure Static Web Apps.

Interessiert? Spielen Sie das Spiel online und greifen Sie auf den Quellcode in meinem GitHub-Repository zu (Link der Kürze halber weggelassen).

Die Genesis

Es gibt zahlreiche Lernspiele für Cloud-Technologien, die alle Fähigkeitsstufen abdecken. Microsofts Microsoft Technical Quest (ein Kartenspiel, das Azure-Dienste nutzt) und ähnliche AWS-Angebote sind Beispiele für spielerisches Lernen in der Cloud.

Inspiriert durch „Azure Space Mystery“ von Microsoft Cloud Advocates (ein textbasiertes Spiel mit Bildern und interaktiven Fragen) wollte ich ein ähnliches Erlebnis schaffen und ein technisches Konzept durch ein textbasiertes Spiel mit Quizzen und Leistungsbelohnungen vermitteln . Die jüngste Popularität von GitHub Copilot machte es zu meinem zentralen Thema, ergänzt durch eine festliche Dezember-Umgebung.

Das Ergebnis: Christmas Copilot Quest, ein Spiel, das Spieler durch die Verwendung von GitHub Copilot in Visual Studio Code führt, wobei GingerBot (Santas Copilot-Assistent) interaktive Anleitungen bietet.

Spiel-Screenshots: Hauptmenü, Dialogbeispiel, Seite mit Lernressourcen.

Ein textbasiertes Spiel erstellen

Tech-Stack:

Zu meinen Anforderungen gehörten nichtlineares Storytelling mit Quizzen, die sich auf den Spielfluss auswirken, UI-Anpassung, Flexibilität bei benutzerdefinierten Komponenten und die Bereitstellung von Web-Apps. Die Vertrautheit mit Python führte mich zu Ren'Py, das mit seiner Skriptsprache für Story, Quiz und UI-Anpassung alle Anforderungen erfüllt. Die Python-Erweiterbarkeit und Web-Exportfunktionen sowie die CLI für automatisierte Builds und Bereitstellungen waren Schlüsselfaktoren.

Spielstruktur:

Das Spiel besteht aus drei Hauptkomponenten:

Skript: Die Erzählung (Monologe/Dialoge) und Quizze, gegliedert in beschriftete Abschnitte.

Spiel-Screenshots: Dialogbeispiel, Spielerquiz.

Grafische Benutzeroberfläche (GUI): Bildschirme, Menüs und visuelle Elemente. Ren'Py ermöglichte sowohl die integrierte Bildschirmanpassung (Schaltflächen, Menüs) als auch die Erstellung neuer Bildschirme (Erfolgsbenachrichtigungen, Ressourcenmenüs).

Benutzerdefinierte Spielbildschirme: Charakterauswahl, Erfolgsbenachrichtigung, Erfolgsbildschirm.

Benutzerdefinierter Python-Code: Fügt spielspezifische Funktionen hinzu (Erfolgssystem, Charakterdefinitionen, GUI-Dienstprogramme). Diese Komponenten wurden aus Gründen der Wartbarkeit getrennt gehalten. Beispielsweise wird eine Python-Funktion, die Spielernamen ermittelt, direkt aus dem Skript aufgerufen:

<code class="language-python">label introduction:
    felix "Ah, you must be the new coder Santa called for! What's your name?"

    $ player_input = renpy.input(
        _("(Type your name and press Enter, or press Enter to use the default name, [character_name].)")
    )
    $ player_name = character_utils.determine_player_name(player_input)

    player "I'm [player_name]."</code>

KI-Integration in der Entwicklung

GitHub Copilot: Entscheidend für die Navigation in Ren'Py. Während sich die begrenzten Daten von Ren'Py möglicherweise auf die Genauigkeit auswirken, hat Copilot weitgehend dazu beigetragen, Ren'Py-Komponenten zu verstehen, beispielsweise indem es einen Charakterauswahlbildschirm mit Bildschaltflächen vorschlug.

Vorschlag für den Charakterauswahlbildschirm von GitHub Copilot.

KI-Bildgenerierung: Um schnell Bilder zu erstellen, habe ich KI-Tools verwendet. DALL-E 3 (Azure OpenAI Service) lieferte zunächst ordentliche Bilder, aber die Beibehaltung eines konsistenten Stils erwies sich als Herausforderung. Microsoft Designer bot eine bessere Konsistenz, insbesondere die Text-zu-Bild-Funktion für Avatare. Eine „Low-Poly“-Ästhetik sorgte für Konsistenz und passte zum Stil des Spiels. Beispielaufforderung:

„Low-Poly-3D-Porträt einer stilisierten Frau mit braunem Haar, die eine Bluse in Weihnachtsfarben trägt, mit klaren geometrischen Formen, flachen Farben und sanfter Beleuchtung, in einem minimalistischen futuristischen Stil mit weißem Hintergrund.“

Erzeugte Bilder wurden mit Filtern zur Rauschunterdrückung, Farbglättung, Hintergrundentfernung und Hervorhebung von Polygonkanten verarbeitet. Bildkombinationen und Duplikate erzeugten atemberaubende Effekte.

Fazit und nächste Schritte

In diesem Beitrag wurden Ren'Py und KI-Tools (GitHub Copilot, Azure OpenAI Service, Microsoft Designer) bei der Erstellung eines Lernspiel-Prototyps demonstriert. Der nächste Schritt ist die Bereitstellung unter Nutzung der CLI von Ren'Py und der GitHub Actions-Integration von Azure Static Web Apps. Die folgenden Ressourcen bieten weitere Informationen zu GitHub Copilot und DALL-E 3. (Links der Kürze halber weggelassen).

Das obige ist der detaillierte Inhalt vonErstellen eines Lernspiels mit KI-Tools und Azure Static Web Apps (Teil 1). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!