Pixi.js: Suporte retina

Eu concordo com esse bug. Como referência, é assim que isso pode ser normalmente tratado: http://www.html5rocks.com/en/tutorials/canvas/hidpi/

Este também é um problema com o texto.

Digamos que você tenha uma tela retina com devicePixelRatio de 2 e deseja obter uma tela nítida de 400x300. Para conseguir isso, você precisa inicializar o renderizador PIXI com as dimensões de tela desejadas multiplicadas por devicePixelRatio (800x600) e, em seguida, dimensionar manualmente a tela para 400x300 usando css. E então, é claro, você terá que incorporar essa escala em todos os seus cálculos: posições, tamanhos de fonte, larguras de linha, recursos carregados, etc.

Estou usando algo assim:

var canvas = document.getElementById('game'),
    scale = window.devicePixelRatio,
    width = 400,
    height = 300,
    renderer = PIXI.autoDetectRenderer(width * scale, height * scale, canvas);
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';

+1

Algum plano para resolver isso em breve? Ter que dimensionar cada tamanho, posição, tamanho de fonte é realmente doloroso. Especialmente quando há uma maneira bastante simples de fazer isso com a tela padrão.

É difícil fazer esse tamanho de biblioteca, porque depende se seus sprites são hidpi ou não. Nós o mantivemos no userland porque não sabemos quais sprites seus escalar para hidpi, se houver, e quando; mas você faz.

Ei @englercj . Por sprites, você quer dizer ativos carregados pelo usuário?

@dcascais yes

@englercj Obrigado pela sua resposta.

Atualmente, se a visualização do renderizador for dimensionada com o truque CSS (descrito em meu link anterior) para obter a resolução de exibição adequada, tudo o que for adicionado ao palco e renderizado com a visualização do renderizador dimensionado não será dimensionado de acordo, ele manterá seu pixel valores, então basicamente metade do tamanho.

Isso inclui o conteúdo sendo renderizado dinamicamente no contexto gráfico, texto e recursos carregados.

Outras plataformas assumem que é responsabilidade do usuário fornecer os ativos adequados para as diferentes densidades de tela, mas os internos funcionam perfeitamente com uma propriedade de fator de escala que permite que você decida facilmente qual densidade de exibição deseja atingir. Eu me pergunto se essa seria uma abordagem mais simples para os usuários Pixi. Permitindo que eles se preocupem apenas com os ativos adequados e certificando-se de que o fator de escala esteja definido corretamente.

Você tem alguma sugestão de como atingir o dimensionamento esperado do conteúdo adicionado ao palco?

Escalar manualmente os valores de x, y, largura e altura de cada item na lista de exibição e, no caso de texto, definir diferentes strings que têm nomes de fontes com o tamanho adequado pode ser muito complicado e sujeito a erros se você estiver lidando com um grande projeto.

Obrigado.

Interessante, gostaria de ver como alguns desses sistemas funcionam. No que diz respeito a dimensionar cada item individualmente, esse não parece ser o caminho a percorrer. Como este é um gráfico de cena, você não poderia simplesmente dimensionar seu DOC raiz de forma adequada?

@englercj , eu tentei isso em uma caixa de areia e, embora

@bmantuano Espero que seja escalado com o algoritmo que foi escolhido (mais próximo, linear, bicúbico, etc).

Chad, obrigado por responder aqui. Quanto ao algoritmo de escalonamento, você se refere ao PIXI.scaleModes? Nesse caso, parece que a opção bicúbica não está lá.

@englercj Aqui estão alguns JSFiddles que mostram o que estamos tentando fazer para obter texto e gráficos nítidos (desenhados dinamicamente, não ativos) em monitores de alta resolução.

Dimensionamento da tela e contêiner do objeto de exibição principal dimensionado (tamanho correto, mas borrado e com alguns problemas)
http://jsfiddle.net/hsv8Q

Dimensionamento da tela (mostra nítido, mas no tamanho errado e com alguns problemas)
http://jsfiddle.net/hsv8Q/1

Sem escala (tamanho correto, mas borrado)
http://jsfiddle.net/hsv8Q/2

Esperançosamente, isso ajudará você a entender o que queremos dizer. Informe-nos se houver algo mais que devemos tentar.

Obrigado @dcascais por adicionar esses violinos. @englercj , o primeiro é o que você estava sugerindo, certo? Você consegue ver a pixelização em um dispositivo de alto DPI lá?

