Pixi.js: Erstellen Sie einen SDF-Font-Handler

Erstellt am 15. Okt. 2016  ·  11Kommentare  ·  Quelle: pixijs/pixi.js

Im Moment hat pixi nur leinwandbasierten Text und manuell erstellte Bitmap-Schriften. Ich möchte auch SDF-Text direkt aus einer Schriftartdatei unterstützen.

Die Parsing-Bibliotheksoptionen sind unten aufgeführt. Ideal ist klein, hat keinen Ladecode (nicht erforderlich), analysiert und erstellt Pfade.

https://github.com/Jolg42/awesome-typography

| Bibliothek | Sterne | Größe | Unterstützte Schriftarten | Lasten | Analysiert | Erstellt Pfade | Mehrzeiliges Layout | Notizen |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| opentype.js | 1136 | 288k | TTF, OTF, WOFF | ✓ | ✓ | ✓ | | Layout hinzugefügt mit opentype-layout |
| Typr.js | 271 | 60.000 | TTF, OTF | | ✓ | ✓ | | Wurde erstellt, um einige Probleme mit opentype.js | zu lösen
| Schriftsatz | 85 | 379.000 | TTF, OTF, WOFF, WOFF2, TTC, DFONT | ✓ | ✓ | ✓ | | |
| offener Typ | 63 | ?k | TTF, OTF, WOFF, WOFF2 | | ✓ | ✓ | | nur Knoten? |
| Webfontloader | 4961 | ?k | ? | ✓ | | | | Meist nur ein Beobachter zum Laden von CSS-Fonts |

Stale 🙏 Feature Request 🥶 Low Priority

Hilfreichster Kommentar

@englercj @ivanpopelyshev @PixelsCommander Wie ist der aktuelle Fortschritt bei dieser Funktion? Wenn in letzter Zeit niemand dabei ist, bin ich bereit, den Job zu übernehmen.
Ich bin der Autor von msdf-bmfont-xml , das mit Hilfe von opentype.js und node-canvas funktioniert. Es läuft gut auf Starling-Frameworks .
Als ich kürzlich meine Füße auf Pixi.js nass machte, stellte ich fest, dass msdf-Text einfach nicht implementiert ist, also nahm ich mir einfach etwas Zeit, um das großartige Plugin pixi-sdf-text zu erweitern, um Mehrkanal-SDF ohne zusätzliche Abhängigkeiten und ein paar Hacks zu ermöglichen in BitmapText und Loader , unten ist mein aktueller Fortschritt:
pixi-msdf
Der Strich- und Schlagschatteneffekt wird ohne zusätzlichen Drawcall implementiert.
Auch einige Korrekturen im BitmapText-Layoutalgorithmus (Aktuelle Implementierungen in 4.7 sind etwas fehlerhaft, und der Basislinienparameter bmfont ist wichtig, wird aber im BitmapText-Layout nicht verwendet).

Ich habe die Vorträge über die geänderte Architektur und die Shader von v5 gelesen, daher bin ich mir nicht sicher, ob es ein guter Zeitpunkt ist, eine PR zu erstellen oder sie einfach in einem eigenständigen Plug-In zu belassen.
Sag mir, was du denkst, Jungs.

Alle 11 Kommentare

Es gibt andere Dinge mit Schriftarten. Verwenden Sie beispielsweise RGB-Kanäle als unterschiedliche Spritesheets, um alle asiatischen Symbole abzudecken.

Hallo @englercj , @ivanpopelyshev ,

Ich bin derzeit damit beschäftigt, da sich seit meiner letztjährigen Anfrage https://github.com/pixijs/pixi.js/issues/1679 nichts geändert hat.

Der Plan ist also, Mesh zu erstellen und Punktkoordinaten als gewöhnliche Punktattribute + Texturkoordinaten als UVs zu übergeben. Rendern Sie dies einmal im Shader als im Cache.

Irgendwelche Vorschläge zur Umsetzung?

Ivan, ich bin mir nicht sicher, ob ich dich bezüglich RGB richtig verstanden habe. Soll es eine Art Komprimierung sein, um dreimal mehr Daten zu speichern?

@englercj @ivanpopelyshev lassen Sie mich Ihre Meinung dazu wissen

https://github.com/PixelsCommander/pixi-sdf-text

Aktuelle Priorität ist mehrzeiliges Rendern und maximale Kompatibilität mit normalem Text.

PS @ivanpopelyshev hat herausgefunden, was du für RGB meinst. Geplant für die nächsten Updates.

