Heim > Web-Frontend > js-Tutorial > Zusammenfassung der Verwendung von Pixi.js

Zusammenfassung der Verwendung von Pixi.js

php中世界最好的语言
Freigeben: 2018-03-07 10:26:21
Original
5426 Leute haben es durchsucht

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 und löst das Problem der Anzeige Ihres Bildes im Canvas. Sie müssen jedoch ein weiteres Pixi-Containerobjekt namens stage erstellen (keine Sorge, Sie wissen, was ein Containerobjekt ist und was). es ist in einem Moment) warum sie gebraucht werden). Dieses Bühnenobjekt wird als Root-Container verwendet, um alles anzuzeigen, was Pixi zur Anzeige benötigt. Im Folgenden finden Sie den Code zum Erstellen eines Renderers und der Bühne. Fügen Sie diese Codes zwischen den

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage