Pixice
8.5.2
Ziel dieses Projekts ist es, eine schnelle, leichte 2D-Bibliothek bereitzustellen, die auf allen Geräten funktioniert. Mit dem PixiJS-Renderer kann jeder die Leistung der Hardwarebeschleunigung nutzen, ohne vorher über WebGL-Kenntnisse verfügen zu müssen. Außerdem ist es schnell. Wirklich schnell.
Wenn Sie über die neuesten PixiJS-Neuigkeiten auf dem Laufenden bleiben möchten, folgen Sie uns gerne auf Twitter @PixiJS und wir halten Sie auf dem Laufenden! Sie können auch noch einmal auf unserer Website vorbeischauen, denn alle Durchbrüche werden dort ebenfalls veröffentlicht!
Wir sind jetzt Teil des Open Collective und mit Ihrer Unterstützung können Sie uns helfen, PixiJS noch besser zu machen. Um eine Spende zu tätigen, klicken Sie einfach auf die Schaltfläche unten und wir werden Sie für immer lieben!
PixiJS ist eine Rendering-Bibliothek, mit der Sie umfangreiche, interaktive Grafiken sowie plattformübergreifende Anwendungen und Spiele erstellen können, ohne sich mit der WebGL-API befassen oder sich um die Browser- und Gerätekompatibilität kümmern zu müssen.
PixiJS unterstützt WebGPU mit Fallback-Unterstützung für WebGL. Als Bibliothek ist PixiJS ein fantastisches Werkzeug zum Verfassen interaktiver Inhalte. Verwenden Sie es für Ihre grafikreichen, interaktiven Websites, Anwendungen und HTML5-Spiele. Dank der sofort einsatzbereiten, plattformübergreifenden Kompatibilität und der eleganten Degradierung haben Sie weniger Arbeit und mehr Spaß dabei! Wenn Sie relativ schnell ausgefeilte und verfeinerte Erlebnisse erstellen möchten, ohne sich in dichten Low-Level-Code zu vertiefen und gleichzeitig die Kopfschmerzen von Browser-Inkonsistenzen zu vermeiden, dann streuen Sie Ihr nächstes Projekt mit etwas PixiJS-Magie!
Steigern Sie Ihre Entwicklung und lassen Sie Ihrer Fantasie freien Lauf!
WebGL-Renderer (mit automatischer intelligenter Stapelverarbeitung, was eine WIRKLICH schnelle Leistung ermöglicht)
WebGPU-Renderer (neu für die neuesten Browser!)
Canvas-Renderer (Schnellster in der Stadt!)
Vollständiges Szenendiagramm
Super einfach zu verwendende API (ähnlich der Flash-Anzeigelisten-API)
Unterstützung für Texturatlanten
Asset-Loader / Sprite-Sheet-Loader
Erkennt automatisch, welcher Renderer verwendet werden soll
Vollständige Maus- und Multi-Touch-Interaktion
Text
BitmapFont-Text
Mehrzeiliger Text
Textur rendern
Primitive Zeichnung
Maskierung
Filter
Von der Community unterstützte Plugins
Reagieren
Wirbelsäule
Filter
Animieren
Lichter
Benutzeroberfläche
Layout
GIF
Und mehr!
Der Einstieg in PixiJS ist ganz einfach! Laden Sie einfach einen vorgefertigten Build herunter!
Alternativ kann PixiJS mit npm installiert werden oder einfach eine Content Delivery Network (CDN)-URL verwenden, um PixiJS direkt in Ihre HTML-Seite einzubetten.
npm pixi.js installieren
Es gibt keinen Standardexport. Der richtige Weg, PixiJS zu importieren, ist:
* als PIXI aus 'pixi.js' importieren;
Über jsDelivr:
Oder über unpkg:
import { Application, Sprite, Assets } from 'pixi.js';// Die Anwendung erstellt einen Renderer mit WebGL, wenn möglich,// mit einem Fallback auf ein Canvas-Rendering. Außerdem werden der Ticker// und die Root-Stufe eingerichtet PIXI.Containerconst app = new Application();// Warten Sie, bis der Renderer verfügbar istawait app.init();// Die Anwendung erstellt ein Canvas-Element für Sie // kann dann in das DOM einfügendocument.body.appendChild(app.canvas);// die Textur laden, die wir brauchenconst textur =await Assets.load('bunny.png');// Dadurch wird eine Textur aus einem „Bunny“ erstellt. png' imageconst bunny = new Sprite(texture);// Richten Sie die Position des bunny ein.x = app.renderer.width / 2;bunny.y = app.renderer.height / 2;// Drehen Sie sich um den Mittelpunktbunny.anchor .x = 0.5;bunny.anchor.y = 0.5;// Füge den Hasen zu der Szene hinzu, die wir erstellenapp.stage.addChild(bunny);// Auf Frame-Updates achtenapp.ticker.add(() => { // In jedem Frame drehen wir den Hasen ein wenig herum bunny.rotation += 0,01;});Website: Erfahren Sie mehr über PixiJS auf der offiziellen Website.
Erste Schritte:
Sehen Sie sich den Leitfaden „Erste Schritte“ an.
Schauen Sie sich hier auch die PixiJS-Tutorials von @miltoncandelero für Videospiele mit Rezepten und Best Practices an
Beispiele: Legen Sie gleich los und experimentieren Sie gleich hier mit dem Code und den Funktionen von PixiJS!
API-Dokumentation: Lernen Sie die PixiJS-API kennen, indem Sie sich die Dokumente ansehen.
Leitfaden: Ergänzende Nutzungshandbücher zur API-Dokumentation finden Sie hier.
Filter-Demo
Bunny-Demo
Maskierungsdemo
Interaktionsdemo
Weitere Beispiele
Foren: Schauen Sie sich die Diskussionen und Stackoverflow an – beides freundliche Orte, um Ihre PixiJS-Fragen zu stellen.
Chat: Sie können uns auf Discord beitreten, um über PixiJS zu chatten.
Beachten Sie, dass Sie dieses Projekt für die meisten Benutzer nicht erstellen müssen. Wenn Sie lediglich PixiJS verwenden möchten, laden Sie einfach eine unserer vorgefertigten Versionen herunter. Sie sollten PixiJS nur dann erstellen müssen, wenn Sie es entwickeln.
Wenn Sie Node.js und NPM noch nicht haben, installieren Sie sie. Installieren Sie dann in dem Ordner, in dem Sie das Repository geklont haben, die Build-Abhängigkeiten mit npm:
npm installieren
Führen Sie dann Folgendes aus, um die Quelle zu erstellen:
npm run build
Die Dokumente können mit npm generiert werden:
npm führt Dokumente aus
Möchten Sie Teil des PixiJS-Projekts sein? Großartig! Alle sind willkommen! Gemeinsam kommen wir schneller ans Ziel :) Egal, ob Sie einen Fehler finden, eine tolle Funktionsanfrage haben oder Lust auf eine Aufgabe aus der oben stehenden Roadmap haben, nehmen Sie einfach Kontakt mit uns auf.
Lesen Sie unbedingt den Beitragsleitfaden, bevor Sie Änderungen einreichen.
Dieser Inhalt wird unter der MIT-Lizenz veröffentlicht.
