Pixi.js: le pivot affecte la position de l'objet

J'ai réussi à le faire en plaçant le pivot et la position des graphiques en son centre, puis j'ai dessiné les graphiques autour de ce point.

J'ai répondu à votre question sur stackoverflow avec un exemple de code ici: http://stackoverflow.com/questions/17505169/pixi-js-pivot-affects-object-position/18007977#18007977

@GoodBoyDigital Le pivot affecte-t-il la position, et si oui, est-ce une solution rapide?

J'ai été confus à propos de pivot et anchor , peuvent-ils être fusionnés?

Eh bien, pivot et anchor sont différents (conceptuellement). Le pivot affecte le point de rotation, tandis que l'ancre est l'origine (point de la position). Je ne sais pas si le pivot est utilisé correctement.

On dirait que cela peut être utilisé comme le même point. En fait, je n'ai jamais vu ces éléments séparés auparavant dans le rendu (origine de la transformation css, enregistrement de flash) y avait-il un cas d'utilisation à ce titre? Si tel est le cas, est-ce que tout peut être défini par défaut sur un élément, puis en utiliser un autre s'il est défini?

Peut-être par défaut pour ancrer partout, y compris la rotation, à moins que le pivot ne soit un point, l'utiliser pour la rotation?

MISE À JOUR : Ou vice versa de ce qui précède, bien que je me penche vers _anchor = default_ et _pivot = rotation_, mieux nommer IMO.

anchor et pivot sont assez courants dans les moteurs de rendu. Il existe de nombreux cas d'utilisation où vous souhaitez effectuer une rotation autour du centre, mais que la position est déterminée par le coin supérieur gauche. C'est quelque chose que nous devrions non seulement soutenir, mais que nous allons faire.

Howdy, regardant dans ce problème un maintenant. Pour une petite clarification, le anchor est une chose spécifique au sprite. Il est utilisé pour aligner la texture. J'ai trouvé la fonctionnalité incroyablement utile lorsque je faisais des trucs avec cocos2d à l'époque, alors je voulais vraiment l'ajouter à pixi. Le pivot appartient à tous les objets d'affichage et est essentiellement le point de rotation.

En fermant ceci comme résolu, le pivot / l'ancre fonctionne comme prévu.

Désolé d'avoir soulevé cela, mais j'ai recherché / lu ce dépôt et je ne suis toujours pas clair sur la façon de faire pivoter un DisplayObjectContainer à partir du centre. Utiliser le pivot ne permet pas à mon conteneur de basculer du centre sans se déplacer ailleurs. Des idées? J'ai vu le n ° 93 et ​​j'ai pensé que c'était la réponse, mais peut-être que je ne la comprends pas correctement. Toute aide serait appréciée. Merci!

Edit: J'ai pensé qu'il serait utile de mentionner que mon objet se déplace sur l'écran et se retournera en se déplaçant. J'utilise également l'échelle pour faire le "retournement".

@ mparker11 La rotation autour d'un point et le retournement (via scale ) est différent. pivot affectera la valeur de rotation , je ne sais pas si vous pouvez correctement affecter la façon dont un conteneur bascule avec l'échelle ...

Réflexions @GoodBoyDigital?

@englercj Merci pour la réponse. J'ai lu un article sur l'utilisation de la multiplication matricielle pour y parvenir, que je vois que @GoodBoyDigital a utilisé dans sa fonction PIXI.DisplayObject.prototype.updateTransform , mais pour la vie de moi, je ne comprends pas vraiment comment le changer pour le faire évoluer à partir de le centre, si j'ai même besoin de le changer.

Hmmm ... Je ne comprends vraiment pas comment utiliser le pivot.

J'ai défini la position d'un sprite à une position donnée. Ensuite, j'aimerais le faire pivoter en son centre, donc j'ai placé le pivot au centre de mon sprite (sprite.width / 2, sprite.height / 2). Cela a pour effet de déplacer mon sprite et d'avoir la rotation à 0,0.

Euh? Ai-je oublié quelque chose?

@tleunen Je pense que vous devez utiliser l'ancre puisque vous utilisez des Sprites.

Ce comportement sera-t-il corrigé dans la v4?

J'ai décidé d'essayer Pixi et j'ai immédiatement frappé ce "bug".
Après quelques heures de recherche sur Google, je ne comprends toujours pas comment cela est censé fonctionner.
La plupart des gens sur les forums disent simplement que "le comportement de pivot est cassé". Pas très utile.

Je crains non plus votre commentaire. C'est ainsi que pixi traite le pivot.
Si ce «bogue» est trop difficile à mettre à nu, veuillez fournir un pr ou un jogging ..

Le jeudi 10 mars 2016, Ivan Kleshnin [email protected] a écrit:

_Ce problème sera-t-il corrigé dans la v4? _

J'ai décidé d'essayer Pixi et j'ai immédiatement frappé ce "bug".
Après quelques heures de recherche sur Google, je ne comprends toujours pas comment cela est censé
travail.
La plupart des gens sur les forums disent simplement que "le comportement de pivot est cassé". Pas très
utile.

-
Répondez directement à cet e-mail ou affichez-le sur GitHub
https://github.com/pixijs/pixi.js/issues/190#issuecomment -194833811.

