Pixi.js: Animaciones de hojas de sprites tambaleantes en iOS

Creado en 16 feb. 2017  ·  29Comentarios  ·  Fuente: pixijs/pixi.js

Ejemplo: http://moonrat.co.uk/html5/pixi-ios-animation-bug/

Lo que ves son 3 tamaños de una animación, x0.5 en la parte superior, luego x0.75 en el medio y x1 en la parte inferior. En el lado izquierdo se toma la ruta de renderizado regular, en el lado derecho las tres animaciones usan imagen pixi.

Ahora, _solo veo este problema en dispositivos iOS en modo WebGL_. Cualquier otro navegador, incluso Safari en una Mac, funciona absolutamente bien. iOS en modo lienzo, absolutamente bien. Pero los dispositivos iOS (iPads y iPhones) que usan WebGL... se tambalean

@ivanpopelyshev sugirió probar pixi-picture, para una representación más precisa, y ayuda en la mayoría de los dispositivos, pero no en todos, y muy rara vez elimina el problema

Aquí hay una lista de cómo se ven todos los dispositivos iOS que tengo en el ejemplo anterior

iPad Mini 2: 10.0.2 - pixi tiembla, pixi-imagen no
iPad 4: 8.4 - pixi tiembla, pixi-picture sí, pero menos
iPad Air: 10.2 - pixi tiembla, pixi-imagen no
iPad Air: 10.3 - pixi tiembla, pixi-imagen no
iPad Air2: 8.3 - pixi tiembla, pixi-picture sí, pero menos

iphone 4s: 9.1 - pixi tiembla, pixi-picture sí, pero menos
iphone 4s: 9.2.1 - pixi tiembla, pixi-picture sí, pero menos
iphone 5: 9.1 - pixi tiembla, pixi-picture también
iphone 5: 10.1 - pixi tiembla, pixi-picture también
iphone 5s: 10.0.2 - pixi tiembla, pixi-imagen no
iphone 6: 8.2 - pixi tiembla, pixi-picture sí, pero menos
iphone 6: 10.0.2 - pixi tiembla, pixi-picture sí, pero menos
iphone 6+: 8.4 - pixi tiembla, pixi-picture sí, pero menos
iphone 6+: 9.2.1 - pixi tiembla, pixi-picture sí, pero menos
iphone se: 10.2 - pixi tiembla, pixi-imagen no
iphone 7: 10.2 - pixi tiembla, pixi-picture sí, pero menos

¿Algunas ideas?

💾 v4.x (Legacy)

Comentario más útil

Si el problema es simplemente que los sprites se tambalean en IOS, entonces sí, haga un "si ios entonces configure el fragmento de precisión en alto".
Si no es iOS, es posible que se requiera el complemento de imagen. Pero no fue solo para mis problemas de ios :)

Todos 29 comentarios

Información adicional; este bamboleo NO ocurre en el último pixi v3: http://moonrat.co.uk/html5/pixi-ios-animation-bug-v3/

v3 es mejor? Es interesante

Tengo el mismo problema de "tambaleo" en iOS solo cuando giro algunas formas (sucede cuando su ángulo se mueve alrededor de 0). No puedo volver a v3...

¿La única diferencia que creo que podría ser es que estamos almacenando datos de vértices en matrices float32 en v4? ¿Quizás un problema de precisión?

@GoodBoyDigital Lo probé hoy, @themoonrat dijo que es lo mismo.

genial, ¿tal vez la precisión del sombreador?

¿Vale la pena probar con roundPixels configurado en falso para ver si eso lo detiene?

El viernes, 17 de febrero de 2017 a las 16:13 Mat Groves [email protected] escribió:

genial, ¿tal vez la precisión del sombreador?


Estás recibiendo esto porque estás suscrito a este hilo.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/pixijs/pixi.js/issues/3742#issuecomment-280692953 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AAipZJ8DLKkA3bRJQIOYcmTDpXZgfTehks5rdccygaJpZM4MDJtw
.

roundPixels es falso por defecto, ya lo verifiqué.

¡Espera, espera, eso me recordó!

@ivanpopelyshev : sabes cómo me pediste que cambiara la precisión del sombreador predeterminado a alta y no cambió nada. Bueno, acabo de probar eso en la nueva versión que me diste esta mañana, ¡y _sí_ lo soluciona!

