esengine/docs/en/index.md

layout, title

layout	title
page	ESEngine - High-performance TypeScript ECS Framework

Quick Links

View Docs

Quick Start

Get Started in 5 Minutes

From installation to your first ECS app, learn the core concepts quickly.

AI System

Visual Behavior Tree Editor

Built-in AI behavior tree system with visual editing and real-time debugging.

Core Features

High-performance ECS Architecture

Data-driven entity component system for large-scale entity processing with cache-friendly memory layout.

Learn more

Full Type Support

100% TypeScript with complete type definitions and compile-time checking for the best development experience.

Learn more

Visual Behavior Tree

Built-in AI behavior tree system with visual editor, custom nodes, and real-time debugging.

Learn more

Multi-Platform Support

Support for browsers, Node.js, WeChat Mini Games, and seamless integration with major game engines.

Learn more

Modular Design

Core features packaged independently, import only what you need. Support for custom plugin extensions.

Learn more

Developer Tools

Built-in performance monitoring, debugging tools, serialization system, and complete development toolchain.

Learn more

<style scoped> /* Home page specific styles */ .news-section { background: #0d0d0d; padding: 64px 0; border-top: 1px solid #2a2a2a; } .news-container { max-width: 1400px; margin: 0 auto; padding: 0 48px; } .news-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; } .news-title { font-size: 1.5rem; font-weight: 700; color: #ffffff; margin: 0; } .news-more { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 6px; color: #a0a0a0; font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: all 0.2s; } .news-more:hover { background: #252525; color: #ffffff; } .news-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .news-card { display: flex; background: #1f1f1f; border: 1px solid #2a2a2a; border-radius: 12px; overflow: hidden; text-decoration: none; transition: all 0.2s; } .news-card:hover { border-color: #3b9eff; } .news-card-image { width: 200px; min-height: 140px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; gap: 12px; } .news-icon { opacity: 0.9; } .news-badge { display: inline-block; padding: 4px 12px; background: transparent; border: 1px solid #3a3a3a; border-radius: 16px; color: #a0a0a0; font-size: 0.75rem; font-weight: 500; } .news-card-content { padding: 20px; display: flex; flex-direction: column; justify-content: center; } .news-card-content h3 { font-size: 1.125rem; font-weight: 600; color: #ffffff; margin: 0 0 8px 0; } .news-card-content p { font-size: 0.875rem; color: #707070; margin: 0; line-height: 1.6; } .features-section { background: #0d0d0d; padding: 64px 0; } .features-container { max-width: 1400px; margin: 0 auto; padding: 0 48px; } .features-title { font-size: 1.5rem; font-weight: 700; color: #ffffff; margin: 0 0 32px 0; } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .feature-card { background: #1f1f1f; border: 1px solid #2a2a2a; border-radius: 12px; padding: 24px; transition: all 0.15s ease; } .feature-card:hover { border-color: #3b9eff; background: #252525; } .feature-icon { width: 48px; height: 48px; background: #0d0d0d; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .feature-title { font-size: 16px; font-weight: 600; color: #ffffff; margin: 0 0 8px 0; } .feature-desc { font-size: 14px; color: #707070; line-height: 1.7; margin: 0 0 16px 0; } .feature-link { font-size: 14px; color: #3b9eff; text-decoration: none; font-weight: 500; } .feature-link:hover { text-decoration: underline; } @media (max-width: 1024px) { .news-container, .features-container { padding: 0 24px; } .news-grid { grid-template-columns: 1fr; } .features-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .news-card { flex-direction: column; } .news-card-image { width: 100%; min-height: 120px; } .features-grid { grid-template-columns: 1fr; } } </style>