Pixi.js: Soporte de retina

Estoy de acuerdo con este error. Como referencia, así es como se puede manejar normalmente: http://www.html5rocks.com/en/tutorials/canvas/hidpi/

Esto también es un problema con el texto.

Supongamos que tiene una pantalla retina con devicePixelRatio de 2 y desea obtener un lienzo de 400x300 de aspecto nítido. Para conseguirlo, debe inicializar el renderizador PIXI con las dimensiones de lienzo deseadas multiplicadas por devicePixelRatio (800x600) y luego escalar manualmente el lienzo a 400x300 usando css. Y luego, por supuesto, tendrá que incorporar esta escala en todos sus cálculos: posiciones, tamaños de fuente, anchos de línea, activos cargados, etc.

Estoy usando algo como esto:

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

¿Algún plan para abordar esto pronto? Tener que escalar cada tamaño, posición y tamaño de fuente es realmente doloroso. Especialmente cuando hay una forma bastante sencilla de hacer esto con el lienzo estándar.

Es difícil hacer este tamaño de biblioteca, porque depende de si tus sprites son hidpi o no. Lo hemos mantenido en el área de usuario porque no sabemos qué sprites tuyos escalar para hidpi, si es que hay alguno, y cuándo; pero lo hace.

Hola @englercj . Por sprites, ¿te refieres a los activos cargados por el usuario?

@dcascais sí

@englercj Gracias por tu respuesta.

Actualmente, si la vista del renderizador se escala con el truco CSS (descrito en mi enlace anterior) para obtener la resolución de pantalla adecuada, todo lo que se agrega al escenario y luego se procesa con la vista del renderizador escalado no se escala en consecuencia, mantiene su píxel valores, básicamente la mitad del tamaño.

Esto incluye contenido que se representa dinámicamente en el contexto gráfico, texto y activos cargados.

Otras plataformas asumen que es responsabilidad del usuario proporcionar los activos adecuados para las diferentes densidades de pantalla, pero los componentes internos funcionan a la perfección con una propiedad de factor de escala que le permite decidir fácilmente a qué densidad de pantalla le gustaría apuntar. Me pregunto si este sería un enfoque más simple para los usuarios de Pixi. Dejándoles que solo se preocupen por los activos adecuados y asegurándose de que el factor de escala esté configurado correctamente.

¿Tiene alguna sugerencia sobre cómo lograr el escalado esperado del contenido agregado al escenario?

Escalar manualmente los valores x, y, ancho y alto de cada elemento en la lista de visualización y, en el caso del texto, definir diferentes cadenas que tienen nombres de fuente con el tamaño adecuado puede volverse muy engorroso y propenso a errores si se trata de un gran proyecto.

Gracias.

Interesante, me gustaría ver cómo funcionan algunos de esos sistemas. En cuanto a escalar cada elemento individualmente, ese no parece ser el camino a seguir. Dado que este es un gráfico de escena, ¿no podría simplemente escalar su DOC raíz de manera adecuada?

@englercj , había probado esto en una caja de arena y, aunque voló las cosas al tamaño adecuado, las dejó pixeladas. ¿Esperaría un comportamiento diferente?

@bmantuano Espero que se

Chad, gracias por responder aquí. En cuanto al algoritmo de escalado, ¿se refiere a PIXI.scaleModes? Si es así, parece que la opción bicúbica no está ahí.

@englercj Aquí hay algunos JSFiddles que muestran lo que estamos tratando de hacer para obtener texto y gráficos nítidos (dibujados dinámicamente, no activos) en pantallas de alta resolución.

Escala de lienzo y contenedor de objeto de visualización principal escalado (tamaño correcto pero borroso y con algunos problemas)
http://jsfiddle.net/hsv8Q

Escalado del lienzo (se muestra nítido pero de tamaño incorrecto y con algunos problemas)
http://jsfiddle.net/hsv8Q/1

Sin escala (tamaño correcto pero borroso)
http://jsfiddle.net/hsv8Q/2

Esperamos que esto le ayude a comprender lo que queremos decir. Háganos saber si hay algo más que deberíamos intentar.

Gracias @dcascais por agregar esos violines. @englercj , el primero es lo que estabas sugiriendo, ¿verdad? ¿Puede ver la pixelación en un dispositivo de alto DPI allí?

