HoloExplorer — Julien Quenneville

Overview

A top-down exploration game with a Hololive theme, whose real goal was learning Entity Component System architecture. Game logic is split into reusable components attached to entities, so movement, terrain interaction and collectibles stay modular and stop depending on each other.

Tech

TypeScript, Vite, Tailwind CSS.
A hand-rolled ECS game loop and its systems.

🎮 Live demo: aicg-explorer.netlify.app

HoloExplorer running: a procedurally generated biome map with the player and collectibles — Generated terrain: forest, water and sand tiles, collectibles scattered across the screen. Walking off an edge swaps to the next screen, Dofus-style.

Terrain is generated per screen, and each tile type is another component. What a tile does to the entity standing on it lives in a system, never as a special case inside the player code. Adding a biome meant adding data rather than branching.

Überblick

Ein Top-down-Erkundungsspiel mit Hololive-Thema, dessen eigentliches Ziel es war, die Entity-Component-System-Architektur zu lernen. Die Spiellogik ist in wiederverwendbare Komponenten aufgeteilt, die an Entities hängen, sodass Bewegung, Terrain-Interaktion und Sammelobjekte nicht mehr voneinander abhängen.

Technik

TypeScript, Vite, Tailwind CSS.
Eine handgeschriebene ECS-Spielschleife mit ihren Systemen.

🎮 Live-Demo: aicg-explorer.netlify.app

HoloExplorer im Spiel: eine generierte Biom-Karte mit Spieler und Sammelobjekten — Generiertes Terrain: Wald-, Wasser- und Sandfelder, Sammelobjekte über den Bildschirm verteilt. Über den Rand laufen wechselt zum nächsten Bildschirm, wie in Dofus.

Das Terrain wird pro Bildschirm generiert, und jeder Feldtyp ist eine weitere Komponente. Was ein Feld mit der Entity darauf macht, lebt in einem System und nie als Sonderfall im Spielercode. Ein Biom hinzufügen heißt Daten hinzufügen statt Verzweigungen.

Vue d’ensemble

Un jeu d’exploration en vue de dessus, sur un thème Hololive, dont le vrai objectif était d’apprendre l’architecture Entity Component System. La logique de jeu est découpée en composants réutilisables attachés à des entités, si bien que le déplacement, l’interaction avec le terrain et les collectibles cessent de dépendre les uns des autres.

Technique

TypeScript, Vite, Tailwind CSS.
Une boucle de jeu ECS écrite à la main, avec ses systèmes.

🎮 Démo en ligne : aicg-explorer.netlify.app

HoloExplorer en cours de jeu : une carte de biomes générée avec le joueur et des collectibles — Terrain généré : cases de forêt, d'eau et de sable, collectibles dispersés à l'écran. Sortir par un bord fait basculer sur l'écran suivant, à la manière de Dofus.

Le terrain est généré écran par écran, et chaque type de case est un composant de plus. Ce qu’une case fait à l’entité posée dessus vit dans un système, jamais en cas particulier dans le code du joueur. Ajouter un biome, c’est ajouter de la donnée plutôt que des branches.

概要

ホロライブをテーマにした見下ろし型の探索ゲームですが、本当の目的は Entity Component System アーキテクチャを学ぶことでした。ゲームロジックは再利用できるコンポーネントに分割され、エンティティに付与されます。おかげで移動、地形との相互作用、収集物が互いに依存しなくなりました。

技術

TypeScript、Vite、Tailwind CSS。
自前で書いた ECS のゲームループとシステム群。

🎮 公開デモ： aicg-explorer.netlify.app

プレイ中のHoloExplorer。生成されたバイオームのマップにプレイヤーと収集物が見える — 生成された地形。森・水・砂のタイルと、画面に散らばった収集物。端を越えると次の画面へ切り替わる、Dofus のような方式です。

地形は画面ごとに生成され、タイルの種類もまたコンポーネントです。タイルが上のエンティティに何をするかはシステム側にあり、プレイヤーのコードに特例として書かれることはありません。バイオームを増やす作業は、分岐ではなくデータを足すだけになります。

概览

一款以 Hololive 为主题的俯视角探索游戏，真正的目的是学习 实体组件系统（ECS） 架构。游戏逻辑被拆成可复用的组件并挂在实体上，于是移动、地形交互和收集物之间不再互相牵连。

技术

TypeScript、Vite、Tailwind CSS。
手写的 ECS 游戏循环及其各个系统。

🎮 在线演示： aicg-explorer.netlify.app

运行中的 HoloExplorer：生成的生物群系地图，含玩家与收集物 — 生成的地形：森林、水域与沙地方块，收集物散落在画面各处。走出边界即切换到下一屏，类似 Dofus 的做法。

地形按屏生成，每种地块也只是又一个组件。地块对站在上面的实体做了什么写在系统里，绝不会以特例形式塞进玩家代码。增加一个生物群系，靠的是加数据，而不是加分支。