【ブラウザゲーム】Webブラウザで遊べるミニゲームを作ってみました【Phaser】
Webブラウザで遊べるミニゲームを作ってみました。まだあたたかいうちに、開発周りの備忘録を残したいと思います。
あいちゅタワー
↑↑の画像をタップでゲームに飛べます↑↑
プラットフォーム
Windows, macOS, iOS, Androidなどで動作するモダンWebブラウザ
ジャンル
対象年齢
全年齢
構成
システム
- フロントエンド
- TypeScript
- Phaser
- Webpack
- バックエンド
- Node.js
- Express
- Docker
- Azure Kubernetes Service
- Azure Blob Storage
画像
- 基本的にPhotoshopでがんばって作成
- 砂浜の貝殻とヒトデの画像はフリー素材サイトより拝借
音楽
- フリー素材サイトより拝借
フリー素材の拝借元は、整理でき次第掲載させていただきます。
開始当初(2021年7月末頃)のいろいろ
開発者の状態
- Webのフロントエンド～バックエンド経験あり
- 最近はバックエンドメイン
- なんか個人でゲームとか作りたい
- でも、どういうゲームをどうやって作るのが良いんだろう...？
イマドキは、Unityなどの高性能ゲームエンジンもあります。が、作り方や人気のゲームなどを調べていくうちに、インストール不要のブラウザゲームを作りたくなりました。ちょうど、開発者Web周りの経験がありますので、以下のようなゴールを設定しました。
ゴール
作るゲームジャンルの選定～プロトタイプの完成まで
とにかくシンプルで、早くリリースできるジャンルを選ぼうと思いました。そこで、今回は2Dの積みゲー(って正式に呼ぶのかは謎)のミニゲームにしました。具体的には、どう〇つタワーなんちゃらみたいなやつですね。
少なくとも、物理エンジンがすでに存在しているのを認知していたので「もしかして、俺がやることって画像作るくらいじゃね？」という甘い考えをしていました。途中までは。
実際、今回採用したゲームフレームワークのPhaserにも、物理エンジンが搭載されていて衝突判定も拾えました。なので、作り始めた段階では「いやぁーもうこれは本当に、あとは画像作って入れ込んで微調整するくらいだけでは！すまぬ！」という感じでした。ええ、途中までは...。
進めていくうちに、まず衝突判定のために、カスタムシェイプが必要と気づきました。オブジェクトの形が四角や三角なら必要ないんですが、独特の形をしていたためです。さすがに、ベクター画像用意するだけという訳にはいかず。これはまあわかる。でも、カスタムシェイプだとスプライトを回転させてもシェイプが回転してくれない。嘘でしょ？
とまあそんな感じで、各種ハマりポイントを踏み抜き、プロトタイプがようやく完成しました。まあようやくと言っても、ゲームのプロトタイプ自体は作業した日を足すと数日でしたので、その後を思うと、素晴らしく順調だったと言えます。
気持ち的には、性懲りもなく「よし、もうあとは微調整してリリースするだけ！すまぬ！爆速で大人気ゲームを作ってしまい、すまぬ！」という感じでした。
止まらない妄想～夢から覚めるまで
数日でプロトタイプ！までは良かったんですが、その後は延々とひとりでぐるぐるしていました。特に最初にリリースするものというのもあり、気合が入ってしまったのかもしれません。
何にぐるぐるしていたかと言いますと、ルールや機能の見直しです。
例えば
- ステージを作って、冒険していく感じにもしたい
- ちゃんとエンディングとかあったほうが良いかも
- ランキングとかで、他のプレイヤーの様子を可視化したい
- ランキングやるなら、SNS連携もしたい
- アイテムやボーナスポイントを設けて、やりこみ要素を増やしたい
- 課金要素も欲しい
- オンライン対戦モードも欲しい
など、もう完全に「ミニゲーム」とは何だったのか、という感じに。笑
そして、作って試してみるにしても、思うようなペースで進捗出せなかったり。やっと試せるようになっても、微妙な感じで不採用だったり。
7月末に作り始めて、8月半ばにプロトタイプができていたはず。それが、気づいたら9月末なんですよ。「このままじゃ一生完成しないんじゃないか」と怖くなりましたよね。急に語り掛けてしまいすみません。でも、ここでようやく、長い夢から覚めて現実を見始めました。
いろいろ削ぎ落す～リリースまで
実装しかけていた妄想機能は、ひととおり削ぎ落としました。そして、残りは微調整のみとし、リリース優先に舵を切りました。
これからのことも踏まえ、Webpack, CI/CD, TLSなどの設定などを経て...。そして...10月にようやく公開に至りました...！
そんな感じで、とにかくリリースできて良かったです。
周り道したのもあってか、やたら感慨深さがあります。あとは、どなたかプレイしてみていただけますと...🥺
↑↑の画像をタップでゲームに飛べます↑↑
全体をふりかえって
良かったこと
- とにかく1つ目が形になった
- シンプルなゲームにできた
- 登場するキャラクターやグラフィックが可愛くなった(自分で言うことか？)
イマイチだったこと
- 最終的には削る余計な機能を入れてしまったり、脇道に逸れすぎた感がある
- 本業が忙しかったりで、思ったように時間が取れなかった
- このゲーム超おもしろい！みたいな要素が思いつかなかった(そんなもの滅多に思い浮かばないかもですが)
所感
簡単なミニゲームでも、いざ自分で作って公開するのは苦労しました。でも楽しかったです！(小並感)
今回せっかくある程度環境が整ったので、隙あらば新作も開発していきたいと思います！
※開発初期のキャラクター
