はじめに

少し時間がたってしまいましたが,やっと若干の時間が取れそうでしたのでPhaserの勉強を始めました.前回の記事はこちらで,基本的にその続きになります.

そもそもローカルにインストール要らず

前回の記事ではローカルにPhaserをインストールするところから始めましたが,それが不要(どころか入れたメリットがいまのところない)ということがわかりました.index.html内でphaser.min.jsを読み込んでいるのですが,それがローカルのファイルを読んでいないようです.ということで,Phaserのインストール無しで多分良いです.

ただし,もちろんですがインターネットにつながっていない環境では動作しないことになります.もしそうしたくないのであれば,phaser.min.jsをダウンロードしておき,それをプロジェクトの直下にでも置いておけばこの問題も解決できそうです.

まずは一通りプログラムを書いてみる

以前の記事で,あとでよく読んでみると記したサイトを一通り試してみることとしました.ただこのサイトのとおりに行っていくと,sandboxにプログラムを書くような感じだったので,ローカルに同様に動く環境を作りました.まずは新たにフォルダを作成し,こちらのサイトにあるプロジェクトのファイルをダウンロードし,それらを先ほど作ったフォルダに置きます.下の図はその様子を表しています.コードを少し変えたところは,index.html内のscriptのsrcです.元のプログラムの場合,phaserのバージョンが3.60.0になっていたので,これを現時点で最新の3.90.0にしました.おそらく動作に違いはないものと思われます.2025 08 19 093912

チュートリアルを終えて

だいぶ様子がわかってきました.あとはリファレンスがあればなんとかなりそうです.こちらに英語ですがリファレンスがあるので,これを読んでみたいと思います.

作ろうとしているゲームの構想をまとめる

作ろうとしているゲームをまとめて箇条書きします.

  • プレイヤは鳩とし,3回よみがえれる.
  • 敵はカラスと猫で,当たったら死ぬ.
  • カラスは空中を右から現れ水平方向に飛んでいく.垂直方向には変化しない.
  • 猫は地上からジャンプしてくる.
  • 画面は右に向かってスクロールしていく.
  • スクロールしていくとカラスや猫が現れる.
  • 木の上には芋虫(10点)がおり,それを鳩が取ると点数が入る.
  • 地上にはテントウムシ(20点)がおり,それを取ると点数が入る.
  • 1000点ごとによみがえれる回数が増える.
  • 時間がたつにつれてカラスと猫の数が増えていく.

 ひとまずこんな感じで進めようと思います.すでに鳩,猫,カラス,芋虫,テントウムシのアイコンはありますので後は背景と,点数および鳩の蘇り可能数を画面上側に表示する感じでよいのかと思います.

さて,一から作るとなるといろいろ面倒な感じがするので,似たものを改造していくような開発スタイルのほうがコストが少なそうであると思いました.特にスクロールさせる方法がわかったようなわからないような感じです.そこでサンプルを探していたらこちらにあるシューティングゲームにたどり着きました.ちょっと怪しいですがこれを使っていきたいと思います.