うさこシューティング2026 ~タイムスリップ!?うさこvs身内ノリ集団!?~

https://github.com/NazonoKansatugata/usako_shooting_2026

TypeScript

2006年に作られた伝説のゲームを復活させたかった

Kuroko

ナカウォーーン

daihuku281

推しアイデア

ひたすらシンプルなプロダクトなので、UI/UXぐらいはこだわろうの会

作った背景

ちょうどうさこシューティングが20周年で、リメイク作品を作りたかったから

推し技術

phaserの限界に挑戦しよう!!!

プロジェクト詳細

image

概要

うさこシューティング 2026 は、Phaser 3、TypeScript、Viteで開発しているWebブラウザ向けの2D横スクロールシューティングゲームです。

image

プレイヤーは「うさこ」を操作し、画面右や左から迫ってくる敵をショットで倒しながらステージを進みます。ステージの最後にはボスが登場し、

ゲーム中は画面下部のウィンドウにて、キャラクター同士の会話やイベント演出が挟まることで、遊びながら物語も楽しめる作品になっています。

物語の軸は、2005年から続く「うさこシューティング」の世界に、突然タイムマシンが墜落するところ始まります。うさこたちはよく分からないまま、隕石から現れた謎の存在たちを倒しに向かいます。深刻な世界観説明よりも、身内ネタやメタ演出を交えた軽快なノリを重視しているのが特徴です。

主な機能

横スクロールシューティングの基本プレイ

  • 矢印キーまたはWASDによる自機移動
  • Spaceキーによるショット発射
  • 敵の出現、移動、撃破
  • 敵弾、追尾弾、波形弾など複数タイプの攻撃
  • HP制による被弾管理
  • スコア表示、ステージ進行率表示
  • ゲームオーバー、ステージクリア、全ステージクリア

複数ステージとボス戦

現在はステージ1からステージ3までのステージデータが用意されており、それぞれのステージで敵の出現タイミング、出現位置、移動速度、敵タイプ、ボスHPなどをJSONで管理しています。

ステージ後半にはボスが出現し、通常の雑魚戦とは違う攻撃パターンを持つ専用ボス戦に移行します。ボス撃破時には連続爆発、画面フラッシュ、吸い込まれ演出などが入り、ステージクリアの達成感を演出します。

2人プレイ

1人プレイだけでなく、2人協力プレイにも対応しています。

  • 1Pと2Pで別々の操作体系を使用
  • 1P、2Pそれぞれに専用の見た目・ラベルを表示
  • 2人プレイ時はボスHPを調整
  • 片方が撃墜されても、もう片方が生きていればゲーム継続

協力プレイ時にも画面内の視認性を保てるよう、プレイヤーごとの色やラベルで見分けやすくしています。

image

会話・ストーリー再生システム

本作の大きな特徴は、シューティング中に会話イベントが発生する点です。

会話はステージ進行率やイベントタイミングに応じて再生されます。たとえば、ステージ開始時、進行率が一定値に達したとき、ボス出現直前、ボス撃破後など、ゲームの流れに合わせて自然に会話が挿入されます。

会話中も基本的にはゲームが進行しますが、重要なイベントでは一時的にステージ進行を止めることもできます。これにより、テンポのよい会話と、見せ場としての演出を両立しています。

ステータス強化

敵弾や特殊攻撃を避けながら撃破を目指します。

image

ゲームオーバー時などに獲得したステータスポイントを使い、プレイヤーを強化できます。

  • WEP: 自機弾の見た目と当たり判定が大きくなる
  • STR: 移動速度が上がる
  • DEF: 最大HPが増える
  • DEX: 被弾後の無敵時間が伸びる

ステータス画面は「ケロコガレージ」として実装されており、プレイヤーが自分のプレイスタイルに合わせて機体を育てられるようになっています。2人プレイ時には、1Pと2Pを個別に強化できます。

タイトル・オプション・記録機能

ゲーム本編以外のUIも一通り用意されています。

  • タイトル画面
  • 1人プレイ / 2人プレイ選択
  • 遊び方表示
  • ハイスコア、クリア状況の記録表示
  • 難易度設定
  • BGM / SE / ボイス音量調整
  • キーコンフィグ確認
  • クレジット表示
  • おまけ視聴
  • セーブデータ削除

設定や記録は localStorage に保存されるため、ブラウザ上で手軽にプレイしながら進行状況を残せます。

image

使用技術

Phaser 3

ゲームエンジンには Phaser 3 を採用しています。Arcade Physicsによる当たり判定、シーン管理、スプライト、サウンド、Tween、カメラエフェクトなどを活用し、ブラウザ上で軽快に動く2Dシューティングを構築しています。

TypeScript

