Pixi.js: Polygonverpackung

Erstellt am 13. Dez. 2015  ·  33Kommentare  ·  Quelle: pixijs/pixi.js

Ich bin langsam, aber

dude

Format

{"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

Hilfreichster Kommentar

Es wird in v5 hinzugefügt, ich werde es zur Verfügung stellen.

Alle 33 Kommentare

Die Leute sagen, dass es vor 1 Jahr in der Einheit hinzugefügt wurde

genial.
mobile ist immer nicht genug Speicher.
also brauche das..
Wie denkst du über die Leistung von Polygon-Texturpacking?

Das ist brillant! @SeminYun Falls Sie die Informationen zur Leistung nicht gefunden haben, hier ist ein Test, den sie auf dem iPhone 4s durchgeführt haben: https://www.codeandweb.com/blog/2015/10/01/cocos2d-x-performance-optimization
das Bild machte 36 fps ungetrimmt und 60 fps getrimmt! Apropos Verbesserung! Diese Texturunterstützung wäre in pixi sehr, sehr willkommen!! :)

Hinweis: Dieser Leistungsvorteil geht zu Lasten der CPU. Etwas stark eingeschränkt in JS bereits. Ich würde dies gerne in pixi vergleichen und sehen, wie der Unterschied ist.

Schön. Abgesehen von diesen Leistungsvorteilen werden dadurch hoffentlich einige Spritesheets kleiner, während Bilder in Alphalöcher passen! Viele Spritesheets werden also schneller geladen. Gute Sache!

Ich werde es bald im WIP-Zweig v4.1 implementieren :)

Könnte dies nicht über Mesh gerendert werden, anstatt ein neues Feature zu erstellen?

@englercj 100% richtig. Das neue Sprite-Setup wird dies auch gut unterbringen!

UVs und Geometrie müssen sich auf der "Textur"- oder "Modell"-Seite befinden, nicht in der Instanz, also ist Mesh keine Lösung.

Irgendein Update?

Da der Polygonmodus für das PixiJS-Datenformat immer noch standardmäßig deaktiviert ist, werden Polygone anscheinend in Pixi nicht unterstützt.

Wie die letzten Kommentare vermuten lassen, sollte es ab Version 4.1 irgendwo auf der Release-Agenda von PixiJs stehen. Kann jemand bestätigen, dass es dieses Feature bereits in PIXI 4.* geschafft hat?

Und wenn es unterstützt wird, weiß jemand, wie man diese Funktion in TexturePacker für das PixiJS-json-Format aktiviert?

Es wird in v5 hinzugefügt, ich werde es zur Verfügung stellen.

Wunderbar! Ich danke dir sehr.

Großartig @ivanpopelyshev !

Gibt es hier Neuigkeiten?

Keine Neuigkeiten, aber niemand hat bestätigt, dass sie es ernsthaft brauchen. Ich kann es als Plugin für v4 erstellen, aber wer wird es jemals testen und bestätigen, dass es funktioniert? Und v5 befindet sich im Alpha-Stadium, also wird es für mehrere Monate niemand verwenden, wenn ich es dort hinzufüge.

Keine Neuigkeiten, aber niemand hat bestätigt, dass sie es ernsthaft brauchen.

Hä? Du meinst außer uns?

Ich bin mir sicher, dass dies für viele Projekte 'Tabellen' mit verschiedenen Bildformaten darauf optimieren kann, da jedes Bild viel näher beieinander liegen kann. Ich habe es schon ein paar Mal gebraucht, um Tabellenkalkulationen erstellen zu können, bei denen ich kleine Bilder in den transparenten Teil eines großen Bildes einfüge, um ein kleineres Tabellenkalkulations-Ausgabebild zu erhalten.

Kann nicht für andere sprechen, aber ich würde diese Funktion oft nutzen

Bitte schreiben Sie eine E-Mail an @GoodBoyDigital , wenn er zustimmt, werde ich mich darauf konzentrieren.

Ich brauche diese Funktion.

Ich denke, es ist an der Zeit, es für v5 zu taggen.

Ist es als Plugin für v4.x verfügbar? oder sollte ich für diese Funktion auf v5 warten?

V5 sicher, das wird mit neuen Systemen unglaublich einfach zu implementieren sein!
(mit Stapelung!)

Am Mittwoch, den 6. Juni 2018 um 10:05 Uhr schrieb sudhalucky [email protected] :

Ist es als Plugin für v4.x verfügbar? oder soll ich dafür auf v5 warten
Merkmal?


Sie erhalten dies, weil Sie erwähnt wurden.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/pixijs/pixi.js/issues/2243#issuecomment-394998933 ,
oder den Thread stumm schalten
https://github.com/notifications/unsubscribe-auth/AC998nI2I61yvKnAEcwik_-jBCsiGUnvks5t55tigaJpZM4G0VPE
.

>

Technischer Direktor

Startseite: www.goodboydigital.com
Telefon: 020 8533 1177
Adresse: Unit B1, Matchmakers Wharf, Homerton Road, London, E9 5FF

Ich brauche diese Funktion

Dieses Plugin unterstützt Polygon-Packing: https://github.com/gameofbombs/pixi-heaven

Verwenden Sie PIXI.heaven.Sprite

@ivanpopelyshev Danke für den netten Tipp zu pixi-heaven. Schau dir das auf jeden Fall an. Aber für das reine Polygon-Packen scheint dieses Plugin etwas überladen für das reine Polygon-Packen. In der README steht, dass sogar das Spine-Plugin erforderlich ist (obwohl wir Spine in einem Projekt nicht verwenden) und es heißt, dass es Leistung kostet, es zu verwenden. Ich habe mir dieses Repo gerade kurz angeschaut, daher könnte ich hier etwas übersehen, aber ich sehe keinen Grund, warum Polygon-Packaging die Leistung während der Animation beeinträchtigen und Spine benötigen sollte.

Was ich suche, ist eine Möglichkeit, Spritesheets in Breite und Höhe so klein und effizient wie möglich zu halten, um schnellere Ladezeiten zu erzielen. Ich dachte, für viele Projekte gibt es viele Leerzeichen in Spritesheets, weil die Bilder in großen Bereichen zu 100% transparent sind. Das könnte mit den kleineren Bildern gefüllt werden, die jetzt außerhalb der Rechtecke dieser transparenten Bilder gehen müssen.

Mit Polygonpacking könnten wir Spritesheets viel kleiner machen, wie in diesem vereinfachten Beispiel (jede unterschiedliche Farbe ist ein anderes Sprite):
polygon packing
Sie können hier sehen, dass die große runde Form jetzt den kleinen Formen ermöglicht, das transparente Loch zu füllen, das normalerweise nur ein großer fehlender Platz ist. Und auf der rechten Seite sehen Sie, dass zwei Dreiecke denselben Raum verwenden können, was zu einer Verringerung des verwendeten Raums um 50 % führt.
Bei normalen Spritesheets würde dies zu einem sehr großen Spritesheet führen, bei dem alle Bilder volle Rechtecke benötigen, obwohl sie für große Bereiche transparent sind, was zu einem viel größeren Spritesheet führen würde und viel mehr Zeit zum Laden benötigt.

Diese Funktion wird nicht nur Spritesheets in vielen Fällen viel kleiner machen, wie ein Beitrag von dir oben, sogar die Drawcalls könnten schneller sein, denn anstatt ein großes Rechteck zu zeichnen, müssen nur die kleineren Polygone gezeichnet werden. Aber für letzteres wissen Sie viel mehr als ich.

Auf der Texturepacker-Website gibt es auch einen Artikel über die große Leistungssteigerung beim Polygon-Packen:
https://www.codeandweb.com/texturepacker/tutorials/cocos2d-x-performance-optimization

Und sie liefern ein weiteres Beispiel aus der Praxis, in dem dies sehr nützlich und sehr effizient ist:
tp-screenshot-2652

Also zum Schluss; Ich bin nicht davon überzeugt, dass PIXI.heaven.Sprite eine Lösung dafür ist und ich würde erwarten, dass die Leistung steigt und nicht sinkt.

+1 für diese Funktion

Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivität hatte. Es wird geschlossen, wenn keine weitere Aktivität stattfindet. Vielen Dank für Ihre Beiträge.

Ich sehe hier einige +1 und der 6. Juni 2018 @GoodBoyDigital schrieb:
„V5 ist sicher, das wird mit neuen Systemen unglaublich einfach zu implementieren sein!
(mit Batching!)"

Jetzt lesen wir, dass das Label "Resolution: Wird nicht behoben" vom veralteten Bot hinzugefügt wurde und das Problem (automatisch) geschlossen wurde. Früher wurde uns mitgeteilt, dass diese "Bots" mit Vorsicht zu genießen sind, daher bin ich mir nicht sicher:

Diese Funktion ist immer noch sehr willkommen. Ist es noch in der Pipeline für v5?

Ich denke, @CodeAndWeb muss zuerst Polygon im TexturePacker für das Pixijs-Framework aktivieren.
Es scheint deaktiviert zu sein.

Sie können das Format "JSON (Hash)" verwenden, um es auszuprobieren - es aktiviert den Polygonpacker, deaktiviert jedoch einige PixiJS-spezifische Dinge (Animationserkennung). Der Rest des Formats ist identisch.

Jedes Sprite bekommt 3 zusätzliche Einträge:

"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] ]
  • Scheitelpunkte sind die Punkte im Sprite-Koordinatensystem
  • verticesUV sind die Eckpunkte im Texturatlas
  • Dreiecke sind die Dreiecke, die aus den Scheitelpunkten aufgebaut sind

@djmisterjon Es ist auch nicht so schwer, selbst eine Vorlage für Ausgaben in texturePacker zu ändern oder eine eigene benutzerdefinierte Vorlage für Ausgaben zu erstellen (was eigentlich ziemlich großartig ist!):
https://www.codeandweb.com/texturepacker/documentation/custom-exporter

@Friksel interessant, danke für die Tipps, es kann für viele benutzerdefinierte Systeme sehr nützlich sein.

Hallo, gibt es dafür in PixiV5 Unterstützung? Wenn nicht, kann jemand vielleicht hervorheben, welche Funktion von Pixiv5 verwendet werden soll, um sie zu implementieren? Könnte daran interessiert sein, dies für mein Projekt zu implementieren.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

st3v0 picture st3v0  ·  3Kommentare

Darker picture Darker  ·  3Kommentare

Makio64 picture Makio64  ·  3Kommentare

madroneropaulo picture madroneropaulo  ·  3Kommentare

SebastienFPRousseau picture SebastienFPRousseau  ·  3Kommentare