初めてphaserでゲームを作りたい時に読みたい記事

## 簡単に良い感じのシューティングゲームを作ってみたい
思いはこちらのスライドに綴っております。
https://www.canva.com/design/DAFTJl_AYJo/Ak4dOh8U2yyl1JMIXoEvHA/view?utm_content=DAFTJl_AYJo&utm_campaign=designshare&utm_medium=link&utm_source=homepage_design_menu


## やること
Githubに公開されているシューティングゲームのソースコードを元にゲーム開発

## こんな人におすすめ
* とりあえず最短で作りたいゲームを作ってみたい人
* 仕組みの理解はとりあえず後でいいやって人
* ちょっとゲーム作ってみたいけどUnity、Unrealとか難しそうと思ってる人


## 完成品
医師が鼻炎の鼻に対し薬で攻撃（治療）します。
花粉症の時期の耳鼻咽喉科の外来はまさに戦場。

https://gyazo.com/e2580f04b32be44084652b69cf1cafc1


## 実装のイメージ

![スクリーンショット 2022-12-17 23.13.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2136520/100c9ab4-a1c5-c7e5-79f1-4ac429b67a41.png)

### はじめに
ゲーム開発未経験者である私としては、ゲーム開発と聞くとUnityやunrealなどでの作成をイメージしました。しかし、「コスパよく、自分の可処分時間に心地よく、作りたいゲームを作る！」ことをまずは考え、なじみのあるjavascriptで書けるツールを探しました。

1. phaser3.js
2. enchant.js
3. phina.js
4. PixisJS
5. CreateJS
6. Three.js
7. p5.js
8. Kiwi.js

この中から、最近でも記事が書かれていて（英語記事が多いですが）、作りたいゲームを作れそうなものを選び、phaser3.jsを触ることにしました。その他、phaserには以下のような利点があリます。

phaser3.jsは特別な開発環境不要
・CDN から 1 JSファイルをロードするだけで使える
・npm でもインストールも可能

![スクリーンショット 2022-12-17 23.12.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2136520/428453d4-2c44-68b7-6b75-1c4672da5ead.png)

### phaser3.jsの触り方

まずは仕組みを知るためにチュートリアルから学ぶ！という方法ももちろんあります。
チュートリアルURL: https://phaser.io/tutorials/making-your-first-phaser-3-game/index
全10回の記事でAPIなどのドキュメントを一切読まなくても読み始められます。

が、、、

チュートリアルには理想の型となりそうなシューティングゲームがなかったので、他の方法で最短ゲーム作りに挑戦。



それはGitHubのリポジトリからすでにどなたかが作成したゲームを、ローカルにcloneしてその中身をVScordでいじる、という方法です。これぞ最短！（ずるい？）

![スクリーンショット 2022-12-17 23.13.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2136520/100c9ab4-a1c5-c7e5-79f1-4ac429b67a41.png)

### 「GitHub」「phaser3」で検索

### GitHubのリポジトリからclone

```
git clone http://リポジトリのurl/プロジェクト名.git
```

こちらはスター●ォーズのゲーム、今回はこちらを自身のパソコンにclone。
コード見てもどこがどうなってるかよくわからないけど、場面の変化、いろんな敵、スコア化まで実装されてる。

https://github.com/phalado/JS-Capstone

![スクリーンショット 2022-12-17 20.46.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2136520/d4680c1a-8328-ebd1-a954-58346fa962cd.png)

これ普通に面白いです。
このゲームに登場するキャラや背景を入れ替えるだけで、それっぽいゲームになるやん。

### ということで、どこに画像が入っているかチェック。

[dist]内の[content]に画像データが保存されていることがわかりました。

![スクリーンショット 2022-12-17 21.03.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2136520/3cedf80f-0775-3628-3846-1084f48b0c19.png)

あとは使いたい画像を見つけて入れ替えるだけ、ということで、、、、
まずはデススターの画像をお医者さんの画像に入れ替えてみました。

![スクリーンショット 2022-12-17 21.09.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2136520/77efea0b-2b92-9b97-885a-761a24057eb9.png)

お医者さんの素材だったのですが、宇宙空間にいるだけでかなり怪しい印象になりますね。
これはいける、と他の敵の機体や、味方の機体も入れ替えちゃえ、ということで、
プレイヤーの機体「Xwing」をお医者さんの画像に変えてみました。

すると何かしらのバグが起きてゲームが動きません。
原因はこれでした。

![スクリーンショット 2022-12-17 21.17.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2136520/0f015cbd-a1c8-be17-c33f-601a1664c799.png)
![スクリーンショット 2022-12-17 21.17.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2136520/8b0c5ccc-4bcc-0290-1062-7fb7973065c4.png)

```
  this.load.image('sprLaserEnemy0', 'content/sprLaserEnemy0.png');
    this.load.image('sprLaserPlayer', 'content/sprLaserPlayer.png');
    this.load.spritesheet('sprPlayer', 'content/xWing.png', {
      frameWidth: 32,
      frameHeight: 37,
    });
```

変更前後の画像でサイズが違ったからでした。
解決策は以下の2つです。

①変更後の画像をオリジナル画像のサイズにfigmaなどで直す。
②もしくはコード上の画像ロード時のサイズ表示を変更後のものにする。

![スクリーンショット 2022-12-17 23.17.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2136520/c4894450-f265-bf70-f834-652661c5d9c6.png)

### 画像入れ替えるだけでそれっぽいゲームの完成
個人的にはオリジナルのゲームのサイズ感の方が心地よく遊べたので、①の方法を取りました。背景、敵機、味方機の画像を用意し、サイズ調整して、入れ替えるだけでできたのが以下のゲームです。

https://gyazo.com/e2580f04b32be44084652b69cf1cafc1