Phaser3

MDNでチュートリアルがある（やらんけど）

まずはこれから

npm init vite@latest

Viteを使っていく

hbsnow

npm i phaser

phaserのインストール

hbsnow

Hello, worldしてみる

import Phaser from "phaser";

class Example extends Phaser.Scene {
  preload() {
    this.load.setBaseURL("https://labs.phaser.io");

    this.load.image("sky", "assets/skies/space3.png");
    this.load.image("logo", "assets/sprites/phaser3-logo.png");
    this.load.image("red", "assets/particles/red.png");
  }

  create() {
    this.add.image(400, 300, "sky");

    const particles = this.add.particles(0, 0, "red", {
      speed: 100,
      scale: { start: 1, end: 0 },
      blendMode: "ADD",
    });

    const logo = this.physics.add.image(400, 100, "logo");

    logo.setVelocity(100, 200);
    logo.setBounce(1, 1);
    logo.setCollideWorldBounds(true);

    particles.startFollow(logo);
  }
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: Example,
  physics: {
    default: "arcade",
    arcade: {
      gravity: { y: 200 },
    },
  },
};

new Phaser.Game(config);

hbsnow

exampleはここにたくさんありそう

https://labs.phaser.io/

hbsnow

次はこれかな

hbsnow

import Phaser from "phaser";

const preload: Phaser.Types.Scenes.ScenePreloadCallback = () => {};
const create: Phaser.Types.Scenes.SceneCreateCallback = () => {};

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  scene: {
    preload,
    create,
  },
};

new Phaser.Game(config);

hbsnow

setOriginで設置のアンカー位置を変更できる。デフォルトは画像の中央

hbsnow

import Phaser from "phaser";

const screen = {
  width: 1280,
  height: 720,
};

class Scene extends Phaser.Scene {
  preload() {
    this.load.image("background", "assets/background/historic_ruins2.jpg");
  }

  create() {
    this.add
      .image(0, 0, "background")
      .setOrigin(0, 0)
      .setScale(screen.width / 1920, screen.height / 1080);
  }
}

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,
  width: screen.width,
  height: screen.height,
  scene: Scene,
};

new Phaser.Game(config);

背景の表示まで完了

hbsnow

ちなみにz-indexはこれなので、かなり前もって設計しておく必要がありそう（負の値も設定可能）

hbsnow

Partial<CSSStyleDeclaration>

hbsnow

これ便利だなー。裏で動かして前面にUIがあったりするみたいなものはこれかdom使うかの選択ができる

hbsnow

domは設定の変更が必要

hbsnow

parentの設定も必須になってる気がする。ないと動作しなかった

hbsnow

publicのHMR

hbsnow

tailwindを使う場合には設定に content: ["./index.html", "./public/assets/**/*.html"], を追加する

hbsnow

JSXにするとProps渡せて便利ではある……便利ではあるんだがここまでやる必要があるのかという気がする

hbsnow

謎のDOMがあるのはこいつのせいだった

<div style="display: block; width: 1280px; height: 720px; padding: 0px; margin-right: 0px; margin-bottom: 0px; position: absolute; overflow: hidden; pointer-events: none; transform: scale(1, 1); transform-origin: left top;">
  <!-- ↓これ -->
  <div style="z-index: 0; display: block; position: absolute; opacity: 1; pointer-events: auto; mix-blend-mode: normal; transform: matrix(1, 0, 0, 1, 0, 0) skew(0rad, 0rad) rotate3d(0, 0, 0, 0deg); transform-origin: 0% 0%;">
    <div class="flex bg-black h-12 w-full">aaa</div>
  </div>
</div>