feat: 添加跨平台运行时、资产系统和UI适配功能 (#256)
* feat(platform-common): 添加WASM加载器和环境检测API * feat(rapier2d): 新增Rapier2D WASM绑定包 * feat(physics-rapier2d): 添加跨平台WASM加载器 * feat(asset-system): 添加运行时资产目录和bundle格式 * feat(asset-system-editor): 新增编辑器资产管理包 * feat(editor-core): 添加构建系统和模块管理 * feat(editor-app): 重构浏览器预览使用import maps * feat(platform-web): 添加BrowserRuntime和资产读取 * feat(engine): 添加材质系统和着色器管理 * feat(material): 新增材质系统和着色器编辑器 * feat(tilemap): 增强tilemap编辑器和动画系统 * feat(modules): 添加module.json配置 * feat(core): 添加module.json和类型定义更新 * chore: 更新依赖和构建配置 * refactor(plugins): 更新插件模板使用ModuleManifest * chore: 添加第三方依赖库 * chore: 移除BehaviourTree-ai和ecs-astar子模块 * docs: 更新README和文档主题样式 * fix: 修复Rust文档测试和添加rapier2d WASM绑定 * fix(tilemap-editor): 修复画布高DPI屏幕分辨率适配问题 * feat(ui): 添加UI屏幕适配系统(CanvasScaler/SafeArea) * fix(ecs-engine-bindgen): 添加缺失的ecs-framework-math依赖 * fix: 添加缺失的包依赖修复CI构建 * fix: 修复CodeQL检测到的代码问题 * fix: 修复构建错误和缺失依赖 * fix: 修复类型检查错误 * fix(material-system): 修复tsconfig配置支持TypeScript项目引用 * fix(editor-core): 修复Rollup构建配置添加tauri external * fix: 修复CodeQL检测到的代码问题 * fix: 修复CodeQL检测到的代码问题
This commit is contained in:
YHH
GitHub
239
packages/platform-web/src/BrowserRuntime.ts
Normal file
239
packages/platform-web/src/BrowserRuntime.ts
Normal file
@@ -0,0 +1,239 @@
|
||||
/**
|
||||
* Browser Runtime
|
||||
* 浏览器运行时
|
||||
*
|
||||
* Lightweight runtime for web game builds.
|
||||
* Uses dynamic plugin loading via import maps.
|
||||
*
|
||||
* 轻量级 Web 游戏运行时。
|
||||
* 通过 import maps 动态加载插件。
|
||||
*/
|
||||
|
||||
import { Core } from '@esengine/ecs-framework';
|
||||
import {
|
||||
GameRuntime,
|
||||
createGameRuntime,
|
||||
BrowserPlatformAdapter,
|
||||
runtimePluginManager,
|
||||
BrowserFileSystemService,
|
||||
type IPlugin
|
||||
} from '@esengine/runtime-core';
|
||||
import type { IAssetManager } from '@esengine/asset-system';
|
||||
import { BrowserAssetReader } from './BrowserAssetReader';
|
||||
|
||||
/**
|
||||
* Runtime configuration
|
||||
* 运行时配置
|
||||
*/
|
||||
export interface RuntimeConfig {
|
||||
/** Canvas element ID */
|
||||
canvasId: string;
|
||||
/** Canvas width (defaults to window.innerWidth) */
|
||||
width?: number;
|
||||
/** Canvas height (defaults to window.innerHeight) */
|
||||
height?: number;
|
||||
/** Asset catalog file URL (defaults to '/asset-catalog.json') */
|
||||
assetCatalogUrl?: string;
|
||||
/** Asset base URL (defaults to '/assets') */
|
||||
assetBaseUrl?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Browser Runtime
|
||||
* 浏览器运行时
|
||||
*
|
||||
* Main entry point for running games in browser.
|
||||
* Supports dynamic plugin registration.
|
||||
*/
|
||||
export class BrowserRuntime {
|
||||
private _runtime: GameRuntime | null = null;
|
||||
private _canvasId: string;
|
||||
private _width: number;
|
||||
private _height: number;
|
||||
private _assetCatalogUrl: string;
|
||||
private _assetBaseUrl: string;
|
||||
private _fileSystem: BrowserFileSystemService | null = null;
|
||||
private _assetReader: BrowserAssetReader | null = null;
|
||||
private _initialized = false;
|
||||
|
||||
constructor(config: RuntimeConfig) {
|
||||
this._canvasId = config.canvasId;
|
||||
this._width = config.width ?? window.innerWidth;
|
||||
this._height = config.height ?? window.innerHeight;
|
||||
this._assetCatalogUrl = config.assetCatalogUrl ?? '/asset-catalog.json';
|
||||
this._assetBaseUrl = config.assetBaseUrl ?? '/assets';
|
||||
}
|
||||
|
||||
/**
|
||||
* Register a plugin dynamically
|
||||
* 动态注册插件
|
||||
*
|
||||
* Call this before initialize() to register plugins.
|
||||
*/
|
||||
registerPlugin(plugin: IPlugin): void {
|
||||
if (plugin) {
|
||||
runtimePluginManager.register(plugin);
|
||||
runtimePluginManager.enable(plugin.manifest.id);
|
||||
console.log(`[Runtime] Registered plugin: ${plugin.manifest.id}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Register multiple plugins
|
||||
* 注册多个插件
|
||||
*/
|
||||
registerPlugins(plugins: IPlugin[]): void {
|
||||
for (const plugin of plugins) {
|
||||
this.registerPlugin(plugin);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the runtime
|
||||
* 初始化运行时
|
||||
*
|
||||
* @param wasmModule - Optional WASM module (from es_engine.js)
|
||||
*/
|
||||
async initialize(wasmModule?: unknown): Promise<void> {
|
||||
if (this._initialized) {
|
||||
console.warn('[Runtime] Already initialized');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize browser file system service
|
||||
this._fileSystem = new BrowserFileSystemService({
|
||||
baseUrl: this._assetBaseUrl,
|
||||
catalogUrl: this._assetCatalogUrl,
|
||||
enableCache: true
|
||||
});
|
||||
await this._fileSystem.initialize();
|
||||
|
||||
// Initialize asset reader
|
||||
this._assetReader = new BrowserAssetReader(this._assetBaseUrl);
|
||||
|
||||
// Create browser platform adapter
|
||||
const platform = new BrowserPlatformAdapter({
|
||||
wasmModule: wasmModule ?? undefined
|
||||
});
|
||||
|
||||
// Create game runtime
|
||||
this._runtime = createGameRuntime({
|
||||
platform,
|
||||
canvasId: this._canvasId,
|
||||
width: this._width,
|
||||
height: this._height,
|
||||
autoStartRenderLoop: false
|
||||
});
|
||||
|
||||
await this._runtime.initialize();
|
||||
|
||||
// Register file system service
|
||||
const IFileSystemServiceKey = Symbol.for('IFileSystemService');
|
||||
if (!Core.services.isRegistered(IFileSystemServiceKey)) {
|
||||
Core.services.registerInstance(IFileSystemServiceKey, this._fileSystem);
|
||||
}
|
||||
|
||||
// Set asset reader for AssetManager
|
||||
if (this._runtime.assetManager && this._assetReader) {
|
||||
this._runtime.assetManager.setReader(this._assetReader);
|
||||
}
|
||||
|
||||
// Browser-specific settings (no editor UI)
|
||||
this._runtime.setShowGrid(false);
|
||||
this._runtime.setShowGizmos(false);
|
||||
|
||||
this._initialized = true;
|
||||
console.log('[Runtime] Initialized');
|
||||
}
|
||||
|
||||
/**
|
||||
* Load a scene from URL
|
||||
* 从 URL 加载场景
|
||||
*/
|
||||
async loadScene(sceneUrl: string): Promise<void> {
|
||||
if (!this._runtime) {
|
||||
throw new Error('Runtime not initialized. Call initialize() first.');
|
||||
}
|
||||
await this._runtime.loadSceneFromUrl(sceneUrl);
|
||||
}
|
||||
|
||||
/**
|
||||
* Start the game loop
|
||||
* 启动游戏循环
|
||||
*/
|
||||
start(): void {
|
||||
this._runtime?.start();
|
||||
}
|
||||
|
||||
/**
|
||||
* Stop the game loop
|
||||
* 停止游戏循环
|
||||
*/
|
||||
stop(): void {
|
||||
this._runtime?.stop();
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle window resize
|
||||
* 处理窗口大小变化
|
||||
*/
|
||||
handleResize(width: number, height: number): void {
|
||||
this._runtime?.resize(width, height);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the underlying GameRuntime
|
||||
* 获取底层 GameRuntime
|
||||
*/
|
||||
get gameRuntime(): GameRuntime | null {
|
||||
return this._runtime;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the asset manager
|
||||
* 获取资产管理器
|
||||
*
|
||||
* @returns The asset manager instance, or null if not initialized
|
||||
*/
|
||||
get assetManager(): IAssetManager | null {
|
||||
return this._runtime?.assetManager ?? null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if runtime is initialized
|
||||
* 检查运行时是否已初始化
|
||||
*/
|
||||
get isInitialized(): boolean {
|
||||
return this._initialized;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a browser runtime instance
|
||||
* 创建浏览器运行时实例
|
||||
*/
|
||||
export function create(config: RuntimeConfig): BrowserRuntime {
|
||||
return new BrowserRuntime(config);
|
||||
}
|
||||
|
||||
/**
|
||||
* Default export for convenient usage
|
||||
* 默认导出，便于使用
|
||||
*
|
||||
* Usage in game HTML:
|
||||
* ```js
|
||||
* const ECSRuntime = (await import('@esengine/platform-web')).default;
|
||||
* const runtime = ECSRuntime.create({ canvasId: 'game-canvas' });
|
||||
* ```
|
||||
*/
|
||||
export default {
|
||||
create,
|
||||
BrowserRuntime,
|
||||
BrowserAssetReader,
|
||||
// Re-export useful types from dependencies
|
||||
Core,
|
||||
GameRuntime,
|
||||
createGameRuntime,
|
||||
BrowserPlatformAdapter,
|
||||
runtimePluginManager
|
||||
};
|
||||
Reference in New Issue
Block a user