


Building an educational game with AI tools and Azure Static Web Apps (Part 1)
Jan 09, 2025 am 06:58 AMEver wondered how games can revolutionize learning? I was captivated by the idea of merging creativity, technology, and fun, leading me to develop an educational visual novel game. Despite lacking game development experience, I embarked on this journey using Ren'Py, a Python-based visual novel engine. Leveraging AI tools for accelerated development and Azure Static Web Apps for deployment, I built a prototype teaching GitHub Copilot's coding assistance. A festive December theme added an extra layer of enjoyment.
This post details my approach:
- Game creation with the Ren'Py framework.
- AI tool usage (GitHub Copilot, Azure OpenAI Service) for faster development and visual asset generation.
- Automated build and deployment via GitHub Actions and Azure Static Web Apps.
Intrigued? Play the game online and access the source code on my GitHub repository (link omitted for brevity).
The Genesis
Numerous educational games exist for cloud technologies, catering to all skill levels. Microsoft's Microsoft Technical Quest (a card game using Azure services) and similar AWS offerings exemplify gamified cloud learning.
Inspired by Microsoft Cloud Advocates' "Azure Space Mystery" (a text-based game with visuals and interactive questions), I aimed to create a similar experience, teaching a technical concept through a text-based game with quizzes and achievement rewards. GitHub Copilot's recent popularity made it my central theme, complemented by a festive December setting.
The result: Christmas Copilot Quest, a game guiding players through GitHub Copilot usage in Visual Studio Code, with GingerBot (Santa's Copilot-powered assistant) providing interactive guidance.
Game screenshots: Main menu, dialogue example, learning resources page.
Crafting a Text-Based Game
Tech Stack:
My requirements included non-linear storytelling with quizzes impacting game flow, UI customization, custom component flexibility, and web app deployment. Python's familiarity led me to Ren'Py, fulfilling all needs with its scripting language for story, quizzes, and UI customization. Its Python extensibility and web export capabilities, along with its CLI for automated builds and deployments, were key factors.
Game Structure:
The game comprises three main components:
Script: The narrative (monologues/dialogues) and quizzes, organized into labeled sections.
Game screenshots: Dialogue example, player quiz.
Graphical User Interface (GUI): Screens, menus, and visual elements. Ren'Py allowed both built-in screen customization (buttons, menus) and new screen creation (achievement notifications, resource menus).
Custom game screens: Character selection, achievement notification, achievements screen.
Custom Python Code: Adds game-specific functionality (achievement system, character definitions, GUI utilities). These components were kept separate for maintainability. For example, a Python function determining player names is called directly from the 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]."
AI Integration in Development
GitHub Copilot: Crucial for navigating Ren'Py. While Ren'Py's limited data might affect accuracy, Copilot largely helped understand Ren'Py components, such as suggesting a character selection screen with image buttons.
GitHub Copilot's character selection screen suggestion.
AI Image Generation: To quickly create visuals, I used AI tools. DALL-E 3 (Azure OpenAI Service) initially provided decent images, but maintaining consistent style proved challenging. Microsoft Designer offered better consistency, particularly its avatar text-to-image feature. A "low poly" aesthetic ensured consistency and matched the game's style. Example prompt:
"Low-poly 3D portrait of a stylized woman with brown hair, wearing a blouse in christmas colors, featuring clean geometric shapes, flat colors, and soft lighting, in a minimalist futuristic style with white background."
Generated images were processed using filters for noise reduction, color smoothing, background removal, and polygon edge highlighting. Image combinations and duplicates created eye-blinking effects.
Conclusion and Next Steps
This post demonstrated Ren'Py and AI tools (GitHub Copilot, Azure OpenAI Service, Microsoft Designer) in creating an educational game prototype. The next step is deployment, leveraging Ren'Py's CLI and Azure Static Web Apps' GitHub Actions integration. The following resources offer further information on GitHub Copilot and DALL-E 3. (Links omitted for brevity).
The above is the detailed content of Building an educational game with AI tools and Azure Static Web Apps (Part 1). For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Dynamic programming (DP) optimizes the solution process by breaking down complex problems into simpler subproblems and storing their results to avoid repeated calculations. There are two main methods: 1. Top-down (memorization): recursively decompose the problem and use cache to store intermediate results; 2. Bottom-up (table): Iteratively build solutions from the basic situation. Suitable for scenarios where maximum/minimum values, optimal solutions or overlapping subproblems are required, such as Fibonacci sequences, backpacking problems, etc. In Python, it can be implemented through decorators or arrays, and attention should be paid to identifying recursive relationships, defining the benchmark situation, and optimizing the complexity of space.

