2020 년 최고의 JS 게임 엔진 및 라이브러리 9 선

모든 JavaScript 개발자를위한 최고의 게임 라이브러리.

AAA 게임 회사는 JavaScript를 주요 프로그래밍 언어 중 하나로 사용하지 않지만 JavaScript를 사용한 게임 개발 아이디어는 미친 것이 아닙니다. 실제로 지난 몇 년 동안 브라우저와 모바일 장치는 그래픽 기능을 향상시키기 위해 WebGL과 같은 기능을 통합했습니다. 그리고 JS API를 통해 개발자가 사용할 수 있도록하기 때문에 브라우저에서 바로 고급 게임 경험을 만들 수 있습니다.

따라서이 기사에서는 적어도 취미로 게임 개발에 들어가기를 원하는 모든 JS 개발자를위한 최고의 게임 라이브러리를 다루고 싶습니다.

일반적으로 가장 적합한 라이브러리 또는 엔진을 찾는 것은 전적으로 귀하에게 달려 있습니다. 당신이 만들고 싶은 게임의 종류와 내부 게임 아키텍처에 대한 이해 수준을 아는 사람입니다. 따라서 목록을 살펴보고 귀하의 요구 사항과 수준에 가장 적합한 것으로 들리는 것을 선택하십시오.

또 다른 간단한 참고 사항은 Javascript를 사용하여 모든 종류의 UI를 빌드 할 때 항상 JavaScript 구성 요소를 Bit.dev 와 같은 클라우드 구성 요소 허브에 공유하여 작업 (또는 팀 동료의 작업)이 낭비되지 않도록하십시오 . 코드 재사용을 최대화하고, 개발 속도를 높이고, 아주 간단하게 같은 것을 반복해서 빌드하여 지루하지 않게하는 데 좋습니다.

공유 된 JS 구성 요소 @ bit.dev를 통해 찾아보기

시작하자…

1. GDevelop

모든 유형의 사용자 (초보자부터 고급 사용자까지)를위한 훌륭한 도구가되는 데 초점을 맞춘 GDevelop은 원하는 게임을 개발하는 데 도움이되는 멋진 도구 세트를 제공합니다.

그리고 그들은 "모든 유형의 게임"을 만들 수있는 능력을 광고하지만,이 게임 엔진은 플랫 포머, 슈팅 업 및 일반 8 비트 게임과 같은 2D 게임을 만드는 데 적합합니다.

추가 보너스로 GDevelop을 사용하면 Android, iOS, Facebook 인스턴트 게임 등과 같은 다양한 플랫폼으로 게임을 내보낼 수 있습니다 .

이것은 실행 가능한 게임을 만드는 데 관심이있는 사람들을위한 옵션입니다. 그런 다음 다른 플랫폼으로 내보내고 배포 할 수 있지만 게임 개발에 너무 깊이 들어가는 데는 관심이 없습니다 (즉, 낮은 수준의 아키텍처를 이해하는 데 관심이없는 경우). 게임 엔진).

2. 멜론 JS

MelonJS는 또 다른 2D 중심 게임 엔진입니다. 라이브러리를 코드에 포함하면 물리 지원, 충돌, 스프라이트 등과 같이 돈이 드는 게임 게임에 필요한 모든 종류의 기능에 액세스 할 수 있습니다.

문서가 최고가 아닐 수도 있지만 수행해야 할 작업을 파악할 수있는 사용자 제작 콘텐츠가 많이 있습니다. 나는 확실히 다음을 만들어서 그 목록에 기여했습니다.

제가 직접 사용했기 때문에 개인적으로 추천 할 수 있습니다.

3. ImpactJS

ImpactJS는 위의 라이브러리처럼 주로 2D 게임 개발에 초점을 맞춘 JavaScript 게임 엔진입니다. 즉, 다음과 같이 3D 환경을 시뮬레이션하기 위해 Impact에 추가 할 수있는 플러그인이 있습니다.

