Pixi.js: Animações de spritesheet balançando no iOS

Criado em 16 fev. 2017  ·  29Comentários  ·  Fonte: pixijs/pixi.js

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

O que você vê são 3 tamanhos de uma animação, x0,5 na parte superior, depois x0,75 no meio e x1 na parte inferior. No lado esquerdo o caminho de renderização regular é feito, no lado direito as três animações usam pixi-picture.

Agora, eu _somente vejo esse problema em dispositivos iOS no modo WebGL_. Qualquer outro navegador, mesmo o Safari em um Mac, funciona perfeitamente. iOS no modo de tela, absolutamente bem. Mas dispositivos iOS (iPads e iPhones) usando WebGL... oscilam

@ivanpopelyshev sugeriu dar uma chance ao pixi-picture, para uma renderização mais precisa, e ajuda na maioria dos dispositivos, mas não em todos, e raramente elimina o problema

Aqui está uma lista de como todos os dispositivos iOS que eu tenho no exemplo acima

iPad Mini 2: 10.0.2 - pixi treme, pixi-picture não
iPad 4: 8.4 - pixi treme, pixi-picture faz, mas menos
iPad Air: 10.2 - pixi treme, pixi-picture não
iPad Air: 10.3 - pixi treme, pixi-picture não
iPad Air2: 8.3 - pixi treme, pixi-picture faz, mas menos

iphone 4s: 9.1 - pixi treme, pixi-picture faz, mas menos
iphone 4s: 9.2.1 - pixi treme, pixi-picture faz, mas menos
iphone 5: 9.1 - pixi treme, pixi-picture também
iphone 5: 10.1 - pixi treme, pixi-picture também
iphone 5s: 10.0.2 - pixi treme, pixi-picture não
iphone 6: 8.2 - pixi treme, pixi-picture faz, mas menos
iphone 6: 10.0.2 - pixi treme, pixi-picture faz, mas menos
iphone 6+: 8.4 - pixi treme, pixi-picture faz, mas menos
iphone 6+: 9.2.1 - pixi treme, pixi-picture faz, mas menos
iphone se: 10.2 - pixi treme, pixi-picture não
iphone 7: 10.2 - pixi treme, pixi-picture faz, mas menos

Alguma ideia?

💾 v4.x (Legacy)

Comentários muito úteis

Se o problema for apenas sprites oscilando no IOS, então sim, faça um "se ios, defina o fragmento de precisão para alto".
Se não for ios, o plugin de imagem pode ser necessário. Mas não foi apenas pelos meus problemas do ios :)

Todos 29 comentários

Informação adicional; esta oscilação NÃO ocorre no último pixi v3: http://moonrat.co.uk/html5/pixi-ios-animation-bug-v3/

v3 é melhor? É interessante

Eu tenho o mesmo problema de "oscilação" no iOS apenas ao girar algumas formas (isso acontece quando o ângulo está se movendo em torno de 0). Não é possível voltar para a v3…

única diferença que eu acho que poderia ser é que estamos armazenando dados de vértice em arrays float32 na v4? Talvez um problema de precisão?

@GoodBoyDigital Eu testei hoje, @themoonrat disse que é o mesmo.

legal - talvez precisão de shader?

Vale a pena testar com roundPixels definido como false para ver se isso o impede?

Em sex, 17 de fevereiro de 2017 às 16:13 Mat Groves [email protected] escreveu:

legal - talvez precisão de shader?


Você está recebendo isso porque está inscrito neste tópico.
Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/pixijs/pixi.js/issues/3742#issuecomment-280692953 ,
ou silenciar o thread
https://github.com/notifications/unsubscribe-auth/AAipZJ8DLKkA3bRJQIOYcmTDpXZgfTehks5rdccygaJpZM4MDJtw
.

roundPixels é falso por padrão, eu já verifiquei.

Espere, espere, isso me lembrou!

@ivanpopelyshev - você sabe como me pediu para alterar a precisão do shader padrão para highp e isso não mudou nada. Bem, eu apenas tentei isso em sua nova versão que você me deu esta manhã, e _conserta_!

Ok, isso é estranho.
Assim.
Mesmo o atual, dev branch, com highp para PRECISION funciona. No entanto....

PIXI.settings.PRECISION = 'highp'
Não funciona
Se você for diretamente para pixi.js e editar
PRECISION: 'mediump',
para
PRECISION: 'highp',
Então funciona.

