Vireon Engine

Vireon Engine is a lightweight, function-first TypeScript game engine for browser games, interactive animation, education, and mini games. It gives you strong 2D support, basic custom 3D primitives, physics, collision, terrain, particles, input, UI, audio, assets, scenes, and a polished typed API without bundling Phaser, Three.js, Babylon.js, Matter.js, Pixi.js, Unity, or any external game SDK.

Created by Pradeep Kumar Sheoran (Developer) at BSG Technologies. Contact: +91-8595147850 (also WhatsApp). Official website: https://bsgtechnologies.com.

Install

npm install vireon-engine

Quickstart

import { createGame } from "vireon-engine";

const game = createGame({
  canvas: "#game",
  width: 800,
  height: 600,
  background: "#111827",
  fps: 60
});

const player = game.createEntity({
  name: "player",
  x: 100,
  y: 300,
  width: 48,
  height: 48,
  color: "#22c55e"
});

player.addPhysics({ gravity: true, mass: 1, friction: 0.15, bounce: 0.1 });
player.addCollider({ type: "box" });

game.createScene("level-1", {
  quantumStart() {
    this.add(player);
  },
  pulse(delta) {
    if (game.input.isKeyDown("ArrowRight")) player.velocity.x = 220;
    else if (game.input.isKeyDown("ArrowLeft")) player.velocity.x = -220;
    else player.velocity.x = 0;
    if (game.input.wasKeyPressed("Space") && player.physics?.grounded) player.physics.jump(520);
  }
});

game.setScene("level-1");
game.start();

Core Features

• Function-based game creation with createGame.
• Scene and entity systems with advanced callback aliases like quantumStart, pulse, paint, and eclipse.
• Unity-inspired scripting lifecycle with onAwake, onStart, onUpdate, onRender, and onDestroy.
• Prefabs for reusable entities and quick spawning.
• Scene JSON export/import for editor workflows and saveable levels.
• Canvas 2D rendering for shapes, sprites, text, tile maps, and UI.
• 2D lighting with ambient darkness and point lights.
• Material, layer, and sprite batch helpers for richer render pipelines.
• Basic custom 3D support with vectors, perspective camera data, and mesh descriptors.
• Basic 3D foundations with mesh primitives, material metadata, and light descriptors.
• Custom physics with gravity, velocity, acceleration, friction, drag, bounce, box/circle collision, triggers, and ground detection.
• Raycast physics and QuadTree spatial query utilities.
• AI helpers with A* pathfinding, state machines, and steering behavior.
• Behavior tree nodes for patrol/chase/attack style enemy logic.
• Motion utilities: tween, moveTo, rotateTo, scaleTo, path following, easing, loops, ping-pong, and time scaling.
• Camera controls with follow, zoom, bounds, screen shake, and coordinate conversion.
• Terrain generation, tile maps, noise, height maps, and collision helpers.
• Particle effects, explosions, trails, screen flash hooks, rain/snow/fire/smoke presets.
• Post-processing hooks for flash, grayscale, and blur-like canvas filters.
• Save/load helpers for localStorage and JSON export/import.
• WebSocket adapter for multiplayer-ready state messages.
• Dialogue/cutscene node system with choices.
• Plugin system, devtools snapshot overlay, and scene editor foundation.
• Project file format helpers, PWA/mobile helpers, and CLI starter generation.
• Inspector, scene hierarchy, collision layers/masks, box/circle casts, and visual editor prototype APIs.
• ECS runtime, prefab variants, scene streaming, profiler, deterministic replay helpers, and build target planning.
• RPG/story modules: dialogue graph, typewriter text, quests, inventory, stats, and abilities.
• Editor app shell, WebGL shader/texture/render-target foundations, asset importer, cutscene timeline, UI layout, multiplayer rooms/RPC/interpolation, joints/springs, and testing helpers.
• Product polish systems: transform gizmos, undo/redo commands, asset database, render graph, physics materials, sensor volumes, audio mixer, localization, save migrations, golden-frame checks, CI, TypeDoc config, and polished demo.
• Keyboard, mouse, touch, and gamepad input.
• Asset loading for images, audio, JSON, and generic fetchable assets.
• Asset manifests and preload groups.
• Sound and music managers with volume, mute, loop, pause, resume, and stop.
• Debug overlay, FPS counter, performance stats, and collider visualization.
• React-compatible: mount a canvas with useRef, then pass the element to createGame.

Common Recipes

Scene

