Shattered
Eine cozy-düstere Inselwelt mit Spiel und eigenen Authoring-Tools.
// in brief// kurz gesagt
Ein TypeScript- und Phaser-Prototyp einer isometrischen Welt mit lokaler Persistenz, lesbarem rundenbasiertem Kampf, Crafting, Aufträgen und einem separaten Map-Editor für datengetriebenen Weltenbau.
- RoleRolle
- Game UX + Systems Design + EngineeringGame UX + Systems Design + Engineering
- Built withEntwickelt mit
- TypeScript · Phaser 3 · Vite
- FormatFormat
- Product App
// for whom// für wen
Players who enjoy building a personal place, exploratory discovery, and long-lived progress more than constant reset cycles.Spieler:innen, die einen eigenen Ort, Erkundung und langfristigen Fortschritt mehr schätzen als ständige Reset-Zyklen.
// project focus// projektfokus
- Keep the world readableDie Welt lesbar haltenThe world view keeps the avatar, local space, minimap, and a compact action rail visible together.Die Weltansicht hält Avatar, lokalen Raum, Minimap und eine kompakte Aktionsleiste gleichzeitig sichtbar.
- Make combat deliberateKampf bewusst machenEnemies wander in real time, then hand off to an explicit turn-based combat state on engagement.Gegner wandern in Echtzeit und wechseln bei Kontakt in einen expliziten rundenbasierten Kampfzustand.
- Build for future worldmakingFür zukünftigen Weltenbau bauenA separate editor works with typed maps, chunks, validation, and structured world data.Ein separater Editor arbeitet mit typisierten Maps, Chunks, Validierung und strukturierten Weltdaten.
// inside// bestandteile
- Island worldInselweltMovement, exploration, gatheringBewegung, Erkundung, Sammeln
- CombatKampfTactical, turn-based encountersTaktische, rundenbasierte Begegnungen
- AuthoringAuthoringMaps, objects, validationMaps, Objekte, Validierung
// the decisions behind the screen// die entscheidungen hinter dem screen
Spatial orientation before system densityRäumliche Orientierung vor Systemdichte
The world view keeps the avatar, the local space, a compact minimap, and a small action rail simultaneously legible. The player can orient before opening deeper systems.Die Weltansicht hält Avatar, lokalen Raum, kompakte Minimap und kleine Aktionsleiste gleichzeitig lesbar. Spieler können sich orientieren, bevor sie tiefere Systeme öffnen.
Readable, reversible actionsLesbare, reversible Aktionen
Turn-based combat makes decisions explicit instead of burying them in visual noise. Clear end-turn and cancel behaviour keeps the tactical layer deliberate rather than frantic.Rundenbasierter Kampf macht Entscheidungen explizit, statt sie in visuellem Rauschen zu verstecken. Klarer Zugende- und Abbruch-Umgang hält die Taktik bewusst statt hektisch.
Authoring boundaries protect the productAuthoring-Grenzen schützen das Produkt
Static world definitions, mutable session state, and editor tools are deliberately separated. That is as much a UX decision for future content creators as it is an engineering one.Statische Weltdefinitionen, veränderlicher Session-State und Editor-Tools sind bewusst getrennt. Das ist ebenso eine UX-Entscheidung für künftige Content-Creator wie eine technische.
// a technical decision// eine technische entscheidung
Idle enemies wander until combat takes overUntätige Gegner wandern, bis der Kampf übernimmt
Enemies live in two modes, not one blended system: real-time wandering when idle, then a hard switch into turn-based combat on engagement. Keeping the boundary explicit is what keeps combat readable.Gegner leben in zwei Modi statt einem vermischten System: Echtzeit-Wandering im Ruhezustand, dann ein harter Wechsel in rundenbasierten Kampf bei Kontakt. Diese klare Grenze hält den Kampf lesbar.
// src/combat/EnemySystem.ts
const WANDER_RADIUS_TILES = 3;
const WANDER_SPEED_PER_MS = 0.022;
const DEFAULT_RESPAWN_MS = 60_000;
export class EnemySystem {
/** True while the enemy is a participant in an active turn combat. */
private _inCombat = false;
update(nowMs: number): void {
if (this._inCombat || !this.record) return;
// Outside combat: free real-time wandering within a small radius
// of the spawn tile. The moment an encounter starts, this loop
// stops and control hands off to the turn-based combat resolver.
this.stepWander(nowMs);
}
}// outcome// ergebnis
Ein im Browser spielbarer Prototyp mit isometrischer Welt, Echtzeit-Wandering in der Oberwelt, das in rundenbasierten Kampf übergeht, Sammel- und Crafting-Loops, Aufträgen und einem separaten Editor für Welt- und Dungeon-Authoring über strukturierte, validierte Projektdaten.
// selected screens// ausgewählte ansichten
6 Ansichten