Résumé de l'utilisation de Pixi.js

Cette fois, je vais vous apporter un résumé de l'utilisation de Pixi.js. Quelles sont les précautions lors de l'utilisation de Pixi.js. Voici des cas pratiques, jetons un coup d'œil.

Pixi.js est un moteur de rendu 2D écrit en JavaScript Il peut être utilisé pour créer des applications « visuelles riches » telles que des graphiques interactifs, des animations et des jeux dans le navigateur. API WebGL matérielle rendue par GPU Si le navigateur ne prend pas en charge WebGL, Pixi reviendra à HTML5 Canvas pour le rendu. Pixi est principalement responsable du rendu des images. Les développeurs doivent écrire eux-mêmes de nombreuses autres fonctions ou les utiliser avec d'autres bibliothèques. Par exemple, le framework Phaser utilisé pour développer des jeux Web utilise Pixi pour le rendu. Le contenu suivant est sélectionné dans le livre Learning Pixi.js. Vous pouvez essayer Pixi.

Remarque : Le JavaScript dans l'exemple utilise ES6, var devient let, function(){} devient () =>

Créer des sprites

Le module de construction de base dans Pixi est un objet appelé sprite. Un sprite est un graphique qui peut être contrôlé avec du code. Vous pouvez contrôler leur position, leur taille et d'autres propriétés pour créer des graphiques interactifs et animés. Apprendre à créer et contrôler des sprites est en effet la chose la plus importante lorsque vous apprenez à utiliser Pixi. Si vous savez créer et afficher des sprites, vous n'êtes qu'à un pas de commencer à créer des jeux ou tout autre programme interactif.

Dans ce chapitre, vous apprendrez les connaissances essentielles requises pour afficher et positionner les sprites dans Pixi's Canvas, notamment les suivantes :

Comment créer un conteneur racine, appelé scène)

Comment créer un nouveau moteur de rendu (rendu)

Utilisez le chargeur pour charger des graphiques dans le cache de texture de Pixi (cache de texture)

Utilisez les graphiques chargés, y compris les jeux de tuiles et les atlas de textures, pour créer des sprites

Avant de commencer à créer des sprites, créons un écran de type rectangulaire pour les afficher.

Créer un moteur de rendu et une scène

Pixi a un objet de rendu (rendu) pour vous permettre de créer un écran d'affichage. Il générera automatiquement un élément HTML 5ba626b379994d53f7acf72a64f9b697 et résoudra le problème d'affichage de votre image dans le canevas, mais vous devrez créer un autre objet conteneur Pixi appelé stage (ne vous inquiétez pas, vous saurez ce qu'est un objet conteneur et ce qu'est un objet conteneur). c'est dans un instant) pourquoi ils sont plus nécessaires). Cet objet de scène sera utilisé comme conteneur racine pour afficher tout ce dont Pixi a besoin pour afficher. Voici le code pour créer un moteur de rendu et une scène. Ajoutez ces codes entre les balises 3f1c4e4b6b16bbbd69b2ee476dc4f83a de votre document HTML :

//Créez le moteur de rendu pour créer un moteur de rendu. = PIXI.autoDectectRenderer(256, 256);//Ajouter le canevas au document HTML Ajouter canvasdocunment.body.appendChild(renderer.view);//Créer un objet conteneur appelé 'stage' crée un objet conteneur appelé stage let stage = new PIXI.Container();//Dites au « moteur de rendu » de « rendre » la « scène » indique au moteur de rendu de restituer une scène renderer.render(stage);

C'est le code le plus basique dont vous avez besoin pour commencer à utiliser Pixi, il génère un élément de toile noire d'une taille de 256 pixels sur 256 pixels et l'ajoute au document HTML

Ceci Le simple carré noir devrait apporter du pur bonheur à ton petit coeur ! En effet, faire en sorte que Pixi commence à afficher du contenu est à la fois la première et la plus importante étape, alors décomposons ce que fait ce code.

Options de rendu

La méthode autoDetectRenderer de Pixi choisira automatiquement d'utiliser l'API Canvas ou WebGL pour restituer l'image en fonction de l'état disponible.

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

Les premier et deuxième paramètres du code ci-dessus représentent respectivement la largeur et la hauteur du canevas. Cependant, vous pouvez également ajouter un troisième paramètre facultatif pour définir des valeurs supplémentaires. Ce troisième paramètre est un littéral d'objet. Le code suivant est un exemple de définition de l'anticrénelage, de la transparence et de la résolution du moteur de rendu :

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

L'utilisation du troisième paramètre est facultative. Si vous êtes satisfait de la valeur par défaut de Pixi, vous n'avez pas à vous en soucier. De manière générale, il n'est pas nécessaire de la modifier. Mais il est préférable de comprendre à quoi servent ces paramètres. L'anticrénelage peut lisser les bords des polices et des graphiques (l'anticrénelage de WebGL n'est pas encore disponible pour toutes les plateformes, il est donc préférable de tester cette fonctionnalité sur votre plateforme d'application). L'option de transparence rend l'arrière-plan du canevas transparent. L'option de résolution facilite la correspondance entre différentes résolutions et densités de pixels. Généralement, la définir sur 1 peut gérer la plupart des projets. Pour plus d'informations sur la correspondance de résolution, voir le chapitre 6.

Astuce Ce moteur de rendu a une autre quatrième option appelée préservationDrawingBuffer, la valeur par défaut est false. La seule fois où vous devez le définir sur true, c'est lors de l'appel d'une méthode spéciale Pixi dataToURL dans un contexte WebGL. Vous devrez peut-être le faire si vous devez convertir un canevas Pixi en un objet image 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对象只是一个普通平常的5ba626b379994d53f7acf72a64f9b697对象，所以你可以象控制其它任何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， 如下所示：

c9ccee2e6ea535a969eb3f532ad9fe89* {padding: 0; margin:0} 531ac245ce3e4fe3d50054a55f265927

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

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

相关阅读：

JS模块化-RequireJS

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!