Ok, esto es extraño.
Entonces.
Incluso la rama de desarrollo actual, con highp para PRECISION funciona. Sin embargo....

PIXI.settings.PRECISION = 'highp'
no funciona
Si va directamente a pixi.js y edita
PRECISION: 'mediump',
para
PRECISION: 'highp',
Entonces funciona.

Entonces, ¿alta precisión + valores dobles? Parece que la conversión double->float->highp es mala para iphone/ipad. Creo que es porque no redondea, sino que en realidad trunca mucho las cosas.

Así que parece que este es un problema de configuración que no se detecta en lugar de cualquier otra cosa

buena captura @themoonrat

k, tengo una solución; se debe al estilo de importar una configuración. Hace que sea estático para importar el tiempo, en lugar de dinámico a lo que es actualmente. Levantando un PR pronto

También deberíamos usar Float64Array en Sprrite en lugar de Float32Array, eso reducirá un poco el error.

EDITAR: no lo hará, pero con algunas otras medidas puede :)

@ivanpopelyshev Creo que estamos bien como están: los subimos como float32, así que no tiene sentido sostenerlos con doble precisión.

Lamentablemente, sigo experimentando tambaleos en un iPad Mini3 con pixi4.4.1.
Estoy configurando manualmente PIXI.settings.PRECISION = 'highp', ¿hay algo más que deba hacer?

¿Ves una advertencia de obsolescencia en la consola? En caso afirmativo, entonces realmente está usando 4.4.1.

¿Cuál es tu caso de uso? ¿Solo unos pocos sprites en un escenario?

Sí, veo la advertencia de desactivación Utilice PIXI.settings.PRECISION_FRAGMENT.
Mi prueba solo tiene 1 AnimatedSprite jugando a 24 fps (velocidad 0.4).
La animación se creó con TexturePacker y las dimensiones de la textura base son POT (2048x2048)
En 4.4.1 se tambalea menos que antes, pero sigue siendo un jitter notable.

¿Y si usas el renderizador pixi-picture para ello? Simplemente agregue este: https://github.com/pixijs/pixi-picture/tree/master/bin y escriba

sprite.pluginName = 'picture';

¡Genial! Usando pixi-picture se ve perfecto :)
Entonces, ¿este es un renderizador de sprites alternativo?
¿En qué casos debemos usarlo? (además de este caso obvio). ¿Se puede usar como un renderizador general (admite el procesamiento por lotes de múltiples texturas) o es más un propósito específico?

Entonces sé lo que está mal con el renderizador principal de sprites. La imagen de Pixi es algo estúpido que no se procesa por lotes en absoluto, pero reduce los artefactos de borde y admite modos de combinación de superposición/luz dura.

La principal diferencia es cómo se pasan las coordenadas UV. El renderizador principal de sprites usa Uint16, mientras que la imagen, como todos los demás complementos, usa Float.

Para tu información:
PIXI.settings.PRECISION_FRAGMENT = 'highp';
resuelve las animaciones ios tambaleantes para mí sin ningún complemento

pd - @ivanpopelyshev , hiciste PRECISION_VERTEX 'highp' de manera predeterminada para resolver esto, pero ¿quizás elegiste el incorrecto? ¿Algún inconveniente para que mi juego vuelva a degradarse a 'medio'?
pps: ¿deberíamos hacer que cualquier configuración 'alta' se rebaje a 'mediana' si el modo heredado está habilitado?

Tengo el mismo problema y uso pixi v4.6.2. Es un error muy crítico para mí. @ivanpopelyshev , ¿Alguien ha resuelto este problema?

PIXI.settings.PRECISION_FRAGMENT = 'alto'
antes de crear el renderizador

Recuerde que algunos dispositivos no lo admiten, y es mejor habilitar highp solo en dispositivos particulares en los que existe tambaleo.

Además, use el complemento pixi-picture y sprite.pluginName='picture' si desea solucionar el problema para una pequeña cantidad de objetos.

Si el problema es simplemente que los sprites se tambalean en IOS, entonces sí, haga un "si ios entonces configure el fragmento de precisión en alto".
Si no es iOS, es posible que se requiera el complemento de imagen. Pero no fue solo para mis problemas de ios :)

@ivanpopelyshev , @themoonrat gracias, funciona.

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 los errores relacionados.

¿Fue útil esta página
0 / 5 - 0 calificaciones