AI ツールと Azure Static Web Apps を使用した教育ゲームの構築 (パート 1)

ゲームがどのように学習に革命をもたらすのか考えたことはありますか? 私は創造性、テクノロジー、楽しさを融合するというアイデアに魅了され、教育的なビジュアル ノベル ゲームを開発することにしました。ゲーム開発の経験はありませんでしたが、Python ベースのビジュアル ノベル エンジンである Ren'Py を使用してこの取り組みに着手しました。 開発を加速するために AI ツールを活用し、デプロイに Azure Static Web Apps を活用して、GitHub Copilot のコーディング支援を教えるプロトタイプを構築しました。 12 月のお祝いのテーマにより、楽しみがさらに加わりました。

この投稿では私のアプローチについて詳しく説明します:

• Ren'Py フレームワークを使用したゲーム作成。
• 開発を迅速化し、ビジュアル アセットを生成するための AI ツール (GitHub Copilot、Azure OpenAI Service) の使用。
• 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 が重要な要素でした。

ゲーム構造:

ゲームは 3 つの主要なコンポーネントで構成されています:

スクリプト: ラベル付きセクションに編成された物語 (モノローグ/対話) とクイズ。

ゲームのスクリーンショット: ダイアログの例、プレイヤーのクイズ。

グラフィカル ユーザー インターフェイス (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 のキャラクター選択画面の提案。

AI 画像生成: ビジュアルをすばやく作成するために、AI ツールを使用しました。 DALL-E 3 (Azure OpenAI Service) は当初、まともな画像を提供していましたが、一貫したスタイルを維持するのが難しいことが判明しました。 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 Static Web Apps を使用した教育ゲームの構築 (パート 1)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。