Pixi.js: Embalaje poligonal

Creado en 13 dic. 2015  ·  33Comentarios  ·  Fuente: pixijs/pixi.js

Soy lento pero TexturePacker admite polígonos . Ahora necesitamos un nuevo SpriteRenderer. Etiqueta esa cosa para v4.

dude

Formato

{"frames": {
"animal_extractor.png":
{
    "frame": {"x":2,"y":326,"w":164,"h":136},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":164,"h":136},
    "sourceSize": {"w":164,"h":136},
    "pivot": {"x":0.5,"y":0.5},
    "vertices": [ [140,34], [164,76], [164,88], [95,127], [74,136], [50,136], [0,108], [0,62], [32,19], [86,15], [101,0], [106,0] ],
    "verticesUV": [ [142,360], [166,402], [166,414], [97,453], [76,462], [52,462], [2,434], [2,388], [34,345], [88,341], [103,326], [108,326] ],
    "triangles": [ [9,10,11], [3,8,9], [7,3,5], [3,0,1], [5,6,7], [5,3,4], [3,7,8], [3,9,0], [3,1,2], [0,9,11] ]
}
}
Stale 🙏 Feature Request 🥶 Low Priority

Comentario más útil

Se agregará en la v5, lo proporcionaré.

Todos 33 comentarios

La gente dice que se agregó en la unidad hace 1 año

increíble.
el móvil no siempre es suficiente memoria.
así que necesito eso ...
¿Qué opinas del rendimiento por empaquetado de texturas poligonales?

¡Esto es genial! @SeminYun en caso de que no haya encontrado la información sobre el rendimiento, aquí hay una prueba que hicieron en el iphone 4s: https://www.codeandweb.com/blog/2015/10/01/cocos2d-x-performance-optimization
la imagen se hizo a 36 fps sin recortar y a 60 fps recortada. ¡Hablando de mejora! ¡Este soporte de texturas sería muy, muy bienvenido en pixi! :)

Nota: Ese beneficio de rendimiento se produce a costa de la CPU. Algo terriblemente restringido en JS ya. Me encantaría comparar esto en pixi y ver cómo es la diferencia.

Bonito. Además de, con suerte, estos beneficios de rendimiento, esto definitivamente hará que algunas hojas de sprites sean más pequeñas, ¡mientras que las imágenes pueden caber dentro de los agujeros alfa! Entonces, muchas hojas de sprites se cargarán más rápido. ¡Buena cosa!

Lo implementaré en la rama WIP v4.1 pronto :)

¿No podría renderizarse a través de Mesh en lugar de crear una nueva función?

@englercj 100% correcto. ¡La nueva configuración de Sprite también se adaptará muy bien a esto!

Los uvs y la geometría deben estar en el lado de "textura" o "modelo", no en el ejemplo, por lo que Mesh no es una solución.

¿Cualquier actualización?

Debido a que el modo de polígono todavía está deshabilitado de forma predeterminada para el formato de datos PixiJS, parece que los polígonos no son compatibles con Pixi.

Como sugieren los últimos comentarios, debería estar en algún lugar de la agenda de lanzamiento de PixiJs a partir de la versión 4.1. ¿Alguien puede confirmar que esta función ya llegó a PIXI 4. *?

Y si es compatible, ¿alguien sabe cómo habilitar esta función en el formato TexturePacker para PixiJS json?

Se agregará en la v5, lo proporcionaré.

¡Maravilloso! Muchas gracias.

¡Genial @ivanpopelyshev !

¿Alguna novedad aquí?

No hay noticias, pero nadie confirmó que lo necesitan en serio. Puedo hacerlo como un complemento para v4, pero ¿quién lo probará y confirmará que funciona? Y la v5 está en etapa alfa, por lo que nadie la usará durante varios meses si la agrego allí.

No hay noticias, pero nadie confirmó que lo necesitan en serio.

¿Eh? ¿Quieres decir, excepto nosotros?

Estoy seguro de que para muchos proyectos esto puede optimizar mucho las 'hojas de cálculo' con diferentes formatos de imágenes porque cada imagen puede estar mucho más cerca una de la otra. Ya lo necesitaba varias veces, para poder crear hojas de cálculo donde pongo imágenes pequeñas en la parte transparente de una imagen grande para tener una imagen de salida de hoja de cálculo más pequeña.

No puedo hablar por los demás, pero usaría mucho esta función

Por favor, escriba un correo electrónico a @GoodBoyDigital , si está de acuerdo, me concentraré en eso.

Necesito esta característica.

Creo que es hora de etiquetarlo para v5.

¿Está disponible como complemento para v4.x? ¿O debo esperar a la v5 para esta función?

¡V5 seguro, esto será increíblemente fácil de implementar con nuevos sistemas!
(¡con procesamiento por lotes!)

El miércoles, 6 de junio de 2018 a las 10:05 a. M., Sudhalucky [email protected] escribió:

¿Está disponible como complemento para v4.x? ¿O debería esperar a la v5 para esto?
¿característica?

-
Recibes esto porque te mencionaron.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/pixijs/pixi.js/issues/2243#issuecomment-394998933 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/AC998nI2I61yvKnAEcwik_-jBCsiGUnvks5t55tigaJpZM4G0VPE
.

>

Director técnico

