Dieses Mal werde ich Ihnen eine Zusammenfassung der Vorsichtsmaßnahmen bei der Verwendung von Pixi.js geben.
Pixi.js ist eine in JavaScript geschriebene 2D-Rendering-Engine, mit der hauptsächlich „Rich Visual“-Anwendungen wie interaktive Grafiken, Animationen und Spiele erstellt werden können Hardware-GPU-gerenderte WebGL-API. Wenn der Browser WebGL nicht unterstützt, greift Pixi zum Rendern auf HTML5 Canvas zurück. Pixi ist hauptsächlich für das Rendern von Bildern verantwortlich. Entwickler müssen viele andere Funktionen selbst schreiben oder sie mit anderen Bibliotheken verwenden. Beispielsweise verwendet das Phaser-Framework, das zur Entwicklung von Webspielen verwendet wird, Pixi. Der folgende Inhalt ist aus dem Buch Learning Pixi.js ausgewählt. Sie können Pixi ausprobieren.
Hinweis: Das JavaScript im Beispiel verwendet ES6, var wird zu let, function(){} wird zu () =>
Sprites erstellen
Das grundlegende Baumodul in Pixi ist ein Objekt namens Sprite. Ein Sprite ist eine Grafik, die mit Code gesteuert werden kann. Sie können ihre Position, Größe und einige andere Eigenschaften steuern, um interaktive und animierte Grafiken zu erstellen. Das Erlernen der Erstellung und Steuerung von Sprites ist in der Tat das Wichtigste beim Erlernen der Verwendung von Pixi. Wenn Sie wissen, wie man Sprites erstellt und anzeigt, sind Sie nur einen kleinen Schritt davon entfernt, mit der Erstellung von Spielen oder anderen interaktiven Programmen zu beginnen.
In diesem Kapitel lernen Sie die wesentlichen Kenntnisse kennen, die zum Anzeigen und Positionieren von Sprites in Pixis Canvas erforderlich sind, einschließlich der folgenden:
Wie man einen Root-Container erstellt, der als Bühne bezeichnet wird)
So erstellen Sie einen neuen Renderer (Renderer)
Verwenden Sie den Loader, um Grafiken in den Textur-Cache (Textur-Cache) von Pixi zu laden
Verwenden Sie die geladenen Grafiken, einschließlich Kachelsets und Texturatlanten, und erstellen Sie Sprites
Bevor wir mit der Erstellung von Sprites beginnen, erstellen wir einen rechteckigen Bildschirm für deren Anzeige.
Renderer und Bühne erstellen
Pixi verfügt über ein Renderer-Objekt (Renderer), mit dem Sie einen Anzeigebildschirm erstellen können. Es generiert automatisch ein HTML-Element