game.createScene("menu", {
  quantumStart() {
    game.ui.button({
      text: "Start Game",
      x: 300,
      y: 250,
      width: 200,
      height: 60,
      onClick: () => game.setScene("level-1")
    });
  },
  paint(ctx) {
    game.drawText({ text: "Vireon Engine", x: 260, y: 160, fontSize: 36, color: "#fff" });
  }
});

Collision

player.onCollisionEnter = (other) => {
  if (other.tags.has("coin")) other.destroy();
};

Camera

const camera = game.createCamera({ x: 0, y: 0, zoom: 1 });
camera.follow(player, { smoothness: 0.12 });
camera.shake({ intensity: 10, duration: 500 });

Terrain

const terrain = game.createTerrain({ width: 2000, height: 600, type: "platform", tileSize: 32 });
game.addTerrain(terrain);

Particles

game.effects.explosion({ x: 300, y: 300, particles: 50, color: "#f97316" });

Audio

await game.assets.load({ jump: "/assets/jump.mp3", theme: "/assets/theme.mp3" });
game.audio.play("jump");
game.audio.music("theme", { loop: true, volume: 0.6 });

Basic 3D

const cube = game.create3DObject({
  type: "cube",
  position: { x: 0, y: 0, z: 0 },
  size: 2,
  color: "#8b5cf6",
  wireframe: true
});

Vireon Engine intentionally keeps 3D basic. It is useful for cubes, planes, simple meshes, educational demos, and effects, not full AAA rendering pipelines.

Advanced Systems

Prefabs

game.prefabs.register({
  name: "coin",
  entity: { width: 16, height: 16, color: "#facc15", tags: ["coin"] },
  collider: { type: "box", trigger: true }
});

const coin = game.instantiate("coin", { x: 300, y: 160 });

Unity-Style Scripts

game.addScript(player, {
  name: "PlayerController",
  onAwake({ entity }) {
    entity.data.health = 100;
  },
  onUpdate({ game, entity }, delta) {
    entity.x += (game.input.isKeyDown("ArrowRight") ? 220 : 0) * delta;
  }
});

Lighting

game.lighting.ambient = "rgba(0,0,0,0.55)";
game.lighting.addPointLight({ x: 320, y: 220, radius: 180, intensity: 0.9 });

AI And Pathfinding

game.nav.useGrid(20, 12, (x, y) => y !== 5);
const path = game.nav.findPath({ x: 0, y: 0 }, { x: 10, y: 8 });

Scene Export/Import

const json = game.exportScene();
game.importScene(json);

Save, Dialogue, Multiplayer Hooks

game.save.save("slot-1", { score: 1200 });
game.dialogue.add([{ id: "intro", speaker: "Guide", text: "Welcome to Vireon." }]);
game.network.connect("wss://example.com/room");
game.network.send("player:move", { x: player.x, y: player.y });

Physics Raycast And QuadTree

const hit = game.physics.raycast(new Vector2(0, 120), new Vector2(1, 0), 600);
const boxHit = game.physics.boxCast(new Vector2(0, 120), { width: 32, height: 32 }, new Vector2(1, 0), 600);

const tree = new QuadTree({ x: 0, y: 0, width: 2000, height: 1200 });
tree.insert(player);
const nearby = tree.query({ x: player.x - 100, y: player.y - 100, width: 200, height: 200 });

Inspector, Hierarchy, And Visual Editor

game.inspector.select(player);
game.inspector.set("x", 240);
game.hierarchy.parent(sword, player);
game.visualEditor.enable();

Collision Layers

player.addCollider({ type: "box", layer: 1, mask: 2 });
enemy.addCollider({ type: "box", layer: 2, mask: 1 });

Animation Graph

const graph = new AnimationGraph()
  .addState({ name: "idle", animation: "idle", transitions: [{ to: "run", when: (p) => p.speed === "fast", duration: 120 }] })
  .addState({ name: "run", animation: "run" });

graph.setParam("speed", "fast");
graph.onEvent("footstep", () => game.audio.play("step"));
player.playAnimation(graph.update() ?? "idle");

Behavior Tree AI

const enemyBrain = new SelectorNode([
  new ActionNode(() => enemyCanSeePlayer ? "success" : "failure"),
  new ActionNode(() => {
    enemy.velocity.x = 60;
    return "running";
  })
]);

Particle Emitters V2

const fire = game.effects.emitter({ x: 200, y: 260, rate: 40, color: "#ef4444", gravity: -80 });
fire.start();

Materials, Layers, And Sprite Batching

const material = new Material2D({ color: "#22c55e", alpha: 0.8, blendMode: "lighter" });

game.layers.add("foreground", (ctx) => {
  material.apply(ctx);
  ctx.fillRect(20, 20, 120, 40);
}, 10);

