[2D WebGL][pixiJS] Architecture Overview

그래픽스/WebGl

[2D WebGL][pixiJS] Architecture Overview

Rainbow🌈Coder 2022. 5. 9. 22:27

728x90

PixiJS 응용 프로그램의 구성 요소

HTML 파일 만들기
웹 서버를 사용하여 파일 제공
PixiJS 라이브러리로드
응용 프로그램 만들기
생성 된보기를 DOM에 추가
스테이지에 이미지 추가
업데이트 루프 작성

파일 제공

PixiJS로 로컬로 개발하려면 웹 서버를 실행해야합니다. 웹 브라우저는 로컬로 로드된 웹 페이지에 로컬 파일(예: 이미지 및 오디오 파일)을 로드하지 못하도록 합니다. 새 HTML 파일을 두 번 클릭하기만 하면 PixiJS 단계에 스프라이트를 추가하려고 할 때 오류가 발생합니다.

XAMPP 또는 http-server Node.js 패키지를 사용하여 파일을 쉽게 제공 할 수 있습니다.

선택한 브라우저를 열고 위치 표시 줄에 입력하여 모든 것이 작동하는지 테스트하십시오. (몽구스는 기본적으로 포트 8080에서 파일을 제공합니다.) "Hello PixiJS"와 다른 것은 볼 수 없습니다. 이 단계에서 오류가 발생하면 파일 이름을 지정하지 않았거나 웹 서버를 잘못 구성했음을 의미합니다.http://127.0.0.1:8080index.html

-> 블로그 주인장 같은 경우에는 파이썬으로 서버 구성

python -m SimpleHTTPServer 8000 오류 — My dev Note📒 (tistory.com)

python -m SimpleHTTPServer 8000 오류

python -m SimpleHTTPServer 8000 를 터미널에 쳤을 때 No module named SimpleHTTPServer 라는 에러메시지를 받는 이슈에 대한 해결은 아래 블로그 파이썬(python)을 이용한 간단한 파일 서버 명령 (daum.net) 파..

rainbowcode.tistory.com

PixiJS 로딩

비어있는 웹페이지에 PixiJS 라이브러리를 로드. 실제 응용 이 줄을 파일 섹션에 추가

<script src="https://pixijs.download/release/pixi.js"></script>

여기에는 페이지가로드 될 때 PixiJS의 최신 버전의 축소되지 않은 버전이 포함되며 사용할 준비. 개발 중이기 때문에 축소되지 않은 버전을 사용.

응용 프로그램 만들기

다음 단계는 PixiJS를 시작하는 것

<script>
  let app = new PIXI.Application({ width: 640, height: 360 });
</script>

자바스크립트 코드 블록을 추가하고, 그 블록에 새로운 PICI를 만드는 것. 응용 프로그램 인스턴스. 응용 프로그램은 PixiJS로 작업을 단순화하는 도우미 클래스. 렌더러를 만들고, 스테이지를 만들고, 업데이트를 위한 티커를 시작.

DOM에 뷰 추가

때 PIXI. 응용 프로그램 클래스는 렌더러를 만들고 렌더링할 Canvas 요소를 빌드. PixiJS로 그리는 것을 보려면 이 Canvas 요소를 웹 페이지의 DOM에 추가. 페이지의 스크립트 블록에 다음 줄을 추가

  document.body.appendChild(app.view);

이렇게 하면 응용 프로그램에서 만든 보기(Canvas 요소)를 가져와 페이지 본문에 추가

스프라이트 만들기

아직까지도 준비단계... PixiJS에게 아무것도 그리라고 말하지 않았다.

표시 할 이미지를 추가하여 이를 수정.

PixiJS에서 이미지를 그리는 방법에는 여러 가지가 있지만 가장 간단한 방법은 스프라이트를 사용하는 것.

지금은 PixiJS가 DisplayObjects의 계층 구조를 렌더링한다는 것만 알고 있어야한다. 스프라이트는 로드된 이미지 리소스를 래핑하여 그리기, 크기 조정, 회전 등을 허용하는 DisplayObject 유형.

PixiJS가 이미지를 렌더링하기 전에 로드해야한다. 다른 웹 페이지와 마찬가지로 이미지로드는 비동기적으로 발생.

지금은 PICI에서 도우미 메서드를 사용할 수 있다. 이미지로드를 처리하는 스프라이트 클래스 :

  // Magically load the PNG asynchronously
  let sprite = PIXI.Sprite.from('sample.png');

스테이지에 스프라이트 추가

마지막으로 새 스프라이트를 스테이지에 추가. 스테이지는 단순히 장면 그래프의 루트인 컨테이너. 스테이지 컨테이너의 모든 자식은 모든 프레임에 렌더링됩니다. 스프라이트를 스테이지에 추가함으로써 PixiJS의 렌더러에게 그릴 것을 알려줍니다.

  app.stage.addChild(sprite);

업데이트 루프 작성

정적 컨텐츠에는 PixiJS를 사용할 수 있지만 대부분의 프로젝트에서는 애니메이션을 추가.

샘플 앱은 실제로 크랭크 아웃되어 동일한 장소에서 동일한 스프라이트를 초당 여러 번 렌더링합니다. 이미지를 이동시키기 위해해야 할 일은 프레임 당 한 번 속성을 업데이트. 이를 위해 응용 프로그램의 티커에 연결. 티커는 각 프레임마다 하나 이상의 콜백을 실행하는 PixiJS 객체. // Add a variable to count up the seconds our demo has been running let elapsed = 0.0; // Tell our application's ticker to run a new callback every frame, passing // in the amount of time that has passed since the last tick app.ticker.add((delta) => { // Add the time to our total elapsed time elapsed += delta; // Update the sprite's X position based on the cosine of our elapsed time. We divide // by 50 to slow the animation down a bit... sprite.x = 100.0 + Math.cos(elapsed/50.0) * 100.0; });

당신이해야 할 일은 콜백 함수를 호출하고 콜백 함수를 전달 한 다음 해당 함수에서 장면을 업데이트하는 것입니다. 모든 프레임이 호출되며 프로젝트의 애니메이션을 구동하려는 모든 것을 이동, 회전 할 수 있다.app.ticker.add(...)

모든 것을 하나로 모으기

<!doctype html>
<html>
  <head>
    <script src="https://pixijs.download/release/pixi.min.js"></script>
  </head>
  <body>
    <script>
      // Create the application helper and add its render target to the page
      let app = new PIXI.Application({ width: 640, height: 360 });
      document.body.appendChild(app.view);

      // Create the sprite and add it to the stage
      let sprite = PIXI.Sprite.from('sample.png');
      app.stage.addChild(sprite);

      // Add a ticker callback to move the sprite back and forth
      let elapsed = 0.0;
      app.ticker.add((delta) => {
        elapsed += delta;
        sprite.x = 100.0 + Math.cos(elapsed/50.0) * 100.0;
      });
    </script>
  </body>
</html>

728x90