Zusammenfassung der Verwendung von Pixi.js

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 5ba626b379994d53f7acf72a64f9b697 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 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tags Ihres HTML-Dokuments hinzu:

//Erstellen Sie den Renderer, um einen Renderer zu erstellen = PIXI.autoDectectRenderer(256, 256);//Hinzufügen der Leinwand zum HTML-Dokument Hinzufügen von Canvasdocunment.body.appendChild(renderer.view);//Erstellen eines Containerobjekts namens „stage“ erstellt ein Containerobjekt namens stage let stage = new PIXI.Container();//Sagen Sie dem 'Renderer', er solle 'rendern'. Die 'Stage' weist den Renderer an, eine Bühne zu rendern renderer.render(stage);

Dies ist der grundlegendste Code, den Sie benötigen, um Pixi zu verwenden. Er generiert ein schwarzes Canvas-Element mit einer Größe von 256 x 256 Pixel und fügt es dem HTML-Dokument hinzu

Dies sollte das einfache schwarze Quadrat bringen pure Freude für dein kleines Herz! Das liegt daran, dass es sowohl der erste als auch der wichtigste Schritt ist, Pixi dazu zu bringen, mit der Anzeige von Inhalten zu beginnen. Sehen wir uns also an, was dieser Code bewirkt.

Rendering-Optionen

Die autoDetectRenderer-Methode von Pixi wählt basierend auf dem verfügbaren Status automatisch aus, ob Canvas API oder WebGL zum Rendern des Bildes verwendet werden soll.

let renderer = PIXI.autoDetectRenderer(256, 256);

Der erste und zweite Parameter des obigen Codes repräsentieren die Breite bzw. Höhe der Leinwand. Sie können jedoch auch einen dritten optionalen Parameter hinzufügen, um einige zusätzliche Werte festzulegen. Der folgende Code ist ein Beispiel für die Einstellung von Anti-Aliasing, Transparenz und Auflösung:

renderer = PIXI.autoDetectRenderer(
  256, 256,
  { antialias: false, transparent: false, resolution: 1 }
);

Ob Sie den dritten Parameter verwenden möchten, ist optional. Wenn Sie mit dem Standardwert von Pixi zufrieden sind, müssen Sie sich darüber im Allgemeinen keine Gedanken machen. Es ist jedoch am besten zu verstehen, wofür diese Einstellungen verwendet werden. Antialiasing kann die Kanten von Schriftarten und Grafiken glätten (das Antialiasing von WebGL ist noch nicht für alle Plattformen verfügbar, daher testen Sie diese Funktion am besten auf Ihrer Anwendungsplattform). Die Transparenzoption macht den Hintergrund der Leinwand transparent. Die Auflösungsoption erleichtert die Anpassung verschiedener Auflösungen und Pixeldichten. Im Allgemeinen ist die Einstellung auf 1 für die meisten Projekte geeignet. Weitere Informationen zur Auflösungsanpassung finden Sie in Kapitel 6.

Tipp Dieser Renderer verfügt über eine weitere vierte Option namens „preserveDrawingBuffer“. Der Standardwert ist „false“. Sie müssen es nur dann auf „true“ setzen, wenn Sie eine spezielle Pixi-Methode „dataToURL“ in einem WebGL-Kontext aufrufen. Dies kann erforderlich sein, wenn Sie eine Pixi-Leinwand in ein HTML-Bildobjekt konvertieren müssen.

Pixi的autoDetectRenderer将决定使用canvas绘图接口还是WebGL来显示图像。缺省是WebGL，这是好的，因为WebGL特别的快而且能使用很多引人入胜的特效，这些你都能在本书后面学到。但是如果你想强制使用canvas绘图接口而不是
WebGL，你可以这么写:

renderer = new PIXI.CanvasRenderer(256, 256);

上面的情况只需要头两个参数：宽和高。

你也可以强制使用WebGL渲染器，如下所示：

renderer = new PIXI.WebGLRenderer(256, 256);

现在我们再来看看如何增强渲染器的外表

定制canvas

renderer.view对象只是一个普通平常的5ba626b379994d53f7acf72a64f9b697对象，所以你可以象控制其它任何canvas对象那样控制它，下面的代码给canvas加了一圈虚线边框：

renderer.view.style.border = "1px dashed black";

如果新建canvas之后，你需要改变它的背景颜色，那就给渲染器对象的backgroundColor设置任何十六进制颜色值即可，下面的代码给了一个纯白色的背景：

renderer.backgroundColor = 0xFFFFFF;

提示 网上可以搜索到很多十六进制配色表，你可以很容易选择一个合适的背景色。

如果你想知道渲染器的宽和高，使用renderer.view.width和renderer.view.height即可。

要改变canvas的大小，使用渲染器的resize()方法，然后应用新的宽高值，如下所示：

renderer.resize(512, 512);

如果想让canvas充满整个窗口，你可以使用如下CSS样式：

renderer.view.style.position = "absolute";
renderer.view.style.width = window.innerWidth + "px";
renderer.view.style.height = window.innerHeight + "px";
renderer.viwe.sytle.display = "block";

注意，如果要这么做，你必须还得将所有HTML元素的padding和margin值都设为0， 如下所示：

c9ccee2e6ea535a969eb3f532ad9fe89* {padding: 0; margin:0} 531ac245ce3e4fe3d50054a55f265927

(上面的*号是CSS里的通配选择器，就是指所有标签)如果没有上面这条CSS样式，你可能会发现在Pixi画布与浏览器边缘之间有几像素的空隙。

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

JS模块化-RequireJS

在vue首页怎样做出底部导航TabBar

一个用Vue.js 2.0+做出的石墨文档样式的富文本编辑器

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung von Pixi.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!