風の妖術士が、桜の舞う社で妖怪の群れを祓う。そんな和風3Dアクション「幻妖ジパング — 風纏いの章」を、UnityとBlender、AIとの対話を使って制作し、ブラウザで遊べる形にしました。主人公は白銀の髪を持つ風属性の妖術士「紗夜」。舞台は「風鎮めの社」の1か所です。
この記事では、遊び方に加えて、実際に起きた「キャラが地面に埋まる」問題をどう直したか、風や桜の表現をどう調整したか、Windows版をWeb版へ持っていく際に何を確認したかを紹介します。掲載画像はイメージイラストではなく、制作したゲームのスクリーンショットです。
2026年9月10日公開の初期版をもとにした制作記録です。初回公開後、同日にスマートフォン・タブレット用のタッチ操作を追加しました。PCのキーボード・マウス操作も引き続き使えます。
最初に決めたのは「1人・1ステージ・ボス1体」
出発点は、妖術士の属性ごとに異なる技を使い、多数の妖怪を相手にするゲームでした。ただ、最初から複数キャラや広いマップを作ると、移動・攻撃・カメラの基本を確かめる前に作業が膨らみます。今回は風属性の紗夜だけを用意し、境内で90体を討伐すると大妖怪「禍津鬼」が現れ、倒せばクリアという区切りにしました。
小さくしたのは、試す回数を増やすためです。開始、戦闘、ボス、勝利、敗北、再挑戦までが一周できれば、どの場面で操作が止まるか、画面が読みにくくなるかを具体的に確認できます。新しいゲームを作るときも、まず「どこから始まり、何をしたら終わるか」を1本つなぐと、次に直す場所を見つけやすくなります。
最初の一戦は、連撃・回避・竜巻を順に試す
- 「ブラウザで遊ぶ」を押し、読み込み後にEnterまたは「社へ向かう」で出陣します。
- WASDで移動。Jまたは左クリックの長押しで、三段の風刃連撃を出せます。
- 妖怪の攻撃前に地面へ出る朱い予兆から、Spaceの回避「風渡り」で離れます。
- 敵が集まったらEで竜巻「翠嵐」。風霊が100%になったらQで奥義「風天・千刃ノ舞」を使います。
- 90体討伐後に現れる禍津鬼を倒せばクリア。Pで一時停止、Mで音を切り替えられます。
通常攻撃は近くの相手へ向きを合わせるようにしています。まずは正確な照準よりも、敵との距離と攻撃予兆を読むことを優先してみてください。重く感じる場合は「画質：軽量」へ切り替えられます。
キャラが地面に埋まった原因は、位置だけではなかった
制作途中で、主人公が地面に埋まって見える問題がありました。見た目だけで判断すると、Y座標を上げればよさそうに見えます。しかし今回の主な原因は、Blenderから読み込んだFBXが持つ座標軸の変換を、移動用の回転で上書きしていたことでした。
Blenderで組み立てたモデルをUnityへ渡すと、モデルの向きを合わせるための回転が読み込み時に入ります。その同じオブジェクトへ「進行方向を向く回転」を設定すると、本来残すべき変換まで失われることがあります。そこで、ゲーム内を動かす親と、読み込んだ見た目を保持する子を分けました。
PlayerRoot：移動・進行方向の回転
└─ VisualFBX：読み込み時の軸変換を保持
└─ 体・髪・衣装などの見た目さらに、モデル全体を囲む範囲の一番下を調べ、足元が石畳の少し上に来るように調整しました。頭が腰より上にあるか、身長が想定範囲に収まるか、モデルの下端が地面と合うかも検証しています。
持ち帰れるポイント：キャラが倒れる、沈む、妙な方向を向くときは、位置の数値だけでなく「読み込み時の変換」と「ゲーム中に更新する変換」が同じ階層に混ざっていないか確認する。今回の修正は、その切り分けで解決しました。
風を派手にするときほど、敵と地面を見えるままにする
ステージには鳥居、社殿、灯籠、池、遠景の山、桜を配置しました。紗夜の白い髪や翡翠色の装飾が背景から見分けられるよう、青い環境光と暖色の光を組み合わせています。風は薄い軌跡、螺旋、足元の輪、細かな粒を重ねて表現しました。
調整で難しかったのは、エフェクトを増やすほど戦いやすくなるわけではないことです。太く明るい線が画面を覆うと、敵の姿や朱い攻撃予兆が隠れます。風の線を細くし、表示時間を絞り、奥義の演出中と通常戦闘を分けて確認しました。ダメージ表示や操作ヒントも、明るい石畳の上で読めるよう背景や影を調整しています。
桜も、形の細かさだけを増やす方法から、花の抜ける部分を持つ軽い面を組み合わせる方法へ変更しました。近くのキャラだけでなく、遠景の装飾や半透明の重なりも負荷に関わります。スクリーンショットで配置を見て、動かして負荷を見て、両方で判断する工程が必要でした。
ブラウザ公開で確認した3つのこと
1．日本語を、作業用PCのフォントに頼らない。手元で読める文字でも、別の端末で同じフォントを使えるとは限りません。今回はOFLライセンスのNoto CJKから、ゲームで使う文字を含むフォントを同梱しました。新しい台詞や操作表示を足したときは、その文字がフォントに含まれるかを再確認する必要があります。
2．ファイルを置くだけでなく、URLから起動する。UnityのWeb版は、HTML、JavaScript、WebAssembly、ゲームデータなどをまとめて配信します。今回は圧縮とブラウザ内での展開を使い、公開用のゲームと一覧更新を合わせて約13MBにまとめました。HTMLを直接ダブルクリックする方法ではなく、ローカルのHTTPサーバーと、実際の公開URLの両方で確認しています。
3．画面の外側の操作もそろえる。休止、画質、音、全画面のボタンをWebページにも置き、ゲーム内の状態と表示がずれないようにしました。別タブへ移ったら休止する処理も加えています。音をMキーで切り替えたときに、ページ側だけ「音：入」のまま残らないことまで確認しました。
公開時は既存ページを保存し、ゲーム本体を先に置いてから紹介リンクを追加しました。配信後には14ファイルが取得できることと、公開したデータが配布元と一致することを照合。最後に一覧のカードからゲームを開き、起動・移動・攻撃・竜巻・回避を試しています。
AIに任せた部分と、動かして確かめた部分
企画の整理、C#のゲーム処理、Blenderの形状生成、ステージやエフェクトの組み立て、Webページ、テストコードの作成にAIを使いました。一方で、実行結果を見ずに「完成」とはしない進め方にしています。実際のゲームを起動し、スクリーンショットと状態の記録を比べながら修正しました。
Windows版ではボス撃破、休止、再挑戦、敗北画面、キャラの直立と接地を検証。ブラウザ版ではキーボード入力によるステージクリア、音と画質の切り替え、全画面表示を確認しました。スマートフォン幅でページを表示する確認も行いましたが、狭い画面に収まることと、指でゲームを遊べることは別です。その後、タッチ入力をUnity本体まで組み込み、ブラウザのタッチ環境を模した検証で、移動と攻撃の同時操作、竜巻、回避、一時停止、再挑戦、指の操作がキャンセルされた後の停止を確認しました。スマホ実機での性能やすべての端末での動作は未確認です。
キャラは参考イラストをもとにした3Dアレンジで、関節と衣装をコードから動かす方式です。全身の本格的なスキニング、布シミュレーション、複数ステージ、育成、マルチプレイはこの版には含みません。小さな試作として、できることと今後の課題を分けて公開しています。
タッチ操作を追加するときに確認したこと
スマホでは横向き・全画面がおすすめです。左のスティックで移動し、右の「風刃」を長押しして連撃。「回避」「竜巻」「奥義」はタップで発動し、奥義は風霊100%で使えます。画面中央をドラッグすると視点が回ります。タッチ端末は軽量画質で起動します。
操作ボタンを表示するだけでは、二本の指で移動しながら攻撃できるとは限りません。今回は指ごとの入力を分け、指が離れたときや画面切り替えで操作が中断されたときに、移動と連撃が止まるようにしました。検証では横長のスマホ画面、縦長画面、タブレット相当の画面を使い、PC操作への切り替えも確認しています。更新時は13ファイルを配信元と照合しました。
Little Tideと比べると、同じ1ステージでも作り方が変わる
直近では、海底スローライフゲーム「Little Tideの制作記事」も公開しました。こちらはThree.jsを使い、マーメイドの着せ替え、住民との会話、貝がら集め、家具配置をブラウザで楽しむ作品です。
- Little Tideは「選ぶ・置く・残す」が中心。家具を置き直せること、会話や着せ替え、セーブを優先しました。
- 幻妖ジパングは「動く・避ける・まとめて祓う」が中心。入力への反応、敵の予兆、攻撃の見やすさ、再挑戦を優先しました。
- 共通したのは、最初に1ステージへ絞り、遊びの一周を動かしてから、見た目や機能を磨いたことです。
ブラウザで小さな作品を作るときは、先に道具を決めるより、遊ぶ人に繰り返してほしい操作を具体的にすると、必要な画面や確認項目が見えます。落ち着いて街を整えたい日はLittle Tide、短い戦闘を楽しみたい日は幻妖ジパング、と遊び比べてもらえるとうれしいです。
Little Tideで海底の暮らしを楽しむ →
Little Tideの制作・遊び方を読む →
遊ぶ前に知っておきたいこと
- PC操作に加えて、スマートフォン・タブレット向けタッチ操作を追加しました。WebGL 2対応ブラウザが必要で、端末のメモリや性能によって動作は異なります。
- インストール・アカウント登録・ゲーム内課金はありません。通信料は利用中の回線契約に従います。
- ステージ途中の進行を保存する機能はありません。再読み込みすると最初からになります。
- 初回はデータを読み込みます。重い場合は軽量画質を試し、起動できない場合はブラウザのWebGL・ハードウェアアクセラレーション設定を確認してください。
この記事とゲームの制作・運営はMACHI CREATEです。ゲームの進行データを外部へ送る機能は実装していません。サイトの広告やアクセス情報などの扱いは、プライバシーポリシーをご覧ください。不具合の連絡は、お問い合わせへ、端末・ブラウザ・起きた操作を添えていただくと確認しやすくなります。