Summary of using Pixi.js

This time I will bring you a summary of using Pixi.js. What are the precautions when using Pixi.js? The following is a practical case, let’s take a look.

Pixi.js is a 2D rendering engine written in JavaScript. It can be used to make "rich visual" applications such as interactive graphics, animations and games in the browser. It mainly supports hardware GPU-rendered WebGL API. If the browser does not support WebGL, Pixi will fall back to HTML5 Canvas for rendering. Pixi is mainly responsible for rendering images. Developers have to write many other functions themselves or use them with other libraries. For example, the Phaser framework used to develop web games uses Pixi for rendering. The following content is selected from the book Learning Pixi.js. You can give Pixi a try.

Note: The JavaScript in the example uses ES6, var becomes let, function(){} becomes () => {}.

Making sprites

The basic building module in Pixi is an object called sprite. A sprite is a graphic that can be controlled with code. You can control their position, size, and other properties to create interactive and animated graphics. Learning how to make and control sprites is indeed the most important thing when learning to use Pixi. If you know how to make and display sprites, you are only a small step away from starting to make games or any other interactive program.

In this chapter, you will learn the necessary knowledge required to display and position sprites in Pixi's Canvas, including the following content:

How to make a root container (root container), called a stage (stage) )

How to create a new renderer

Use the loader to load graphics into Pixi's texture cache (texture cache)

Use the loaded graphics including tilesets and texture atlases, making sprites

Before we start making sprites, let's create a rectangular-like screen for displaying them.

Create renderer and stage

Pixi has a renderer object (renderer) for you to create a display screen. It will automatically generate an HTML element and solve the problem of displaying your image in the canvas, but you have to create another Pixi container object called stage (don't worry, you will know what a container object is and what it is in a moment) why they are needed anymore). This stage object will be used as a root container to display everything we need Pixi to display. The following is the code to create a renderer and stage. Add these codes between the <script> tags of your <a href="http://www.php.cn/code/5010.html" target="_blank">HTML document:</script>

//Create the renderer Create a renderer let renderer = PIXI.autoDectectRenderer(256, 256);//Add the canvas to the HTML document Add canvasdocunment.body.appendChild(renderer.view);//Create a container object called the ' stage' creates a container object called stage let stage = new PIXI.Container();//Tell the 'renderer' to 'render' the 'stage' tells the renderer to render a stage renderer.render(stage);

This is the most basic code you need to start using Pixi, it generates a black canvas element with a size of 256 pixels by 256 pixels and adds it to the HTML document

This The simple black square should bring pure joy to your little heart! That's because getting Pixi to start displaying content is both the first and most important step, so let's break down what this code does.

Rendering options

Pixi's autoDetectRenderer method will automatically choose whether to use the Canvas API or WebGL to render the image based on the available status.

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

The first and second parameters of the above code represent the width and height of the canvas respectively. However, you can also add a third optional parameter for you to set some additional values. This third parameter is an object literal. The following code is an example of setting the renderer's anti-aliasing, transparency, and resolution:

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

Whether to use the third parameter is optional. If you are satisfied with Pixi's default value, you don't need to worry about it. Generally speaking, there is no need to change it. But it’s best to understand what these settings are used for. Antialiasing can smooth the edges of fonts and graphics (WebGL’s anti-aliasing is not yet available for all platforms, so it is best to test this feature on your application platform. ). The transparency option makes the background of the canvas transparent. The resolution option makes it easier to match different resolutions and pixel densities. Generally, setting it to 1 can handle most projects. For more information on resolution matching, see Chapter 6.

Tips This renderer has another fourth option called preserveDrawingBuffer, and the default value is false. The only time you need to set it to true is when calling a Pixi special method dataToURL in a WebGL context. You may have to do this if you need to convert a Pixi canvas into an HTML image object.

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+做出的石墨文档样式的富文本编辑器

The above is the detailed content of Summary of using Pixi.js. For more information, please follow other related articles on the PHP Chinese website!