メインコンテンツにスキップ
バージョン: v8.x

はじめに

このセクションでは、できるだけシンプルなPixiJSアプリケーションを作成します。その過程で、コードの作成と提供の基本について説明します。

上級ユーザー​

始める前に注意点があります。このガイドは、JavaScriptベースのアプリケーション開発経験がほとんどない、PixiJS開発初心者を対象としています。コーディングのベテランであれば、ここの詳細レベルは役に立たないかもしれません。その場合は、このガイドをざっと読んでから、PixiJSとwebpackやnpmなどのパッカーの使用方法に進んでください。

JavaScriptに関する注意​

最後に一つ注意があります。JavaScriptの世界は現在、従来のJavaScript (ES5) から新しいES6に移行中です。

// ES5
var x = 5;
setTimeout(function() { alert(x); }, 1000);
// ES6
const x = 5;
setTimeout(() => alert(x), 1000);

ES6は、より明確な構文、より優れた変数スコープ、ネイティブクラスのサポートなど、多くの大きな利点をもたらします。現在では、すべての主要ブラウザがES6をサポートしています。そのため、このガイドの例ではES6を使用します。これは、ES5プログラムでPixiJSを使用できないという意味ではありません！"let/const"を"var"に置き換え、短い関数渡し構文を展開すれば、すべて正常に動作します。

PixiJSアプリケーションのコンポーネント​

準備が整いました。それでは始めましょう。PixiJSアプリケーションを作成するには、いくつかの手順が必要です。

  • HTMLファイルを作成する
  • Webサーバーでファイルを提供する
  • PixiJSライブラリを読み込む
  • アプリケーションを作成する
  • 生成されたビューをDOMに追加する
  • ステージに画像を追加する
  • 更新ループを作成する

一緒に見ていきましょう。

HTMLファイル​

PixiJSはWebページで動作するJavaScriptライブラリです。そのため、最初に必要なのは、ファイルにHTMLを用意することです。実際のPixiJSアプリケーションでは、表示を複雑な既存のページに埋め込んだり、表示領域がページ全体を埋め尽くすようにしたりすることができます。このデモでは、まず空のページを作成します。

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <h1>Hello PixiJS</h1>
  </body>
</html>

pixi-testという名前の新しいフォルダを作成し、このHTMLをコピーしてpixi-testフォルダにあるindex.htmlという名前の新しいファイルに貼り付けます。

ファイルの提供​

PixiJSでローカルに開発するには、Webサーバーを実行する必要があります。Webブラウザは、ローカルにロードされたWebページでローカルファイル（画像やオーディオファイルなど）のロードを阻止します。新しいHTMLファイルをダブルクリックすると、PixiJSステージにスプライトを追加しようとするとエラーが発生します。

Webサーバーの実行は複雑で難しいように聞こえますが、この目的にかなうシンプルなWebサーバーが多数あります。このガイドでは、Mongooseを使用しますが、XAMPPまたはhttp-server Node.jsパッケージを使用してファイルを配信することもできます。

Mongooseでページの配信を開始するには、Mongooseのダウンロードページにアクセスし、お使いのオペレーティングシステム用の無料サーバーをダウンロードします。Mongooseはデフォルトで実行されているフォルダ内のファイルを配信するため、ダウンロードした実行ファイルを前の手順で作成したフォルダ（pixi-test）にコピーします。実行ファイルをダブルクリックし、オペレーティングシステムにファイルの実行を許可すると、実行中のWebサーバーが新しいフォルダを提供します。

選択したブラウザを開き、ロケーションバーにhttp://127.0.0.1:8080と入力して、すべてが機能していることをテストします。（Mongooseはデフォルトでポート8080でファイルを配信します。）「Hello PixiJS」と表示され、それ以外は何も表示されません。この手順でエラーが発生した場合は、ファイルにindex.htmlという名前を付けていないか、Webサーバーの設定が間違っています。

PixiJSの読み込み​

Webページを用意して配信しましたが、まだ空です。次のステップは、実際にPixiJSライブラリを読み込むことです。実際のアプリケーションを構築する場合、Pixi GithubリポジトリからターゲットバージョンのPixiJSをダウンロードして、バージョンが変更されないようにします。ただし、このサンプルアプリケーションでは、CDNバージョンのPixiJSを使用します。index.htmlファイルの<head>セクションに次の行を追加します。

<script src="https://pixijs.download/release/pixi.js"></script>

これにより、ページの読み込み時に*縮小されていない*バージョンの最新バージョンのPixiJSが含まれ、使用できるようになります。開発中のため、縮小されていないバージョンを使用します。本番環境では、代わりにpixi.min.jsを使用することをお勧めします。これは、ダウンロードを高速化するために圧縮されており、プロジェクトの構築に役立つアサーションや非推奨の警告は除外されていますが、ダウンロードと実行に時間がかかります。

アプリケーションの作成​

ライブラリを読み込んでも、*使用*しないとあまり意味がないため、次のステップはPixiJSを起動することです。まず、<h1>Hello PixiJS</h1>行を次のようなスクリプトタグに置き換えます。

<script type="module">
  const app = new PIXI.Application();
  await app.init({ width: 640, height: 360 });
</script>