Inicio: www.goodboydigital.com
Teléfono: 020 8533 1177
Dirección: Unidad B1, Matchmakers Wharf, Homerton Road, Londres, E9 5FF

necesito esta característica

Este complemento admite el empaquetado de polígonos: https://github.com/gameofbombs/pixi-heaven

Utilice PIXI.heaven.Sprite

@ivanpopelyshev Gracias por el buen consejo sobre pixi-heaven. Definitivamente échale un vistazo. Pero solo para el empaquetado de polígonos, ese complemento parece un poco sobrecargado solo para el empaquetado de polígonos. El README indica que incluso requiere el complemento Spine (aunque no usamos Spine en un proyecto) y dice que cuesta rendimiento usarlo. Acabo de echar un vistazo rápido a ese repositorio, por lo que es posible que me esté perdiendo algo aquí, pero no veo ninguna razón por la que el empaquetado de polígonos deba comprometer el rendimiento durante la animación y necesite Spine.

Lo que estoy buscando es una forma de mantener las hojas de sprites lo más pequeñas y eficientes posible en ancho y alto para tener tiempos de carga más rápidos. Supuse que para muchos proyectos hay muchos espacios en blanco en las hojas de sprites porque las imágenes son 100% transparentes en grandes regiones. Eso podría llenarse con las imágenes más pequeñas que ahora tienen que salir de los rectángulos de estas imágenes transparentes.

Con el empaquetado de polígonos podríamos hacer hojas de sprites mucho más pequeñas, como este ejemplo simplificado (cada color diferente es un sprite diferente):
polygon packing
Puede ver aquí que la forma redonda grande ahora permite que las formas pequeñas llenen el agujero transparente que normalmente es solo un gran espacio faltante. Y a la derecha puede ver dos triángulos que pueden usar el mismo espacio, lo que resulta en una disminución del 50% en el espacio usado.
Con hojas de sprites normales, esto daría como resultado una hoja de sprites muy grande, donde todas las imágenes necesitan rectángulos completos, aunque son transparentes para regiones grandes que resultarían en una hoja de sprites mucho más grande y tomaría mucho más tiempo para cargar.

Esta característica no solo hará que las hojas de sprites sean mucho más pequeñas en muchos casos, como una publicación de usted mismo que se indica arriba, incluso los drawcalls podrían ser más rápidos, porque en lugar de dibujar un rectángulo grande, solo se deben dibujar los polígonos más pequeños. Pero para este último, sabes mucho más sobre eso que yo.

También hay un artículo en el sitio web de Texturepacker sobre un gran aumento del rendimiento con el empaque de polígonos:
https://www.codeandweb.com/texturepacker/tutorials/cocos2d-x-performance-optimization

Y proporcionan otro ejemplo del mundo real donde esto es muy útil y muy eficiente:
tp-screenshot-2652

Así que para concluir; No estoy convencido de que PIXI.heaven.Sprite sea una solución para esto y esperaría que el rendimiento aumente, no disminuya.

+1 para esta función

Este problema se ha marcado automáticamente como obsoleto porque no ha tenido actividad reciente. Se cerrará si no se produce más actividad. Gracias por sus aportaciones.

Veo algunos +1 aquí y el 6 de junio de 2018 @GoodBoyDigital escribió:
"¡V5 seguro, será increíblemente fácil de implementar con nuevos sistemas!
(¡con procesamiento por lotes!) "

Ahora leemos que el bot obsoleto agregó la etiqueta 'Resolución: no se arreglará' y el problema se cerró (automáticamente). Anteriormente nos informaron que estos 'bots' deben tomarse con un grano de sal, así que no estoy seguro:

Esta característica sigue siendo muy bienvenida. ¿Todavía está en trámite para la v5?

Creo que @CodeAndWeb necesita habilitar
Parece deshabilitar.

Puede usar el formato "JSON (Hash)" para probarlo: habilita el empaquetador de polígonos pero deshabilita algunas cosas específicas de PixiJS (detección de animación). El resto del formato es idéntico.

Cada objeto tiene 3 entradas adicionales:

"vertices": [ [147,74], [194,68], [204,200], [153,266], [56,267], [15,220], [1,180], [11,72], [64,70], [66,3], [132,1] ],
"verticesUV": [ [194,901], [200,948], [68,958], [2,907], [1,810], [48,769], [88,755], [196,765], [198,818], [265,820], [267,886] ],
"triangles": [ [8,9,10], [6,7,8], [5,0,2], [6,0,5], [5,3,4], [6,8,0], [0,1,2], [5,2,3], [0,8,10] ]
  • los vértices son los puntos en el sistema de coordenadas del sprite
  • vérticesUV son los vértices en el atlas de texturas
  • los triángulos son los triángulos construidos a partir de los vértices

@djmisterjon Tampoco es tan difícil cambiar la plantilla a para los resultados en texturePacker usted mismo o crear su propia plantilla personalizada para los resultados (¡que en realidad es bastante bueno!):
https://www.codeandweb.com/texturepacker/documentation/custom-exporter

@Friksel interesante, gracias por los consejos, puede ser muy útil para muchos sistemas personalizados.

Hola, ¿hay algún soporte para esto en PixiV5? Si no lo hay, ¿alguien tal vez pueda resaltar qué función usar de Pixiv5 para implementarlo? Podría estar interesado en implementar esto para mi proyecto.

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