[2D WebGL][pixi.Js] 세부사항

PixiJS : 아키텍처 개요

PixiJS: Architecture Overview

아키텍처 개요

PixiJS가 어떻게 결합되는지에 대한 개요

코드

PixiJS는 GitHub에서 호스팅되는 오픈 소스 제품

GitHub 리포지토리와 마찬가지로 각 PixiJS 클래스의 원시 소스 파일을 찾아 다운로드 할 수있을뿐만 아니라 기존 문제 및 버그를 검색하고 직접 제출할 수도 있다. PixiJS는 TypeScript라는 JavaScript 변형으로 작성되었으며, 사전 컴파일 단계를 통해 JavaScript에서 유형 검사를 할 수 있다.

구성 요소

PixiJS는 모듈식 렌더링 엔진. 콘텐츠를 생성, 업데이트 및 표시하는 데 필요한 각 작업은 자체 구성 요소로 나뉜다 이렇게 하면 코드가 더 깔끔해질 뿐만 아니라 확장성이 향상. 또한 PixiJS 사용자 정의 도구를 사용하면 프로젝트에 필요한 기능의 하위 집합 만 포함하는 사용자 정의 PixiJS 파일을 빌드하여 다운로드 크기를 절약 할 수 있다.

다음은 PixiJS를 구성하는 주요 구성 요소 목록

주요 구성 요소

구성 요소묘사

렌더러 @pixi/core	PixiJS 시스템의 핵심은 장면 그래프를 표시하고 화면에 그리는 렌더러. PixiJS의 기본 렌더러는 후드 아래의 WebGL을 기반으로 한다.
컨테이너 @pixi/display	장면 그래프를 만드는 기본 표시 객체: 스프라이트, 그래픽 및 텍스트와 같이 표시할 렌더링 가능한 객체의 트리입니다. 자세한 내용은 장면 그래프를 참조.
로더 @pixi/loader	로더 시스템은 이미지 및 오디오 파일과 같은 리소스를 비동기적으로 로드하는 도구를 제공.
시계 @pixi/ticker	티커는 시계를 기반으로 주기적인 콜백을 제공. 게임 업데이트 논리는 일반적으로 프레임당 한 번 틱에 대한 응답으로 실행. 한 번에 여러 티커를 사용할 수 있다.
신청 @pixi/app	응용 프로그램은 로더, 티커 및 렌더러를 사용하기 쉬운 단일 객체로 래핑하는 간단한 도우미. 신속하게 시작하고, 프로토타이핑하고, 간단한 프로젝트를 빌드하는 데 적합.
상호작용 @pixi/interaction	PixiJS는 터치 및 마우스 기반 상호 작용을 모두 지원하여 물체를 클릭 할 수있게하고 호버 이벤트를 발사하는 등의 작업을 수행.
접근성 @pixi/accessibility	우리의 디스플레이 시스템을 통해 짜여진 것은 키보드 및 화면 판독기 접근성을 가능하게하는 풍부한 도구 세트.

Major Components

COMPONENTDESCRIPTION

Renderer @pixi/core	The core of the PixiJS system is the renderer, which displays the scene graph and draws it to the screen. The default renderer for PixiJS is based on WebGL under the hood.
Container @pixi/display	Main display object which creates a scene graph: the tree of renderable objects to be displayed, such as sprites, graphics and text. See Scene Graph for more details.
Loader @pixi/loader	The loader system provides tools for asynchronously loading resources such as images and audio files.
Ticker @pixi/ticker	Tickers provide periodic callbacks based on a clock. Your game update logic will generally be run in response to a tick once per frame. You can have multiple tickers in use at one time.
Application @pixi/app	The Application is a simple helper that wraps a Loader, Ticker and Renderer into a single, convenient easy-to-use object. Great for getting started quickly, prototyping and building simple projects.
Interaction @pixi/interaction	PixiJS supports both touch and mouse-based interaction - making objects clickable, firing hover events, etc.
Accessibility @pixi/accessibility	Woven through our display system is a rich set of tools for enabling keyboard and screen-reader accessibility.