2025.05.31

PhaserでWebゲームを開発するためのテンプレートを作成してみた！

鈴木俊吾（すずしん）

記事内に商品プロモーションを含む場合があります

こんにちは、鈴木俊吾（すずしん）です。

これまで、私は主にスマホゲームアプリを作ろうとしてきました。
ただ、アプリストアに掲載するにあたって、大きな壁となっているのがアプリ審査。
特にiOS版の審査が厳しく、なかなか突破することができません。

「もっと手軽にゲームを作って公開することができないかな？」
「審査無しですぐに公開する方法は無いかな？」
そう考えていた時に、ふと「Webゲームで公開すれば良いんじゃね？」という結論に至りました。

そこで、今後Webゲームを作りやすくするために、JavaScriptのゲーム開発用ライブラリ『Phaser』を使ってWebゲームを作るためのテンプレートを作成してみることにしました。
せっかくなので、読者のあなたにも使ってもらいたい！
というわけで、GitHubに公開して誰でも利用できるようにしています。

今回の記事では、Webゲーム開発テンプレート『Phaser Game Template』の使い方について簡単な解説をしていきたいと思います。
このテンプレートを使えば、誰でもすぐにWebゲーム開発を始められるようになっていますよ。
「手軽にWebゲームを作ってみたい」というあなたにはまさにピッタリ！

もちろん、興味を持っていただけましたよね？
それでは、続きをどうぞ。

Contents

Phaserとは？JavaScriptのWebゲーム開発用ライブラリ！
『Phaser Game Template』の使い方
まとめ：あなたもWebゲーム開発に挑戦してみませんか？

Phaserとは？JavaScriptのWebゲーム開発用ライブラリ！

今回、Webゲーム開発テンプレートを作るにあたって、ゲーム開発用のライブラリとして『Phaser』を採用しています。

『Phaser』というのは、JavaScriptで書かれたWebゲーム開発用ライブラリ。
主に2D向けのWebゲームを開発するのに適しています。
ライブラリの使い方（API）が分かりやすく、プログラミング初心者にも優しい設計になっています。

過去にPhaserでWebゲームを作ったことがあったのですが…。
その際、「これは使いやすいぞ！」という非常に前向きな印象を持ちました。
そこで、「またWebゲームを作るならこれしかない！」ということで、今回も使うことにしたんです。

『Phaser Game Template』の使い方

『Phaser Game Template』の使い方は非常にシンプルです。
私のGitHubのプロジェクトをクローン（コピー）するだけ。
あとは、お好きなようにWebゲームを開発する形になります。
以下に具体的な手順をまとめておきますね。

1. 『Phaser Game Template』をcloneする

まず、『Phaser Game Template』をcloneしてきます。
テンプレートを作成したいディレクトリで、以下のコマンドを実行してください。
この結果、現在のディレクトリに『phaser-game-template』というフォルダが作成されてテンプレートの内容がコピーされます。

git clone https://github.com/suzushin7/phaser-game-template

2. フォルダ名を任意の名前に変更する

『phaser-game-template』という名前をお好きなゲーム名に変更します。
例えば、『Sample Game』という名前にする場合、『sample-game』というようにすると良いと思います。

3. 初期設定を行う

初期設定を行います。
開発に必要なファイル群をインストールします。
また、このままだと、GitのPushする場所が私のテンプレートになってしまうので…。
originを変更して、対象をあなたのプロジェクトになるようにします。
以下のコマンドを実行してください。

cd sample-game
npm install
git remote set-url origin https://github.com/(あなたのid)/(あなたのプロジェクト).git

4. あなたの好きなようにWebゲームを開発する

ここまでで、Webゲーム開発の準備はできました！
『Phaser』を使って、お好きなように自由に作ってください。
とは言え、ここが一番難しいところですよね…。
ちなみに、『Phaser』によるゲームプログラミングに関する記事は、後々書いていく予定。
今後も私のブログに定期的に訪問してチェックしてみてくださいね！