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는 대화형 안내를 제공하는 GingerBot(산타의 Copilot 기반 도우미)와 함께 Visual Studio Code에서 GitHub Copilot 사용을 통해 플레이어를 안내하는 게임입니다.

게임 스크린샷: 메인 메뉴, 대화 예시, 학습 자료 페이지

텍스트 기반 게임 제작

테크 스택:

내 요구 사항에는 게임 흐름에 영향을 미치는 퀴즈가 포함된 비선형 스토리텔링, UI 사용자 정의, 사용자 정의 구성 요소 유연성 및 웹 앱 배포가 포함되었습니다. Python의 친숙함 때문에 스토리, 퀴즈, UI 사용자 정의를 위한 스크립트 언어로 모든 요구 사항을 충족하는 Ren'Py를 선택하게 되었습니다. 자동화된 빌드 및 배포를 위한 CLI와 함께 Python 확장성 및 웹 내보내기 기능이 핵심 요소였습니다.

게임 구조:

게임은 세 가지 주요 구성 요소로 구성됩니다.

스크립트: 내러티브(독백/대화)와 퀴즈가 라벨이 지정된 섹션으로 구성됩니다.

게임 스크린샷: 대화 예시, 플레이어 퀴즈

그래픽 사용자 인터페이스(GUI): 화면, 메뉴 및 시각적 요소. 렌파이는 내장된 화면 사용자 정의(버튼, 메뉴)와 새로운 화면 생성(업적 알림, 리소스 메뉴)을 모두 허용했습니다.

사용자 정의 게임 화면: 캐릭터 선택, 업적 알림, 업적 화면.

사용자 정의 Python 코드: 게임별 기능(업적 시스템, 캐릭터 정의, GUI 유틸리티)을 추가합니다. 이러한 구성 요소는 유지 관리를 위해 별도로 보관되었습니다. 예를 들어 플레이어 이름을 결정하는 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]."

개발 중인 AI 통합

GitHub Copilot: Ren'Py를 탐색하는 데 매우 중요합니다. 렌파이의 제한된 데이터가 정확성에 영향을 미칠 수 있지만, Copilot은 이미지 버튼이 있는 캐릭터 선택 화면을 제안하는 등 렌파이 구성 요소를 이해하는 데 큰 도움이 되었습니다.

GitHub Copilot의 캐릭터 선택 화면 제안

AI 이미지 생성: 비주얼을 빠르게 만들기 위해 AI 도구를 사용했습니다. 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 Static Web Apps를 사용하여 교육용 게임 빌드(1부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!