Pixi.js 사용 요약

이번에는 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 요소를 생성하고 캔버스에 이미지를 표시하는 문제를 해결하지만 stage라는 또 다른 Pixi 컨테이너 개체를 만들어야 합니다(걱정하지 마세요. 컨테이너 개체가 무엇인지, 무엇인지 알게 될 것입니다). 잠시 후에) 왜 더 이상 필요한지). 이 스테이지 객체는 Pixi가 표시해야 하는 모든 것을 표시하는 루트 컨테이너로 사용됩니다. 다음은 렌더러와 스테이지를 생성하는 코드입니다. HTML 문서의 <script> 태그 사이에 다음 코드를 추가하세요.</script>

//렌더러를 생성하려면 renderer = PIXI.autoDectectRenderer(256, 256) );//HTML document에 캔버스 추가 canvasdocunment.body.appendChild(renderer.view) 추가;//'스테이지'라는 컨테이너 객체 생성 Let stage = new PIXI.Container();//Tell the 'renderer'는 '무대'를 '렌더링'하기 위해 렌더러에게 무대를 렌더링하라고 지시합니다. renderer.render(stage);

이것은 Pixi 코드를 사용하기 시작하는 데 필요한 가장 기본적인 것입니다. 256픽셀의 크기 Pixi가 콘텐츠 표시를 시작하도록 하는 것이 첫 번째이자 가장 중요한 단계이기 때문입니다. 따라서 이 코드의 기능을 자세히 살펴보겠습니다.

렌더링 옵션

Pixi의 autoDetectRenderer 메소드는 사용 가능한 상태에 따라 이미지를 렌더링하기 위해 Canvas API를 사용할지 WebGL을 사용할지 자동으로 선택합니다.

let renderer = PIXI.autoDetectRenderer(256, 256);

위 코드의 첫 번째와 두 번째 매개변수는 각각 캔버스의 너비와 높이를 나타냅니다. 그러나 세 번째 선택적 매개변수를 추가하여 몇 가지 추가 값을 설정할 수도 있습니다. 이 세 번째 매개변수는 객체 리터럴입니다. 다음 코드는 렌더러의 앤티앨리어싱, 투명도 및 해상도를 설정하는 예입니다.

renderer = PIXI.autoDetectRenderer(
  256, 256,
  { antialias: false, transparent: false, resolution: 1 }
);

필요합니까? 세 번째 매개변수는 선택사항입니다. Pixi의 기본값에 만족한다면 일반적으로 변경할 필요가 없습니다. 그러나 이러한 설정의 용도를 이해하는 것이 가장 좋습니다. 앤티앨리어싱은 글꼴과 그래픽의 가장자리를 부드럽게 할 수 있습니다(WebGL의 앤티앨리어싱은 아직 모든 플랫폼에서 사용할 수 없으므로 애플리케이션 플랫폼에서 이 기능을 테스트하는 것이 가장 좋습니다.). 투명도 옵션은 캔버스의 배경을 투명하게 만듭니다. 해상도 옵션을 사용하면 다양한 해상도와 픽셀 밀도를 더 쉽게 일치시킬 수 있습니다. 일반적으로 이 옵션을 1로 설정하면 대부분의 프로젝트를 처리할 수 있습니다.

팁 이 렌더러에는 Preserve DrawingBuffer라는 또 다른 네 번째 옵션이 있으며 기본값은 false입니다. 이를 true로 설정해야 하는 유일한 경우는 WebGL 컨텍스트에서 Pixi 특수 메소드 dataToURL을 호출할 때입니다. Pixi 캔버스를 HTML 이미지 개체로 변환해야 하는 경우 이 작업을 수행해야 할 수 있습니다.

Pixi的autoDetectRenderer将决定使用canvas绘图接口还是WebGL来显示图像。缺省是WebGL，这是好的，因为WebGL特别的快而且能使用很多引人入胜的特效，这些你都能在本书后面学到。但是如果你想强制使用canvas绘图接口而不是
WebGL，你可以这么写:

renderer = new PIXI.CanvasRenderer(256, 256);

上面的情况只需要头两个参数：宽和高。

你也可以强制使用WebGL渲染器，如下所示：

renderer = new PIXI.WebGLRenderer(256, 256);

现在我们再来看看如何增强渲染器的外表

定制canvas

renderer.view对象只是一个普通平常的对象，所以你可以象控制其它任何canvas对象那样控制它，下面的代码给canvas加了一圈虚线边框：

renderer.view.style.border = "1px dashed black";

如果新建canvas之后，你需要改变它的背景颜色，那就给渲染器对象的backgroundColor设置任何十六进制颜色值即可，下面的代码给了一个纯白色的背景：

renderer.backgroundColor = 0xFFFFFF;

提示 网上可以搜索到很多十六进制配色表，你可以很容易选择一个合适的背景色。

如果你想知道渲染器的宽和高，使用renderer.view.width和renderer.view.height即可。

要改变canvas的大小，使用渲染器的resize()方法，然后应用新的宽高值，如下所示：

renderer.resize(512, 512);

如果想让canvas充满整个窗口，你可以使用如下CSS样式：

renderer.view.style.position = "absolute";
renderer.view.style.width = window.innerWidth + "px";
renderer.view.style.height = window.innerHeight + "px";
renderer.viwe.sytle.display = "block";

注意，如果要这么做，你必须还得将所有HTML元素的padding和margin值都设为0， 如下所示：

(上面的*号是CSS里的通配选择器，就是指所有标签)如果没有上面这条CSS样式，你可能会发现在Pixi画布与浏览器边缘之间有几像素的空隙。

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

JS模块化-RequireJS

在vue首页怎样做出底部导航TabBar

一个用Vue.js 2.0+做出的石墨文档样式的富文本编辑器

위 내용은 Pixi.js 사용 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!