Pixi.js: Cambiar la resolución del renderizador

Creado en 6 mar. 2017  ·  16Comentarios  ·  Fuente: pixijs/pixi.js

¿Hay alguna forma de actualizar la resolución del renderizador? Intenté renderer.resolution = window.devicePixelRatio, pero solo hace que la pantalla parpadee en blanco.

🤔 Question

Comentario más útil

Sí lo es. Haré esa función más tarde, pero esto podría funcionar por ahora:

renderer.resolution = 2;
renderer.rootRenderTarget.resolution = 2;
renderer.resize(w-1, h);
renderer.resize(w, h);

No olvide actualizar TODAS LAS RESOLUCIONES DE FILTROS.

Todos 16 comentarios

La mejor solución temporal que se me ocurrió es destruir y volver a crear el renderizador, pasando la nueva resolución a autoDetectRenderer. Esto funciona, pero quizás no sea la forma más eficiente de hacerlo. Además, es posible que todavía exista un problema al destruir y recrear repetidamente el renderizador: # 2233

Parece que debería haber una llamada de función simple para hacer esto, como renderer.setResolution, que minimiza la cantidad de procesamiento adicional y recursos muertos.

Hola @jaspervaz! ¿Tiene curiosidad sobre cuál es su caso de uso para esto?
¡Salud!

Sí lo es. Haré esa función más tarde, pero esto podría funcionar por ahora:

renderer.resolution = 2;
renderer.rootRenderTarget.resolution = 2;
renderer.resize(w-1, h);
renderer.resize(w, h);

No olvide actualizar TODAS LAS RESOLUCIONES DE FILTROS.

Y no olvide actualizar también la resolución del complemento de interacción

@jaspervaz

EXACTAMENTE, Zoom cambia, eso es lo que quiero hacer también :)
Por ahora, suponga que "renderer.screen" es un rectángulo de pantalla en coordenadas lógicas, mientras que "renderer.view" es lienzo y, por lo tanto, el ancho y el alto se multiplican por la resolución.

Marque así para que funcione para ambos renderizadores:

if (renderer.rootRenderTarget) { renderer.rootRenderTarget.resolution = newResoultion; }

-
Además, parece funcionar igual sin la siguiente línea, creo que porque el zoom cambia tanto la resolución como las dimensiones de la ventana, pero tal vez otros casos de uso lo requieran:

renderer.resize(w-1, h);

Sí estoy de acuerdo.

@ivanpopelyshev Quiero escalar la pantalla.
Usar tu método hará que el lienzo se vuelva borroso.
Usando mi método la resolución no puede ser mayor que 20

https://jsfiddle.net/starCoding/p49u34hd/8/

@starInEcust ¿Por qué necesita una resolución superior a 20? La resolución no se trata de escalar, sino del zoom del navegador. La escala es parte de la transformación de escenario.

@ivanpopelyshev Quiero agrandar el renderizador y mantener el texto y las imágenes svg no se distorsionarán

@starInEcust Resolví ese tipo de problemas ajustando manualmente la escala y el tamaño de fuente.

También hay una nueva solución: use fuentes SDF. https://github.com/PixelsCommander/pixi-sdf-text

@ivanpopelyshev ¿qué tal svg? Solo quiero hacer un editor de texto con una animación genial, en la vista previa de impresión puedo acercar y alejar, pero no afecta la composición tipográfica.
¿Y hay algún problema con el uso de la ampliación de resolución?

Ese es un caso de uso muy inusual para pixi. Tienes que cambiar el zoom a través de "stage.scale" y ajustar la resolución solo de SVG y texto, no la resolución de todo el renderizador. En su caso, el tamaño de la pantalla del renderizador es fijo, y cuando cambia la resolución, las dimensiones del lienzo se vuelven demasiado grandes, ¡está alcanzando un tamaño de 16k x 16k píxeles!

No usé SVG en pixi, así que no sé cómo ajustar la resolución :)

Muchas gracias! Tal vez debería abrir un problema para discutir esta pregunta :(

Si vas a cerrar este problema ya que parece respondido, ¡no dudes en abrir otro si tienes otra pregunta!

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.

¿Fue útil esta página
0 / 5 - 0 calificaciones