VibeGame

A 3D game engine designed for vibe coding. Declarative HTML-like syntax, ECS architecture, and game-ready features including physics, rendering, and player controls out of the box.

Problem

Vibe coding games works at first, but falls apart as the project grows.

Quick Start

Create a new project

npm create vibegame@latest my-game

cd my-game
bun dev

This scaffolds a complete project with llms.txt system prompt for AI-assisted development.

Or install directly

bun install vibegame

<world canvas="#game-canvas" sky="#87ceeb">
  <!-- Ground -->
  <static-part pos="0 -0.5 0" shape="box" size="20 1 20" color="#90ee90"></static-part>

  <!-- Ball -->
  <dynamic-part pos="-2 4 -3" shape="sphere" size="1" color="#ff4500"></dynamic-part>
</world>

<canvas id="game-canvas"></canvas>

<script type="module">
  import * as GAME from 'vibegame';
  GAME.run();
</script>

Solution

1. AI Context Management

System Prompt: Include llms.txt in your AI system prompt for comprehensive VibeGame documentation.

Comprehensive Documentation: Use Context7 to fetch detailed documentation:

// Use mcp__context7__resolve-library-id to find "vibegame"
// Then use mcp__context7__get-library-docs for full documentation

Context Workflow: Use Shallot to manage context across conversations:

• Use /peel at conversation start to load necessary context
• Use /nourish at conversation end to update context

2. ECS Architecture with Plugins

Live bevy, uses an Entity Component System architecture with Plugins:

• Components: Pure data structures without behavior
• Systems: Logic separated from data
• Plugins: Self-contained modules that bundle related functionality

3. Declarative XML Syntax

Entities and components defined declaratively in HTML:

<world canvas="#game-canvas" sky="#87ceeb">
  <static-part pos="0 -0.5 0" shape="box" size="20 1 20"></static-part>
</world>

4. Roblox-like Abstraction

Game-ready features out of the box:

• Controllable character
• Physics simulation
• Camera controls
• Rendering pipeline
• Input handling

Core Concepts

World

All entities are defined within the <world> tag:

<world canvas="#game-canvas" sky="#87ceeb">
  <!-- All entities and components here -->
</world>

Basic Entities and Components

Entities and components can be defined with a CSS-like syntax:

<world canvas="#game-canvas" sky="#87ceeb">
  <entity
    transform
    body="type: 1; pos: 0 -0.5 0"
    renderer="shape: box; size: 20 1 20; color: 0x90ee90"
    collider="shape: box; size: 20 1 20"
  ></entity>
</world>

or, with CSS-style shorthand expansion:

<world canvas="#game-canvas" sky="#87ceeb">
  <entity
    transform
    renderer
    collider
    pos="0 -0.5 0"
    body="type: 1"
    shape="box"
    size="20 1 20"
    color="#90ee90"
  ></entity>
</world>

or, with recipes (entity-component bundles):

<world canvas="#game-canvas" sky="#87ceeb">
  <static-part pos="0 -0.5 0" shape="box" size="20 1 20" color="#90ee90"></static-part>
</world>

Custom Systems

Register custom systems and components to handle arbitrary game logic:

<world canvas="#game-canvas" sky="#87ceeb">
  <static-part pos="0 -0.5 0" shape="box" size="20 1 20" color="#90ee90"></static-part>

  <!-- Entity with custom component -->
  <entity my-component="10"></entity>
</world>

<script type="module">
  import * as GAME from 'vibegame';

  const MyComponent = GAME.defineComponent({
    value: GAME.Types.f32,
  });

  const query = GAME.defineQuery([MyComponent]);

  const MySystem: GAME.System = {
    update: (state: GAME.State): void => {
      const entities: number[] = query(state.world);
      for (const entity of entities) {
        console.log("my-component value for entity", entity, "is", MyComponent.value[entity]);
        MyComponent.value[entity] += 1;
      }
    },
  };

  GAME.withComponent('my-component', MyComponent)
    .withSystem(MySystem)
    .run();
</script>

When registered, the custom component MyComponent will be automatically parsed from HTML with value 10. The custom system MySystem will be automatically run every frame, which will query for every entity with my-component and increment its value by 1.

Development

# Install dependencies
bun install

# Run example (hello-world)
bun run example

# Build library (fast, library only)
bun run build

# Build for release (includes docs & CDN)
bun run build:release

# Run tests
bun test

Links

• GitHub Repository
• NPM Package
• Live Demo on Hugging Face
• Live Demo on JSFiddle
• Shallot Context Manager