Three.jsGLSLGameIncrementalBrowser GameSpaceIndie

STELLAR EPOCH: APHELION — Ein kostenloses Browser-Weltraum-Inkrementalspiel

Sloth255
Sloth255
·5 min read·944 words

Genre: Weltraum / Inkrementalspiel
Plattform: Browser (Mobilgeräte & PC)
Preis: Kostenlos — kein Account erforderlich
URL: https://stellar-epoch.sloth255.com/

Spielübersicht

STELLAR EPOCH: APHELION ist ein weltraumthematisches Inkrementalspiel, das vollständig in Ihrem Browser läuft. Keine App zu installieren, kein Abonnement, keine Bezahlschranke. Ob auf einem Smartphone oder Desktop – alles, was Sie brauchen, ist ein Browser, um sofort loszuspielen.

Der Titel Aphelion bezieht sich auf den Punkt in der Umlaufbahn eines Planeten, an dem er am weitesten von der Sonne entfernt ist – ein astronomischer Begriff, der den weiten, romantischen Maßstab des Universums im Spiel einfängt.

Funktionen

🌠 Ein Universum, das sich mit Ereignissen und Bedingungen entwickelt

Der Zustand des Universums verändert sich dynamisch basierend auf In-Game-Bedingungen und Ereignissen. Je nach Spielverlauf werden Sie auf unterschiedliche kosmische Szenerien und Situationen treffen.

🏁 Ein echtes Ende

Dies ist nicht nur ein Zahlenspiel. STELLAR EPOCH: APHELION hat einen richtigen Abschluss, der auf Sie wartet. Jedes Upgrade und jede Ressource, die Sie ansammeln, bringt Sie einem bedeutungsvollen Ziel näher und gibt Ihnen echte Befriedigung, wenn Sie es erreichen.

📱 Funktioniert auf Mobilgeräten und PC

Das Spiel ist sowohl für Smartphones als auch für Desktop-Browser optimiert. Spielen Sie, wo immer es Ihnen bequem ist – Ihr Fortschritt ist immer einen Tab entfernt.

🌍 Mehrsprachige Unterstützung

Das Spiel unterstützt mehrere Sprachen, sodass Spieler aus aller Welt es in ihrer Muttersprache genießen können. Es ist ein Spiel, das für ein globales Publikum entwickelt wurde.

🪐 3D-Weltraum mit Three.js gerendert

Das Universum wird mit Three.js, einer JavaScript-3D-Bibliothek, zum Leben erweckt. Der Kosmos wird in Echtzeit direkt in Ihrem Browser gerendert und zieht Spieler in eine zutiefst immersive Welt.

Was ist ein Inkrementalspiel?

Inkrementalspiele (auch Idle-Games oder Clicker-Games genannt) sind ein Genre, bei dem Sie schrittweise Ressourcen ansammeln, Upgrades freischalten und den Maßstab Ihrer Operation Schritt für Schritt erweitern. Der Reiz liegt in dem Gefühl der Erfüllung, das entsteht, wenn sich kleiner, stetiger Fortschritt zu etwas Großem summiert – und darin, in Ihrem eigenen Tempo spielen zu können.

Für wen ist das?

  • Menschen, die ein schnelles Spiel suchen, für das sie nichts installieren müssen
  • Fans von Weltraum- und Science-Fiction-Settings
  • Fans von Inkremental- / Idle-Games
  • Spieler, die Spiele mit einer Geschichte und einem echten Ende mögen
  • Alle, die gelegentlich auf Mobilgeräten oder PC spielen möchten
  • Spieler, die lieber in einer anderen Sprache als Japanisch spielen

Anleitung

Öffnen Sie einfach Ihren Browser und gehen Sie zu https://stellar-epoch.sloth255.com/ – das war's!

Technische Highlights

Gesamtarchitektur

Technologie Zweck
React + TypeScript Gesamte UI
Zustand Spielzustandsverwaltung
Vite Build-Tool
Firebase Analytics
AWS S3 + CloudFront Hosting

Game-Loop: Die tick()-Funktion im Zustand-Store wird in regelmäßigen Abständen von einem useGameLoop-Hook aufgerufen und behandelt Energieproduktion, Einrichtungen und Encounter-Spawning in einem einzigen Durchlauf. Der Zustand wird in localStorage gespeichert.