@bmantuano Desafortunadamente, no tengo un dispositivo HDPI para probar uno :( Voy a dejar este para que @GoodBoyDigital o @photonstorm lo mire.

@englercj , gracias por investigarlo hasta ahora. Agradezco la ayuda. @arahlf y @ n1313 , ¿ha encontrado una solución?

No aún no :(

@bmantuano , sigo usando el enfoque descrito en mi comentario anterior y no tengo ningún problema.

¿Ha habido algún movimiento al respecto? He usado el método de escala @ n1313 mencionado pero está destruyendo FPS en dispositivos retina.

¿Algunas ideas?

@arahlf y @ n1313 , gracias por las respuestas.

@GoodBoyDigital , ¿está esto en tu radar? Sería útil solo para tener una idea de si es algo que podemos esperar en una actualización futura o si necesitamos modificarlo.

@GoodBoyDigital Solo quería agregar mi voz aquí. Estoy trabajando en un juego de multijugador masivo en línea usando Pixi.js porque lo identificamos como el motor de renderizado con más rendimiento que existe, ¡pero estamos sufriendo mucho por la compatibilidad con la pantalla retina!

Da la casualidad de que estoy a la mitad de agregar soporte para retina :) Mira este espacio ..

Impresionante: +1:

@GoodBoyDigital , ¡eso es fantástico! Gracias por la actualización. Deseando que llegue.

@GoodBoyDigital ¡ Eso es increíble! Muchas gracias por responderme tan rápido. Sé que en general es difícil de decir, pero ¿podría darme una estimación aproximada de cuándo cree que se terminará el soporte de retina para Pixi?

No te limitaré a la estimación ni me quejaré si no se hace en ese período de tiempo, ¡solo curiosidad en general cuánto tiempo crees que estaremos esperando!

Hola chicos, acaban de subir la nueva rama "dev-retina" a git hub. Sería genial si todos pudieran jugar. Hay muchas partes móviles allí, así que pensé que sería bueno probarlo con algunos proyectos reales antes de fusionarlo en la rama de desarrollo.

El renderizador ahora tiene un parámetro de opción. Una de las nuevas opciones es la resolución. Entonces, para configurar el renderizador en retina, puede crear un renderizador como este:

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

Todo debería verse igual ... pero la resolución será mayor :)

BaseTexture también tiene una resolución ahora también. Si la imagen es de alta resolución, deberá establecer la resolución en 2. La forma de establecer la resolución en dos automáticamente al cargar es agregar la imagen con @ 2x al nombre de la imagen.

Entonces, si carga en say: [email protected] , pixi asumirá que tiene una resolución de 2.

¡Es mejor jugar de verdad! Pero haga preguntas, ya que probablemente esto no sea tan sencillo como parece :)

+1

Hola Matt. ¡Esto luce genial! Pude hacer que el lienzo renderizara texto y activos agradables y nítidos. El tamaño y la posición parecen manejarse correctamente hasta donde he probado.

Lo único que parece tener problemas es con los procedimientos de dibujo de Pixi.Graphics. Parece que no puedo conseguir que esos se rendericen nítidamente. Sin embargo, el tamaño y la posición del renderizado son correctos.

¿Los objetos gráficos también deberían ser retina? ¿Están almacenando en caché como mapa de bits el
objeto gráfico por casualidad? ¿O es directamente PIXI.graphics?

El martes, 9 de septiembre de 2014 a las 5:32 p.m., dcascais [email protected] escribió:

Hola Matt. ¡Esto luce genial! Pude hacer que el lienzo se renderizara bien
y texto y recursos nítidos. El tamaño y la posición parecen manejarse correctamente
por lo que he probado.

Lo único con lo que parece que tengo problemas es con Pixi.
procedimientos de dibujo. Parece que no puedo conseguir que esos se rendericen nítidamente. los
Sin embargo, el tamaño y la posición de la representación son correctos.

-
Responda a este correo electrónico directamente o véalo en GitHub
https://github.com/GoodBoyDigital/pixi.js/issues/621#issuecomment -54997804
.

Mat Groves

_Socio técnico_

Teléfono: 07708 114496 :: www.goodboydigital.com
Primer piso, unidad 9B, Queens Yard, White Post Lane, Londres, E9 5EN
buen chico ©. Reservados todos los derechos.

@GoodBoyDigital Al describir el problema, me perdí parte de la configuración que tengo. La configuración que tengo es un PIXI.Sprite con una textura basada en un objeto PIXI.Graphics.

