Phaser 3で1回なんかつくってみたかったので、ゲームほぼつくったことないボクでも作れそうなスライドパズルを作ってみました。

なぜかこのホームページに…

こちらからあそべます。まあ、ただのスライドパズルなんで普通に時間泥棒。

以下は実装したときのちょいメモと感想。

このページはGatsbyで実装しているんですが、そのへんは割愛します。

既にGatsbyでサイトが構築できているところから最初に

npm install phaser

とりまPhaser入れます。

次にPhaserをインストールしてもGatsbyでビルドできるようgatsby-node.jsに

exports.onCreateWebpackConfig = ({
  stage,
  rules,
  loaders,
  plugins,
  actions,
}) => {
  if (stage === "build-html" || stage === "develop-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /phaser/,
            use: loaders.null(),
          },
        ],
      },
    });
  }
};

Webpackの設定を変更します。

もうあとは普通にPhaserでゲーム実装するだけです。

ひたすらコーディングです。もうこれでもかってくらい。

ゲームじたいの実装は合計でだいたい6時間くらいかかったかな？？

pageコンポーネントでuseEffectからGameインスタンスを生成してstateにセットして…

export default function GamesSlidingPuzzlePage(): JSX.Element {

  useEffect(() => {
    const game = new SlidingPuzzleGame();
    dispatch({
      type: INITIALIZE,
      payload: {
        ...state,
        sceneKey: SceneKey.SLIDING_PUZZLE,
        game: game,
      }
    });
  }, []);

  return (
    <div id="game" className="game"></div>
  );
}

このページはRedux導入しているのでuseStateは今回使っていません。

ちなみにSlidingPuzzleGameクラスはだいたいこんなかんじ。

export default class SlidingPuzzleGame extends Phaser.Game {
  constructor() {
    super({
      type: Phaser.AUTO,
      width: 1280,
      height: 720,
      parent: "game",
      scale: {
        mode: Phaser.Scale.ScaleModes.FIT,
        autoCenter: Phaser.Scale.Center.CENTER_HORIZONTALLY,
        parent: "game",
        zoom: Phaser.Scale.Zoom.MAX_ZOOM,
      },
      backgroundColor: "#000000",
    });
    this.scene.add(SceneKey.PRELOAD, Preload);
    this.scene.add(SceneKey.SLIDING_PUZZLE, SlidingPuzzle);
    this.scene.start(SceneKey.PRELOAD);
  }
}

GamesSlidingPuzzlePageコンポーネントのidがgameのタグにPhaserのCanvasがセットされる感じです。

Phaserを触ってみた所感ですが、めっちゃわかりやすかった。

ゲームプログラミング初めてなのであんま突っ込んだことは言えないですが…

Game > Scene > GameObject ...

と順にオブジェクトを配置していったらそれっぽい画面はい、完成。みたいな。

割と直感的に関数とかが実装されていて、使いたいAPIのリファレンス斜め読みするだけでつくれてしまった。

ただ、実装してておもったのがゴリゴリにステートフルな実装になってしまう感じだったので、ユニットテスト？？どうすんのこれ？？？って感じ。

結構そのあたりしんどいかなと思いました（知らんだけかもしれないけど）

あと、TypeScriptの型がところどころanyになっていてそこはうーん…という感じでした。

ただ、しらべたら現在Phaser 4としてTypeScriptでの開発が進んでいるみたいです。

これはwktk（0゜･∀･）ですね（死語）

とまあ、そんな感じでした。

でもこれ、スマートフォンでちゃんと動くんかな…

重そう…

宣伝！！

PERMAFROST PIN BADGE

いい感じのピンバッジができました。

ワンポイントに割と使いやすいと思うので、ぜひ！