Pixi.js: el pivote afecta la posición del objeto

Logré hacer esto estableciendo el pivote y la posición de los gráficos en su centro, y luego dibujé los gráficos alrededor de este punto.

Respondí a su pregunta sobre stackoverflow con un ejemplo de código aquí: http://stackoverflow.com/questions/17505169/pixi-js-pivot-affects-object-position/18007977#18007977

@GoodBoyDigital ¿El pivote

De hecho, he estado confundido acerca de pivot y anchor , ¿se pueden fusionar?

Bueno, pivot y anchor son diferentes (conceptualmente). El pivote afecta el punto de rotación, mientras que el ancla es el origen (punto de la posición). Sin embargo, no estoy seguro de si pivot se está usando correctamente.

Parece que esto se puede usar como el mismo punto. De hecho, nunca antes los había visto separados en la representación (origen de transformación css, registro de flash) ¿hubo un caso de uso que se haya tenido en cuenta? Si es así, ¿puede todo predeterminado en una cosa y luego usar otra si está configurada?

Tal vez por defecto anclar en todas partes, incluida la rotación, a menos que el pivote sea un punto, ¿usarlo para la rotación?

ACTUALIZACIÓN : O viceversa de lo anterior, aunque me estoy inclinando hacia _anchor = default_, y _pivot = rotación_, mejor nombrando IMO.

anchor y pivot son bastante comunes en los motores de renderizado. Hay muchos casos de uso en los que desea rotar alrededor del centro pero la posición la determina la parte superior izquierda. Es algo que no solo debemos apoyar, sino que lo haremos.

Hola, investigando este problema uno ahora. Para una pequeña aclaración, anchor es una cosa específica de sprites. Se usa para alinear la textura. Encontré la función increíblemente útil cuando estaba haciendo cosas con cocos2d en el pasado, así que realmente quería agregarla a pixi. El pivot pertenece a todos los objetos de visualización y esencialmente es el punto de rotación.

Cerrando esto como resuelto, pivote / ancla funciona como se esperaba.

Lo siento por mencionar esto, pero he estado buscando / leyendo este repositorio y todavía no tengo claro cómo rotar un DisplayObjectContainer desde el centro. Usar pivote no permite que mi contenedor se mueva desde el centro sin moverse a otra parte. ¿Algunas ideas? Vi el número 93 y pensé que esa era la respuesta, pero tal vez no lo entiendo correctamente. Cualquier ayuda sería apreciada. ¡Gracias!

Editar: pensé que sería útil mencionar que mi objeto se mueve por la pantalla y se moverá mientras se mueve. También estoy usando la escala para hacer el "volteo".

@ mparker11 Girar alrededor de un punto y voltear (a través de scale ) es diferente. pivot afectará el valor en rotation , no estoy seguro de si puede afectar correctamente la forma en que un contenedor se voltea con la escala ...

Pensamientos @GoodBoyDigital?

@englercj Gracias por la respuesta. Leí un artículo sobre el uso de la multiplicación de matrices para lograrlo, que veo que @GoodBoyDigital usó en su función PIXI.DisplayObject.prototype.updateTransform , pero por mi vida no puedo entender cómo cambiarlo para que escale de el centro, si es que necesito cambiarlo.

Hmmm ... Definitivamente no entiendo cómo usar el pivote.

Establezco la posición de un objeto en una posición determinada. Luego me gustaría hacer que rote en su centro, así que configuro el pivote en el centro de mi sprite (sprite.width / 2, sprite.height / 2). Esto resulta en mover mi sprite y tener la rotación en 0,0.

¿Eh? ¿Me he perdido algo?

@tleunen Creo que necesitas usar anchor ya que estás usando Sprites.

¿Se solucionará este comportamiento en la v4?

Decidí probar Pixi e inmediatamente encontré este "error".
Después de unas horas buscando en Google, todavía no entiendo cómo se supone que funciona.
La mayoría de la gente en los foros simplemente dice "el comportamiento de pivote no funciona". No es muy útil.

Tampoco lo es tu comentario, me temo. Esta es la forma en que pixi trata con el pivote.
Si este 'error' es demasiado para ser descubierto, proporcione un anuncio o trote.

El jueves 10 de marzo de 2016, Ivan Kleshnin [email protected] escribió:

_¿Se solucionará este comportamiento en la v4? _

Decidí probar Pixi e inmediatamente encontré este "error".
Después de unas horas buscando en Google, todavía no entiendo cómo se supone que esto
trabajo.
La mayoría de la gente en los foros simplemente dice "el comportamiento de pivote no funciona". No muy
servicial.

-
Responda a este correo electrónico directamente o véalo en GitHub
https://github.com/pixijs/pixi.js/issues/190#issuecomment -194833811.

Mat Groves

_Socio técnico_

