好きな方向へ飛び、気になった場所へ向かう
決められた順路はありません。地表近くを進むことも、上空から全体を見渡すこともできます。4つの世界は独立しており、世界選択画面から移動します。
各世界で主要な場所を4か所見つけると、最後の場所へ進めるようになります。通常の発見と終着点への到達は、同じブラウザに分けて保存されます。アカウント登録は不要です。
GAME OVERVIEW
このゲームで何をするのか
場所を見つけ、近くまで移動し、記録します。発見によって照明、水面、扉などが変化し、次の場所を探す手掛かりになります。
4探索できる世界
37発見地点
4世界ごとの終着点
3主人公デザイン
PC / PHONEキーボードとタッチ操作
FOUR WORLDS
4つの世界
同じ地形の色違いではなく、建物の用途、移動する高さ、音、発見後の変化を分けています。画像はすべて実際のゲーム画面です。
浮島の街
目標：雲海に浮かぶ島々と、小規模な街を上空から巡る世界。
市場、庭園、鐘楼、風車、雲下設備が別々の島にあります。遠くに見えた場所へ、そのまま飛んで移動できることを重視しました。
市場→上段庭園→鐘楼→雲下設備
- 移動
- 大きな高低差と島同士の横断
- 発見後
- 水路と航路灯がつながる
- 現在の課題
- 雲の下にある見どころが少ない
閉鎖施設
目標：用途の異なる施設が、増改築でつながった巨大建築。
ロビー、宴会場、浴場、搬入口、点検路があります。似た廊下の中から、上層へ移動できる入口を探します。
ロビー→宴会場→浴場→点検路
- 移動
- 低い廊下、吹き抜け、上層通路
- 発見後
- 照明、扉、浴槽の反射が変わる
- 現在の課題
- 区画ごとの差が弱く、同じ施設に見える場所がある
郊外
目標：水、電力、食料を地域内で循環させるソーラーパンクの郊外。
温室、配水庭、修理工房、集光塔、空中菜園があります。設備同士が水路や送電線でつながっていることを、移動しながら確認します。
集光塔→修理工房→育苗室→配水庭
- 移動
- 地上の道路と水路から空中設備へ上がる
- 発見後
- 送電線、水面、温室が順番に変わる
- 現在の課題
- 住宅と生活用品の種類が不足している
遊戯室
目標：子どもの遊び場と、記憶の中の施設が混ざったドリームコア。
虹、ボールプール、小さな街、寝室、雲の回廊が続きます。開口部を通過するたびに、部屋の用途と色が変わります。
虹→球の部屋→小さな街→雲の回廊
- 移動
- 複数の部屋と左右の分岐
- 発見後
- 扉、照明、吊り飾り、霞が変わる
- 現在の課題
- 用途の分からない広い空間が一部に残る
THE TRAVELER
主人公は3種類
色だけではなく、帽子、フード、頭上の輪によって輪郭を変えています。ゲーム内の選択欄からいつでも切り替えられます。
帽子の旅人
コート、帽子、鞄を備えた基本デザインです。衣服と持ち物で人物らしさを出しています。
フードの旅人
顔の情報を減らし、広い空間を一人で移動する存在として見えるようにしています。
光輪の旅人
頭上と背面の輪によって、遠景でも主人公の位置を判別しやすくしています。
主人公に台詞や固有名はありません。移動方向へ身体を向け、上昇、下降、旋回、発見に合わせて動作します。手を振る、お辞儀、回転も操作できます。
CONTROLS
操作方法
マウスを動かしただけではカメラは動きません。ドラッグまたはスワイプしている間だけ視点が変わります。速さ、音量、主人公は全世界で変更できます。
PC
- ↑↓←→ / WASD
- 前後左右へ移動
- SPACE
- 上昇
- SHIFT
- 下降・滑空
- Ctrl
- 加速
- Q E
- 左右へ旋回
- C
- 視点を進行方向へ戻す
- ドラッグ
- 上下左右を見渡す
- 1 2 3
- 手を振る、お辞儀、回転
- 速さ
- 画面の調整欄で通常移動の倍率を変更
スマートフォン
- 方向ボタン
- 押している間、前後左右へ移動
- 上昇・下降
- 高度を変える
- 画面スワイプ
- 視点を動かす
- 正面
- 視点を進行方向へ戻す
- 加速
- 長い区間を速く移動する
- 動作ボタン
- 手を振る、お辞儀、回転
- 速さ
- 画面の調整欄で通常移動の倍率を変更
PRODUCTION PROCESS
どのように作ったか
AIへ一度依頼して完成したのではありません。実画面で問題を見つけるたびに、設計、画像、3D素材、プログラムのいずれかへ戻りました。
制作は一方向ではなく、確認結果から前工程へ戻る
最初に要望を文章で整理し、必要な素材と操作を決めます。画像と3D素材を作り、ブラウザ上で組み合わせます。その後、実際に動かし、自動テストと画面確認を行います。問題があれば、原因に応じた工程へ戻ります。
01要望と違和感を言葉にする
02世界、動線、素材を設計する
03画像と材質を作る
04Blenderで3D素材を作る
05Three.jsでゲームへ組み込む
06操作、表示、負荷を確認する
07GitHub Pagesで公開する
STEP 01
要望を設計へ変える
受け取るもの
目指す世界観、参照作品、操作の希望、実画面を見た感想。
行ったこと
場所の役割、移動経路、必要な3D素材、性能上限、合格条件をMarkdownへ整理しました。
確認方法
曖昧な指示は実装前に質問し、決めた内容をタスクリストと検査項目へ分けます。
STEP 02
画像で方向を確認する
使用したもの
Codexの画像生成。遠景、壁面の模様、遊戯室の目標画面を作りました。
ゲームでの使い方
遠景画像は霧とぼかしを加えて最も遠い層に配置します。壁面画像は繰り返せるテクスチャへ加工します。
注意したこと
生成画像をそのまま歩ける空間にはできません。手前の建物、地形、遊具は別途3Dで作ります。
STEP 03
Blenderで立体を作る
Blenderとは
建物や人物などの立体を作るソフトです。粘土を成形するように形を作り、色や表面の質感も設定できます。
GLBとは
立体の形、色、画像、動きを一つにまとめたファイル形式です。Blenderで作った遊具や主人公をGLBにしてブラウザへ渡します。画像だけと違い、裏側や横からも見られます。
自動検査
Pythonで素材を再生成し、大きさ、面の数、重なった面を確認します。重すぎる素材や、ちらつきの原因になる面を公開前に見つけます。
STEP 04
Three.jsでゲームにする
Three.jsとは
Webページの中に3D空間を表示するためのプログラム部品です。専用アプリをインストールしなくても、ブラウザで立体を描けます。
このゲームでの役割
GLBを読み込み、地形へ配置します。さらに移動、カメラ、当たり判定、光、霧、発見記録を毎秒更新し、操作できる空間にします。
負荷への対応
同じ窓や植物はまとめて一度に描き、遠い区画は必要になるまで表示しません。見える物の数を保ちながら、処理回数を減らしています。
STEP 05
音を付ける
Web Audio APIとは
ブラウザに備わっている音の仕組みです。音量や高さ、左右の位置、残響をプログラムから変えられます。APIは、プログラムから機能を使うための窓口という意味です。
このゲームでの役割
ステージ別の環境音、飛行音、足音、発見音を重ねます。閉鎖施設では残響を長くし、屋外では風や水の音を広げています。
制約
ブラウザは突然音が鳴ることを防ぐため、自動再生を制限します。そのため「世界に入る」を押した後に音を開始します。
STEP 06
動作を確認する
画面確認
PC幅とスマートフォン幅で、操作、文字、衝突、ちらつき、カメラを確認します。
自動テスト
30・60・120Hzの移動、最大速度の衝突、3D素材の重複面、保存、各画面へのリンクを検査します。
記録
結果をPLAYTEST-REVIEW.mdとGitコミットへ残し、再発時に原因を追えるようにします。
STEP 07
公開する
GitHubとは
プログラムと変更履歴を保存するサービスです。どの修正で不具合が入ったかを追い、以前の状態と比較できます。
GitHub Pagesとは
GitHubに保存したWebページを、そのまま公開URLで配信する機能です。このゲームでは、テスト済みのファイルをmainブランチへ送ると公開版が更新されます。
現在の公開経路
公開にはGitHub Pagesを使っています。Cloudflare Pagesも候補でしたが、現在の配信には使っていません。
重要：画面確認で問題が見つかった場合、次工程へ進むのではなく、原因のある工程へ戻ります。背景が平面に見えれば画像と3D配置へ、通れなければ衝突判定へ、重ければ描画方法へ戻ります。
IMPLEMENTATION NOTES
見た目と操作のために工夫したこと
完成画面だけでは分かりにくい部分を、実際の実装方法と対応させて説明します。
遠景画像を最遠層に限定する
生成画像へ霧とぼかしを加え、大きな円筒の内側へ貼っています。プレイヤーが近づく地形や建物は3Dで作り、平面画像との境目を見えにくくしました。
世界ごとに音楽と環境音を変える
4世界で旋律、和音、テンポ、音域、音色を分けています。さらに風、室内の反響、水、設備音を場所に応じて重ねます。発見音や移動音は別の音量系統へ分け、BGMより前へ出すぎないようにしています。
主人公の輪郭を変える
3種類を色替えだけにせず、帽子、フード、頭上と背面の輪を追加しました。飛行中は進行方向へ向き、旋回時に身体が傾きます。
繰り返す物をまとめて描画する
窓、柱、植物、ボールなどは一つずつ別に描画せず、同じ形をまとめています。見た目の数を減らさず、ブラウザの処理を抑えるためです。
BUGS AND REGRESSIONS
検知して修正した不具合
模式図で症状の仕組みを示し、その下に原因、修正、再発防止をまとめます。模式図は当時の画面キャプチャではありません。
| 症状 | 原因 | 修正 | 再発防止 |
|---|---|---|---|
| 床や水面がちらつく | 同じ位置に複数の面が重なっていた。 | 面同士の高さを分け、不要な面を削除した。 | 3D素材の重複面を検査する。 |
| 虹が裏から薄く見える | 表面だけで厚みと裏面がなかった。 | 側面と背面を追加し、通過できる開口寸法へ直した。 | 裏面、厚み、開口幅を素材テストへ追加した。 |
| フードの主人公が飛ぶと頭部が欠ける | フードがアニメーション中の頭部へ追従していなかった。 | 頭部ボーンへフードを接続した。 | 全アニメーションで表示状態を確認する。 |
| 見えない壁で止まる | 表示している形と衝突範囲が一致していなかった。 | 通路の衝突範囲を分割し、床の外縁を移動範囲から外した。 | 最大速度でも通過できるか検査する。 |
| 高く飛ぶと屋根面だけが見える | 主人公よりカメラのほうが高く移動できた。 | 閉鎖施設のカメラを屋根より下に制限した。 | 最高高度でカメラ位置を検査する。 |
WHAT DID NOT WORK
うまくいかなかったこと
制作は直線的には進みませんでした。特に影響が大きかった判断ミスをまとめます。
デモ画像を先に作りすぎた
問題：画像には芝生、滑り台、雲、人物が自然に収まっていましたが、必要な3D素材、寸法、動線、負荷を決めていませんでした。
結果：実装時に単純な図形や平面画像へ置き換わり、目標画像との差が大きくなりました。
現在：画像を作る前に、素材一覧、配置図、実装可能な表現、性能上限を決めます。
広さを増やせば探索になると考えた
問題：面積と通路を増やしましたが、場所の役割と目印が不足していました。
結果：何もない移動区間や、目的の分からない上層通路が生まれました。
現在：各区間に目的地、見通し、次の場所への手掛かりを設定します。
閉鎖施設と郊外の差が弱かった
問題：同じ地形生成、似た建物、同じ移動方式を流用しました。
結果：世界観の違いが色と明るさに偏り、どちらも広い構造物の集まりに見えました。
現在：閉鎖施設は内部構造、郊外は生活と循環設備を中心に作り直しています。
進捗を過大評価した
問題：タスクの完了数を、見た目の完成度として加点しました。
結果：遊戯室を70点と報告した後、参照画像と並べると57点相当だと分かりました。
現在：実画面、操作経路、性能、参照との差を別々に採点します。
修正した問題が戻った
問題：ちらつき、薄い裏面、フードの欠けを、目視確認だけで完了としていました。
結果：別の素材追加や配置変更で同じ問題が再発しました。
現在：機械で判定できる条件は自動テストへ残します。
RESPONSIBILITIES
人とAIの分担
AIが自動的に完成品を作ったわけではありません。方針、実装、検査、最終判断を分けています。
ユーザー
目指す世界観、参照作品、操作の希望を提示し、実画面を見て違和感と優先順位を判断しました。
Codex
設計、Three.js実装、Blenderスクリプト、素材統合、テスト、ブラウザ確認、Git履歴の更新を行いました。
Claude Code
利用できた期間に、一部のBlender素材を独立して制作しました。指示と結果は共有フォルダのMarkdownとGitで受け渡しました。
現在できていないこと
- 閉鎖施設と郊外は、浮島の街と比べて場所ごとの造形差が不足しています。
- スマートフォンは操作できますが、複数の実機での性能測定は未完了です。
- 自動テストだけでは面白さや世界観の再現度を判定できないため、Codexによる4世界の連続巡回と実画面評価を残しています。
ゲームを開く
4つの世界は同じURLから開けます。PCではURL、スマートフォンではQRコードからアクセスできます。
https://tytydy-cyber.github.io/aeolia-world/世界選択を開く
約13秒の紹介映像
実際のゲーム画面だけで、浮島の街、閉鎖施設、郊外、遊戯室を順に見せます。合成音声は使っていません。
各ステージを作る前に決めた世界観、区域、移動、素材、合格条件と、現在の未達項目をまとめています。
ステージ設計を読む