픽시스
8.5.2
이 프로젝트는 모든 장치에서 작동하는 빠르고 가벼운 2D 라이브러리를 제공하는 것을 목표로 합니다. PixiJS 렌더러를 사용하면 WebGL에 대한 사전 지식 없이도 누구나 하드웨어 가속 기능을 즐길 수 있습니다. 또한 빠릅니다. 정말 빠릅니다.
PixiJS의 최신 소식을 받아보고 싶으시다면 Twitter @PixiJS에서 저희를 팔로우하시면 계속 소식을 전해드리겠습니다! 또한 획기적인 소식이 게시될 예정이므로 저희 사이트를 다시 확인해 보세요!
우리는 이제 Open Collective의 일원이 되었으며 귀하의 지원으로 PixiJS를 더욱 향상시키는 데 도움을 줄 수 있습니다. 기부하려면 아래 버튼을 클릭하세요. 그러면 우리는 당신을 영원히 사랑할 것입니다!
PixiJS는 WebGL API를 사용하거나 브라우저 및 장치 호환성을 다룰 필요 없이 풍부한 대화형 그래픽과 크로스 플랫폼 애플리케이션 및 게임을 만들 수 있는 렌더링 라이브러리입니다.
PixiJS는 WebGL에 대한 대체 지원을 통해 WebGPU를 지원합니다. 라이브러리로서 PixiJS는 대화형 콘텐츠를 작성하기 위한 환상적인 도구입니다. 그래픽이 풍부한 대화형 웹사이트, 애플리케이션 및 HTML5 게임에 사용하세요. 즉시 사용 가능한 크로스 플랫폼 호환성과 우아한 성능 저하 덕분에 해야 할 일이 줄어들고 더 즐겁게 일할 수 있습니다! 브라우저 불일치로 인한 골치 아픈 일을 피하면서 조밀하고 낮은 수준의 코드를 탐구하지 않고 비교적 빠르게 세련되고 세련된 경험을 만들고 싶다면 PixiJS의 마법을 다음 프로젝트에 뿌려보세요!
당신의 발전을 촉진하고 자유롭게 상상력을 발휘해보세요!
WebGL 렌더러(자동 스마트 배치 기능을 통해 정말 빠른 성능 제공)
WebGPU 렌더러(최신 브라우저의 새로운 기능!)
캔버스 렌더러(시내에서 가장 빠릅니다!)
전체 장면 그래프
사용하기 매우 쉬운 API(플래시 표시 목록 API와 유사)
텍스처 아틀라스 지원
자산 로더/스프라이트 시트 로더
어떤 렌더러를 사용해야 하는지 자동 감지
전체 마우스 및 멀티 터치 상호 작용
텍스트
비트맵글꼴 텍스트
여러 줄 문자
렌더 텍스처
원시 드로잉
마스킹
필터
커뮤니티 지원 플러그인
반응하다
척추
필터
생기 있게 하다
허파
UI
공들여 나열한 것
GIF
그리고 더!
PixiJS를 시작하는 것은 쉽습니다! 미리 빌드된 빌드를 다운로드하기만 하면 됩니다!
또는 PixiJS를 npm으로 설치하거나 단순히 콘텐츠 전달 네트워크(CDN) URL을 사용하여 PixiJS를 HTML 페이지에 직접 삽입할 수 있습니다.
npm 설치 pixi.js
기본 내보내기가 없습니다. PixiJS를 가져오는 올바른 방법은 다음과 같습니다.
*를 'pixi.js'에서 PIXI로 가져옵니다.
jsDelivr를 통해:
또는 unpkg를 통해:
import { Application, Sprite, Assets } from 'pixi.js';// 애플리케이션은 가능한 경우 WebGL을 사용하여// 캔버스 렌더링으로 대체되는 렌더러를 생성합니다. 또한 티커를 설정하고 // 및 루트 단계 PIXI.Containerconst app = new Application();// 렌더러를 사용할 수 있을 때까지 기다립니다await app.init();// 애플리케이션은 사용자를 위해 캔버스 요소를 생성합니다. // 그런 다음 DOMdocument.body.appendChild(app.canvas)에 삽입할 수 있습니다.// 필요한 텍스처를 로드합니다.const text = wait Assets.load('bunny.png');// 이렇게 하면 '토끼'에서 텍스처가 생성됩니다. png' imageconst Bunny = new Sprite(texture);// Bunnybunny의 위치 설정.x = app.renderer.width / 2;bunny.y = app.renderer.height / 2;// centerbunny.anchor 주위로 회전 .x = 0.5;bunny.anchor.y = 0.5;// 우리가 만들고 있는 장면에 토끼를 추가합니다app.stage.addChild(bunny);// 프레임 업데이트 듣기app.ticker.add(() => { // 각 프레임마다 토끼를 약간씩 회전시킵니다.bunny.rotation += 0.01;});웹사이트: 공식 웹사이트에서 PixiJS에 대해 자세히 알아보세요.
시작하기:
시작 가이드를 확인하세요.
또한 레시피와 모범 사례가 포함된 비디오 게임을 겨냥한 @miltoncandelero의 PixiJS 튜토리얼도 여기에서 확인하세요.
예: 바로 여기에서 PixiJS 코드와 기능을 사용해 보세요!
API 문서: 문서를 확인하여 PixiJS API에 대해 알아보세요.
가이드: 여기에서 API 문서에 대한 보충 사용 가이드를 확인하세요.
필터 데모
버니 데모
마스킹 데모
상호작용 데모
더 많은 예
포럼: PixiJS에 대해 질문할 수 있는 친근한 장소인 토론과 Stackoverflow를 확인하세요.
채팅: Discord에 참여하여 PixiJS에 대해 채팅할 수 있습니다.
대부분의 사용자에게는 이 프로젝트를 빌드할 필요가 없습니다. PixiJS를 사용하고 싶다면 사전 구축된 릴리스 중 하나를 다운로드하세요. PixiJS를 빌드해야 하는 유일한 시기는 개발 중인 경우입니다.
Node.js와 NPM이 아직 없다면 설치하세요. 그런 다음 저장소를 복제한 폴더에서 npm을 사용하여 빌드 종속성을 설치합니다.
npm 설치
그런 다음 소스를 빌드하려면 다음을 실행하세요.
npm 실행 빌드
npm을 사용하여 문서를 생성할 수 있습니다.
npm 실행 문서
PixiJS 프로젝트에 참여하고 싶으신가요? 엄청난! 모두 환영합니다! 우리는 함께 더 빨리 도달할 것입니다 :) 버그를 발견했거나, 훌륭한 기능 요청이 있거나, 위의 로드맵에 있는 작업을 갖고 싶은 경우 언제든지 연락해 주세요.
변경 사항을 제출하기 전에 기여 가이드를 읽어보세요.
이 콘텐츠는 MIT 라이선스에 따라 공개됩니다.