Mat Groves

_ Partenaire technique_

Téléphone: 07708 114496 :: www.goodboydigital.com
Premier étage, unité 9B, Queens Yard, White Post Lane, Londres, E9 5EN
goodboy ©. Tous les droits sont réservés.

Ni ton commentaire, j'ai peur

Veuillez ne pas prendre personnellement "Pas très utile".
C'était censé décrire mon état émotionnel, pas offenser.

Si ce «bogue» est trop difficile à mettre à nu, veuillez fournir un pr ou un jogging ..

Je ne sais pas si c'est un bug ou pas parce que je suis un noob dans cette industrie.
C'est pourquoi j'ai mis un mot "bug" ci-dessus entre guillemets. Certaines personnes pensent que c'est le cas. Certains - ce n'est pas le cas.
Je viens de partager mon expérience et de poser des questions sur les changements dans la v4. Je voulais vraiment apprendre Pixi mais celui-ci m'a découragé.

Le problème principal: après avoir lu> 10 problèmes liés (ici et sur Internet), je ne comprends toujours pas comment contourner ce problème et forcer un conteneur à tourner autour de son centre dans un point d'espace défini.
Et je ne suis pas particulièrement stupide.

Salut!

Pas de soucis mec, désolé si j'étais un peu petit, tu m'as rattrapé à la fin d'une longue journée!

Pivot est censé se comporter comme un point d'ancrage non normalisé.

Le moyen le plus simple de résoudre ce problème consiste à ajouter l'objet dans un conteneur et à faire pivoter le conteneur, tout en déplaçant l'objet en interne.

J'espère que ça t'as aidé!

Aucun problème. Merci. J'essaierai de suivre vos conseils.

À mon avis, le moyen le plus simple de faire pivoter un graphique (ou un conteneur) autour de son point central est d'enregistrer les coordonnées du point central, là où un graphique a été dessiné. Ensuite, définissez la position et le pivot du graphique sur le point central.
Voici un exemple:

Si vous créez par exemple un objet graphique, vous pouvez commencer à dessiner des primitives dessus.
var test = new PIXI.Graphics(); test.drawRoundedRect(100, 100, 200, 200,12);
La primitive est toujours dessinée par rapport à la position de l'objet Graphics (qui est 0 par défaut).
Par conséquent, nous devons définir la nouvelle position de l'objet graphique sur 200, car c'est le point central actuel de notre primitive.
test.position.x = 200; test.position.y = 200;
Nous pouvons maintenant voir que la primitive vient d'être décalée, nous devons donc régler le pivot sur la même coordonnée et il restera à la même position, là où nous l'avions dessiné.
test.pivot.x = 200; test.pivot.y = 200;

La propriété pivot n'est pas boguée, c'est juste un peu déroutant de comprendre comment elle fonctionne et pourquoi elle "affecte la position de l'objet". L'objet tourne toujours autour de sa propre position et le pivot nous aide à définir un nouveau point à partir duquel il tourne.

Bonjour gars! Puis-je utiliser le pivot avec des angles? J'essaie de modifier l'angle d'un sprite (en utilisant le pivot pour modifier la position de rotation) pour suivre la souris, mais je ne peux pas, pouvez-vous m'aider, s'il vous plaît?

Vérifiez mon exemple de codepen => http://codepen.io/jdnichollsc/pen/KgdRvV?editors=0010
Et l'erreur => http://screencast.com/t/hSSaaTO4j0

Merci d'avance, Nicholls

Terminé! Utilisez uniquement pivot.y ou pivot.x hahaha! Merci pour toute l'équipe Pixi! : +1:

À mon avis, le moyen le plus simple de faire pivoter un graphique (ou un conteneur) autour de son point central est d'enregistrer les coordonnées du point central, là où un graphique a été dessiné. Ensuite, définissez la position et le pivot du graphique sur le point central.
Voici un exemple:

Si vous créez par exemple un objet graphique, vous pouvez commencer à dessiner des primitives dessus.
var test = new PIXI.Graphics(); test.drawRoundedRect(100, 100, 200, 200,12);
La primitive est toujours dessinée par rapport à la position de l'objet Graphics (qui est 0 par défaut).
Par conséquent, nous devons définir la nouvelle position de l'objet graphique sur 200, car c'est le point central actuel de notre primitive.
test.position.x = 200; test.position.y = 200;
Nous pouvons maintenant voir que la primitive vient d'être décalée, nous devons donc régler le pivot sur la même coordonnée et il restera à la même position, là où nous l'avions dessiné.
test.pivot.x = 200; test.pivot.y = 200;

La propriété pivot n'est pas boguée, c'est juste un peu déroutant de comprendre comment elle fonctionne et pourquoi elle "affecte la position de l'objet". L'objet tourne toujours autour de sa propre position et le pivot nous aide à définir un nouveau point à partir duquel il tourne.

Hé mec, je pense que c'était un hack, parce que ça a un effet secondaire: la position a été changée.

Ce thread a été automatiquement verrouillé car il n'y a eu aucune activité récente après sa fermeture. Veuillez ouvrir un nouveau numéro pour les bogues associés.