[Learning Pixi] 3. Creating the Pixi Application and stage

이 글은 다음 페이지를 번역한 글입니다.

https://github.com/kittykatattack/learningPixi#application

GitHub - kittykatattack/learningPixi: A step-by-step introduction to making games and interactive media with the Pixi.js renderi

 

이제 Pixi를 사용할 수 있습니다!

근데 어떻게..?

첫 번째 단계는 이미지를 표시할 수 있는 직사각형 표시 영역을 만드는 것입니다. Pixi에는 이를 생성하는 Application 객체가 있습니다. 이 객체는 HTML <canvas> 엘리먼트를 자동으로 생성하고 캔버스에 이미지를 표시하는 방법을 알아냅니다. 그런 다음 당신은 stage라는 특별한 Pixi Container 객체를 만들어야 합니다. 앞으로 보게 되겠지만, 이 stage 객체는 Pixi가 표시하기를 원하는 모든 것을 담고 있는 루트 컨테이너로 사용될 것입니다.

다음은 app Pixi 애플리케이션 및 stage를 생성하기 위해 작성해야 하는 코드입니다. HTML 문서의 <script> 태그 사이에 다음 코드를 추가합니다.

//Create a Pixi Application
const app = new PIXI.Application({width: 256, height: 256});

//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);

이것은 Pixi 사용을 시작하기 위해 작성해야 하는 가장 기본적인 코드입니다. 검은색 256x256픽셀 캔버스 엘리먼트를 생성하여 HTML 문서에 추가합니다. 다음은 이 코드를 실행할 때 브라우저에서 보이는 것입니다.

우왕! 검은 사각형!

PIXI.Application의 유일한 인자는 options 객체라고 하는 단일 객체입니다. 이 예제에서 width 및 height 속성은 픽셀 단위로 캔버스의 너비와 높이를 결정하도록 설정됩니다. 이 options 객체 내에서 더 많은 추가적인 속성을 설정할 수 있습니다. 안티 얼라이어싱, 투명도 및 해상도를 설정하는 데 사용하는 방법은 다음과 같습니다.

const app = new PIXI.Application({ 
    width: 256,         // default: 800
    height: 256,        // default: 600
    antialias: true,    // default: false
    transparent: false, // default: false
    resolution: 1       // default: 1
  }
);

Pixi의 기본 설정에 만족한다면 이러한 옵션을 설정할 필요가 없습니다. 그러나 필요한 경우 PIXI.Application에 대한 Pixi의 설명서를 참조하십시오.

이러한 옵션은 뭘까요? antialias는 글꼴과 그래픽 프리미티브의 가장자리를 부드럽게 합니다.(WebGL 앤티 얼라이어싱은 모든 플랫폼에서 사용할 수 없으므로 게임의 대상 플랫폼에서 테스트해야 합니다.) transparent는 캔버스 배경을 투명하게 만듭니다. resolution을 사용하면 다양한 해상도와 다양한 픽셀 밀도(pixel density)의 디스플레이 작업을 수행할 수 있습니다. resolution 설정은 이 튜토리얼의 범위를 약간 벗어나긴 하지만, resolution에 대한 세부사항을 알고 싶다면, Mat Grove의 설명을 확인하십시오. 그러나 일반적으로 대부분의 프로젝트에서 resolution을 1로 유지하면 문제가 없습니다.

Pixi의 renderer 객체는 기본적으로 WebGL로 설정됩니다. WebGL은 믿을 수 없을 정도로 빠르며 앞으로 배우게 될 멋진 시각 효과를 사용할 수 있기 때문에 좋습니다. Canvas 렌더러는 버전 5 이상에서 제거되었지만 Pixi는 필요한 경우 캔버스 렌더러에 대한 지원을 다시 추가하는 pixi.js-legacy라는 별도 버전을 제공합니다.

캔버스를 만든 후 배경색을 변경해야 하는 경우 app.renderer 객체의 backgroundColor 속성을 16진수 색상 값으로 설정합니다.

app.renderer.backgroundColor = 0x061639;

렌더러의 width 또는 height를 찾으려면 app.renderer.view.width 및 app.renderer.view.height를 사용하세요.

캔버스의 크기를 변경하려면 renderer의 resize를 사용하고, 새로운 width 및 height 값을 제공하세요. 그러나 해상도와 일치하도록 캔버스 크기가 조정되었는지 확인하려면 autoDensity를 true로 설정하십시오.

app.renderer.autoDensity = true;
app.renderer.resize(512, 512);

캔버스가 전체 창을 채우고 resize 시 캔버스 크기가 자동으로 조정되도록 하려면 resizeTo 속성과 함께 일부 CSS 스타일을 사용하여 값으로 window와 같이 크기를 조정할 요소를 제공할 수 있습니다. Pixi 애플리케이션을 생성할 때 나머지 옵션과 함께 resizeTo를 전달할 수도 있습니다.

app.renderer.view.style.position = "absolute";
app.renderer.view.style.display = "block";
app.renderer.autoDensity = true;
app.resizeTo = window;

그러나 그렇게 하는 경우 다음 CSS 코드를 사용하여 모든 HTML 요소에서 기본 패딩과 여백도 0으로 설정해야 합니다.

<style>* {padding: 0; margin: 0}</style>

(위의 코드에서 별표(*)는 "HTML 문서의 모든 태그"를 의미하는 CSS "범용 선택기"입니다.)

캔버스가 브라우저 창 크기에 비례하여 조정되도록 하려면 이 사용자 정의 함수scaleToWindow를 사용할 수 있습니다.