MCPGame

MCP게임

Node.js 백엔드를 기반으로 한 멀티 플레이어 제어판 게임으로, 대화형 요소가 포함된 가상 주택 환경을 특징으로 합니다.

특징

• 야외 환경을 갖춘 몰입형 1인칭 3D 가상 주택
• 내부와 외부의 특징을 갖춘 아름답게 세부적으로 묘사된 주택
• 집에 들어가고 나갈 수 있는 대화형 문
• 나무, 식물, 장식 요소가 있는 정원 공간
• 이미지 생성 기능이 있는 대화형 TV
• MCP 시스템에 접속하기 위한 컴퓨터 단말기
• 현실적인 움직임과 충돌 감지
• 실시간 서버 통신

설정

1. 종속성 설치:

지엑스피1

2. 서버를 실행합니다:

또는 자동 재시작 기능을 사용한 개발의 경우:

서버는 포트 3002에서 시작됩니다.

게임 컨트롤

• 이동 : WASD 키
• 주변을 둘러보세요 : 마우스 움직임 (게임을 클릭하여 활성화하세요)
• 상호작용 : 상호작용 객체 근처에서 ENTER 키를 누르세요.
• 종료 인터페이스 : ESC 키
• 마우스 잠금 해제 : ESC 키

대화형 요소

야외 환경

• 나무와 정원 침대가 있는 지형을 탐험하세요
• 집 입구로 가는 길을 따라가세요
• 집에 들어가거나 나가려면 문 근처에 있을 때 ENTER를 누르세요.

TV 시스템

• TV에 접근하여 ENTER를 눌러 리모컨에 접근하세요.
• TV 화면에 표시될 이미지를 생성합니다.
• 터미널 인터페이스에서 이미지 생성을 위한 프롬프트를 입력하세요

MCP 터미널

• 컴퓨터 책상을 찾아 ENTER를 눌러 터미널에 접속하세요.
• MCP 시스템에 명령 보내기
• 다양한 가상 도구(이메일, 웹 검색 등)에 접근합니다.

기술적 세부 사항

• 3D 렌더링을 위해 Three.js로 구축됨
• 포인터 잠금 컨트롤이 있는 1인칭 카메라
• 절차적으로 배치된 나무가 있는 야외 환경
• 백엔드 통신을 위한 Express.js 서버
• 이미지 생성을 위한 Canvas 라이브러리
• 서버 통신을 위한 RESTful API

MCP 게임 이미지 시스템

이 문서에서는 MCP 게임에서 이미지 표시 시스템이 작동하는 방식을 설명합니다.

개요

시스템은 server/openai-server/public/image 디렉터리의 기존 이미지를 가상 하우스 내 TV에 표시합니다. 500 Internal Server 오류를 발생시키던 새 이미지 생성 대신, 이제 지정된 디렉터리에 있는 기존 이미지를 확인합니다.

작동 원리

1. 가상 주택의 TV는 server/openai-server/public/image 디렉토리에 있는 이미지를 표시합니다.
2. 시스템은 10초마다 새로운 이미지를 확인합니다.
3. 사용자가 TV 리모컨 인터페이스를 통해 새로운 이미지를 요청하면 시스템은 디렉토리에서 무작위로 이미지를 선택합니다.

새로운 이미지 추가

TV에 새로운 이미지를 추가하려면:

1. 이미지 파일(jpg, jpeg, png, gif, webp)을 server/openai-server/public/image 디렉토리에 넣습니다.
2. 시스템에서 자동으로 감지하여 표시합니다.
3. 파일은 웹에 표시하기에 적당한 크기여야 합니다(권장: 800x450픽셀).

용법

1. 가상의 집에서 TV에 접근하세요.
2. Enter를 눌러 TV 리모컨 인터페이스에 접속하세요.
3. 이미지 표시와 관련된 명령을 입력하세요.
4. 시스템은 디렉토리에 있는 사용 가능한 이미지 중에서 이미지를 선택하여 표시합니다.

문제 해결

• 이미지가 표시되지 않으면 server/openai-server/public/image 디렉토리가 있는지, 이미지 파일이 포함되어 있는지 확인하세요.
• 서버가 올바른 포트(기본값: 3002)에서 실행 중인지 확인하세요.
• 브라우저 콘솔에서 이미지 로딩과 관련된 오류 메시지를 확인하세요.

기술적 세부 사항

• 시스템은 더 이상 이미지를 직접 생성하려고 시도하지 않으므로 500 내부 서버 오류가 발생하지 않습니다.
• 요청 시 디렉토리에서 무작위로 이미지가 선택됩니다.
• 이미지가 없는 경우 시스템은 적절한 피드백을 제공합니다.

MCP 백엔드 서버에 연결

MCPGame은 외부 MCP 백엔드 서버에 연결하여 터미널과 TV 상호작용을 위한 고급 AI 기능을 활성화할 수 있습니다.

구성

1. main.js 파일을 열고 맨 위에 있는 구성 섹션을 찾으세요.

2. MCP 백엔드 서버를 가리키도록 MCP_BACKEND_URL 을 업데이트하세요.
   • 로컬 개발의 경우: http://localhost:PORT (PORT를 백엔드 포트로 바꾸세요)
   • 프로덕션의 경우: 배포된 백엔드 서버의 전체 URL을 사용하세요.

필수 API 엔드포인트

MCP 백엔드 서버는 다음 엔드포인트를 구현해야 합니다.

1. GET /api/status - MCP 시스템의 상태를 반환합니다.
2. POST /api/query - 사용자 쿼리를 수락하고 AI 응답을 반환합니다.

응답 형식

쿼리 엔드포인트는 다음 형식으로 JSON을 반환해야 합니다.

연결 테스트

1. MCP 백엔드 서버를 시작하세요
2. MCPGame 서버( node server.js )를 시작합니다.
3. 브라우저에서 게임을 엽니다
4. 가상 주택의 컴퓨터 단말기와 상호 작용합니다.
5. 터미널을 사용하면 게임이 MCP 백엔드 서버에 연결됩니다.