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 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