Escalado de imagen y texto

Por danhett , 30 de septiembre de 2016en Phaser 2

danhett 4
Al corriente 30 de septiembre de 2016

Hola.

Actualmente estoy terminando un proyecto de libro interactivo creado en Phaser, dirigido

a navegadores de escritorio y dispositivos móviles. Intento que se vea lo mejor posible en
dispositivos móviles, y no estoy seguro de cuál sea el mejor enfoque.

La forma en que funciona es que tengo un único sprite grande de la página del libro
"extendido", que luego contiene elementos secundarios para la animación, así como
también las etiquetas de texto como hijos de este objeto. Luego puedo escalar todo
arriba y abajo en la ventana, lo que me permite mantener el 'libro' centralizado en la
página y presentarlo lo más grande posible:

En el escritorio esto funciona genial. Sin embargo, en el móvil, la escala funciona (como
en, todo es del tamaño correcto y en el lugar correcto), pero mis mapas de bits y texto
escalan realmente mal.

Intenté configurar cosas como game.stage.smoothed = true , globalmente y en objetos

específicos, y esto no parece afectar nada. En un impulso, los gráficos parecen
pasables, pero el texto es un problema real. Estoy usando Google webfonts, que están
perfectamente bien en el escritorio pero extremadamente pixelados en los móviles. Este
es un ejemplo extremo, pero incluso si configuro el texto como enorme, sigue siendo mal:
¿Hay algún enfoque particular que deba tomarse al incluir contenido como este en los
navegadores móviles? Parece que no puedo obtener nada que se vea nítido. Supongo
que esto es el resultado del hecho de que estoy haciendo una escala global dura en
todo, y que los objetos son grandes y se están reduciendo los dispositivos (actualmente
no estoy sirviendo activos divididos de baja / alta resolución o cualquier cosa) pero si hay
alguna ruta que pueda tomar para mitigar la distorsión sería realmente útil.

Cualquier y todos los comentarios apreciados. ¡Gracias!

lumoludo 22
Al corriente 30 de septiembre de 2016

Si está utilizando webfonts para escribir su texto, no estoy seguro de por qué tendría
tanta pixellación.

Esto es solo una toma en la oscuridad, pero ¿estás usando el mismo tamaño de punto
para la fuente independientemente de la resolución y luego usando la propiedad de
escala o poniéndolo en un grupo que escalas? Si ese es el caso, yo diría que trate de no
escalar el texto, sino que simplemente use un tamaño de fuente apropiado en función de
la resolución del dispositivo. No he experimentado problemas como este, pero me
imagino que posiblemente cause un problema.

megmut 43
Al corriente 1 de octubre de 2016

Cuando uso texto de mapa de bits, generalmente tomo uno de dos enfoques.

A: dos fuentes de mapa de bits, tamaño regular y 2x. En el estado de precarga,

simplemente haga una comprobación de la altura y el ancho internos y decida cargar allí
la fuente estándar o retina.
B: crea dinámicamente el tamaño de letra basado en la escala del juego / ventana como
tal. Tenga en cuenta que es posible que tenga que aumentar manualmente el tamaño de
escala para contrarrestar el aumento del tamaño de fuente en la pantalla retina

let font = 16 * window.devicePixelRatio + 'px' + 'myFont';

this._textObject = new PIXI.extras.BitmapText('hello world, {font:
font});

danhett 4
Al corriente 2 de octubre de 2016

Eso es algo que intenté en realidad: si creo en la fuente de mapa de bits teniendo en
cuenta el dispositivo PixelRatio, sin escalar, lo crea muy bien. Sin embargo, cuando
vuelve a reducirse, vuelve a estar pixelado.

Me pregunto si parte de esto es solo que estoy escalando por una cantidad tan grande
tal vez.

danhett 4
Al corriente 2 de octubre de 2016

Hmm. Entonces, además de este irritante problema de escalado, el texto parece ser el
cuello de botella de mayor rendimiento. Estoy tentado de arrancarlo todo de todos modos
y utilizar mapas de bits del texto: nada es dinámico, esto es solo texto de libro de cuentos
que se encuentra en una página y no es probable que cambie.

Me encantaría resolver esto para futuras referencias de todos modos, si lo resuelvo lo

publicaré de nuevo ...

danhett 4
Al corriente 2 de octubre de 2016

Pensando en ello ... el problema de escala aquí es más grande que el texto mismo: en mi
dispositivo aquí (un Galaxy S6) incluso los mapas de bits se ven muy pixelados, incluso
con el suavizado habilitado. Este es un dispositivo de bastante alta resolución y tiene
píxeles más que suficientes para tirar (para comparar los objetos dom están bien, etc.).

Como caso de prueba adicional, aquí también tengo un iPad mini sin retina, y las fuentes
se ven absolutamente bien.

Parece completamente al revés que todo se ve tan mal en la pantalla de mayor

resolución que he probado.

¿Alguien se encuentra con esto antes?

 danhett 4
Al corriente 25 de octubre de 2016

hey dudes - disculpas por el bache, pero todavía estoy luchando con este.

¿Alguien ha encontrado algo similar antes? mi proyecto está terminado aparte de este
irritante problema de escalamiento!

saibotlive 10
Al corriente 7 de diciembre de 2016

Citar

El 10/2/2016 a las 10:17 a.m., Danhett dijo:

Pensando en ello ... el problema de escala aquí es más grande que el texto mismo:
en mi dispositivo aquí (un Galaxy S6) incluso los mapas de bits se ven muy
pixelados, incluso con el suavizado habilitado. Este es un dispositivo de bastante
alta resolución y tiene píxeles más que suficientes para tirar (para comparar los
objetos dom están bien, etc.).

Como caso de prueba adicional, aquí también tengo un iPad mini sin retina, y las
fuentes se ven absolutamente bien.

Parece completamente al revés que todo se ve tan mal en la pantalla de mayor

resolución que he probado.

¿Alguien se encuentra con esto antes?

Estoy teniendo este problema ahora, con el texto de mapa de bits muy pixelado

danhett 4
Al corriente 14 de diciembre de 2016

Solo para informar, esto se resolvió de acuerdo con el siguiente fragmento: 'obra de arte'
en este contexto es el titular del juego que escala hacia arriba y hacia abajo. El resultado
final es una escala perfecta en todas partes.
var ratio = artwork.scale.x * artwork.parent.scale.x;
var style = { font: 24 * ratio + "px Varela Round", fill: fill, align:
"center" };
var text = game.add.text(xPos, yPos, copy, style);
text.smoothed = true;
text.scale.x /= ratio;
text.scale.y /= ratio;