@bmantuano Infelizmente não tenho um dispositivo HDPI para testar um :( Vou deixar este para @GoodBoyDigital ou @photonstorm olhar.

@englercj , obrigado por verificar isso até agora. Agradeço a ajuda. @arahlf e @ n1313 , você encontrou uma solução alternativa?

Não, ainda não :(

@bmantuano , ainda estou usando a abordagem descrita no meu comentário anterior e não tenho nenhum problema.

Houve algum movimento sobre isso? Eu usei o método de escalonamento mencionado por @ n1313, mas ele está destruindo o FPS em dispositivos retina.

Alguma ideia?

@arahlf e @ n1313 ,

@GoodBoyDigital , isso está no seu radar? Seria útil apenas para ter uma ideia se é algo que podemos esperar em uma atualização futura ou se precisamos modificar isso.

@GoodBoyDigital Só queria adicionar minha voz aqui. Estou trabalhando em um jogo Massively Multiplayer Online usando Pixi.js porque o identificamos como o mecanismo de renderização de melhor desempenho que existe, mas estamos realmente sofrendo com o suporte de exibição de retina!

Na verdade, estou na metade do caminho para adicionar suporte de retina :) Observe este espaço ..

Incrível: +1:

@GoodBoyDigital , isso é fantástico! Obrigado pela atualização. Ansioso por isso.

@GoodBoyDigital Isso é incrível! Muito obrigado por entrar em contato comigo tão rapidamente. Eu sei que geralmente é difícil dizer, mas você poderia me dar uma estimativa aproximada para quando você acha que o suporte de retina será feito para Pixi?

Não vou cobrar sua estimativa ou reclamar se não for feito nesse período - apenas curiosidade em geral por quanto tempo você acha que estaremos esperando!

Ei pessoal - acabei de enviar o novo branch "dev-retina" para o hub git. Seria ace se todos vocês pudessem jogar. Existem muitas partes móveis lá, então concluímos que seria bom testá-lo com alguns projetos reais antes de mesclá-lo com o branch dev.

O renderizador agora tem um parâmetro de opção. Uma das novas opções é a resolução. Portanto, para definir o renderizador para retina, você pode criar um renderizador como este:

PIXI.autodetectRenderer(100, 100, {resolution:2})

Tudo deve ter a mesma aparência .. mas a resolução será maior :)

BaseTextures também tem uma resolução agora. Se a imagem for de alta resolução, você precisará definir a resolução para 2. A maneira de definir a resolução para dois automaticamente no carregamento é anexar a imagem com @ 2x ao nome da imagem.

Portanto, se você carregar digamos: [email protected] , o pixi assumirá que tem uma resolução de 2.

Melhor ter um jogo de verdade! Mas, por favor, faça perguntas, pois isso provavelmente não é tão simples quanto parece :)

+1

Ei, Matt. Isso parece ótimo! Consegui fazer com que o Canvas renderizasse textos e recursos bonitos e nítidos. Tamanho e posição parecem ter sido manipulados corretamente, tanto quanto testei.

A única coisa que parece que estou tendo problemas são os procedimentos de desenho Pixi.Graphics. Não consigo fazer com que eles sejam renderizados com nitidez. O tamanho e a posição da renderização estão corretos, no entanto.

Objetos gráficos também deveriam ser retina? você está armazenando em cache como bitmap o
objeto gráfico por acaso? ou é direto PIXI.graphics?

Na terça-feira, 9 de setembro de 2014 às 17:32, dcascais [email protected] escreveu:

Ei, Matt. Isso parece ótimo! Consegui fazer o Canvas renderizar bem
e texto e recursos nítidos. Tamanho e posição parecem ser manuseados corretamente
tanto quanto eu testei.

A única coisa que parece que estou tendo problemas é o Pixi.Graphics
procedimentos de desenho. Não consigo fazer com que eles sejam renderizados com nitidez. o
o tamanho e a posição da renderização estão corretos.

-
Responda a este e-mail diretamente ou visualize-o no GitHub
https://github.com/GoodBoyDigital/pixi.js/issues/621#issuecomment -54997804
.

Mat Groves

_ Parceiro Técnico_

Telefone: 07708 114496 :: www.goodboydigital.com
Primeiro andar, Unidade 9B, Queens Yard, White Post Lane, Londres, E9 5EN
goodboy ©. Todos os direitos reservados.

@GoodBoyDigital Ao descrever o problema, perdi parte da configuração que possuo. A configuração que tenho é um PIXI.Sprite com uma textura baseada em um objeto PIXI.Graphics.