흥미로운 부수로, Impact는 모든 2D 유형 게임용 레벨 편집기, 강력한 디버그 도구 및 iPhone AppStore에 게시 할 수있는 Ejecta 라는 매우 흥미로운 게시 프레임 워크와 같은 몇 가지 추가 도구와 함께 제공됩니다 .

4. 바빌론 JS

믿을 수 없을 정도로 강력한 웹 렌더링 엔진으로, 게임 엔진이나 게임 라이브러리가 반드시 필요한 것은 아니지만 그 주변에서 게임을 만들 수 있습니다. 실제로 게임 라이브러리가 아닌 렌더링 엔진이기 때문에 낮은 수준의 기능, 특히 시각화와 관련된 기능에 액세스 할 수 있습니다.

BabylonJS를 사용하는 경우 먼저 엔진을 빌드 한 다음 게임을 빌드하지만 그로 인해 발생하는 작업과 발생 방식을 완전히 제어 할 수 있습니다. 이것은 고급 사용자에게 좋지만, 그들 중 하나가 아니라면 BabylonJS 경로를 사용하는 것이 약간 비생산적 일 수 있습니다. 이 예제를보세요. 놀랍게 보이지만 왼쪽에있는 소스 코드의 줄 수를 간단히 살펴 보겠습니다. 데모를 위해 1k 줄 이상입니다.

요즘 AAA 게임이 가지고있는 라인 수를 고려한다면 아마 아무것도 아닐 것입니다.하지만 여러분의 기대와 프로젝트에 투자해야하는 시간을 고려하십시오. 그 코드를 배우고 작성할 의지와 시간이 있다고 생각한다면 이것은 놀라운 결과를 얻을 수 있도록 도와주는 완벽한 무료 도구입니다.

5. PhaserJS

PhaseJS는 모든 데스크탑 및 모바일 요구 사항을 충족 할 수있는 훌륭한 커뮤니티 지원 게임 프레임 워크입니다. WebGL과 Canvas (WebGL을 지원하지 않는 장치 용)를 모두 지원하며 2D 게임 개발에 적합합니다.

프레임 워크 자체는 무료이며 자신 만의 게임을 만드는 데 필요한 모든 것이 제공되지만, 추가 기능이나 개선 된 기능을 얻기 위해 추가 할 수있는 플러그인이 있습니다. 그것에 대해 주목할만한 유일한 세부 사항은 플러그인이 무료가 아니므로 비용을 지불해야한다는 것입니다.

6. PixiJS

BabylonJS가 매우 강력한 3D 시각화 라이브러리 인 것처럼 PixiJS는 놀랍도록 유연하고 강력한 2D 시각화 라이브러리입니다. WebGL과 함께 작동하며 게임으로 반드시 변환되지 않는 아름다운 웹 경험을 구축하기 위해 만들어졌습니다. 이것이 라이브러리가 스프릿, 텍스트 및 셰이더와 같은 고급 요소와 같은 일부 게임 관련 요소를 지원하지만 이유입니다.

즉, 자신 만의 물리 엔진을 구축해야하며, 충돌 감지 및 올바른 게임 루프 구축과 같은 기타 게임 메커니즘에 대해 걱정해야합니다.

결국 이것은 복잡한 게임을 빌드하지 않고 다른 복잡한 게임 메커니즘보다 시각적 측면에 대해 더 걱정하는 경우 좋은 옵션입니다.

7. PlayCanvas

PlayCanvas는 완전한 웹 기반 게임 개발 환경입니다. 즉, 코드를 작성하고, 테스트하고, 씬을 설정하고 (아주 상세한 WebGL 3D GUI가 있음) 한 번의 클릭으로 게임을 내보내는 데 플랫폼을 사용합니다.

이 목록에서 다루고있는 다른 옵션 중 일부로서 PlayCanvas는 완전히 호환되며 VR 경험을 만들 준비가되어 있으며, 이는 게임 개발에서 증가하는 추세 인 것으로 보입니다.

