이쪽의 기사 「 HTML5 게임 엔진의 철저 평가 일본어 번역 (1) 2D · 3D 대응과 프로그래밍 언어의 비교 」의 계속

설계 사상과 기능

설계 사상과 어떤 기능을 제공해야 하는가가 중요합니다. 오픈 소스 엔진의 설계는 주로 개발자의 워크플로우에 대한 사고방식과 제품 개념에 의해 결정됩니다. 개별 기능을 논의하는 것보다 디자인 사상과 기능을 세트로 논의하는 것이 더 의미가 있습니다. 어떤 엔진도 필요한 모든 기능을 제공하지 않습니다. 엔진 개념에 따라 제공되는 기능은 결정됩니다. 특히 일부 엔진에서는 이러한 경향이 두드러집니다. 각 엔진을 하나씩 분석합니다.

Three.js 개념

Three.js 프로젝트는 2010년 4월 24일에 시작되었습니다. 대부분 역사가 있는 오픈 소스 프로젝트입니다. 엄밀히 말하면 Three.js는 게임 엔진이 아닙니다. 개발자는 GitHub에서 "JavaScript 3D 라이브러리"와 Three.js의 개념을 명확하게 정의합니다. JavaScript 언어로 작성된 3D 라이브러리입니다. 게임이나 멋진 3D 영상 등을 만드는 데 사용할 수 있습니다.

설계 사상

설계 측면에서 개발자는 HTML5 기반 3D 콘텐츠를 쉽게 만들 수 있도록 매우 가벼운 3D 라이브러리를 목표로 합니다. 즉, 간단한 API는 3D 콘텐츠 개발의 복잡성을 최소화합니다. Three.js는 WebGL과 CCS3D 렌더링 모드를 모두 지원합니다. 데이터를 분석하면 개발자는 WebGL 렌더링을 사용하는 경우가 많습니다.

기능

이 기사에서는 꽃, 2D 게임 엔진에 대해 철저히 분석하고 싶습니다. Three.js와 다른 일반적인 3D 엔진을 기능면에서 비교하지 않습니다.

Pixi.js 개념

Pixi.js의 공식 사이트를 보면 Pixi.js는 게임 엔진이라고 착각합니다. 그러나 개발자는 홈페이지에서 Pixi.js를 "Canvas 폴백 형식의 WebGL 렌더러"로 정의합니다. Canvas에 의존하는 WebGL 렌더러입니다. 놀랍게도 Pixi.js는 단순한 렌더러에도 불구하고 많은 기능을 제공합니다.

디자인 컨셉

Pixi.js가 가장 중요하게 생각하는 것은 렌더링 성능입니다. 2D 렌더링 아키텍처는 매우 성숙한 Adobe Flash를 참조하고 API는 ActionScript를 참조하며 Pixi.js는 사용하기 쉽습니다.

예를 들어 Pixi.js는 PIXI.Sprite로 캡슐화된 DisplyObject를 만듭니다. 이미지를 표시하려면 텍스처(PIXI.Texture)를 사용하여 그립니다. 마지막으로 DisplayObject의 좌표를 설정합니다. 코드는 다음과 같습니다.

var stage = new PIXI.Container();
var texture = PIXI.Texture.fromImage('bunny.jpg');
var bunny = new PIXI.Sprite(texture);
bunny.position.x = 80;
bunny.position.y = 60;
stage.addChild(bunny);

Pixi.js의 디스플레이 아키텍처는 Flash 디자인을 완전히 참조합니다. 모든 표시 객체는 트리 데이터 구조에 결합되지만 WebGL 렌더링을 위해 내부 구조가 최적화되었습니다.

기능

게임 엔진의 기능을 세분화할 수 있지만 모든 분류에 대해 자세히 설명하지는 않습니다. 쉽게 비교할 수 있도록 2계층으로 기능을 분류했습니다.