Créer un jeu éducatif avec des outils d'IA et Azure Static Web Apps (Partie 1)

Vous êtes-vous déjà demandé comment les jeux pouvaient révolutionner l'apprentissage ? J'ai été captivé par l'idée de fusionner créativité, technologie et plaisir, ce qui m'a amené à développer un jeu de roman visuel éducatif. Malgré mon manque d'expérience en développement de jeux, je me suis lancé dans cette aventure en utilisant Ren'Py, un moteur de roman visuel basé sur Python. En tirant parti des outils d'IA pour un développement accéléré et d'Azure Static Web Apps pour le déploiement, j'ai construit un prototype enseignant l'assistance au codage de GitHub Copilot. Un thème festif de décembre a ajouté une couche supplémentaire de plaisir.

Ce post détaille ma démarche :

• Création de jeux avec le framework Ren'Py.
• Utilisation d'outils d'IA (GitHub Copilot, Azure OpenAI Service) pour un développement et une génération d'actifs visuels plus rapides.
• Création et déploiement automatisés via GitHub Actions et Azure Static Web Apps.

Intrigué ? Jouez au jeu en ligne et accédez au code source sur mon référentiel GitHub (lien omis par souci de concision).

La Genèse

De nombreux jeux éducatifs existent pour les technologies cloud, s'adressant à tous les niveaux de compétence. Le Microsoft Technical Quest de Microsoft (un jeu de cartes utilisant les services Azure) et les offres AWS similaires illustrent l'apprentissage cloud gamifié.

Inspiré par "Azure Space Mystery" de Microsoft Cloud Advocates (un jeu textuel avec des visuels et des questions interactives), mon objectif était de créer une expérience similaire, en enseignant un concept technique à travers un jeu textuel avec des quiz et des récompenses de réussite. . La récente popularité de GitHub Copilot en a fait mon thème central, complété par un décor festif de décembre.

Le résultat : Christmas Copilot Quest, un jeu guidant les joueurs tout au long de l'utilisation de GitHub Copilot dans Visual Studio Code, avec GingerBot (l'assistant alimenté par le copilote du Père Noël) fournissant des conseils interactifs.

Captures d'écran du jeu : menu principal, exemple de dialogue, page de ressources d'apprentissage.

Créer un jeu basé sur du texte

Pile technologique :

Mes exigences incluaient une narration non linéaire avec des quiz ayant un impact sur le déroulement du jeu, la personnalisation de l'interface utilisateur, la flexibilité des composants personnalisés et le déploiement d'applications Web. La familiarité de Python m'a conduit à Ren'Py, répondant à tous les besoins grâce à son langage de script pour l'histoire, les quiz et la personnalisation de l'interface utilisateur. Son extensibilité Python et ses capacités d'exportation Web, ainsi que sa CLI pour les builds et les déploiements automatisés, ont été des facteurs clés.

Structure du jeu :

Le jeu comprend trois éléments principaux :

Script : Le récit (monologues/dialogues) et les quiz, organisés en sections étiquetées.

Captures d'écran du jeu : exemple de dialogue, quiz des joueurs.

Interface utilisateur graphique (GUI) : Écrans, menus et éléments visuels. Ren'Py permettait à la fois la personnalisation d'écran intégrée (boutons, menus) et la création de nouveaux écrans (notifications de réussite, menus de ressources).

Écrans de jeu personnalisés : sélection de personnage, notification de réussite, écran de réussite.

Code Python personnalisé : Ajoute des fonctionnalités spécifiques au jeu (système de succès, définitions de personnages, utilitaires GUI). Ces composants ont été conservés séparés pour des raisons de maintenabilité. Par exemple, une fonction Python déterminant les noms des joueurs est appelée directement depuis le script :

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]."

Intégration de l'IA dans le développement

GitHub Copilot : Crucial pour naviguer dans Ren'Py. Bien que les données limitées de Ren'Py puissent affecter la précision, Copilot a largement aidé à comprendre les composants de Ren'Py, comme la suggestion d'un écran de sélection de personnage avec des boutons d'image.

Suggestion d'écran de sélection de personnage de GitHub Copilot.

Génération d'images IA : Pour créer rapidement des visuels, j'ai utilisé des outils d'IA. DALL-E 3 (Azure OpenAI Service) fournissait initialement des images correctes, mais maintenir un style cohérent s'est avéré difficile. Microsoft Designer offrait une meilleure cohérence, en particulier sa fonctionnalité de conversion texte-image d'avatar. Une esthétique « low poly » assurait la cohérence et correspondait au style du jeu. Exemple d'invite :

"Portrait 3D low-poly d'une femme stylisée aux cheveux bruns, portant un chemisier aux couleurs de Noël, présentant des formes géométriques épurées, des couleurs plates et un éclairage doux, dans un style futuriste minimaliste avec fond blanc."

Les images générées ont été traitées à l'aide de filtres pour la réduction du bruit, le lissage des couleurs, la suppression de l'arrière-plan et la mise en évidence des bords des polygones. Les combinaisons d'images et les doublons ont créé des effets clignotants.

Conclusion et prochaines étapes

Cet article présente Ren'Py et les outils d'IA (GitHub Copilot, Azure OpenAI Service, Microsoft Designer) pour créer un prototype de jeu éducatif. La prochaine étape est le déploiement, en tirant parti de l'intégration des actions GitHub de Ren'Py et d'Azure Static Web Apps. Les ressources suivantes offrent des informations supplémentaires sur GitHub Copilot et DALL-E 3. (Liens omis par souci de concision).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!