使用 AI 工具和 Azure 静态 Web 应用构建教育游戏（第 1 部分）

探索游戏化学习：一个使用ren'py和ai构建的教育视觉小说游戏

一直以来，将创造力、技术和趣味性融合于一体的理念都深深吸引着我。最近，我尝试通过开发一款教育性质的视觉小说游戏来探索这种可能性。虽然我缺乏游戏开发经验，但我渴望尝试新事物，因此我选择使用Ren'Py——一个基于Python的视觉小说引擎——作为我的起点。为了加快开发速度，我利用了AI工具，并使用Azure静态Web应用进行部署，最终创建了一个交互式游戏原型，旨在教授如何使用GitHub Copilot辅助编码任务。考虑到游戏开发的月份是12月，我还为游戏增添了节日氛围，以增强游戏体验。

本文将分享我的开发过程，包括：

• 使用Ren'Py框架构建游戏。
• 利用GitHub Copilot、Azure OpenAI服务等AI工具来加速开发并生成游戏视觉素材。
• 使用GitHub Actions和Azure静态Web应用自动化构建和部署流程。

想体验一下吗？您可以在线试玩游戏，并访问我的GitHub仓库查看源代码。

市面上已存在许多关于云技术的教育游戏，涵盖从入门到高级用户的各个层面。例如，微软提供了Microsoft Technical Quest，这是一款基于纸牌的游戏，玩家可以使用Azure服务构建参考架构。其他云服务提供商，如AWS，也提供基于游戏的培训，帮助用户以一种趣味横生的方式学习云解决方案的构建方法。

几年前，我玩过一款名为Azure Space Mystery的游戏，该游戏由微软云倡导者为国际妇女和女孩科学日特别打造。这是一款基于文本的游戏，拥有丰富的图形，并通过关卡挑战来推进游戏进程。我们的目标是让微软学习内容以更具吸引力的方式触达开发者。

尽管缺乏游戏开发经验，我还是想尝试创建一个类似的游戏。我的想法是创建一个基于文本的游戏，教授技术概念，包含简短的测验，并在玩家取得进展时给予成就奖励。鉴于GitHub Copilot近期备受关注，我决定将其作为游戏的核心主题。由于游戏开发始于12月，因此我还加入了节日主题元素。

最终成果是圣诞Copilot任务（Christmas Copilot Quest），玩家可以在游戏中学习如何在Visual Studio Code中使用GitHub Copilot辅助完成编码任务。在圣诞老人风格的Copilot助手Gingerbot的引导下，玩家将以互动的方式了解GitHub Copilot的功能。

展示主菜单、对话示例和学习资源页面的游戏屏幕截图

市面上有很多优秀的工具可用于构建基于文本的游戏，但我有一些关键需求：

• 支持编写包含测验或选择分支，从而影响游戏流程的非线性故事。
• 可自定义游戏用户界面。
• 灵活编写自定义组件。
• 支持将游戏部署为Web应用程序。

由于Python是我的首选语言，我自然而然地选择了Ren'Py，这是一个基于Python的视觉小说引擎。它满足了我的所有需求，提供了一种易于使用的脚本语言来编写故事、定义测验和自定义UI。它还允许使用Python扩展其内置功能，并将游戏导出到桌面、移动和Web平台。此外，Ren'Py命令行界面(CLI)的可用性使我能够自动化游戏的构建和部署流程。

游戏围绕三个核心组件构建：

脚本：包含游戏的故事和测验。叙述可以是独白或角色间的对话。故事被组织成由标签标识的部分。

游戏截图，展示对话示例和供玩家回答的测验

图形用户界面(GUI)：涵盖游戏中显示的所有屏幕和菜单，以及使用的视觉元素。Ren'Py脚本语言允许自定义内置屏幕（例如按钮和菜单），并创建新的屏幕，例如：

• 向玩家显示成就解锁信息的通知屏幕。
• 显示已获得成就和学习资源的菜单。

自定义游戏屏幕：角色选择（左）、成就解锁通知（中）和已获得成就屏幕（右）

