PixiJS text: Text, BitmapText, HTMLText and split variants
Cinq moteurs de texte pour PixiJS v8 — Text qualité canvas, BitmapText en atlas de glyphes, HTMLText en HTML/CSS, SplitText et SplitBitmapText par caractère, avec comparatif de coût de mise à jour
- Quoi
- Cinq moteurs de texte pour PixiJS v8 — Text qualité canvas, BitmapText en atlas de glyphes, HTMLText en HTML/CSS, SplitText et SplitBitmapText par caractère, avec comparatif de coût de mise à jour
- 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 skill officiel de @pixijs pour le rendu de texte en PixiJS v8 : cinq moteurs avec compromis explicites — `Text` (qualité canvas, coûteux à mettre à jour) pour les étiquettes statiques stylées, `BitmapText` (atlas de glyphes, mises à jour par frame bon marché) pour scores et timers, `HTMLText` (vrai HTML/CSS via SVG) pour le markup riche, et `SplitText`/`SplitBitmapText` pour l'animation par caractère — avec une table comparative de coût de mise à jour, des constructeurs en objet d'options (la forme positionnelle v7 a disparu), `tagStyles` pour les balises colorées inline, `BitmapFont.install` pour les atlas pré-générés, la configuration des polices MSDF, et le chargement de polices custom via `Assets.load({ src: 'font.woff2', data: { family } })`. Inclut des décisions quand-utiliser-quoi (texte CJK/arabe/emoji lourd → `Text` ou `HTMLText`, valeurs par frame → `BitmapText`) et des pièges classiques : ne jamais mettre à jour `Text.text` à chaque frame, ne jamais utiliser les constructeurs positionnels, importer `pixi.js/text-bitmap` dans les builds personnalisés. Crédit : @pixijs. Bémols honnêtes : le styling de `BitmapText` est limité et nécessite MSDF pour un scaling net ; toutes les classes de texte sont des feuilles — groupez avec un `Container` ; 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 « Texte PixiJS : Text, BitmapText, HTMLText et variantes split ». Il enseigne à un agent les moteurs de texte officiels de @pixijs pour PixiJS v8 : Text qualité canvas, BitmapText en atlas de glyphes, HTMLText en HTML/CSS, et SplitText/SplitBitmapText par caractère — avec comparatif de coût de mise à jour, constructeurs en objet d'options, tagStyles, BitmapFont.install, setup MSDF, chargement de polices custom, décisions quand-utiliser-quoi, et pièges classiques (pas de mises à jour Text.text par frame, pas de constructeurs positionnels). Licence MIT. Dépôt : https://github.com/pixijs/pixijs-skills/blob/main/skills/pixijs-scene-text/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-text ». 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 une référence de rendu de texte ; choisissez le moteur selon la fréquence de mise à jour de votre texte). 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.