Are you an LLM? Read llms.txt for a summary of the docs, or llms-full.txt for the full context.
Skip to content

Getting started

Bootstrapping a game

A game is a GameBaseData object — a plain serializable structure defining all content upfront. No imperative setup; the engine hydrates from data.

import {
	dialogueId,
	GameBase,
	type GameBaseData,
	GameBaseEffectSchema,
	GameEffectSchemaRegister,
	narrativeNodeId,
	sceneId,
} from "@tikab-interactive/me-gosta";
 
GameEffectSchemaRegister.instance.register(GameBaseEffectSchema);
 
const data: GameBaseData = {
	notificationManager: {},
	narrative: {
		firstNodeId: narrativeNodeId("node_intro"),
		nodes: [
			{
				id: narrativeNodeId("node_intro"),
				effects: [
					{ kind: "scene", name: "set-scene", sceneId: sceneId("scene_plaza") },
					{
						kind: "dialogue",
						name: "start-dialogue",
						dialogueId: dialogueId("dlg_intro"),
					},
				],
				conditions: [],
				children: [],
			},
		],
	},
	dialogueManager: { dialogues: [], dialoguePoints: [] },
	characterManager: { characters: [] },
	sceneManager: { scenes: [] },
	timeManager: { time: 0, timeStep: 1 },
	achievementManager: { achievements: [], actions: [] },
	chapterManager: { chapters: [] },
	variableManager: { variables: [] },
};
 
const game = new GameBase(data);
game.getNarrativeTree().init();

GameBase reads the data, initializes all managers, and calls getNarrativeTree().init() to set the entry node. From there the narrative graph drives scene transitions and dialogue starts via effects.

Engine wrapper

In production you'll wrap GameBase in a thin GameEngine class that handles:

  • IndexedDB persistence (save() / load())
  • Observable state for React bindings (game$, currentScene$, currentDialogueId$)
  • Schema registration (GameEffectSchemaRegister)

See examples/src/engine/GameEngine.ts for a complete reference implementation.

React integration

// Minimal provider pattern
const engine = new GameEngine({ data: myScenario });
 
<GameEngineProvider engine={engine}>
  <PixiStage />
  <DialogueOverlay />
</GameEngineProvider>;

useGameEngine() pulls the engine from context. Subscribe to observables for reactive UI.

Next