今回は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
