- ジャンル： 宇宙 / インクリメンタルゲーム
- プラットフォーム： ブラウザ（スマホ・PC どちらでも対応）
- 料金： 無料、会員登録も不要
https://stellar-epoch.sloth255.com/?lang=ja
ゲーム概要
STELLAR EPOCH: APHELION は、ブラウザ上で完結する宇宙テーマのインクリメンタルゲームです。アプリのインストールも課金も不要。スマートフォンでもPCでも、ブラウザさえあればすぐにプレイを始められます。
タイトルの「Aphelion（遠日点）」は、惑星が太陽から最も遠ざかる軌道上の点を指す天文学用語。宇宙の広大さとロマンをテーマにした世界観が魅力です。
https://www.youtube.com/shorts/bHtiot0yWaQ
特徴
- 🌠 条件・イベントで変化する宇宙
ゲーム内ではさまざまな条件やイベントによって宇宙の様子が変化します。プレイの進み方によって異なる宇宙の姿を体験できます。 - 🏁 エンディングあり
ただ数値を増やすだけではなく、ちゃんとした結末が用意されています。目標に向かってプレイを積み重ねていく達成感が味わえます。 - 📱 スマホ・PC 両対応
スマートフォンでもPCでも快適にプレイできます。自分の環境に合わせて好きなデバイスでお楽しみください。 - 🌍 多言語対応
複数の言語に対応しているため、日本語以外のユーザーも母国語で楽しむことができます。世界中のプレイヤーに向けて開かれたゲームです。 - 🪐 three.jsによる宇宙の3D表示
宇宙の描写にはJavaScriptの3Dライブラリ「three.js」を採用。ブラウザ上でリアルタイムに描画される3Dの宇宙空間が、プレイヤーを没入感ある世界へと引き込みます。
インクリメンタルゲームとは？
リソースを少しずつ積み上げ、アップグレードを重ねながら規模をどんどん拡大していくジャンルです。小さな一歩一歩の積み重ねが大きな成果につながる達成感が醍醐味で、自分のペースでじっくり楽しめます。
こんな人におすすめ
- インストール不要でサクッと遊べるゲームを探している人
- 宇宙・SF の世界観が好きな人
- インクリメンタルゲームが好きな人
- ストーリーやエンディングのあるゲームが好きな人
- スマホやPCで気軽に遊びたい人
- 日本語以外の言語でプレイしたい人
アクセス方法
ブラウザで https://stellar-epoch.sloth255.com/ にアクセスするだけです！
技術的なポイント
アーキテクチャ全体
| 技術 | 用途 |
|---|---|
| React + TypeScript | UI全体 |
| Zustand | ゲーム状態管理 |
| Vite | ビルドツール |
| Firebase | 分析 |
| AWS S3 + CloudFront | ホスティング |
ゲームループ: Zustandストアの tick() を useGameLoop フックから定期呼び出しし、エネルギー生産・施設・エンカウンタースポーンを一括処理します。状態はローカルストレージに永続化しています。
Three.js / React Three Fiber による3D表現
SpaceScene.tsx に全3D描画が集約されています。主な技術ポイントは以下の通りです。
1. カスタムGLSLシェーダー（太陽・大気・降着円盤）
- 太陽シェーダー: フラグメントシェーダーで法線とカメラ方向の内積を使い、コロナのグロー効果を生成。
timeuniform をフレームごとに更新してパルスアニメーションを実現。フレア発動時はflareIntensityをlerp()で滑らかに変化させます。 - 大気シェーダー: 同じ法線内積の手法で、惑星の縁だけに色がつく大気（フレネル効果的表現）を
BackSideレンダリングで実装。 - ブラックホール降着円盤: 複数の正弦波を重ねた乱流パターンで、内側が白熱・外側が暗赤色になるグラデーションを表現。
RingGeometryのUVを手動で修正して正しく放射状にマッピングしています。
2. useFrame による毎フレームアニメーション
- 惑星・月の公転:
angleRefを加算してposition.x/zを三角関数で計算（物理シミュレーション不要の軽量実装）。 useRefでオブジェクト参照を保持し、Reactの再レンダリングを発生させずに位置・回転・uniform を直接書き換えることでパフォーマンスを確保。
3. InstancedMesh による大量オブジェクトの効率的描画
THREE.Object3D ダミーオブジェクトのマトリクスをコピーする方式で、ドローコールを1回に抑えています。
4. パーティクルシステム（BufferGeometry）
- 銀河スパイラル: 5000点の
Float32Arrayを事前生成。4本のスパイラルアームを等間隔の極座標+乱数スプレッドで配置し、exp(-dist/18)の輝度減衰で中心が明るい自然な銀河を表現。 - 超新星エフェクト: 速度ベクトルを
userDataに埋め込み、useFrame内でelapsed * velocityで位置を計算。パーティクルが球状に飛散します。 - 宇宙網 (Cosmic Web): 200ノードの近接グラフを
LineSegmentsで描画し、距離12以内を結線。
5. フェーズ対応のカメラ制御
ゲームの進行フェーズ（1〜7）に応じてカメラの引きの距離を変化させ、太陽系→銀河→宇宙大規模構造へとスケールが広がる演出を実現。requestAnimationFrame で自前のイージング（1 - (1-t)^3）を適用してスムーズに遷移します。
6. Suspense によるテクスチャの段階的ロード
useTexture（@react-three/drei）の非同期ロードをReact Suspenseでラップし、テクスチャ未ロード時はシェーダーのみのフォールバックを表示します。hasTexture uniformをGLSLに渡してテクスチャ有無を動的に切り替えています。
7. カメラシェイク
Legendaryエンカウンター発動時にカメラ位置にランダムオフセットを毎フレーム加減算するシンプルなシェイク実装です（useThree() でカメラを直接操作）。