使用 AI 工具和 Azure 靜態 Web 應用程式建構教育遊戲（第 1 部分）

有沒有想過遊戲如何徹底改變學習？ 我對融合創造力、技術和樂趣的想法著迷，促使我開發了一款教育視覺小說遊戲。儘管缺乏遊戲開發經驗，我還是使用基於 Python 的視覺小說引擎 Ren'Py 踏上了這段旅程。 利用 AI 工具進行加速開發和 Azure Static Web Apps 進行部署，我建立了一個原型來教導 GitHub Copilot 的編碼輔助功能。 十二月的節日主題增添了額外的享受。

這篇文章詳細介紹了我的方法：

• 使用Ren'Py框架創建遊戲。
• 使用 AI 工具（GitHub Copilot、Azure OpenAI 服務）來加速開發和視覺資產產生。
• 透過 GitHub Actions 和 Azure Static Web Apps 自動建置和部署。

有興趣嗎？在線玩遊戲並訪問我的 GitHub 存儲庫上的源代碼（為簡潔起見，省略了鏈接）。

創世紀

雲端技術有許多教育遊戲，適合所有技能等級。 Microsoft 的 Microsoft Technical Quest（使用 Azure 服務的紙牌遊戲）和類似的 AWS 產品體現了遊戲化雲端學習。

受到Microsoft Cloud Advocates 的「Azure Space Mystery」（一款帶有視覺效果和互動問題的文本遊戲）的啟發，我的目標是創造類似的體驗，透過帶有測驗和成就獎勵的文本遊戲教授技術概念。 GitHub Copilot 最近的流行使其成為我的中心主題，並輔以 12 月的節日氛圍。

結果：Christmas Copilot Quest，一款引導玩家在 Visual Studio Code 中使用 GitHub Copilot 的遊戲，並由 GingerBot（聖誕老人的 Copilot 支援的助手）提供互動式指導。

遊戲截圖：主選單、對話範例、學習資源頁。

製作以文字為主的遊戲

技術堆疊：

我的要求包括非線性講故事以及影響遊戲流程的測驗、UI 自訂、自訂元件靈活性和 Web 應用程式部署。 對 Python 的熟悉讓我選擇了 Ren'Py，它的腳本語言滿足了故事、測驗和 UI 客製化的所有需求。 它的 Python 可擴展性和 Web 匯出功能，以及用於自動建置和部署的 CLI，是關鍵因素。

遊戲結構：

遊戲由三個主要部分組成：

劇本：敘述（獨白/對話）和測驗，組織成有標籤的部分。

遊戲截圖：對話範例、玩家問答。

圖形使用者介面 (GUI)： 螢幕、選單和視覺元素。 Ren'Py 允許內建螢幕自訂（按鈕、選單）和新螢幕建立（成就通知、資源選單）。

自訂遊戲畫面：角色選擇、成就通知、成就畫面。

自訂 Python 程式碼： 新增遊戲特定功能（成就係統、角色定義、GUI 實用程式）。 為了可維護性，這些組件保持獨立。 例如，直接從腳本呼叫確定玩家名稱的 Python 函數：

<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>

AI 整合開發

GitHub Copilot： 對於導航 Ren'Py 至關重要。 雖然 Ren'Py 的有限數據可能會影響準確性，但 Copilot 在很大程度上幫助理解了 Ren'Py 組件，例如建議帶有圖像按鈕的角色選擇畫面。

GitHub Copilot 的角色選擇畫面建議。

人工智慧影像產生：為了快速創造視覺效果，我使用了人工智慧工具。 DALL-E 3（Azure OpenAI 服務）最初提供了不錯的圖像，但事實證明保持一致的風格具有挑戰性。 Microsoft Designer 提供了更好的一致性，特別是其頭像文字到圖像功能。 「低多邊形」美學確保了一致性並符合遊戲的風格。 提示範例：

「一位棕色頭髮的風格化女性的低多邊形3D 肖像，穿著聖誕顏色的襯衫，具有乾淨的幾何形狀、平坦的顏色和柔和的燈光，採用白色背景的簡約未來主義風格。 ”

使用濾鏡處理產生的影像，以進行降噪、顏色平滑、背景移除和多邊形邊緣突出顯示。 影像組合和重複創造了令人眨眼的效果。

結論與後續步驟

這篇文章示範了 Ren'Py 和 AI 工具（GitHub Copilot、Azure OpenAI Service、Microsoft Designer）如何創建教育遊戲原型。 下一步是部署，利用 Ren'Py 的 CLI 和 Azure Static Web Apps 的 GitHub Actions 整合。 以下資源提供了有關 GitHub Copilot 和 DALL-E 3 的更多資訊。 （為簡潔起見，省略了連結）。

以上是使用 AI 工具和 Azure 靜態 Web 應用程式建構教育遊戲（第 1 部分）的詳細內容。更多資訊請關注PHP中文網其他相關文章！