Meça a caixa CSS antes de definir pixels
Leia as dimensões da tela exibidas, multiplique pela escala do dispositivo escolhido, defina a largura e a altura do suporte e transforme as coordenadas do desenho para que a lógica do jogo possa continuar usando unidades de espaço CSS. Aplique novamente a transformação após alterar a largura ou a altura, pois a atribuição desses atributos de tela redefine seu estado de desenho.
Compare uma grade de um pixel, bordas diagonais e texto pequeno da interface do usuário em fatores de escala como 1, 1,5 e 2. Verifique a nitidez e a capacidade de resposta. Um multiplicador devicePixelRatio completo é um ponto de partida, não uma regra que todo jogo deve seguir; reduzir a escala de renderização pode reduzir custos em exibições densas, deixando o layout CSS inalterado.
Trate o redimensionamento e a memória como parte da escolha
A contagem de pixels do armazenamento de apoio aumenta com ambas as dimensões, portanto, duplicar a escala em cada direção cria quatro vezes mais pixels. Teste uma cena movimentada no maior tamanho de exibição suportado e procure por pressão de memória ou redesenhos mais lentos antes de enviar uma configuração de alta densidade.
A orientação da tela do MDN mostra uma configuração baseada em devicePixelRatio. A página de práticas recomendadas do WebGL destaca sutilezas com proporções não inteiras e zoom. Verifique novamente após aplicar zoom no navegador ou mover uma janela entre exibições e evite redefinir repetidamente o armazenamento de apoio se suas dimensões efetivas não tiverem sido alteradas.
Perguntas sobre proporção de pixels do dispositivo no Canvas
A largura da tela deve ser sempre igual à largura do CSS vezes devicePixelRatio?
Não. Isso pode aprimorar o conteúdo, mas multiplica o trabalho e a memória. Compare uma versão em resolução total com uma escala limitada usando a mesma cena e verificações visuais.
Por que o desenho fica borrado após o redimensionamento?
Alterar a largura ou altura da tela limpa seu bitmap e redefine o estado do contexto. Recalcule suas dimensões de apoio, dimensione o contexto novamente e redesenhe a cena.
Leitura complementar
Viu alguma informação desatualizada? Informar uma correção