RGB - ja.

Wie ist deine E-Mailadresse? Ich lade Sie in Ruhe ein. Macht nichts, habe es gefunden.

Markierung von @finscn

@englercj @ivanpopelyshev @PixelsCommander Wie ist der aktuelle Fortschritt bei dieser Funktion? Wenn in letzter Zeit niemand dabei ist, bin ich bereit, den Job zu übernehmen.
Ich bin der Autor von msdf-bmfont-xml , das mit Hilfe von opentype.js und node-canvas funktioniert. Es läuft gut auf Starling-Frameworks .
Als ich kürzlich meine Füße auf Pixi.js nass machte, stellte ich fest, dass msdf-Text einfach nicht implementiert ist, also nahm ich mir einfach etwas Zeit, um das großartige Plugin pixi-sdf-text zu erweitern, um Mehrkanal-SDF ohne zusätzliche Abhängigkeiten und ein paar Hacks zu ermöglichen in BitmapText und Loader , unten ist mein aktueller Fortschritt:
pixi-msdf
Der Strich- und Schlagschatteneffekt wird ohne zusätzlichen Drawcall implementiert.
Auch einige Korrekturen im BitmapText-Layoutalgorithmus (Aktuelle Implementierungen in 4.7 sind etwas fehlerhaft, und der Basislinienparameter bmfont ist wichtig, wird aber im BitmapText-Layout nicht verwendet).

Ich habe die Vorträge über die geänderte Architektur und die Shader von v5 gelesen, daher bin ich mir nicht sicher, ob es ein guter Zeitpunkt ist, eine PR zu erstellen oder sie einfach in einem eigenständigen Plug-In zu belassen.
Sag mir, was du denkst, Jungs.

@soimy Dies ist eine großartige Zeit, um eine PR für v5 ( next -Zweig) einzufügen. Danke für die Freiwilligenarbeit.

Benötigen Sie eine Diskussion über das TTF/OTF-Parse-Modul.
Ich denke an die Notwendigkeit eines Laufzeit-True-Type-Font-Parsers in Pixi Core. Dadurch werden mindestens 60.000 Parsercodes hinzugefügt, aber die Vorteile von ttf -Ressourcen scheinen nicht gleich zu sein. Diese Funktion sollte als devDependencies behandelt werden.

Sag mir, was du denkst.
Übrigens: Kann mich jemand zu Pixi's Slack einladen? Slack-ID: [email protected]

Wenn Sie dabei Hilfe benötigen, können Sie mich anpingen.

Ich habe gerade genau diesen Code für ein Web-Vektorzeichenwerkzeug geschrieben, das ich mache. Leider habe ich alles in GWT geschrieben, und ich habe derzeit nicht die Zyklen, um alles in reinem JavaScript für Pixi neu zu schreiben (vielleicht kann ich es einfach für JS neu kompilieren, wenn Google nächstes Jahr seinen J2CL Java to JS-Compiler veröffentlicht).

In meinem Fall bestand die von mir verwendete Architektur darin, Typr.js zu verwenden, um TrueType-Dateien zur Laufzeit zu analysieren. Wenn dann jedes Zeichen angezeigt wird, verwende ich einen benutzerdefinierten ttf-Renderer (ein einfacher ist eigentlich nicht viel Code), um spontan eine SDF nur für das Zeichen zu erstellen und es in einen Cache zu stecken. Und dann werden die SDFs auf dem Bildschirm gerendert. Es ist alles ziemlich schnell und die Codegrößen sind nicht allzu schlecht, daher bin ich mir nicht sicher, ob es notwendig ist, die SDF vorher zu berechnen.

Der Hauptnachteil liegt bei den Schriftgrößen. Um die Dinge richtig zu machen, müssen Sie die ttf-Schriftartdateien selbst parsen, aber dann müssen Sie eine ttf-Schriftartdatei in Ihr Spiel bündeln. TTF-Dateien sind nur etwa 50 KB groß für ausschließlich englische Schriftarten, aber sie können mehrere hundert KB für europäische Schriftarten und mehrere MB für nicht-europäische Schriftarten groß sein. Ich bin mir also nicht sicher, wie praktisch dieser Ansatz für Web-/Mobilspiele ist.

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

Dieser Thread wurde automatisch gesperrt, da es nach seiner Schließung keine Aktivitäten mehr gegeben hat. Bitte öffnen Sie ein neues Problem für verwandte Fehler.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen