Genre : Space / Jeu incrémental
Plateforme : Navigateur (Mobile & PC)
Prix : Gratuit — aucun compte requis
URL : https://stellar-epoch.sloth255.com/
Aperçu du jeu
STELLAR EPOCH : APHELION est un jeu incrémental sur le thème de l'espace qui fonctionne entièrement dans votre navigateur. Aucune application à installer, pas d'abonnement, pas de paywall. Que vous soyez sur smartphone ou ordinateur de bureau, tout ce dont vous avez besoin est un navigateur pour commencer à jouer immédiatement.
Le titre Aphelion fait référence au point de l'orbite d'une planète où elle est la plus éloignée du Soleil — un terme astronomique qui capture la vaste échelle romantique de l'univers du jeu.
Fonctionnalités
🌠 Un univers qui évolue avec des événements et des conditions
L'état de l'univers change dynamiquement en fonction des conditions et des événements du jeu. Selon le déroulement de votre partie, vous rencontrerez différents panoramas cosmiques et situations.
🏁 Une vraie fin
Ce n'est pas seulement un jeu de chiffres. STELLAR EPOCH : APHELION a une véritable conclusion qui vous attend. Chaque amélioration et ressource que vous accumulez vous rapproche d'un objectif significatif, vous procurant une véritable satisfaction lorsque vous l'atteignez.
📱 Fonctionne sur mobile et PC
Le jeu est optimisé pour les smartphones et les navigateurs de bureau. Jouez où vous êtes à l'aise — votre progression est toujours à portée d'un onglet.
🌍 Support multilingue
Le jeu supporte plusieurs langues, de sorte que les joueurs du monde entier peuvent en profiter dans leur langue maternelle. C'est un jeu conçu pour un public mondial.
🪐 Espace 3D rendu avec Three.js
L'univers prend vie grâce à Three.js, une bibliothèque JavaScript 3D. Le cosmos est rendu en temps réel directement dans votre navigateur, plongeant les joueurs dans un monde profondément immersif.
Qu'est-ce qu'un jeu incrémental ?
Les jeux incrémentiaux (également appelés idle games ou clicker games) sont un genre où vous accumulez progressivement des ressources, débloquez des améliorations et étendez l'échelle de votre opération étape par étape. L'attrait réside dans le sentiment d'accomplissement qui découle de petits progrès réguliers s'additionnant pour former quelque chose d'énorme — et dans la possibilité de jouer à votre propre rythme.
Pour qui est ce jeu ?
- Les personnes qui cherchent un jeu rapide auquel elles peuvent plonger sans aucune installation
- Les fans de space et de science-fiction
- Les fans de jeux incrémentiaux / idle games
- Les joueurs qui apprécient les jeux avec une histoire et une vraie fin
- Ceux qui veulent jouer de façon décontractée sur mobile ou PC
- Les joueurs qui préfèrent jouer dans une langue autre que le japonais
Comment jouer
Ouvrez simplement votre navigateur et allez sur https://stellar-epoch.sloth255.com/ — c'est tout !
Points techniques notables
Architecture globale
| Technologie | Objectif |
|---|---|
| React + TypeScript | Interface utilisateur complète |
| Zustand | Gestion de l'état du jeu |
| Vite | Outil de build |
| Firebase | Analytics |
| AWS S3 + CloudFront | Hébergement |
Boucle de jeu : La fonction tick() dans le store Zustand est appelée à intervalles réguliers depuis un hook useGameLoop, gérant la production d'énergie, les installations et l'apparition de rencontres en un seul passage. L'état est persisté dans le localStorage.
Rendu 3D avec Three.js / React Three Fiber
Tout le rendu 3D est centralisé dans SpaceScene.tsx. Les points techniques clés sont décrits ci-dessous.
1. Shaders GLSL personnalisés (Soleil, Atmosphère, Disque d'accrétion)
- Shader solaire : Le fragment shader utilise le produit scalaire de la normale de surface et la direction de la caméra pour générer un effet de lueur de corona. L'uniforme
timeest mis à jour chaque frame pour créer une animation de pulsation. Lorsqu'un flare se déclenche,flareIntensityest transitionné en douceur aveclerp(). - Shader atmosphérique : Utilisant la même technique de produit scalaire de normale, une atmosphère planétaire qui ne colore que le bord (effet Fresnel-like) est rendue via le rendu
BackSide. - Disque d'accrétion du trou noir : Un motif de turbulence construit à partir de plusieurs ondes sinusoïdales superposées crée un dégradé qui brille blanc chaud au centre et disparaît vers le rouge foncé aux bords. Les UVs de
RingGeometrysont corrigés manuellement pour mapper radialement comme prévu.
2. Animation par frame avec useFrame
- Orbites planétaires et lunaires :
angleRefest incrémenté à chaque frame, etposition.x/zest calculé avec des fonctions trigonométriques — une approche légère qui ne nécessite aucune simulation physique. - Les références d'objets sont stockées avec
useRefafin que les positions, rotations et uniformes puissent être écrits directement sans déclencher de re-rendus React, maintenant ainsi de bonnes performances.
3. Rendu efficace d'un grand nombre d'objets avec InstancedMesh
Les matrices d'un objet THREE.Object3D dummy sont copiées dans le InstancedMesh, réduisant toutes les instances à un seul draw call.
4. Systèmes de particules (BufferGeometry)
- Spirale galactique : Un
Float32Arrayde 5 000 points est pré-généré. Quatre bras spiraux sont placés en utilisant des coordonnées polaires équidistantes avec un étalement aléatoire, et la diminution de luminosité viaexp(-dist/18)crée une galaxie d'aspect naturel qui est la plus brillante au centre. - Effet supernova : Les vecteurs de vitesse sont incorporés dans
userData, et les positions sont calculées commeelapsed * velocitydansuseFrame, faisant voler les particules vers l'extérieur en sphère. - Toile cosmique : Un graphe de proximité de 200 nœuds est rendu comme
LineSegments, connectant tout deux nœuds dans un rayon de 12.
5. Contrôle de caméra sensible aux phases
Au fur et à mesure que le jeu progresse à travers les phases 1 à 7, la distance de recul de la caméra change, produisant une expansion visuelle d'échelle du système solaire → galaxie → structure cosmique à grande échelle. Une courbe d'easing personnalisée (1 - (1-t)^3) est appliquée via requestAnimationFrame pour des transitions en douceur.
6. Chargement progressif de textures avec Suspense
useTexture de @react-three/drei charge les textures de façon asynchrone et est enveloppé dans React Suspense. Tant que les textures ne sont pas chargées, un fallback basé uniquement sur shader est affiché. Un uniforme hasTexture est passé à GLSL pour basculer dynamiquement entre le rendu texturé et non texturé.
7. Tremblement de caméra
Lorsqu'une rencontre Legendary se déclenche, un simple effet de tremblement est implémenté en ajoutant et soustrayant un décalage aléatoire à la position de la caméra à chaque frame via useThree() pour une manipulation directe de la caméra.