Project Format And Mobile/PWA Helpers

const project = ProjectFormat.create("My Game");
game.mobile.fitCanvas(game.canvas);
game.pwa.listen();

ECS Runtime

const id = game.ecs.create();
game.ecs.add(id, "position", { x: 0, y: 0 });
game.ecs.add(id, "velocity", { x: 80, y: 0 });
game.ecs.system((world, delta) => {
  for (const entity of world.query("position", "velocity")) {
    const position = world.get<{ x: number; y: number }>(entity, "position")!;
    const velocity = world.get<{ x: number; y: number }>(entity, "velocity")!;
    position.x += velocity.x * delta;
  }
});

Prefab Variants

game.prefabs.register({ name: "enemy", entity: { width: 24, height: 24, color: "#ef4444" } });
game.prefabs.variant({
  name: "boss",
  extends: "enemy",
  overrides: { entity: { width: 96, height: 96, color: "#7c3aed" } }
});

Dialogue V2 And RPG Modules

game.quests.add({ id: "intro", title: "Meet the Guide", objectives: [{ id: "talk", text: "Talk to the guide" }] });
game.inventory.add("player", { id: "potion", name: "Potion", quantity: 2 });
game.stats.set("player", { hp: 100, attack: 12 });
game.abilities.add({ id: "dash", cooldown: 1, action: () => player.velocity.x = 600 });

Profiler, Streaming, Replay, Build Targets

game.profiler.begin("custom-system");
game.profiler.end("custom-system");
game.streaming.load(game.createScene("chunk-1"));
game.replay.record(game.time.delta, { right: game.input.isKeyDown("ArrowRight") });
const pwaPlan = BuildTargets.plan("pwa");

Editor App, Importer, Timeline, UI Layout

const editorState = game.editorApp.snapshot();
const imported = game.importer.import("/assets/hero.png", { pixelsPerUnit: 16 });

const intro = new CutsceneTimeline()
  .addTrack({ name: "dialogue", type: "dialogue", keyframes: [{ time: 500, value: "Welcome" }] });
intro.play();

const uiNodes = game.ui.layout.layout({
  width: 320,
  height: 48,
  direction: "row",
  gap: 8,
  children: [{ width: 120, height: 48 }, { width: 120, height: 48 }]
});

Multiplayer V3 Foundations

game.network.rooms.join("room-1", "player-1");
game.network.rpc.register("damage", (payload) => console.log(payload));
const buffer = new InterpolationBuffer();
buffer.push({ t: 0, x: 0, y: 0 });
buffer.push({ t: 100, x: 30, y: 0 });

Joints, Springs, Navigation Zones

game.physics.distanceJoint(player, crate, 80, 0.6);
game.physics.spring(player, hook, 120, 0.1, 0.35);
game.nav.zones.add({ name: "safe-path", points: [{ x: 0, y: 0 }, { x: 4, y: 2 }] });

Product Polish APIs

game.gizmo.select(player);
game.commands.execute({
  name: "move-player",
  execute: () => game.gizmo.move(16, 0),
  undo: () => game.gizmo.move(-16, 0)
});

const asset = game.assetDatabase.add(game.importer.import("/assets/hero.png"));
game.i18n.add("hi", { hello: "Namaste {name}" });
game.mixer.bus("music").volume = 0.7;
game.saveMigrator.add(2, (data) => ({ ...data, versionName: "v2" }));

More CLI Templates

npx create-vireon-game my-rpg --template=rpg
npx create-vireon-game my-room --template=multiplayer
npx create-vireon-game my-story --template=visualnovel
npx create-vireon-game my-lesson --template=educational

CLI Starter

npx create-vireon-game my-game
npx create-vireon-game my-platformer --template=platformer
npx create-vireon-game my-shooter --template=shooter
npx create-vireon-game my-puzzle --template=puzzle

Examples

The examples/ folder includes platformer, racing, shooter, terrain, 3D cube, physics, and UI menu demos. Each uses plain browser APIs so you can drop it into Vite, React, Next.js client components, or static HTML.

Storybook

Run isolated UI and engine examples:

npm run storybook

Publish

npm run typecheck
npm test
npm run build
npm publish

Donation

Support development by UPI on mobile number: +91-8595147850.

Keywords And Hashtags

#VireonEngine #BSGTechnologies #TypeScriptGameEngine #CanvasGameEngine #BrowserGames #GameDev #NoExternalGameEngine

Browser Compatibility

Modern Chromium, Firefox, Safari, and Edge. Canvas 2D is the primary renderer. WebGL is optional for basic 3D and gracefully reports unsupported contexts.