Criei um JSFiddle para ajudar a descrever o problema e a renderização resultante:
Este mostra a saída de gráficos borrados se o PIXI.Sprite obtiver uma textura baseada em um PIXI.Graphics:
http://jsfiddle.net/hsv8Q/13/

Esta configuração com uso direto de um PIXI.Graphics funciona bem:
http://jsfiddle.net/hsv8Q/7/

Peguei vocês! não se preocupe - eu sei exatamente o que está causando isso :)
Informarei assim que for ajustado. ta!

Olá @GoodBoyDigital , obrigado pelo suporte de retina! Também chega em um ótimo momento, pois precisamos dele para o nosso cliente :)

Um problema que notei no ramo da retina: a renderização é melhor, mas as áreas atingidas estão desalinhadas. A tela é dimensionada, mas as áreas atingidas não. Portanto, se eu quiser tocar em um botão no centro da tela, tenho que tocar no centro da parte superior esquerda da tela para realmente tocá-lo.

Nesta tela, se eu quiser acertar o botão do centro, tenho que acertar no círculo laranja (que acrescentei mais tarde como exemplo) para realmente acertá-lo. A hitarea não escala com o resto.

Sobre o parâmetro "resolução" na função autodetectRenderer; poderíamos apenas usar "window.devicePixelRatio" certo?

Encontrei uma solução alternativa rápida / suja para o problema que descrevi acima. O problema parece estar localizado nas funções onTouchStart, onTouchMove e onTouchEnd do InteractionManager. Ele pode ser corrigido alterando o cálculo de touchData.global.x e touchData.global.y nessas funções e dividindo-as por this.resolution.

Isso parece resolver o problema, mas pode haver uma solução muito melhor.

oi @GillesVermeulen
Eu ajustei o material da área de acerto em meu último commit. Tentando com a versão mais recente, por favor? ta!

Olá @GoodBoyDigital , obrigado pela resposta rápida e suporte, mas será que o commit de que você está falando ainda não está no Github?

@GillesVermeulen - o toque deve estar bom agora. Eu estava apenas aplicando a mudança de resolução aos eventos do mouse. Deixe-me saber se tudo está funcionando bem para você agora. obrigado!

Tarde @dcascais ! Acabei de enviar uma correção para o ramo de retina que permitirá que você defina a resolução da função generateTexture.

Portanto, para obter uma textura crocante de retina, tudo o que você pode fazer é:

var retinaTexture = myGraphicsObject.generateTexture(2)
var normalTexture = myGraphicsObject.generateTexture(1)
var smallTexture = myGraphicsObject.generateTexture(0.5)

deixe-me saber se isso funciona para você. Obrigado!

@GoodBoyDigital Nice! Isso agora funciona muito bem. Agradeço a atualização sobre isso.

Como uma pergunta geral. Você ou outras pessoas se depararam com outras coisas, como desempenho, memória ou problemas de travamento com base nesta atualização de alta resolução?

Obrigado, Mat.

Fico feliz em saber!

Gostaria que houvesse uma bala mágica para isso! Infelizmente, uma resolução mais alta realmente afetará o desempenho e o consumo de memória, pois basicamente tudo terá o dobro do tamanho. As imagens Retina ocupam 2x mais memória e o webGL / Canvas precisará renderizar uma cena com 2x mais pixels. Em dispositivos de baixa memória / CPU, isso pode ser um verdadeiro assassino, por isso é muito importante estar atento ao fazer qualquer coisa com alta resolução.

Não seriam 4x? Além disso, não é praticamente garantido que as pessoas com telas de retina também terão computadores rápidos?

@iirelu é verdade mesmo! 4x mais!
Sim, eu não imagino que haveria problemas em computadores com tela de retina, pois seriam de última geração.

Os problemas de memória seriam mais prováveis ​​de se manifestar em dispositivos móveis com telas de retina.

@GoodBoyDigital , obrigado pela atualização das funções de toque. Era o mesmo que minha correção temporária e parece funcionar.

Sobre o desempenho: desde recentemente venho testando coisas no CocoonJS no IOS7. O desempenho é definitivamente melhor comparado ao iOS Webview padrão que é usado por coisas como Phonegap, mas desenhar formas parece ser muito desgastante e as formas não são suavizadas como no Safari. Eu imagino que isso seja relacionado ao CocoonJS e tenha pouco a ver com Pixi.

Assim que você aplica um filtro a uma textura de retina (@ 2x), todo o posicionamento parece estar errado.

Obrigado pelo aviso @joaomoreno ! Certifique-se de dar uma olhada: +1:

