PixiJSでブラウザゲーム 01基本編

PixiJSという2D WebGLレンダリングライブラリを使い、HTMLでブラウザゲームを作る「基本」のメモです。

サンプルコードでは、ゲーム画面を作成し、ゲーム画面内でキャラアイコンをアニメーションさせています。

目次:

PixiJSでブラウザゲーム 01基本編
前提
サンプルコード
実行
ひとこと

前提

PixiJS v5.2.1

サンプルコード

01-animation.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>アニメーション</title>
</head>

<body>
  <div>
    <button class="btn btn-primary" onclick="play(event)">アニメ再生</button>
    <button class="btn btn-primary" onclick="stop(event)">アニメ停止</button>
    <button class="btn btn-primary" onclick="change(event)">一瞬猫化</button>
  </div>
  <div id="game"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.1/pixi.min.js" integrity="sha256-LzClwveZCCIyst3+wITowZNFFwZnm5NZKeNUkSmuAEI=" crossorigin="anonymous"></script>
  <script type="text/javascript">
  // pixiアプリケーションのインスタンスを生成
  const pixiApp = new PIXI.Application({
    width: 512,
    height: 512,
    antialiasing: true,
    transparent: false,
    resolution: 1
  });

  let gameScene; // ゲームシーン
  let dungeon; // ダンジョン背景
  let anim1; // キャラアイコン

  // #game要素にpixiApp.view追加
  document.querySelector("#game").appendChild(pixiApp.view);

  PIXI.Loader.shared
    // リソースを登録
    // 第一引数は任意のキー、第二引数は実体パス
    .add("chara-1", "https://i.imgur.com/JNGbC6F.png")
    .add("chara-2", "https://i.imgur.com/H9smyaD.png")
    .add("chara-3", "https://i.imgur.com/xT6FStW.png")
    .add("explorer", "https://i.imgur.com/rWus6RK.png")
    .add("cat", "https://i.imgur.com/Fk2JkI5.png")
    .add("dungeon", "https://i.imgur.com/EzpxVBZ.png")
    .load(setup);

  //This `setup` function will run when the image has loaded
  function setup(loader, res) {
    // ゲームシーンを作成
    gameScene = new PIXI.Container();
    pixiApp.stage.addChild(gameScene);

    // ダンジョン作成(ここで画面の大枠サイズを確定)
    dungeon = new PIXI.Sprite(PIXI.utils.TextureCache["dungeon"]);
    gameScene.addChild(dungeon);
    // アニメーションを作成してシーンに追加
    anim1 = createAnim([
      "chara-1", // chara-1
      "chara-2", // chara-2
      "chara-3", // chara-3
    ]);
    anim1.x = (gameScene.width / 2) - anim1.width;
    anim1.y = (gameScene.height / 2) - (anim1.height / 2);
    anim1.vx = 0;
    anim1.vy = 0;
    anim1.play();
    gameScene.addChild(anim1);
  }

  /**
   * アニメーションスプライトオブジェクトを作成
   * @param  {Array<String>} imgs - imageパスの配列
   * @param  {Object} opts - [OPTIONAL] オプション @see PIXI.extras.AnimatedSprite
   * @return {AnimatedSprite}
   */
  function createAnim(imgs, opts) {
    const textureArray = [];
    for (let i = 0; i < imgs.length; i++) {
      let texture = PIXI.Texture.from(imgs[i]);
      textureArray.push(texture);
    };
    const animatedSprite = new PIXI.AnimatedSprite(textureArray);
    animatedSprite.animationSpeed = (opts && opts.animationSpeed) ? opts.animationSpeed : 0.1;
    return animatedSprite;
  }

  /** anim1停止 */
  function stop(e) {
    anim1.stop();
  }

  /** anim1再生 */
  function play(e) {
    anim1.play();
  }

  /** anim1一瞬猫化 */
  function change(e) {
    // アイコンの位置を取得
    const x = anim1.x;
    const y = anim1.y;
    // アイコンを非表示
    anim1.visible = false;
    // 猫アイコンを取得
    const sprite = new PIXI.Sprite(PIXI.utils.TextureCache["cat"]);
    // 猫アイコンの位置をセット
    sprite.x = x;
    sprite.y = y;
    // 猫アイコンをゲームシーンに追加
    gameScene.addChild(sprite);
    // 1秒後に猫アイコンを壊して元のアイコンを再表示
    setTimeout(() => {
      sprite.destroy();
      anim1.visible = true;
    }, 1000)
  }
  </script>
</body>

</html>

TIP: 画像読込で403エラー
ローカル環境だと画像の読み込みで403エラーが出る場合があるかもしれませんが、これはimgur.comが 127.0.0.1 からのアクセスを許可していないためです。403エラーが出た場合は127.0.0.1以外のURL(例えば http://localhost/ や http://<グローバルIPアドレス>/ など)でアクセスしてみてください。

実行

ひとこと

なんとなく2Dゲームっぽいガワが出来ました。次回はゲームシーンの切り替えを実現してみたいと思います。

宣伝: PixiJSを使ったブラウザゲーム開発なら田中ソフトウェアラボにご相談ください！