Skip to content
블로그로 돌아가기
WebCraft - 순수 JavaScript로 만든 웹 기반 Minecraft 클론

WebCraft - 순수 JavaScript로 만든 웹 기반 Minecraft 클론

Alexandru Maftei
Alexandru Maftei
@ice
Updated
1 조회수
TL;DR:WebCraft는 WebGL과 WebSockets를 활용한 웹 기반 Minecraft Classic 클론입니다. 프레임워크 없이 최소한의 종속성만 사용합니다. 복셀 게임 개발 학습에 이상적이지만, 현재는 더 이상 유지보수되지 않고 있습니다.

"Javascript로 만든 Minecraft 클론입니다."

Overv/WebCraft · github.com
⭐ 418개의 스타💻 JavaScript📄 Zlib

브라우저에서만 Minecraft 경험을 완전히 구축하려면 어떻게 해야 할까요? WebCraft는 정확히 그것입니다 - WebGL과 WebSockets를 통해 작동하는 JavaScript 기반 Minecraft 클론으로, 최신 웹 브라우저만 있으면 됩니다. 공식 게임에서 알고 있는 완전한 서바이벌 경험은 아니지만, 블록 기반 복셀 세계가 실제로 어떻게 작동하는지 궁금하신 분이라면 이 프로젝트는 정말 눈을 뜨게 해줄 것입니다.

WebCraft는 무엇인가

WebCraft는 순수 JavaScript로 처음부터 개발한 Minecraft Classic 클론입니다. Three.js도 Babylon.js도, 무거운 3D 프레임워크도 사용하지 않습니다. WebGL 위에 렌더링 파이프라인을 직접 구축했는데, 이는 전체 게임 엔진을 끌고 다니는 것보다 수천 개의 정적 큐브를 렌더링할 때 훨씬 효율적입니다.

이 프로젝트는 싱글플레이와 멀티플레이 모드를 모두 포함합니다. 멀티플레이는 백엔드에서 Node.js를 사용하고 WebSockets로 연결된 클라이언트들 간에 플레이어 액션을 동기화합니다. 가장 흥미로운 점은 종속성이 매우 적다는 것입니다. glmatrix는 수학 연산을 위해, socket.io는 네트워킹을 위해 사용하고, 나머지는 모두 커스텀 코드입니다.

중요한 점 하나는 이 프로젝트가 더 이상 적극적으로 유지보수되지 않는다는 것입니다. 저장소와 코드는 존재하지만, 정기적인 업데이트나 활발한 지원을 기대하지 마세요. 교육 목적이나 실험용으로는 매우 가치 있습니다. 프로덕션 멀티플레이 서버로는 다른 곳을 찾으세요.


왜 관심을 가져야 할까

WebCraft를 살펴볼 만한 몇 가지 좋은 이유가 있습니다. 게임 개발이나 그래픽스 프로그래밍을 배우고 있다면, 이것은 정말 유용합니다. 복셀 기반 세계를 어떻게 구조화하는지, 렌더링 성능을 관리하는 방법, 물리를 처리하고(중력, 유체 흐름), 클라이언트들 간에 게임 상태를 동기화하는 방법을 볼 수 있습니다. 모든 것이 독점 엔진 뒤에 숨겨져 있지 않습니다.

브라우저에서 설치 없이 Minecraft을 하고 싶을 뿐이라면? 물론, 경험은 있습니다. 세계를 만들고, 블록을 배치하고 제거할 수 있으며, 서버를 설정하면 친구들과 플레이할 수 있습니다. 하지만 솔직히 말하자면, 이것은 Classic 클론이지 현대 Minecraft이 아닙니다. 서바이벌 메커니즘이 없고, 몹도 없고, 진행 사항도 없습니다. 간소화된 형태의 크리에이티브 모드에 더 가깝습니다.

게임 개발 캡스톤 프로젝트를 진행 중인 학생이나 복셀 기반 게임 개념을 프로토타이핑하는 사람이라면 코드베이스를 읽음으로써 많은 것을 배울 수 있습니다. 아키텍처가 충분히 깔끔해서 블록이 세계에 배치되는 방식부터 화면에 렌더링되는 방식까지 추적할 수 있습니다.