Apenas uma pequena pergunta sobre a API que você apresenta: Não há um conflito entre PIXI.autodetectRenderer(width, height, optionObject) e PIXI.autodetectRenderer(width, height, view, antialias, transparent )?
Isso tornaria o argumento optionObject o sexto argumento da segunda assinatura, conforme descrito em src/pixi/utils/Detector.js ? Não tenho certeza de onde colocá-lo, já que o terceiro argumento já é um DOMElement, não é?

A próxima versão do pixi usará a nova assinatura de método, esta é uma alteração importante.

@englercj Muito obrigado pela sua resposta rápida. As opções descartadas ainda permanecerão acessíveis de alguma outra maneira, então?

O objeto de opções contém todas as opções anteriores e novas. A funcionalidade não está sendo removida, você apenas passa as opções de forma diferente:

https://github.com/GoodBoyDigital/pixi.js/blob/dev/src/pixi/utils/Detector.js#L14 -L19

Oh, útil! Muito obrigado por isso. : +1:

o suporte de retina está no branch dev agora. Avise-me se alguém encontrar algum problema: +1: encerrando por enquanto.

Estou tendo um problema com um retina macbook pro.

Não estou usando {resolution:2} .

A largura do palco retorna os pixels reais da retina. No meu caso, são 2540 pixels. As texturas são renderizadas com o dobro de seu tamanho e suas larguras também não são em pixels de retina 1: 1 reais. Portanto, uma imagem de 300 x 200 ocupa 600 x 400 pixels de retina, mas a largura retorna 300.

Este é o comportamento esperado?

@PierBover Sim, a altura / largura do objeto não mudou de fato. Ele é apenas renderizado em uma resolução diferente.

@englercj mas como é que existem dimensões em pixels reais e pixels duplicados misturados?

Ei pessoal, estou fazendo algo errado aqui. Se eu definir a resolução 2 do meu CanvasRenderer para uma tela de retina, minha tela terá o dobro do tamanho e as minhas @x2 imagens quatro vezes o tamanho.

    <strong i="7">@scale</strong> = window.devicePixelRatio
    width = 960/<strong i="8">@scale</strong>
    height = 556/<strong i="9">@scale</strong>

    renderer = new (PIXI.CanvasRenderer)(width, height,{resolution:@scale})
    container = document.getElementById 'container'
    container.appendChild renderer.view

StackOverflow Question
http://stackoverflow.com/questions/29142342/pixi-js-retina-display-canvas-is-doubled-in-size

Nesta edição e nesta postagem do blog http://www.goodboydigital.com/pixi-js-v2-fastest-2d-webgl-renderer/, as imagens de retina precisam de @ 2x ou @ x2 antes da extensão . Estou assumindo que o correto é @ 2x . Isso está correto?

@ 2x está correto. Pode ser o nome de uma pasta ou anexado ao nome da imagem.

assets/@2x/image.png or assets/[email protected]

@Adireddy obrigado. Isso é metade da batalha. Alguma ideia de por que minha tela é dimensionada em vez de aumentar a resolução?

O mesmo problema aqui para a retina, qualquer uso de resolução: 2, torna o posicionamento da âncora PIXI.Text errado. Redimensionar a tela em CSS não ajuda muito. Tive de definir a resolução para 1, dobrar o tamanho da fonte do meu texto e redimensioná-la para a metade.

E mesmo com isso o texto ainda não parece liso.

Olá Elyx0, você pode experimentar meu plugin de texto para celular disponível aqui: https://github.com/JiDW/pixi-cocoontext

Isso corrige seus problemas?

Olá @JiDW , finalmente

@GillesVermeulen

Estou pensando em oferecer suporte a dispositivos de alta DPI em meu projeto, então estou me perguntando:

A tela é dimensionada, mas as áreas atingidas não.

Isso foi resolvido no PixiJS? (por exemplo, em uma versão posterior / recente)

Ei @tobireif , acho que sim. Não tenho esse problema há muito tempo, mas isso é com Pixi v2. Também não acho que seja um problema com a versão mais recente.

@GillesVermeulen Parece bom! Obrigado!

Um método CSS que funcionou para mim usando canvas (sem pixi.js)
canvas { image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; }
Caso isso possa ajudar alguém.

Oi !

Estou tendo um problema com meu último projeto: http://romaincazier.com/davatars/

Não consigo obter a resolução de pixel certa nos meus objetos ... Não sei se é sobre o renderizador ou os gráficos a partir dos quais gerei as texturas, mas em ambos os casos adicionei a janela.devicePixelRatio, mas não parece para ter qualquer influência.

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