3D-Rendering mit Three.js / React Three Fiber

Das gesamte 3D-Rendering ist in SpaceScene.tsx zentralisiert. Die wichtigsten technischen Punkte werden unten beschrieben.

1. Benutzerdefinierte GLSL-Shader (Sonne, Atmosphäre, Akkretionsscheibe)

  • Sonnen-Shader: Der Fragment-Shader verwendet das Skalarprodukt der Oberflächennormalen und der Kamerarichtung, um einen Koronaglüheffekt zu erzeugen. Das time-Uniform wird jeden Frame aktualisiert, um eine Pulsanimation zu erzeugen. Wenn eine Eruption ausgelöst wird, wird flareIntensity mit lerp() sanft übergegangen.
  • Atmosphären-Shader: Mit der gleichen Normalen-Skalarprodukt-Technik wird eine planetare Atmosphäre gerendert, die nur den Rand färbt (Fresnel-ähnlicher Effekt) via BackSide-Rendering.
  • Schwarzes-Loch-Akkretionsscheibe: Ein aus mehreren überlagerten Sinuswellen aufgebautes Turbulenzmuster erzeugt einen Gradienten, der in der Mitte weißglühend ist und zu den Rändern hin dunkelrot verblasst. Die RingGeometry-UVs werden manuell korrigiert, um wie beabsichtigt radial zu mappen.

2. Per-Frame-Animation mit useFrame

  • Planeten- und Mondorbits: angleRef wird jeden Frame inkrementiert, und position.x/z wird mit trigonometrischen Funktionen berechnet – ein leichtgewichtiger Ansatz, der keine Physiksimulation erfordert.
  • Objektreferenzen werden mit useRef gespeichert, sodass Positionen, Rotationen und Uniforms direkt geschrieben werden können, ohne React-Re-Renders auszulösen, was die Performance hoch hält.

3. Effizientes Rendering großer Objektanzahlen mit InstancedMesh

Matrizen aus einem THREE.Object3D-Dummy-Objekt werden in das InstancedMesh kopiert, wodurch alle Instanzen auf einen einzigen Draw Call reduziert werden.

4. Partikelsysteme (BufferGeometry)

  • Galaxienspirale: Ein Float32Array mit 5.000 Punkten wird vorab generiert. Vier Spiralarme werden mit gleichmäßig beabstandeten Polarkoordinaten mit zufälliger Streuung platziert, und Helligkeit-Abfall via exp(-dist/18) erzeugt eine natürlich aussehende Galaxie, die in der Mitte am hellsten ist.
  • Supernova-Effekt: Geschwindigkeitsvektoren sind in userData eingebettet, und Positionen werden als elapsed * velocity innerhalb von useFrame berechnet, wodurch Partikel kugelförmig nach außen fliegen.
  • Kosmisches Netz: Ein Nähegraph von 200 Knoten wird als LineSegments gerendert und verbindet zwei Knoten innerhalb von Abstand 12.

5. Phasenbewusste Kamerasteuerung

Wenn das Spiel durch die Phasen 1–7 fortschreitet, ändert sich der Rückzugsabstand der Kamera und erzeugt eine visuelle Skalenerweiterung vom Sonnensystem → Galaxie → großräumige kosmische Struktur. Eine benutzerdefinierte Easing-Kurve (1 - (1-t)^3) wird via requestAnimationFrame für sanfte Übergänge angewendet.

6. Progressive Texturladen mit Suspense

useTexture aus @react-three/drei lädt Texturen asynchron und ist in React Suspense eingebettet. Während Texturen noch nicht geladen sind, wird ein Shader-only-Fallback angezeigt. Ein hasTexture-Uniform wird an GLSL übergeben, um dynamisch zwischen texturiertem und nicht-texturiertem Rendering umzuschalten.

7. Kamera-Shake

Wenn ein Legendary-Encounter ausgelöst wird, wird ein einfacher Shake-Effekt implementiert, indem ein zufälliger Offset zur Kameraposition bei jedem Frame via useThree() für direkte Kameramanipulation addiert und subtrahiert wird.