아키텍처의 작동 방식

이 프로젝트는 각각 게임의 특정 계층을 담당하는 모듈식 JavaScript 파일로 구성되어 있습니다. World 모듈은 전체 맵의 블록 데이터를 보유합니다. 각 좌표에서 무엇이 있는지 추적하는 3차원 배열처럼 생각하면 됩니다. Render 모듈은 그 데이터를 청크(기본적으로 블록 그룹)로 변환한 후 WebGL로 그리도록 전달합니다.

물리 시뮬레이션은 별도로 작동합니다. 중력은 떨어지는 블록을 아래로 끌어당기고, 물과 용암은 간단한 규칙에 따라 흐르며, 충돌 감지는 지형을 통과하는 것을 방지합니다. 복잡한 물리는 아니지만 블록 기반 세계에는 작동합니다.

플레이어 입력은 Player 모듈에서 처리하며, 이는 인벤토리, 현재 선택한 블록 유형, 이동을 추적합니다. 멀티플레이 측에서는 Network 모듈이 로컬 세계 상태와 서버가 알고 있는 것을 비교하여, 모든 연결된 플레이어가 같은 것을 보도록 변경사항을 동기화합니다.

블록 자체는 Blocks 모듈을 통해 사용자 정의할 수 있으며, 여기서 색상, 빛이 통과하는지 여부, 렌더링 방식 등 재료 속성을 정의합니다. 새로운 블록 유형을 추가하거나 기존 것을 변경하고 싶다면, 여기서부터 시작하면 됩니다.


설정하기 (시도하고 싶다면)

싱글플레이 버전은 간단합니다. 저장소를 복제한 후 아무 최신 브라우저에서 singleplayer.html을 열면 됩니다. 빌드 단계 없음, node_modules 악몽 없음. 끝.

멀티플레이의 경우 Node.js가 설치되어 있어야 합니다(이 프로젝트는 구형 버전을 대상으로 하지만, 최신 LTS면 작동합니다). npm으로 종속성을 설치한 후 서버를 시작하세요:

bash
npm install
node server.js

서버가 실행되면 브라우저에서 multiplayer.html을 열면 연결됩니다. 그러면 멀티플레이를 테스트하기 위해 동일한 서버에서 여러 브라우저 창을 열 수 있거나, 로컬 네트워크의 다른 사람과 연결 URL을 공유할 수 있습니다. 인터넷을 통한 원격 플레이를 위해서는 약간의 네트워킹 설정(포트 포워딩 또는 ngrok)이 필요하며, 이는 프로젝트에서 문서화하지 않지만 확실히 가능합니다.

뭔가 문제가 생기거나 바닐라 Minecraft로 돌아가고 싶다면, 브라우저 탭을 닫으면 됩니다. WebCraft는 브라우저의 메모리와 WebGL 컨텍스트에서만 실행되므로, 시스템에 어떤 것도 지속되거나 수정하지 않습니다. 정리할 것이 없습니다.


두드러진 점

처음부터 복셀 렌더러를 구축하는 것은 간단하지 않습니다. 그래픽 라이브러리 없이 이를 하는 사실이 하이라이트입니다. WebGL은 수준이 낮아서 청크 기하학이 어떻게 생성되는지, 얼굴이 어떻게 제거되는지(숨겨진 경우 그려지지 않음), 조명 계산이 어떻게 작동하는지 정확히 볼 수 있습니다.

싱글플레이 구조
싱글플레이 구조

멀티플레이 설정은 간결합니다. Socket.io는 양방향 통신의 복잡한 부분을 처리하지만, 여전히 게임 상태가 어떻게 직렬화되어 전송되고 클라이언트 측에서 조정되는지 볼 수 있습니다. 그것은 대부분의 게임 튜토리얼이 무시하는 실제 네트워킹 문제입니다.

또 다른 세부 사항으로 감사한 점은 이 프로젝트가 스스로를 부풀리지 않는다는 것입니다. 블록 배치, 세계 렌더링, 플레이어 동기화의 핵심 루프에 집중합니다. GUI 프레임워크 없음, 애니메이션 라이브러리 없음, 패키지 과부하 없음. 프레임워크 쇼케이스가 아닌 누군가의 실용적인 구현 결정을 읽고 있습니다.


