Pixie
8.5.2
Ce projet vise à fournir une bibliothèque 2D rapide et légère qui fonctionne sur tous les appareils. Le moteur de rendu PixiJS permet à chacun de profiter de la puissance de l'accélération matérielle sans connaissance préalable de WebGL. En plus, c'est rapide. Vraiment rapide.
Si vous souhaitez vous tenir au courant des dernières nouvelles de PixiJS, n'hésitez pas à nous suivre sur Twitter @PixiJS et nous vous tiendrons au courant ! Vous pouvez également revenir sur notre site car toutes les avancées y seront également publiées !
Nous faisons désormais partie de l'Open Collective et avec votre soutien, vous pouvez nous aider à rendre PixiJS encore meilleur. Pour faire un don, cliquez simplement sur le bouton ci-dessous et nous vous aimerons pour toujours !
PixiJS est une bibliothèque de rendu qui vous permettra de créer des graphiques riches et interactifs ainsi que des applications et des jeux multiplateformes sans avoir à vous plonger dans l'API WebGL ni à gérer la compatibilité des navigateurs et des appareils.
PixiJS prend en charge WebGPU avec une prise en charge de secours pour WebGL. En tant que bibliothèque, PixiJS est un outil fantastique pour créer du contenu interactif. Utilisez-le pour vos sites Web, applications et jeux HTML5 interactifs et riches en graphiques. La compatibilité multiplateforme prête à l'emploi et la dégradation gracieuse signifient que vous avez moins de travail à faire et plus de plaisir à le faire ! Si vous souhaitez créer des expériences soignées et raffinées relativement rapidement sans vous plonger dans un code dense de bas niveau, tout en évitant les maux de tête liés aux incohérences du navigateur, alors saupoudrez votre prochain projet d'un peu de magie PixiJS !
Boostez votre développement et n’hésitez pas à utiliser votre imagination !
Moteur de rendu WebGL (avec traitement par lots intelligent automatique, permettant des performances VRAIMENT rapides)
Moteur de rendu WebGPU (nouveau sur les derniers navigateurs !)
Moteur de rendu sur toile (le plus rapide en ville !)
Graphique de scène complet
API super facile à utiliser (similaire à l'API de liste d'affichage flash)
Prise en charge des atlas de textures
Chargeur d'actifs / chargeur de feuilles de sprites
Détecter automatiquement quel moteur de rendu doit être utilisé
Souris complète et interaction multi-touch
Texte
Texte de police Bitmap
Texte multiligne
Texture de rendu
Dessin primitif
Masquage
Filtres
Plugins pris en charge par la communauté
Réagir
Colonne vertébrale
Filtres
Animer
Lumières
Interface utilisateur
Mise en page
GIF
Et bien plus encore !
C'est facile de démarrer avec PixiJS ! Téléchargez simplement une version prédéfinie !
Alternativement, PixiJS peut être installé avec npm ou simplement en utilisant une URL de réseau de diffusion de contenu (CDN) pour intégrer PixiJS directement sur votre page HTML.
npm installer pixi.js
Il n'y a pas d'exportation par défaut. La bonne façon d’importer PixiJS est :
importer * en tant que PIXI depuis 'pixi.js' ;
Via jsDelivr :
Ou via unpkg :
import { Application, Sprite, Assets } from 'pixi.js';// L'application créera un moteur de rendu en utilisant WebGL, si possible,// avec un repli vers un rendu de canevas. Il configurera également le ticker // et l'étape racine PIXI.Containerconst app = new Application (); // Attendez que le moteur de rendu soit disponible wait app.init (); // L'application créera pour vous un élément de canevas que vous // peut ensuite insérer dans le DOMdocument.body.appendChild(app.canvas);// charger la texture dont nous avons besoinconst texture = wait Assets.load('bunny.png');// Cela crée une texture à partir d'un 'lapin. png' imageconst bunny = new Sprite(texture);// Configurer la position du bunnybunny.x = app.renderer.width / 2;bunny.y = app.renderer.height / 2;// Rotation autour du centerbunny.anchor .x = 0.5;bunny.anchor.y = 0.5;// Ajouter le lapin à la scène que nous construisonsapp.stage.addChild(bunny);// Écouter les mises à jour du cadreapp.ticker.add(() => { // à chaque image, nous faisons tourner le lapin un peu bunny.rotation += 0.01;});Site Web : Apprenez-en plus sur PixiJS sur le site officiel.
Commencer:
Consultez le guide de démarrage.
Consultez également les didacticiels PixiJS de @miltoncandelero destinés aux jeux vidéo avec des recettes et des bonnes pratiques ici
Exemples : Restez coincé et jouez avec le code et les fonctionnalités PixiJS ici !
Documentation de l'API : découvrez l'API PixiJS en consultant la documentation.
Guide : guides d'utilisation supplémentaires à la documentation de l'API ici.
Démo des filtres
Démo de lapin
Démo de masquage
Démo d'interaction
Plus d'exemples
Forums : consultez les discussions et Stackoverflow, deux endroits conviviaux pour poser vos questions PixiJS.
Chat : vous pouvez nous rejoindre sur Discord pour discuter de PixiJS.
Notez que pour la plupart des utilisateurs, vous n'avez pas besoin de créer ce projet. Si tout ce que vous voulez, c'est utiliser PixiJS, téléchargez simplement l'une de nos versions prédéfinies. La seule fois où vous devriez avoir besoin de créer PixiJS, c'est si vous le développez.
Si vous n'avez pas déjà Node.js et NPM, installez-les. Ensuite, dans le dossier où vous avez cloné le référentiel, installez les dépendances de build à l'aide de npm :
installation npm
Ensuite, pour construire la source, exécutez :
npm exécuter la construction
Les documents peuvent être générés à l'aide de npm :
npm exécuter des documents
Vous souhaitez faire partie du projet PixiJS ? Super! Tous sont les bienvenus ! Nous y arriverons plus rapidement ensemble :) Que vous trouviez un bug, que vous ayez une demande de fonctionnalité intéressante ou que vous ayez envie de posséder une tâche de la feuille de route ci-dessus, n'hésitez pas à nous contacter.
Assurez-vous de lire le Guide de contribution avant de soumettre des modifications.
Ce contenu est publié sous la licence MIT.