Creé un JSFiddle para ayudar a describir el problema y la representación resultante:
Este muestra la salida de gráficos borrosos si el PIXI.Sprite obtiene una textura basada en un PIXI.Gráficos:
http://jsfiddle.net/hsv8Q/13/

Esta configuración con un uso directo de PIXI.Graphics funciona bien:
http://jsfiddle.net/hsv8Q/7/

¡entendido! no te preocupes, sé exactamente qué está causando eso :)
Te lo haré saber una vez que esté ajustado. ¡ejército de reserva!

Hola @GoodBoyDigital , ¡gracias por el soporte de retina! También llega en un gran momento, ya que lo necesitamos para nuestro cliente :)

Un problema que noté en la rama de la retina: el renderizado es mejor, pero las áreas de impacto están desalineadas. El lienzo se escala, pero las áreas de impacto no. Entonces, si quiero tocar un botón en el centro de la pantalla, tengo que tocar el centro del cuarto superior izquierdo de la pantalla para tocarlo.

En esta pantalla, si quiero presionar el botón en el centro, tengo que presionar en el círculo naranja (que agregué más adelante como ejemplo) para presionarlo. El hitarea no escala con el resto.

Acerca del parámetro "resolución" en la función autodetectRenderer; podríamos usar "window.devicePixelRatio", ¿verdad?

Encontré una solución rápida / sucia para el problema que describí anteriormente. El problema parece estar ubicado en las funciones onTouchStart, onTouchMove y onTouchEnd de InteractionManager. Se puede solucionar cambiando el cálculo de touchData.global.xy touchData.global.y en esas funciones y dividiéndolos por this.resolution.

Esto parece solucionar el problema, pero podría haber una solución mucho mejor.

hola @GillesVermeulen
Modifiqué las cosas del área de impacto en mi última confirmación. ¿Probaría con la última versión por favor? ¡ejército de reserva!

Hola @GoodBoyDigital , gracias por la respuesta rápida y el soporte, pero ¿es posible que la confirmación de la que estás hablando aún no esté en Github?

@GillesVermeulen - el tacto debería ser bueno ahora. Solo estaba aplicando el cambio de resolución a los eventos del mouse. Déjame saber si todo te funciona bien ahora. ¡Gracias!

Tardes @dcascais ! Acabo de enviar una solución a la rama de la retina que le permitirá definir la resolución de la función generateTexture.

Entonces, para una agradable textura de retina crujiente, todo lo que puede hacer es esto:

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

avíseme si eso le funciona. ¡Gracias!

@GoodBoyDigital ¡Agradable! Esto ahora funciona bastante bien. Agradezco la actualización sobre esto.

Como pregunta general. ¿Usted u otros se han encontrado con otras cosas, como problemas de rendimiento, memoria o fallas en función de esta actualización de alta resolución?

Gracias, Mat.

¡Contento de escuchar!

¡Ojalá hubiera una bala mágica para eso! Desafortunadamente, una resolución más alta afectará el rendimiento y el consumo de memoria, ya que esencialmente todo se duplicará en tamaño. Las imágenes Retina ocupan el doble de memoria y webGL / Canvas necesitará renderizar una escena con el doble de píxeles. En dispositivos con poca memoria / cpu, esto podría ser un verdadero asesino, por lo que es muy importante estar atento al hacer algo con alta resolución.

¿No serían los calculados 4x? Además, ¿no está bastante garantizado que las personas con pantallas retina también tendrán computadoras rápidas?

@iirelu es cierto de hecho! ¡4 veces más!
Sí, no creo que haya problemas en las computadoras con pantalla Retina, ya que serían bastante de gama alta.

Es más probable que los problemas de memoria se manifiesten en dispositivos móviles que tengan pantallas de retina.

@GoodBoyDigital , gracias por la actualización de las funciones táctiles. Era lo mismo que mi solución temporal y parece funcionar.

Sobre el rendimiento: desde hace poco, he estado probando cosas en CocoonJS en IOS7. El rendimiento es definitivamente mejor en comparación con la vista web estándar de iOS que usan cosas como Phonegap, pero dibujar formas parece ser muy exigente y las formas no están suavizadas como en Safari. Me imagino que esto está relacionado con CocoonJS y tiene poco que ver con Pixi.

Tan pronto como aplica un filtro a una textura de retina (@ 2x), todo el posicionamiento parece estar desactivado.

