PixiJS events: pointer, mouse, touch and wheel input done right in PixiJS v8
Gérer les entrées pointeur, souris, tactile et molette dans PixiJS v8 : valeurs eventMode, types FederatedEvent, propagation et capture, hitArea, curseurs, événements de mouvement globaux pour le drag, conseils de performance
- Quoi
- Gérer les entrées pointeur, souris, tactile et molette dans PixiJS v8 : valeurs eventMode, types FederatedEvent, propagation et capture, hitArea, curseurs, événements de mouvement globaux pour le drag, conseils de performance
- Coût
- Gratuit
- Prérequis
- un projet PixiJS v8 (paquet npm pixi.js) ; connaissances de base TypeScript/JavaScript
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le skill officiel @pixijs pour gérer les entrées dans PixiJS v8 : événements pointeur, souris, tactile et molette bien maîtrisés. Couvre les cinq valeurs `eventMode` (none, passive, auto, static, dynamic) et quand chacune s'applique (static pour boutons et cibles de drag, dynamic uniquement pour les objets qui bougent sous un curseur immobile), les types FederatedEvent/FederatedPointerEvent avec leurs champs riches (points global/client, pointerType, pointerId, pression, boutons, touches modificatrices), la propagation et les écouteurs en phase de capture, les formes `hitArea` personnalisées (Rectangle, Circle, Polygon, ou `contains()` sur mesure), le style de curseur par objet, et les patterns de drag basés sur `globalpointermove`. Couvre aussi les bascules `eventFeatures` pour la performance (désactiver les catégories move/click/wheel inutilisées), et une section « Common Mistakes » avec corrections de sévérité HIGH : l'eventMode par défaut est passive (les écouteurs ne font silencieusement rien), `buttonMode` a été supprimé en v8 (utiliser `cursor = 'pointer'`), et les événements de mouvement v8 ne se déclenchent que sur l'objet (utiliser les événements de mouvement globaux pour le drag). Livré avec du code de démarrage rapide, des renvois vers des skills connexes (pixijs-accessibility, pixijs-scene-dom-container, pixijs-performance), et des liens de référence API. Bémols honnêtes : PixiJS v8 uniquement — le comportement des événements v7 diffère sur plusieurs points couverts ici, n'appliquez donc pas ces patterns aux anciens projets sans vérification. 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) ; connaissances de base TypeScript/JavaScript Installe-moi « Événements PixiJS : entrées pointeur, souris, tactile et molette bien maîtrisées dans PixiJS v8 ». Il donne à mon agent le skill officiel PixiJS pour la gestion des entrées en v8 : les cinq valeurs eventMode et quand utiliser chacune, les champs FederatedPointerEvent (points global/client, pointerType, pointerId, pression, boutons, touches modificatrices), la propagation et les écouteurs en phase de capture, les formes hitArea personnalisées, le style de curseur par objet, les patterns de drag basés sur globalpointermove, les bascules de performance eventFeatures, et les corrections d'erreurs courantes de sévérité HIGH (eventMode passive par défaut, buttonMode supprimé en v8, événements de mouvement uniquement sur l'objet en v8) — plus code de démarrage rapide et liens de référence API. Licence MIT. Dépôt : https://github.com/pixijs/pixijs-skills/blob/main/skills/pixijs-events/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-events ». 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 — pointez simplement l'agent vers votre code canvas PixiJS v8 quand vous avez besoin d'aide sur la gestion des entrées). 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.