実装言語には TypeScript を使用しています。プレイヤー、敵、ボス、ステージデータ、会話データなどに型を定義することで、ゲーム要素が増えても安全に拡張しやすい構造にしています。

Vite

開発環境には Vite を採用しています。起動が速く、ブラウザで確認しながらゲームを素早く改善できるため、ステージ調整やUI演出の確認に向いています。

JSONによるデータ管理

ステージ構成や会話内容はJSONファイルとして管理しています。コードを直接変更しなくても、敵の出現パターンや会話イベントを追加・調整しやすい設計です。

技術的なこだわり

ゲーム本体とコンテンツの分離

ステージ進行、敵出現、会話イベントなどをデータ化し、ゲーム本体の処理とコンテンツを分離しています。

たとえば敵の出現は stage01.json などのステージデータで管理され、出現時間、位置、速度、敵タイプを指定できます。会話も stage01.json などのシナリオデータとして独立しており、ストーリー担当が会話を追加しやすい構成です。

この設計により、ゲームロジックを壊さずにステージや会話を増やせます。複数人で作業する場合にも、担当領域が分かれやすい点が強みです。

Factoryと継承による敵・ボスの拡張

敵は EnemyFactory を通して生成されます。三角、丸、四角、星、直進射撃型、高速突入型など、敵タイプごとにクラスを分けながら、生成処理は共通化しています。

ボスも共通の Boss 基底クラスを持ち、HP管理や被弾処理などの共通部分と、ステージごとの攻撃パターンを分離しています。新しい敵やボスを追加しやすく、ゲーム内容を増やすための土台が整っています。

オブジェクトプールによるパフォーマンス配慮

弾や敵のように頻繁に生成・削除されるオブジェクトは、PhaserのGroupを使って再利用する構成になっています。

通常弾、敵弾、追尾弾、波形弾、ボス弾などを用途ごとに分けて管理し、不要な生成コストを抑えています。特にボスの弾幕のように大量の弾が出る場面でも、安定して動かすための工夫です。

会話とゲーム進行の制御

会話イベントには、通常の進行率連動会話と、ステージ進行を止めるイベント会話があります。

軽い会話はゲームを止めずに表示し、ボス登場前やボス撃破後などの見せ場では、会話が終わるまで進行を止めることができます。これにより、アクションのテンポを崩さず、必要な場面では演出をしっかり見せられます。

セーブ・設定の永続化

ハイスコア、クリア状況、難易度、音量設定、ステータス強化状況などは localStorage に保存されます。

ブラウザゲームとして追加のサーバーを必要とせず、プレイヤーの進行を維持できるのが利点です。データ削除機能も用意されているため、初期状態に戻して遊び直すこともできます。

UI/UXの良い点

ゲーム画面と会話UIの両立

画面上部をプレイエリア、下部をコックピット風の会話・情報エリアとして分けています。

下部UIには、機体ステータス、タクティカルスキャナー、システムログ、ステージ進行バーなどが表示され、シューティングの邪魔をせずに世界観を補強しています。会話が発生すると同じエリアにメッセージが表示されるため、プレイ画面を大きく隠さずにストーリーを読めます。

操作が分かりやすいメニュー

タイトル、オプション、ステータス画面は、キーボード操作とマウス操作の両方に対応しています。選択中の項目は色やサイズ、背景で強調され、現在どこを選んでいるかが分かりやすくなっています。

また、各メニュー項目には説明文が表示されるため、初めて触る人でも迷いにくい構成です。

演出で気持ちよさを作る

ボス撃破時の連続爆発、カメラシェイク、フラッシュ、フェード、吸い込み演出など、イベントごとの「気持ちいい瞬間」を作るための演出が細かく入っています。

タイトル画面のロゴアニメーション、流れる星、難易度「難」選択時の燃える表示、ステータス画面のネオン風点滅など、メニュー画面にも動きがあり、ゲーム全体に手触りがあります。

やられても成長する設計

ゲームオーバーになってもステータスポイントを獲得できるため、失敗が完全な無駄になりません。プレイヤーは次の挑戦に向けてWEP、STR、DEF、DEXを強化でき、繰り返し遊ぶモチベーションにつながります。

シューティングが得意な人は攻撃や速度を伸ばし、苦手な人はHPや無敵時間を伸ばすなど、遊び方に合わせた調整ができる点も良いところです。

このプロダクトの魅力

うさこシューティング 2026の魅力は、昔ながらの横スクロールシューティングの分かりやすさに、会話劇、メタネタ、成長要素、協力プレイを重ねているところです。

ゲームとしては、敵を撃ち、弾を避け、ボスを倒すというシンプルな気持ちよさがあります。一方で、ステージ中の会話や「2026」と書かれた隕石をきっかけにしたストーリーによって、ただのアクションゲームではなく、部内のネタや制作の文脈を含んだ作品になっています。

Kuroko

@Kuroko