알아야 할 제한사항

성능이 큰 문제입니다. 하드웨어와 브라우저에 따라, 정말 큰 구조물을 짓거나 거대한 세계를 생성하면 끊길 수 있습니다. 수천 개의 큐브를 렌더링하는 것은 가능하지만, 무한정 확장할 수는 없습니다. 최신 기계에서는 더 작은 플레이 영역으로 매끄럽게 실행되고, 밀어붙일수록 약간 끊릴 수 있습니다.

내장된 지속성이 없습니다. 페이지를 새로 고침하거나 서버를 다시 시작하면 세계가 사라집니다. 영구 세계를 원한다면, 직접 데이터베이스 로직을 추가해야 합니다. 서버 설정, 관리 도구, 사용자 인증도 마찬가지입니다. 스켈레톤이지, 완전한 서버 제품이 아닙니다.

Classic 모드 제한은 서바이벌 요소, 몹 AI, 던전이나 전리품이 없다는 것을 의미합니다. 현대 Minecraft과 비교하면, 핵심 빌딩 메커니즘을 제외한 거의 모든 것이 없습니다. 그것은 결함이 아니라 프로젝트가 설정하고 고수한 현실적인 범위 경계입니다.

그리고 브라우저 호환성입니다. 이것은 WebGL 시대를 위해 만들어졌으므로, 매우 오래된 브라우저는 작동하지 않습니다. 지난 10년의 모든 것은 괜찮아야 하지만, Internet Explorer나 오래된 Android 기기에서는 실행되지 않을 것으로 예상하세요.


비슷한 프로젝트를 원한다면

알아둘 만한 몇 가지 대안이 있습니다. Minecraft 자체는 그들의 웹사이트를 통해 Minecraft Classic이라고 불리는 무료 버전을 제공합니다. 브라우저 기반이기도 하고, 공식적으로 유지보수되며, 더 세련되게 느껴집니다.

특히 복셀 게임 개발 학습에 관심이 있다면, 더 깔끔한 스타터 프로젝트가 있습니다. 일부 사람들은 Voxel.js를 살펴보거나 다른 언어를 선호한다면 Panda3D 같은 Python 라이브러리부터 시작할 것을 추천합니다. 이것들은 더 활발한 커뮤니티와 현재 문서를 가지는 경향이 있습니다.

Minecraft 모드와 도구의 경우, 우리 커뮤니티는 바닐라 Minecraft을 확장하는 데 관심이 있다면 테스트된 서버와 스킨 목록을 유지합니다. 우리의 Votifier 테스터텍스트 생성기 도구는 JavaScript에 들어가지 않고도 서버를 관리하고 커스텀 콘텐츠를 만드는 데 도움이 될 수 있습니다.


제 생각

WebCraft는 매우 구체적인 필요를 충족시킵니다. 블록 기반 게임이 실제로 어떻게 작동하는지 이해하고 싶거나 웹 그래픽과 게임 루프를 배우고 있다면, 몇 시간 탐색할 가치가 있습니다. 코드는 읽을 수 있고, 아키텍처는 견고하며, 시작할 때보다 더 많은 것을 알고 떠날 것입니다.

캐주얼 플레이? 공식 Minecraft을 계속 사용하세요. 학습용? 이것은 견고합니다. 더 이상 유지보수되지 않는다는 사실은 교육 목적으로는 정말 중요하지 않습니다. 코드는 어디 가지 않고, 있는 것은 잘 생각된 것입니다.

프레임워크 없이도 재능 있는 개발자가 흥미로운 것을 만들 수 있다는 것을 증명하는 프로젝트 중 하나입니다. 기술, 명확한 사고, 문제에 대한 견고한 이해만 있으면 됩니다. 그것만으로도 그것이 존재한다는 것을 알 가치가 있습니다.

Overv/WebCraft - Zlib, ⭐418
About the author
Alexandru Maftei
Alexandru MafteiLead Writer

Lead writer at minecraft.how. Long-time Minecraft player running a small SMP server, testing every build, mod, and seed before writing about it.

Share with your friends!