지식 기반 Ai 챗봇을 이용한 게임 가이드 구현

HANBYEOL LEEHANBYEOL LEE
3 min read

게임 시스템은 매우 복잡하기 때문에, 게이머의 편의를 위해 각종 튜토리얼과 가이드를 제공하는 것이 중요합니다. 그러나 튜토리얼 작업에는 많은 시간이 소요되고, 시스템이 변경될 때마다 이를 수정해야 하는 어려움이 있습니다.

지식 기반 AI 챗봇을 이용하여 게이머가 개발사의 공식 정보를 쉽게 확인할 수 있도록 하고, 개발사는 튜토리얼 개발에 소요되는 리소스를 줄일 수 있는 방법을 Unity WebView 와 Sendbird AI chatbot을 이용하여 구현해 보았습니다.

챗봇에게 적절한 정보를 제공하면, 다음과 같은 질문에 대한 답변도 가능합니다

  • 전설 아이템 제작 하는 방법 알려줄 수 있어?

  • 레벨 10에 적당한 사냥터는 어디일까?

  • 공격력이 가장 높은 검은 어떤 거야? 어디서 획득할 수 있어?

  • 10번 스테이지 보스 공략법 알려줄 수 있어?

이처럼 AI 챗봇을 통해 게이머는 언제든지 필요한 정보를 손쉽게 얻을 수 있으며, 이는 게임 플레이의 몰입도를 높이는 데 큰 도움이 될 것입니다.

준비 사항

전체 과정

  1. Unity 프로젝트

    1. Chatbot을 연결할 HTML 파일 추가

    2. HTML 파일 오픈을 위한 WebView 패키지 추가

    3. WebView 오픈을 위한 MonoBehaviour 스크립트 추가

  2. Sendbird 대시보드

    1. 대시보드에 접속하여 계정을 만들고 새로운 Application을 생성합니다.

    2. AI chatbot 을 생성하고 게임 정보를 작성한 PDF 파일을 등록합니다

    3. 대시보드에서 Application ID 와 Bot ID 를 복사하여 HTML 파일에 적용합니다

  3. 유니티 에디터에서 Play or Build 하여 확인합니다.

구현

  1. Unity 프로젝트에 HTML 파일 추가

    1. Assets/StreamingAssets 폴더에 Chatbot.html 파일을 추가하고 다음과 같이 작성합니다.

       <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Chatbot</title>
     <script crossorigin src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
     <script crossorigin src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
     <script>process = { env: { NODE_ENV: '' } }</script>
     <script crossorigin src="https://unpkg.com/@sendbird/chat-ai-widget@latest/dist/index.umd.js"></script>
     <link href="https://unpkg.com/@sendbird/chat-ai-widget@latest/dist/style.css" rel="stylesheet" />
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <style>
         html,body { height:100% }
         #aichatbot-widget-close-icon { display: none }
         #scale-container {
             transform: scale(1);
             transform-origin: bottom right;
             height: 100%;
             zoom: 3;
         }
     </style>
 </head>
 <body>
 <div id="root"></div>

 <script type="text/babel">
     const { ChatWindow } = window.ChatAiWidget
     const App = () => {
         <!-- Replace YOUR_APPLICATION_ID and YOUR_BOT_ID with the actual application ID and bot ID you intend to use. -->
         return (
             <div id="scale-container">
                 <ChatWindow
                     applicationId="YOUR_APPLICATION_ID"
                     botId="YOUR_BOT_ID"
                 />
             </div>
         )
     }
     ReactDOM.createRoot(document.querySelector('#root')).render(<App/>);
 </script>
 </body>
 </html>

  2. Unity WebView 패키지 추가

    1. Package Manager의 왼쪽 상단 메뉴에서 Install package from git URL…을 클릭합니다.

    2. https://github.com/gree/unity-webview.git?path=/dist/package를 입력하고 Install 버튼을 클릭하여 설치합니다.

  3. 웹뷰를 오픈하기 위한 MonoBehaviour 스크립트 작성

    1. Assets/Scripts 폴더에 ChatbotWebView.cs 파일을 추가하고 버튼 클릭 시 HTML 파일을 로드하는 스크립트를 다음과 같이 작성합니다.

       public class ChatbotWebView : UnityEngine.MonoBehaviour
 {
     private UnityEngine.UI.Button _openButton;
     private WebViewObject _webViewObject;
     private void Start()
     {
         _openButton = base.transform.GetComponent<UnityEngine.UI.Button>();
         _openButton.onClick.AddListener(OnOpenChatbot);
     }
     private void OnOpenChatbot()
     {
         string strUrl = $"file://{UnityEngine.Application.streamingAssetsPath}/Chatbot.html";
         _webViewObject = new UnityEngine.GameObject("ChatbotWebViewObject").AddComponent<WebViewObject>();
         _webViewObject.Init();
         _webViewObject.LoadURL(strUrl);
         _webViewObject.SetVisibility(true);
         _webViewObject.SetMargins(200, 400, 50, 400);
     }
 }

  4. Button UI 생성 및 ChatbotWebView 스크립트 추가

    1. Button UI 를 생성합니다.

    2. 생성된 Button 에 ChatbotWebView 컴포넌트를 추가합니다

  5. Sendbird App 과 Ai chatbot(30일 무료)을 생성합니다

    1. https://dashboard.sendbird.com 에 접속합니다

    2. Application 을 생성합니다

    3. 왼쪽 탭에서 AI chatbot을 클릭-> Get started 버튼을 클릭하여 생성합니다

    4. 필요할 경우 설정값을 변경하고 Next 버튼을 클릭합니다

    5. 게임 정보가 있는 PDF 파일을 등록합니다(PDF 예시)

       게임제목 : 원소의 왕국: 심연과 승천 던전 정보
 던전 1: 불의 동굴
 난이도: 쉬움
 • 몬스터 종류:
 • 화염 슬라임
 • HP: 100, MP: 50, 공격력: 30, 방어력: 10
 던전 2: 얼음의 성채
 난이도: 중간
 • 몬스터 종류:
 • 얼음 골렘
 • HP: 300, MP: 100, 공격력: 50, 방어력: 40
 얼음검 (Ice Sword)
 • 재료:
 • 얼음 조각 x3 (획득처: 얼음 골렘, 빙하 늑대)
 • 빙하의 핵 x2 (획득처: 얼음 정령, 서리 마녀)
 • 강철 조각 x1 (획득처: 던전 상점)
 • 조합 방법: 얼음 조각과 빙하의 핵을 강철 조각에 주입하여 냉각 후 단련합니다.

    6. 생성이 완료 되었습니다

6. Application ID 와 Bot ID를 복사하여 HTML 에 적용합니다

  1. Application ID를 복사하여StreamingAssets/Chatbot.html 파일의 YOUR_APPLICATION_ID 와 교체합니다

  2. Bot ID를 복사하여StreamingAssets/Chatbot.html 파일의 YOUR_BOT_ID 와 교체합니다

7. 유니티 에디터에서 Play or Build 하여 확인합니다.

0
Subscribe to my newsletter

Read articles from HANBYEOL LEE directly inside your inbox. Subscribe to the newsletter, and don't miss out.

unityAIchatgptchatbotsendbird

Written by

HANBYEOL LEE
HANBYEOL LEE