ゲームプログラミングレシピ集

2Dゲームライブラリpixi.jsのインストール方法と簡単な使い方

javascript

pixi.js

こんにちは。継続の錬金術士なおキーヌです。

ブログ毎日更新は93日目になります。

pixi.jsは2Dゲームライブラリと書きましたが、ゲームだけに限らずHTML5で
インタラクティブなコンテンツを作ることが出来るライブラリになります。

今回はゲームに絞って行きたいのでゲームライブラリと表現させていただいています。

ゲーム作り入門者向けのpixi.js講座は全4回になります。

この記事の内容
pixi.jsのインストール
ゲームを作る準備をする

何はともあれpixi.jsをインストールする

pixi.js インストール

javascriptなのでpixi.jsというファイルをダウンロードして読み込むか
node.jsでnpmやyarnを使ってインストールする方法があります。

node.jsを使う方法は少し解説が複雑になってしまうので
今回はシンプルにpixi.jsを体験してみようということでファイルをダウンロードする方法で解説します。

pixi.jsをダウンロードする

現在の最新バージョンがv5となっていますが、新しく出て色々変化していて情報も少ないので
安定しているv4のpixi.jsを使っていきましょう。

pixi.js v4 公式ページはこちら

DownloadからGithubのページに飛んでライブラリを直接ダウンロードしてもらっても大丈夫ですが
実はCDNでダウンロードせずとも使用することが出来ますので、今回の解説はCDNを使って行きたいと思います。

オフラインでやりたいという人はダウンロードしてきてもらった方が良いかもしれません。

pixi.jsをHTMLに読み込む

まずはpixi.jsを使うためにhtmlを用意しましょう。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>pixi.js v4 テスト</title>
    <style>
      * { margin:0; padding:0; }
    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>
  </body>
</html>

これで準備は完了ですが、このままでは何もスクリプトを書いていませんので付け加えていきましょう。

pixi.js v4 のステージを用意する

pixi.jsではステージというものを作ってその中でゲームを作っていく形になります。

言葉では少し伝わり辛いので、さっそくステージを表示させてみましょう。

~~~省略~~~
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>
    <script>
      // pixi.jsのアプリケーションを作成
      const app = new PIXI.Application();

      // bodyにpixi.jsのview(ステージ)を追加する
      document.body.appendChild(app.view);
    </script>
  </body>
</html>

保存してブラウザでHTMLを読み込んでみると、黒い四角がブラウザ上に現れたと思います。

ステージに矩形を表示

これだけだと何もできませんので、この黒いステージの中に四角を表示してみましょう。

スクリプト増えてくるので、省略していますが続きで書いてくださって構いません。

どこに追記するかをわかりやすくするため前後のコードは残しておきます。

~~~省略~~~
    <script>
    ~~~省略~~~
      // bodyにpixi.jsのview(ステージ)を追加する
      document.body.appendChild(app.view);

      // グラフィックオブジェクトの作成
      const square = new PIXI.Graphics();
      // グラフィックオブジェクトの設定
      square.width = 100;     // 横幅の設定
      square.height = 100;    // 縦幅の設定
      square.x = 50;          // 横座標の設定
      square.y = 50;          // 縦座標の設定

      // グラフィックオブジェクトの塗りつぶし設定
      square.beginFill(0xff00ff);    // 指定の色で塗りつぶし開始準備
      square.drawRect(0,0,100,100);  // 矩形を描写する
      square.endFill();              // 塗りつぶしを完了する

      // ステージに追加する
      app.stage.addChild(square);

</script>

さっそく実行してもらうとわかるのですが、紫色の四角が画面上に現れたと思います。
これだとまだゲームっぽくないですよね。

矩形をランダムに動かしてみる

次にこの四角をランダムに動かしてみましょう。
ランダムに動かすには、乱数を発生させるという方法が浮かびますが
それだけでは開始時の位置がランダムになるだけです。

常に動き回ってほしいのですが、その前にゲームループという概念を理解する必要があります。

Webプログラミングばかりしているとあまり慣れない処理なのですが
ゲームを作るときには常識なので覚えておいてほしいです。

ゲームループとは、基本的には1秒間に60回分処理を行います。

よくFPS60とかFPS30とか聞いたことはありませんか？

First Person Shooterではなく、Frames Per Secondの略です。

つまり、1秒間に何回画面が更新されるかという意味になります。

例えばプレイヤーの座標xが0の時に+1をしていく場合、60回動くとx=60となりますね。
+1ずつ画面が更新されるので、滑らかに移動しているように見えます。

FPSについて解説していたら長くなるので、一旦ここで切ります。

それではゲームループを実装して、その中で矩形をランダムに動かしてみましょう。

~~~省略~~~
    <script>
    ~~~省略~~~
      // ステージに追加する
      app.stage.addChild(square);

      // ゲームループを実装
      app.ticker.add(delta => this.gameloop(delta,square));

      // ゲームループで動かす関数
      function gameloop(delta, square) {
        // ０～３の乱数を発生させてswitchで条件分岐
        switch(Math.floor( Math.random() * 4 )) {
          case 0:
            square.x += 20;
          case 1:
            square.x -= 10;
          case 2:
            square.y += 15;
          case 3:
            square.y -= 10;
        }
      }

</script>

解説はコメントを見てもらうとわかります。

実行してみると四角があらぶっていると思います。

──キー操作までやりたかったのですが、
ちょっと体調がよろしくなくなってきたのでここで中断します。

次回は「【pixi.js】キー入力処理を作って四角を動かしてみよう」です。

それでは

関連記事