Python's socket module is the basis of network programming, providing low-level network communication functions, suitable for building client and server applications. To set up a basic TCP server, you need to use socket.socket() to create objects, bind addresses and ports, call .listen() to listen for connections, and accept client connections through .accept(). To build a TCP client, you need to create a socket object and call .connect() to connect to the server, then use .sendall() to send data and .recv() to receive responses. To handle multiple clients, you can use 1. Threads: start a new thread every time you connect; 2. Asynchronous I/O: For example, the asyncio library can achieve non-blocking communication. Things to note

The core answer to Python list slicing is to master the [start:end:step] syntax and understand its behavior. 1. The basic format of list slicing is list[start:end:step], where start is the starting index (included), end is the end index (not included), and step is the step size; 2. Omit start by default start from 0, omit end by default to the end, omit step by default to 1; 3. Use my_list[:n] to get the first n items, and use my_list[-n:] to get the last n items; 4. Use step to skip elements, such as my_list[::2] to get even digits, and negative step values ??can invert the list; 5. Common misunderstandings include the end index not

Python's datetime module can meet basic date and time processing requirements. 1. You can get the current date and time through datetime.now(), or you can extract .date() and .time() respectively. 2. Can manually create specific date and time objects, such as datetime(year=2025, month=12, day=25, hour=18, minute=30). 3. Use .strftime() to output strings in format. Common codes include %Y, %m, %d, %H, %M, and %S; use strptime() to parse the string into a datetime object. 4. Use timedelta for date shipping

Polymorphism is a core concept in Python object-oriented programming, referring to "one interface, multiple implementations", allowing for unified processing of different types of objects. 1. Polymorphism is implemented through method rewriting. Subclasses can redefine parent class methods. For example, the spoke() method of Animal class has different implementations in Dog and Cat subclasses. 2. The practical uses of polymorphism include simplifying the code structure and enhancing scalability, such as calling the draw() method uniformly in the graphical drawing program, or handling the common behavior of different characters in game development. 3. Python implementation polymorphism needs to satisfy: the parent class defines a method, and the child class overrides the method, but does not require inheritance of the same parent class. As long as the object implements the same method, this is called the "duck type". 4. Things to note include the maintenance

The "Hello,World!" program is the most basic example written in Python, which is used to demonstrate the basic syntax and verify that the development environment is configured correctly. 1. It is implemented through a line of code print("Hello,World!"), and after running, the specified text will be output on the console; 2. The running steps include installing Python, writing code with a text editor, saving as a .py file, and executing the file in the terminal; 3. Common errors include missing brackets or quotes, misuse of capital Print, not saving as .py format, and running environment errors; 4. Optional tools include local text editor terminal, online editor (such as replit.com)

TuplesinPythonareimmutabledatastructuresusedtostorecollectionsofitems,whereaslistsaremutable.Tuplesaredefinedwithparenthesesandcommas,supportindexing,andcannotbemodifiedaftercreation,makingthemfasterandmorememory-efficientthanlists.Usetuplesfordatain

To generate a random string, you can use Python's random and string module combination. The specific steps are: 1. Import random and string modules; 2. Define character pools such as string.ascii_letters and string.digits; 3. Set the required length; 4. Call random.choices() to generate strings. For example, the code includes importrandom and importstring, set length=10, characters=string.ascii_letters string.digits and execute ''.join(random.c