Teléfono: 07708 114496 :: www.goodboydigital.com
Primer piso, unidad 9B, Queens Yard, White Post Lane, Londres, E9 5EN
goodboy ©. Todos los derechos reservados.

Tampoco lo es tu comentario me temo

Por favor, no tome "No muy útil" personalmente.
Estaba destinado a describir mi estado emocional, no a ofender.

Si este 'error' es demasiado para ser descubierto, proporcione un anuncio o trote.

No sé si es un error o no porque soy un novato en esta industria.
Es por eso que puse una palabra "error" arriba entre comillas. Algunas personas lo consideran. Algunos, no lo es.
Acabo de compartir mi experiencia y pregunté sobre el cambio en v4. Tenía muchas ganas de aprender Pixi, pero este me derribó.

El problema principal: después de leer> 10 problemas relacionados (aquí y en Internet) todavía no entiendo cómo solucionar este comportamiento y forzar a un contenedor a girar alrededor de su centro en un punto definido del espacio.
Y no soy tan estúpido en especial.

¡Hola!

No te preocupes, lo siento si fui un poco bajo, ¡me pillaste al final de un largo día!

Pivot está destinado a comportarse como un punto de ancla no normalizado.

La forma más fácil de arreglarlo es agregar el objeto a un contenedor y rotar el contenedor, mientras se mueve el objeto internamente.

¡Espero que ayude!

No hay problema. Gracias. Intentaré seguir tu consejo.

En mi opinión, la forma más fácil de rotar un gráfico (o un contenedor) alrededor de su punto central es guardar las coordenadas del punto central, donde se dibujó un gráfico. Luego, establezca la posición y el pivote del gráfico en el punto central.
Aquí hay un ejemplo:

Si, por ejemplo, crea un objeto gráfico, puede comenzar a dibujar primitivas en él.
var test = new PIXI.Graphics(); test.drawRoundedRect(100, 100, 200, 200,12);
La primitiva siempre se dibuja en relación con la posición del objeto Graphics (que es 0 por defecto).
Por lo tanto, necesitamos establecer la nueva posición del objeto gráfico en 200, porque es el punto central actual de nuestra primitiva.
test.position.x = 200; test.position.y = 200;
Ahora podemos ver que la primitiva acaba de ser cambiada, por lo tanto, necesitamos establecer el pivote en la misma coordenada y permanecerá en la misma posición, donde lo habíamos dibujado.
test.pivot.x = 200; test.pivot.y = 200;

La propiedad pivote no tiene errores, es un poco confuso entender cómo funciona y por qué "afecta la posición del objeto". El objeto siempre está girando alrededor de su propia posición y el pivote nos ayuda a establecer un nuevo punto desde donde gira.

¡Hola chicos! ¿Puedo usar el pivote con ángulos? Estoy tratando de modificar el ángulo de un sprite (usando el pivote para modificar la posición de rotación) para seguir al mouse, pero no puedo, ¿pueden ayudarme, por favor?

Verifique mi ejemplo de codepen => http://codepen.io/jdnichollsc/pen/KgdRvV?editors=0010
Y el error => http://screencast.com/t/hSSaaTO4j0

Gracias de antemano, Nicholls

¡Hecho! ¡Solo usando pivot.y o pivot.x jajaja! ¡Gracias por todo el equipo de Pixi! : +1:

En mi opinión, la forma más fácil de rotar un gráfico (o un contenedor) alrededor de su punto central es guardar las coordenadas del punto central, donde se dibujó un gráfico. Luego, establezca la posición y el pivote del gráfico en el punto central.
Aquí hay un ejemplo:

Si, por ejemplo, crea un objeto gráfico, puede comenzar a dibujar primitivas en él.
var test = new PIXI.Graphics(); test.drawRoundedRect(100, 100, 200, 200,12);
La primitiva siempre se dibuja en relación con la posición del objeto Graphics (que es 0 por defecto).
Por lo tanto, necesitamos establecer la nueva posición del objeto gráfico en 200, porque es el punto central actual de nuestra primitiva.
test.position.x = 200; test.position.y = 200;
Ahora podemos ver que la primitiva acaba de ser cambiada, por lo tanto, necesitamos establecer el pivote en la misma coordenada y permanecerá en la misma posición, donde lo habíamos dibujado.
test.pivot.x = 200; test.pivot.y = 200;

La propiedad pivote no tiene errores, es un poco confuso entender cómo funciona y por qué "afecta la posición del objeto". El objeto siempre está girando alrededor de su propia posición y el pivote nos ayuda a establecer un nuevo punto desde donde gira.

Oye amigo, creo que fue un truco, porque tiene un efecto secundario: la posición ha sido cambiada.

Este hilo se ha bloqueado automáticamente ya que no ha habido ninguna actividad reciente después de que se cerró. Abra un nuevo problema para errores relacionados.