エンジニアリングとお絵描き

お絵描きが趣味のエンジニアが、誰かの為になりそうなことや未来の自分の助けになりそうなことを書き残します．

1日で作れる簡単なWebゲームを作りたい...!

タイトルの通り、１日クオリティのゲームを制作したいと思い至り、作ってみることにしました。

何故1日かというと、取り合えず何か成果物を作ることを最優先にしようと考えたからです。

早速作っていこうと思います。

使用技術

以下、使用技術となります。

  • TypeScript
  • Pixi.js
  • Firebase hosting

hothkurou様(作っちゃうおじさん様)のTypeScript+Pixi.jsで快適なゲーム制作ライフを送ろう！の記事と、サンプルゲームを参考に作成しました。

作成の流れと最初のづまづき

自分はまだまだWeb関連の知識が浅い為、プログラムを書くよりも環境構築等に苦戦すると思い、以下のような流れでゲームを制作することにしました。

  1. サンプルゲームをローカルで実行する
  2. Firebase hosting を 用いてサンプルゲームをhostingして実行する
  3. サンプルゲームを改変していき、オリジナルゲームにする

hothkurou様の記事がとても丁寧であった為、サンプルをローカルで動かすだけならすぐに実行できました。

FIrebase を 用いた hostingは過去に経験があった為、２番目も問題なくできると思ったのですが、Firebaseでhostingする際、サンプルゲームのディレクトリ構造を少しいじる必要があり、相対パスを書き方を正しく理解していなかった自分はここで大きくつまづきました....。

以下、元々のサンプルプログラムのディレクトリ構造です。 (jsonファイル等は省略しました。) 参考：ディレクトリ構成図を書くときに便利な記号

sample_game
    ├dist
    │  └main.js
    ├image
    │  └ball.png
    ├sound
    │  └hit.mp3
    ├typescript
    │  ├create_button.js.map
    │  ├scene_manager.js.map
    │  ├script.js.map
    │  ├create_button.js
    │  ├scene_manager.js
    │  ├script.js
    │  ├create_button.ts
    │  ├scene_manager.ts
    │  └script.ts
    └index.html

Firebase を 用いたhostingを行う際には、公開するディレクトリを選択し、その中にindex.htmlファイルが入っている必要があります。そうなるとindex.htmlで読み込むmain.jsのパスや、script.tsで読み込む画像・音声ファイルのパスも変わります....

結果として以下のような構造に変えたら無事hostingした状態でサンプルを動作させることができました。distディレクトリを公開用に設定しています。(jsonファイル等は省略しました。)

sample_game
    ├dist
    │  ├main.js
    │  ├image
    │  │   └ball.png
    │  ├sound
    │  │   └hit.mp3
    │  └ index.html
    ├image
    │  └ball.png
    ├sound
    │  └hit.mp3
    └typescript
         ├create_button.js.map
         ├scene_manager.js.map
         ├script.js.map
         ├create_button.js
         ├scene_manager.js
         ├script.js
         ├create_button.ts
         ├scene_manager.ts
         └script.ts

上のディレクトリ構造を見ると、distディレクトリの中と外の両方にimage、soundディレクトリがあります...。 絶対正しいやり方では無いと思いますが、こうすることでローカルとhostingしてる際の両方で動作させることができました。

同じファイルを複数の場所に置くなんてあってはならない為、後日調べて解決したいと思います...。 参考:【超初心者向け】Firebaseでハマった落とし穴

1日頑張った成果物

作っちゃうおじさん様のサンプルゲームのコメントがとっても親切だったことと、間違え探しゲームの難易度の低さから、何とか１日でそれっぽい物を作ることができました。

作る時間よりも何を作るか悩む時間の方にやる気と時間を奪われた気がします。

動作のgif画像と、ゲームのリンクです。

f:id:pengin_0_maru:20210321183336g:plain
間違え探しゲーム

また時間を作って改良していきたいと思います。