ここで行っているのは、JavaScriptコードブロックを追加し、そのブロック内で新しいPIXI.Applicationインスタンスを作成することです。アプリケーションは、PixiJSでの作業を簡素化するヘルパークラスです。レンダラーを作成し、ステージを作成し、更新用のティッカーを開始します。本番環境では、カスタマイズと制御を追加するために、これらの手順を自分で実行することをお勧めします。これについては、後のガイドで説明します。今のところ、Applicationクラスは、詳細を気にすることなくPixiJSで遊び始めるのに最適な方法です。また、`Application`クラスには、指定されたオプションでアプリケーションを初期化する`init`メソッドがあります。このメソッドは非同期であるため、`await`キーワードを使用して、Promiseが完了した後にロジックを開始します。これは、PixiJSが内部でWebGPUまたはWebGLを使用しており、前者のAPIが非同期であるためです。

キャンバスをDOMに追加する​

PIXI.Applicationクラスがレンダラーを作成すると、レンダリング*対象*のCanvas要素が構築されます。PixiJSで描画した内容を表示するには、このCanvas要素をWebページのDOMに追加する必要があります。ページのスクリプトブロックに次の行を追加します。

  document.body.appendChild(app.canvas);

これにより、アプリケーションによって作成されたキャンバス（Canvas要素）がページの本文に追加されます。

スプライトの作成​

ここまでは準備作業のみを行ってきました。PixiJSに何かを描画するように指示したわけではありません。表示する画像を追加して、これを修正しましょう。

PixiJSで画像を描画するには、いくつかの方法がありますが、最も簡単な方法はスプライトを使用することです。シーングラフの仕組みの詳細は後のガイドで説明しますが、ここでは、PixiJSがコンテナの階層をレンダリングすることだけを知っておけば十分です。スプライトは、ロードされた画像リソースをラップして、描画、スケーリング、回転などを可能にするコンテナの一種です。

PixiJSが画像をレンダリングするには、画像をロードする必要があります。他のWebページと同様に、画像の読み込みは非同期で行われます。リソースの読み込みについては、後のガイドで詳しく説明します。ここでは、PIXI.Spriteクラスのヘルパーメソッドを使用して、画像の読み込みを処理できます。

  // load the PNG asynchronously
  await PIXI.Assets.load('sample.png');
  let sprite = PIXI.Sprite.from('sample.png');

サンプルPNGはこちらからダウンロードして、`index.html`と同じ`pixi-test`ディレクトリに保存してください。

スプライトをステージに追加する​

最後に、新しいスプライトをステージに追加する必要があります。ステージとは、シーングラフのルートとなるコンテナです。ステージコンテナの子要素はすべて、フレームごとにレンダリングされます。スプライトをステージに追加することで、PixiJSのレンダラーに描画するように指示します。

  app.stage.addChild(sprite);

更新ループの作成​

PixiJSは静的なコンテンツにも使用できますが、ほとんどのプロジェクトではアニメーションを追加する必要があります。サンプルアプリは実際には、同じスプライトを1秒間に複数回、同じ場所にレンダリングしています。画像を動かすには、フレームごとに属性を更新するだけです。そのためには、アプリケーションのtickerを使用します。tickerは、フレームごとに1つ以上のコールバックを実行するPixiJSオブジェクトです。これは驚くほど簡単です。スクリプトブロックの最後に以下を追加します。

  // Add a variable to count up the seconds our demo has been running
  let elapsed = 0.0;
  // Tell our application's ticker to run a new callback every frame, passing
  // in the amount of time that has passed since the last tick
  app.ticker.add((ticker) => {
    // Add the time to our total elapsed time
    elapsed += ticker.deltaTime;
    // Update the sprite's X position based on the cosine of our elapsed time.  We divide
    // by 50 to slow the animation down a bit...
    sprite.x = 100.0 + Math.cos(elapsed/50.0) * 100.0;
  });

必要なのは、app.ticker.add(...)を呼び出し、コールバック関数を渡して、その関数内でシーンを更新することだけです。この関数はフレームごとに呼び出され、プロジェクトのアニメーションを駆動するために、移動、回転などを実行できます。

すべてをまとめる​

これで完了です！最もシンプルなPixiJSプロジェクトです！

ここにすべてをまとめています。エラーが発生する場合は、ファイルを確認して一致することを確認してください。

<!doctype html>
<html>
  <head>
    <script src="https://pixijs.download/release/pixi.min.js"></script>
  </head>
  <body>
    <script type="module">
      // Create the application helper and add its render target to the page
      const app = new PIXI.Application();
      await app.init({ width: 640, height: 360 })
      document.body.appendChild(app.canvas);

      // Create the sprite and add it to the stage
      await PIXI.Assets.load('sample.png');
      let sprite = PIXI.Sprite.from('sample.png');
      app.stage.addChild(sprite);

      // Add a ticker callback to move the sprite back and forth
      let elapsed = 0.0;
      app.ticker.add((ticker) => {
        elapsed += ticker.deltaTime;
        sprite.x = 100.0 + Math.cos(elapsed/50.0) * 100.0;
      });
    </script>
  </body>
</html>

動作を確認したら、次は基礎ガイドの残りの部分を読み、これらがすべてどのように機能するかをより深く理解してください。