PixiJS scene graph: containers, leaves, transforms and render order
Le modèle mental de PixiJS v8 — conteneur vs feuille, transforms locaux/monde, render groups, culling, masking, RenderLayer et quel skill couvre quel objet d'affichage
- Quoi
- Le modèle mental de PixiJS v8 — conteneur vs feuille, transforms locaux/monde, render groups, culling, masking, RenderLayer et quel skill couvre quel objet d'affichage
- Coût
- Gratuit
- Prérequis
- un projet PixiJS v8 (paquet npm pixi.js) ; rien d'autre — le skill est un guide plus des patterns de code, aucun compte ni clé requis
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le modèle mental officiel de @pixijs pour le graphe de scène de PixiJS v8 : l'arbre enraciné à `app.stage` comme modèle de layout et ordre de rendu, la distinction CRITIQUE conteneur vs feuille (utilisez `Container` pour tout nœud qui a besoin d'enfants — ajouter des enfants à un `Sprite`, `Graphics`, `Text` ou `Mesh` logge un warning de dépréciation aujourd'hui et deviendra une erreur dure), la composition des transforms locaux en transforms monde (`toGlobal`/`toLocal`), l'ordre de rendu par index d'enfant avec `sortableChildren`/`zIndex` pour l'ordre explicite et `RenderLayer` pour un ordre découplé de la hiérarchie, les render groups (`isRenderGroup`) qui déplacent les transforms vers le GPU pour les grands sous-arbres stables, le culling avec `cullable`/`cullArea`, les quatre types de masques (stencil, alpha, scissor, color), `visible` vs `renderable`, la sémantique de destruction (`children: true`, options de teardown GPU), les événements de cycle de vie des conteneurs, la référence partagée des options de constructeur, et une table de comparaison des feuilles mappant chaque objet d'affichage (Sprite, Graphics, Text, Mesh, ParticleContainer, DOMContainer, GifSprite) à son skill de feuille. Crédit : @pixijs. Bémols honnêtes : skill de cadrage — il structure les concepts et pointe vers les deep dives par feuille plutôt que de documenter une API en détail ; licence MIT. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : un projet PixiJS v8 (paquet npm pixi.js) ; rien d'autre — le skill est un guide plus des patterns de code, aucun compte ni clé requis Installe-moi « Graphe de scène PixiJS : conteneurs, feuilles, transforms et ordre de rendu ». Il enseigne à un agent le modèle mental officiel du graphe de scène PixiJS v8 de @pixijs : la distinction conteneur vs feuille (Container pour les nœuds avec enfants, jamais d'imbrication dans les feuilles), la composition des transforms locaux/monde, l'ordre de rendu avec sortableChildren/zIndex et RenderLayer, les render groups sur le GPU, le culling, les quatre types de masques, visible vs renderable, la sémantique de destruction, les événements de cycle de vie, la référence partagée des options de constructeur, et la table de comparaison des feuilles pointant vers chaque skill de feuille. Licence MIT. Dépôt : https://github.com/pixijs/pixijs-skills/blob/main/skills/pixijs-scene-core-concepts/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur, les identifiants uniquement via le coffre sécurisé, les hôtes autorisés déclarés dans le SKILL.md. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « pixijs-scene-core-concepts ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. rien — c'est le skill de cadrage ; ajoutez les skills par feuille (sprite, graphics, text, mesh) au besoin). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.