Pixi.js の使用の概要

今回はPixi.jsの使い方についてまとめてみます。実際に使用する際の注意点を紹介します。

Pixi.js は、JavaScript で書かれた 2D レンダリング エンジンで、ブラウザーでインタラクティブなグラフィック、アニメーション、ゲームなどの「リッチ ビジュアル」アプリケーションを作成するために使用できます。これは、ハードウェア GPU レンダリングをサポートする WebGL API に焦点を当てています。ブラウザは WebGL をサポートしていないため、Pixi はレンダリングのために HTML5 Canvas に戻ります。 Pixi は主に画像のレンダリングを担当します。たとえば、Web ゲームの開発に使用される Phaser フレームワークは、他の多くの関数を自分で作成するか、他のライブラリで使用する必要があります。以下のコンテンツは、書籍「Pixi.js を学ぶ」から抜粋したものです。Pixi を試してみることができます。

注: この例の JavaScript は ES6 を使用しており、var は let になり、function(){} は () => になります。

スプライトの作成

Pixi の基本的な構築モジュールは、スプライトと呼ばれるオブジェクトです。スプライトはコードで制御できるグラフィックです。 位置、サイズ、その他のプロパティを制御して、インタラクティブでアニメーション化されたグラフィックを作成できます。 Pixi の使い方を学ぶとき、スプライトの作成と制御の方法を学ぶことが実際に最も重要なことです。スプライトの作成と表示の方法を知っていれば、ゲームやその他のインタラクティブなプログラムの作成を始めるまであと少しです。

この章では、Pixi の Canvas でスプライトを表示および配置するために必要な次のような重要な知識を学びます:

ステージ (ステージ) と呼ばれるルート コンテナ (ルート コンテナ) の作成方法

作成方法新しいレンダラー (レンダラ)

ローダーを使用してグラフィックスを Pixi のテクスチャ キャッシュにロードします

タイルセットとテクスチャ アトラスを含むロードされたグラフィックスを使用してスプライトを作成します

スプライトの作成を始める前に、長方形のような画面用のスプライトを作成しましょうそれらを表示します。

レンダラーとステージを作成する

Pixiには表示画面を作成するためのレンダラーオブジェクト(レンダラー)があります。 HTML 要素が自動的に生成され、キャンバスに画像を表示する問題は解決されますが、stage と呼ばれる別の Pixi コンテナ オブジェクトを作成する必要があります (コンテナ オブジェクトが何であるかはわかりますので、ご心配なく)それはすぐにわかります）なぜそれらが必要なのか）。このステージ オブジェクトは、Pixi で表示する必要があるものをすべて表示するルート コンテナとして使用されます。以下は、レンダラーとステージを作成するコードです。HTML ドキュメントの <script> タグの間に次のコードを追加します</script>:

//レンダラーを作成する let renderer = PIXI.autoDectectRenderer(256, 256) );//キャンバスを HTML document に追加します。 Canvasdocument.body.appendChild(renderer.view);//「ステージ」と呼ばれるコンテナ オブジェクトを作成します。 Let stage = new PIXI.Container();// 「ステージ」を「レンダリング」する「レンダラー」 ステージをレンダリングするようにレンダラーに指示します renderer.render(stage);

これは、Pixi コードの使用を開始するために必要な最も基本的なもので、 256ピクセルのサイズこれは、Pixi にコンテンツの表示を開始させることが最初であり、最も重要なステップであるためです。そのため、このコードが何を行うのかを詳しく見てみましょう。

レンダリング オプション

Pixi の autoDetectRenderer メソッドは、利用可能なステータスに基づいて画像のレンダリングに Canvas API を使用するか WebGL を使用するかを自動的に選択します。

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

上記のコードの最初と二番目のパラメータは、それぞれキャンバスの幅と高さを表します。 ただし、追加の値を設定するために 3 番目のオプションのパラメーターを追加することもできます。この 3 番目のパラメーターは、レンダラーのアンチエイリアス、透明度、解像度を設定する例です。 3 番目のパラメータはオプションです。Pixi のデフォルト値に満足している場合は、通常は変更する必要はありません。ただし、これらの設定が何に使用されるかを理解しておくことが最善です。アンチエイリアスはフォントやグラフィックのエッジを滑らかにすることができます (WebGL のアンチエイリアスはまだすべてのプラットフォームで利用できるわけではないため、アプリケーション プラットフォームでこの機能をテストするのが最善です)。透明度オプションを使用すると、キャンバスの背景が透明になります。解像度オプションを使用すると、さまざまな解像度とピクセル密度を簡単に一致させることができます。これを 1 に設定すると、ほとんどのプロジェクトに対応できます。解像度の一致の詳細については、第 6 章を参照してください。

ヒント このレンダラには、preserveDrawingBuffer と呼ばれる別の 4 番目のオプションがあり、デフォルト値は false です。これを true に設定する必要があるのは、WebGL コンテキストで Pixi 特別なメソッド dataToURL を呼び出すときだけです。 Pixi キャンバスを HTML 画像オブジェクトに変換する必要がある場合は、これを行う必要がある場合があります。

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

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

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

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

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

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

定制canvas

renderer.view对象只是一个普通平常的对象，所以你可以象控制其它任何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， 如下所示：

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

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

相关阅读：

JS模块化-RequireJS

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

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

以上がPixi.js の使用の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。