então, alta precisão + valores duplos? Parece que a conversão double->float->highp é ruim para iphone/ipad. Acho que é porque não arredonda, mas na verdade trunca muito as coisas.

Então parece que isso é um problema de configurações que não estão sendo coletadas e não qualquer outra coisa

bela captura @themoonrat

k, eu tenho uma correção; é devido ao estilo de importação de uma configuração. Torna estático para importar o tempo, em vez de dinâmico para o que é atualmente. Criando um PR em breve

Também devemos usar Float64Array em Sprrite em vez de Float32Array, isso reduzirá um pouco o erro.

EDIT: não vai, mas com algumas outras medidas pode :)

@ivanpopelyshev acho que estamos bem como estão - nós os carregamos como float32, então não faz sentido segurá-los com precisão dupla.

Infelizmente ainda estou experimentando oscilações em um iPad Mini3 com pixi4.4.1.
Estou configurando manualmente PIXI.settings.PRECISION = 'highp', algo mais que devo fazer?

Você vê o aviso de depreciação no console? Se sim, então você está realmente usando 4.4.1.

Qual é o seu caso de uso? Apenas alguns sprites em um palco?

Sim, estou vendo o aviso de suspensão de uso do PIXI.settings.PRECISION_FRAGMENT.
Meu teste tem apenas 1 AnimatedSprite jogando a 24fps (velocidade 0,4).
A animação foi criada com TexturePacker e as dimensões da textura base são POT (2048x2048)
Em 4.4.1 ele oscila menos do que antes, mas ainda é um tremor perceptível.

E se você usar o renderizador pixi-picture para isso? Basta adicionar este: https://github.com/pixijs/pixi-picture/tree/master/bin e escrever

sprite.pluginName = 'picture';

Excelente! Usando pixi-picture fica perfeito :)
Então este é um renderizador alternativo de sprite?
Em quais casos devemos usá-lo? (além deste caso óbvio). Ele pode ser usado como um renderizador geral (suporta lotes de várias texturas) ou é mais uma coisa de propósito específico?

Então eu sei o que há de errado com o renderizador principal do sprite. A imagem do Pixi é uma coisa estúpida que não é em lote, mas reduz os artefatos de borda e suporta modos de mesclagem de sobreposição/hardlight.

A principal diferença é como as coordenadas UV são passadas. O renderizador principal do sprite usa o Uint16, enquanto o picture, como todos os outros plugins, usa o Float.

PARA SUA INFORMAÇÃO:
PIXI.settings.PRECISION_FRAGMENT = 'highp';
resolve as animações wobbly do ios para mim sem nenhum plugin

ps - @ivanpopelyshev , você fez PRECISION_VERTEX 'highp' por padrão para resolver isso, mas talvez você tenha escolhido o errado? Alguma desvantagem para o meu jogo fazer o downgrade de volta para 'mediump'?
pps - devemos fazer com que qualquer configuração 'highp' seja rebaixada para 'mediump' se o modo legado estiver ativado?

Eu tenho o mesmo problema e eu uso pixi v4.6.2. É um bug muito crítico para mim. @ivanpopelyshev , Alguém resolveu esse problema?

PIXI.settings.PRECISION_FRAGMENT = 'highp'
antes de criar o renderizador

Lembre-se de que alguns dispositivos não o suportam e é melhor habilitar o highp apenas em dispositivos específicos que existam oscilações.

Além disso, use o plugin pixi-picture e sprite.pluginName='picture' se você quiser corrigir o problema para um pequeno número de objetos.

Se o problema for apenas sprites oscilando no IOS, então sim, faça um "se ios, defina o fragmento de precisão para alto".
Se não for ios, o plugin de imagem pode ser necessário. Mas não foi apenas pelos meus problemas do ios :)

@ivanpopelyshev , @themoonrat obrigado, funciona.

Este tópico foi bloqueado automaticamente, pois não houve nenhuma atividade recente depois que ele foi fechado. Por favor, abra um novo problema para bugs relacionados.

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

softshape picture softshape  ·  3Comentários

Darker picture Darker  ·  3Comentários

neciszhang picture neciszhang  ·  3Comentários

gigamesh picture gigamesh  ·  3Comentários

st3v0 picture st3v0  ·  3Comentários