Pixi.js 사용 요약-JS 튜토리얼-php.cn

이번에는 Pixi.js 사용에 대한 요약을 가져오겠습니다. Pixi.js 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

Pixi.js는 JavaScript로 작성된 2D 렌더링 엔진으로, 브라우저에서 대화형 그래픽, 애니메이션, 게임과 같은 "풍부한 시각적" 애플리케이션을 만드는 데 사용할 수 있으며 하드웨어 GPU 렌더링을 지원하는 WebGL API에 중점을 둡니다. 브라우저는 WebGL을 지원하지 않으며 Pixi는 렌더링을 위해 HTML5 Canvas로 대체됩니다. Pixi는 주로 이미지 렌더링을 담당하며 개발자는 다른 많은 기능을 직접 작성하거나 다른 라이브러리와 함께 사용해야 합니다. 예를 들어 웹 게임을 개발하는 데 사용되는 Phaser 프레임워크는 렌더링에 Pixi를 사용합니다. 다음 내용은 Learning Pixi.js 책에서 선택되었습니다. Pixi를 사용해 보세요.

참고: 예시의 JavaScript는 ES6를 사용하고 var는 let이 되고 function(){}은 () =>

스프라이트 만들기

Pixi의 기본 구축 모듈은 스프라이트라는 개체입니다. 스프라이트는 코드로 제어할 수 있는 그래픽입니다. 위치, 크기 및 기타 속성을 제어하여 대화형 애니메이션 그래픽을 만들 수 있습니다. 스프라이트를 만들고 제어하는 방법을 배우는 것은 Pixi 사용법을 배울 때 실제로 가장 중요한 것입니다. 스프라이트를 만들고 표시하는 방법을 안다면 게임이나 다른 대화형 프로그램을 만드는 데 아주 작은 단계가 있습니다.

이 장에서는 다음을 포함하여 Pixi의 캔버스에서 스프라이트를 표시하고 배치하는 데 필요한 필수 지식을 배우게 됩니다.

스테이지(stage)라고 불리는 루트 컨테이너(루트 컨테이너) 만드는 방법

만드는 방법 새로운 렌더러(렌더러)

로더를 사용하여 Pixi의 텍스처 캐시에 그래픽을 로드합니다

타일셋 및 텍스처 아틀라스를 포함하여 로드된 그래픽을 사용하여 스프라이트를 만듭니다

스프라이트 만들기를 시작하기 전에 직사각형과 같은 화면에 대한 스프라이트를 만들어 보겠습니다. 표시됩니다.

렌더러 및 스테이지 만들기

Pixi에는 디스플레이 화면을 만들 수 있는 렌더러 개체(렌더러)가 있습니다. 자동으로 HTML