注意:バージョンについて

以下、関連記事含めてバージョンは 3.24.1 で書かれていますが、Phaser3は積極的にupdateをしているライブラリなので、情報が古くなっている可能性があります。 “自分が使っているものと違うな” と思ったらバージョンの違いを疑ってみてください。

https://mijinc0.github.io/blog/post/20200820_phaser3_about/

html5ゲームフレームワーク Phaser3

html5用ゲームフレームワークのPhaserを使って簡単なゲームを作ったので、内容毎に記事を分けて知見をまとめる。これはその"入り"の記事。

公式サイト
https://phaser.io/

リファレンス
https://photonstorm.github.io/phaser3-docs/index.html

開発元サイト
http://www.photonstorm.com/

記事一覧

とりあえず思い出せる範囲でざっと書いたもの

1.シーン管理
https://mijinc0.github.io/blog/post/20200820_pahser3_scene/
2.遠近の表現 depth(z-index)
https://mijinc0.github.io/blog/post/20200821_phaser3_depth/
3.音を鳴らす
https://mijinc0.github.io/blog/post/20200821_phaser3_audio/
4.タイルマップ
https://mijinc0.github.io/blog/post/20200821_phaser3_tilemap/
5.カメラエフェクト
https://mijinc0.github.io/blog/post/20200821_phaser3_cameraeffects/
6.Loadingシーン
https://mijinc0.github.io/blog/post/20200821_phaser3_loading_scene/

概要

HTML5から新たに追加された要素である<canvas>は、指定した範囲に図形を書いたりイメージを表示したりすることが出来る機能を持つ。

こういった機能が出れば よし、これでゲームを作ろう！ となるのが大宇宙の原則であり、その流れの中で生まれたのが Phaser である。

Phaserはhtml5でゲームを作るためのjavascriptライブラリ、フレームワークである。メジャーバージョンアップが進んでこれを書いている時点での最新がPhaser3。型定義ファイルも付いているのでtypescriptでも書ける。

「ゲームを作ろう」となって最初に候補に入るゲームエンジンはUE4やUnity、もう少し調べるとCocos2dも見つかると思う。 私はこれらは一切触ったことが無いので比較は出来ないが、一般的な話としてPhaser3を使うメリットとしては

• ブラウザという恐らく一般の人が使っているであろうデバイスに必ず入っているプログラムの上で動く、つまりクロスプラットホーム開発が出来る
• js_tsを使うのでWebアプリなどの開発経験があれば知識を流用できる
• 仰々しい(=便利な)総合開発環境を入れなくても、ライブラリ一つで開発が出来る
• ツクールなどの開発環境にリスペクトが持てるようになる

あたりになるかと思う。

開発サイトやチュートリアルは英語だが、Google翻訳先生の力を借りれば読めるので個人的に底は気にしなくても良いかなと思う。

個人的な意見ですが、Phaserは一番面倒な描写廻り、シーン管理、アセットのロード機能など、根本的な機能をライブラリに任せることが出来ながらも、ツクールのように何でもは揃っていないため、程よく自分で色々用意しないといけないという性質から、 “ゲームを作ろうと思い立ったらフレームワークから作ってしまいそうになる人” に最適かなと思っています。

適度に開発欲求を満たしつつ、フレームワークから作る(永遠に作り終わらない)ことを避けることが出来ます。

GettingStarted

“javascriptとかNode.jsとかよく分からない"という人は先にProgate等でそちらの勉強をしたほうが良い。これが無いと、最初のコードを書くところは良いが、そこから少し逸脱した途端に何もわからなくなってむしろ辛い思いをすると思う。

そうでない人は、公式サイトのGettingStartedが親切なのでGoogle先生の力を借りながらそれをやる。

https://phaser.io/tutorials/getting-started-phaser3
http://phaser.io/tutorials/making-your-first-phaser-3-game/part1

親切なのでこれ以上説明することがない。

作ったもの

https://github.com/mijinc0/escape_game

• プレイ人数 : 1人
• プレイ時間 : 5-20分

アイテムを探してイベントが進行する、シンプルな脱出ゲームです。

本当は王道のローグライクやターン制のRPGを作ってみたかったのですが、初めて作るのでもっと簡単なもの、それらから戦闘システムなどを抜き取ったゲーム、ということで脱出ゲームになりました。

開発における参考

リファレンス

https://photonstorm.github.io/phaser3-docs/index.html

開発者のnotes

https://rexrainbow.github.io/phaser3-rex-notes/docs/site/

tilemapの作り方の記事

https://medium.com/@michaelwesthadley/modular-game-worlds-in-phaser-3-tilemaps-1-958fc7e6bbd6

次の記事から、上記 “開発者のnotes” に書かれているような内容を、思い出せる範囲で書いていきます。 作っている途中に知って"最初から知っていれば!“と思ったことがいくつもあります。