¡Gracias por el aviso @joaomoreno ! Se asegurará de echar un vistazo: +1:

Solo una pequeña pregunta sobre la API que presentas: ¿No hay un conflicto entre PIXI.autodetectRenderer(width, height, optionObject) y PIXI.autodetectRenderer(width, height, view, antialias, transparent )?
¿Eso haría que el argumento optionObject el sexto argumento de la segunda firma como se describe en src/pixi/utils/Detector.js ? No estoy del todo seguro de dónde más ponerlo, ya que el tercer argumento ya es un elemento DOME, ¿no es así?

La próxima versión de pixi usará la nueva firma del método, este es un cambio rotundo.

@englercj Muchas gracias por su rápida respuesta. Entonces, ¿las opciones eliminadas seguirán siendo accesibles de alguna otra manera?

El objeto de opciones contiene todas las opciones anteriores y nuevas. La funcionalidad no se está eliminando, simplemente pasa las opciones de manera diferente:

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

¡Oh, útil! Muchas gracias por eso. : +1:

El soporte de retina está ahora en la rama de desarrollo. Por favor, avíseme si alguien encuentra algún problema con él: +1: cerrando por ahora.

Tengo un problema con una retina macbook pro.

No estoy usando {resolution:2} .

El ancho del escenario devuelve los píxeles de la retina reales. En mi caso, son 2540 píxeles. Las texturas se renderizan al doble de su tamaño y sus anchos tampoco están en píxeles de retina reales 1: 1. Entonces, una imagen de 300 x 200 ocupa 600 x 400 píxeles de retina, pero el ancho devuelve 300.

¿Es este el comportamiento esperado?

@PierBover Sí, la altura / ancho del objeto en realidad no ha cambiado. Simplemente se renderiza con una resolución diferente.

@englercj, pero ¿cómo es que hay dimensiones en píxeles reales y píxeles duplicados mezclados?

Hola chicos, estoy haciendo algo mal aquí. Si hago la resolución 2 de mi CanvasRenderer para una pantalla retina, mi lienzo tiene el doble de tamaño y mis imágenes @x2 cuatro veces el tamaño.

    <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

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

En este número y en esta publicación de blog http://www.goodboydigital.com/pixi-js-v2-fastest-2d-webgl-renderer/ se menciona que las imágenes de retina necesitan un @ 2x o un @ x2 antes de la extensión . Supongo que la correcta es @ 2x . ¿Es esto correcto?

@ 2x es correcto. Puede ser un nombre de carpeta o agregarse al nombre de la imagen.

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

@Adireddy gracias. Esa es la mitad de la batalla. ¿Alguna idea de por qué mi lienzo se escala en lugar de aumentar la resolución?

El mismo problema aquí para retina, cualquier uso de la resolución: 2, hace que el posicionamiento del ancla de PIXI.Text sea incorrecto. Volver a escalar el lienzo en CSS no ayuda mucho. Tuve que establecer la resolución en 1, duplicar el tamaño de la fuente del texto y luego escalarlo a la mitad.

E incluso con eso, el texto todavía no se ve bien.

Hola Elyx0, puedes probar mi complemento de texto para dispositivos móviles disponible aquí: https://github.com/JiDW/pixi-cocoontext

¿Soluciona tus problemas?

Hola @JiDW , finalmente lo arreglé. Estoy usando PIXI.js desnudo, así que no hay Cocoon para mí, mi lienzo de vista no se configuró correctamente. Gracias

@GillesVermeulen

Estoy considerando admitir dispositivos de alto DPI en mi proyecto, así que me pregunto:

El lienzo se escala, pero las áreas de impacto no.

¿Esto se ha resuelto en PixiJS? (por ejemplo, en una versión posterior / reciente)

Hola @tobireif , creo que sí. No he tenido el problema durante mucho tiempo, pero eso es con Pixi v2. Tampoco creo que sea un problema con la versión más nueva.

@GillesVermeulen ¡ Suena bien! ¡Gracias!

Un método CSS que me funcionó usando canvas (sin 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; }
En caso de que esto pueda ayudar a alguien.

Hola !

Tengo un problema con mi último proyecto: http://romaincazier.com/davatars/

No puedo obtener la resolución de píxeles correcta en mis objetos ... No sé si se trata del renderizador o de los gráficos desde los que generé las texturas, pero en ambos casos agregué window.devicePixelRatio pero no parece tener alguna influencia.

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