PlayCanvas의 작은 단점은 완전히 무료가 아니며 물론 무료 계층을 사용할 수 있으며 공개 프로젝트를 가질 수 있지만 월별 요금을 지불하지 않는 한 비공개로 유지하거나 자체 로딩 화면을 제거하는 것을 잊을 수 있다는 것입니다.

8. A- 프레임

이전 대안 중 일부는 추가 기능으로 VR과의 호환성을 보여 주었지만 A-Frame은 VR 및 AR을 염두에두고 제작되었습니다. 이는 전체 프레임 워크의 초점이 이동되었음을 의미합니다.

물론이 기능으로 3D 게임을 만들 수 있지만 WebXR 호환 브라우저를 사용 하거나 WebXR AR 지원하는 최신 버전의 Chrome 실험 기능 을 사용하는 경우 최대한 활용할 수 있습니다. 이 프레임 워크의.

A-Frame은 브라우저에서 사용하도록 설계되었으므로 매우 마크 업 기반 구문이 있으므로 JavaScript에 크게 의존하는 대신 아래 샘플에서 볼 수 있듯이 일부 사용자 지정 마크 업 요소도 사용합니다.

이 프레임 워크는 오래된 3D 게임 대신 VR / AR 경험에 관심이 있다면 훌륭한 옵션입니다. A-Frame은 그들을 위해 특별히 설계 되었기 때문에 당신의 삶을 훨씬 더 쉽게 만들어 줄 것입니다. 시도 해봐!

9. PhysicsJS

마지막으로, 그래픽 중심의 엔진 대신 마지막 라이브러리에 대해 다소 다른 것을 다루고 싶었습니다. 이름에서 알 수 있듯이 PhysicsJS는 객체 상호 작용의 물리적 측면에 중점을 둡니다. 이 라이브러리를 게임 개발이나 만들고 싶은 다른 유형의 시뮬레이션에 사용할 수 있습니다.

데모 페이지 에서 볼 수 있듯이이 라이브러리는 매우 흥미로운 상호 작용이 가능하며 설명서에 나와 있듯이 필요한 것에 따라 다양한 유형의 렌더러를 사용할 수 있습니다. PixiJS를 렌더러로 사용하거나 위에 표시된 라이브러리의 다른 라이브러리와 통합하려는 경우 사용자 지정 하나를 만들 수도 있습니다.

이 라이브러리는 약간 오래되었지만 물리 법칙은 한동안 변경되지 않았으며 PhysicsJS로 얻을 수있는 효과는 매우 유효합니다. 따라서 게임에 복잡한 물리를 추가하려는 경우 또는 PixiJS 및 기타 다른 라이브러리를 사용하여 고유 한 엔진을 만들려는 경우에도 모든 유형의 2D 물리 상호 작용을 자동으로 해결하는 데 도움이 될 수 있습니다. 필요할 수도 있습니다.

내가 가장 좋아하는 것을 놔뒀나요?

그렇게했다면 사과하지만 거기에는 많은 옵션이 있으며 잘 알려지지 않은 옵션 중 일부를 놓쳤을 수도 있습니다. 게임 개발을 위해 다른 라이브러리 나 프레임 워크를 사용하고 있다면 아래 링크를 남겨주세요. 그리고이 기사에 언급 된 게임을 사용하여 게임을 개발했다면 링크를 남겨주세요. 꼭 확인해보세요!

읽어 주셔서 감사합니다. 다음 편에서 만나요!

더 알아보기

Suggested posts

React 자습서가 가르치지 않는 5 가지 주요 교훈

React 자습서가 가르치지 않는 5 가지 주요 교훈

React 개발자가 알아야 할 필수 개념과 교훈이 많이 있지만 대부분의 튜토리얼에서는 다루지 않습니다. 나는 당신이 알아야 할 가장 중요한 주제 중 일부를 직접 골랐지만, 자세히 다루기 위해 시간을 할애 한 기사는 거의 없습니다.

Express.js 시작하기

Express.js 시작하기

Express는 웹 및 모바일 앱을 만드는 경험을 즐겁게 만드는 기능 세트가 포함 된 Node.js 프레임 워크입니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.