自定义Python代码：提供根据游戏需求定制的附加功能。最新版本的Ren'Py支持使用Python 3.9编写自定义组件脚本。游戏中的自定义组件包括：

• 成就系统，允许玩家通过完成特定任务来获得奖励，并且成就会被持久存储。
• 角色定义和实用程序功能，使玩家能够选择自己喜欢的角色和名称。
• GUI实用程序，例如图像转换（例如眨眼效果）以及用Python编写的自定义字体和文本样式。

为了保持游戏的可维护性和可扩展性，这些组件是相互独立的。脚本定义故事，而逻辑则被组织成Python模块，在Ren'Py中称为存储（store）。例如，可以直接从脚本调用根据玩家输入确定玩家姓名的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]."

我发现GitHub Copilot对于学习和理解Ren'Py非常有帮助，这是一个我以前从未使用过的框架。尽管Ren'Py并非一个广泛使用的框架，可用于训练的数据可能有限，但GitHub Copilot正确地回答了我的大部分问题，并帮助我理解各种Ren'Py组件的工作原理。一个例子是它建议实现带有图像按钮的角色选择屏幕。

GitHub Copilot建议的角色选择屏幕实现

这个建议非常准确，并提供了一个坚实的起点，使我能够快速开发屏幕。然而，Copilot并没有提供向屏幕按钮添加悬停过渡的正确实现。考虑到Ren'Py并非一种广泛使用的语言，这在某种程度上是可以预料的。

为了快速创建一个简单的游戏，我没有时间自己设计所有图形。我使用人工智能驱动的图像生成工具来创建游戏中使用的角色和背景图像。我的关键需求是所有图像的风格一致以及节日主题。

我首先尝试了DALL-E 3模型，可以通过Azure OpenAI服务访问。虽然生成的图像质量不错，但我发现保持所有图像风格的一致性具有挑战性。

然后，我转向了Microsoft Designer，这是一个微软推出的基于人工智能的云端图形设计应用程序。它在不同的请求中提供了更一致的结果，更符合我的需求。对于角色创建，我使用了头像文本到图像功能，对于背景，我使用了默认功能。在尝试了多种风格后，我选择了“低多边形”的美学风格，因为它既能提供一致的结果，又能提供与游戏趣味性、游戏化本质相匹配的外观。以下是我用来生成角色图像的提示示例：

“一位棕色头发的风格化女性的低多边形3D肖像，穿着圣诞颜色的衬衫，具有干净的几何形状、平坦的颜色和柔和的灯光，采用白色背景的简约未来主义风格。”

我通过应用滤镜来处理生成的图像，以减少噪点、平滑颜色、去除背景并突出显示多边形的边缘。在某些情况下，我组合了两个图像来创建最终的角色设计，并生成了闭着眼睛的重复图像，以在游戏中产生眨眼效果。

总的来说，我发现这些工具对于快速生成视觉资产非常有帮助。虽然我为每个角色创建了数百个版本（好吧，也许我有点完美主义！），但人工智能工具对于生成符合游戏主题的图像来说非常宝贵。

本文探讨了如何使用基于Python的视觉小说引擎Ren'Py，以及GitHub Copilot、Azure OpenAI服务和Microsoft Designer等AI工具来创建教育游戏原型。接下来是什么呢？我们需要部署该应用程序。幸运的是，Ren'Py提供了一个CLI工具来自动化游戏构建，并且Azure静态Web应用与GitHub Actions无缝集成。在下一篇文章中，我将向您展示如何设置GitHub Actions工作流程来自动化游戏的构建和部署过程。

同时，您可以查看以下资源以了解有关GitHub Copilot和DALL-E 3模型的更多信息：

• GitHub Copilot基础知识 - 了解AI结对编程
• 使用GitHub Copilot加速应用程序开发
• GitHub Copilot聊天食谱
• 使用Azure OpenAI服务生成图像

以上就是使用 AI 工具和 Azure 静态 Web 应用构建教育游戏（第 1 部分）的详细内容，更多请关注知识资源分享宝库其它相关文章！