Isometric Game Engine

Status: WIP

Last Updated: December 22, 2024

TypeScript Game Engine WordPress Interactive Development Tools

Isometric Game Engine

A professional TypeScript-based isometric game engine designed for WordPress integration, featuring centralized configuration management and comprehensive development tools.

See it in Action here: lust-auf-zahnarzt.de/ecke-tour/ or check out the Demo.

About the Project

The Isometric Game Engine is a complete rendering system built with modern web technologies. It provides a robust foundation for creating interactive isometric experiences with proper depth sorting, resource management, and scene transitions.

Key Features

Centralized Configuration System - Single sources of truth for all settings via MasterGameConfig and SceneRegistry
TypeScript Architecture - Full type safety and modern development experience
Professional Development Tools - Scene switcher, dev watermark, and debug utilities
Comprehensive Audio System - Background music and interactive sound effects (SFX)
WordPress Integration - Seamless plugin integration with asset path resolution
Event-Driven Scripting - 12+ action types for interactive elements
Advanced Resource Management - Image preloading, caching, and fallback support

Live Demo

Experience the engine in action with my interactive workspace:

Open Demo in New Tab • Press Ctrl+Shift+S for scene switcher

Technical Highlights

Architecture

Single Source of Truth Configuration - All settings managed centrally in MasterGameConfig.ts and SceneRegistry.ts
Environment-Specific Builds - Standalone, WordPress, and development configurations
Zero Production Impact - Development tools completely excluded from production builds
Build-Time Scene Management - Enable/disable scenes for specific builds

Dev Tools

Scene Switcher - Press Ctrl+Shift+S to switch between scenes
Dev Watermark - Visual indicator showing development mode
Enhanced Console Logging - Detailed debugging output
Scene Validation - Automatic integrity checking

WordPress Integration

Seamless integration with WordPress through:

Plugin architecture with proper asset path resolution
Configuration via window.ISO_Game_Config
Media library integration for assets
Responsive design for different screen sizes

Usage Examples

Basic Implementation

import { Game } from './src/core/Game';
import { MasterGameConfig } from './src/config/MasterGameConfig';

// Use pre-configured settings (recommended)
const config = MasterGameConfig.getStandaloneConfig({
  debug: true
});

const container = document.getElementById('game-container');
const game = new Game(config, container);

await game.initialize();
game.start();

Scene Configuration

{
  "name": "workspace_scene",
  "width": 800,
  "height": 600,
  "tileSize": 32,
  "background": "workspace_bg.png",
  "music": "ambient_workspace.mp3",
  "elements": [
    {
      "id": "interactive-desk",
      "type": "object",
      "x": 10,
      "y": 5,
      "interactable": true,
      "properties": {
        "sprite": "desk.png",
        "dialog": "A cluttered workspace desk"
      },
      "sfx": {
        "click": "desk_interaction.wav"
      }
    }
  ]
}

Current Status

✅ Complete TypeScript implementation
✅ WordPress plugin integration
✅ Comprehensive audio system
✅ Development tools and debugging
✅ Scene management and transitions
✅ Resource management and caching
✅ Event-driven scripting system

Future Enhancements

Enhanced mobile touch controls
Additional scene transition effects
Extended scripting action library
Performance optimizations for large scenes

Repository

The complete source code, documentation, and examples are available on GitHub:

View on GitHub