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检测到的代码问题

packages/ecs-engine-bindgen/src/systems/EngineRenderSystem.ts

@@ -5,8 +5,10 @@
 
 import { EntitySystem, Matcher, Entity, ComponentType, ECSSystem, Component, Core } from '@esengine/ecs-framework';
 import { TransformComponent } from '@esengine/engine-core';
+import { Color } from '@esengine/ecs-framework-math';
 import { SpriteComponent } from '@esengine/sprite';
 import { CameraComponent } from '@esengine/camera';
+import { getMaterialManager } from '@esengine/material-system';
 import type { EngineBridge } from '../core/EngineBridge';
 import { RenderBatcher } from '../core/RenderBatcher';
 import type { SpriteRenderData } from '../types';
@@ -279,7 +281,7 @@ export class EngineRenderSystem extends EntitySystem {
                 : (typeof transform.rotation === 'number' ? transform.rotation : transform.rotation.z);
 
             // Convert hex color string to packed RGBA | 将十六进制颜色字符串转换为打包的RGBA
-            const color = this.hexToPackedColor(sprite.color, sprite.alpha);
+            const color = Color.packHexAlpha(sprite.color, sprite.alpha);
 
             // Get texture ID from sprite component
             // 从精灵组件获取纹理ID
@@ -290,6 +292,16 @@ export class EngineRenderSystem extends EntitySystem {
                 textureId = this.bridge.getOrLoadTextureByPath(sprite.texture);
             }
 
+            // Get material ID from path (0 = default if not found or no path specified)
+            // 从路径获取材质 ID（0 = 默认，如果未找到或未指定路径）
+            const materialId = sprite.material
+                ? getMaterialManager().getMaterialIdByPath(sprite.material)
+                : 0;
+
+            // Collect material overrides if any
+            // 收集材质覆盖（如果有）
+            const hasOverrides = sprite.hasOverrides();
+
             // Pass actual display dimensions (sprite size * world transform scale)
             // 传递实际显示尺寸（sprite尺寸 * 世界变换缩放）
             const renderData: SpriteRenderData = {
@@ -302,7 +314,11 @@ export class EngineRenderSystem extends EntitySystem {
                 originY: sprite.anchorY,
                 textureId,
                 uv,
-                color
+                color,
+                materialId,
+                // Only include overrides if there are any
+                // 仅在有覆盖时包含
+                ...(hasOverrides ? { materialOverrides: sprite.materialOverrides } : {})
             };
 
             renderItems.push({ sortingOrder: sprite.sortingOrder, sprites: [renderData] });
@@ -1054,32 +1070,6 @@ export class EngineRenderSystem extends EntitySystem {
         return this.transformMode;
     }
 
-    /**
-     * Convert hex color string to packed RGBA.
-     * 将十六进制颜色字符串转换为打包的RGBA。
-     */
-    private hexToPackedColor(hex: string, alpha: number): number {
-        let r = 255, g = 255, b = 255;
-
-        if (typeof hex === 'string' && hex.startsWith('#')) {
-            const hexValue = hex.slice(1);
-            if (hexValue.length === 3) {
-                r = parseInt(hexValue[0] + hexValue[0], 16);
-                g = parseInt(hexValue[1] + hexValue[1], 16);
-                b = parseInt(hexValue[2] + hexValue[2], 16);
-            } else if (hexValue.length === 6) {
-                r = parseInt(hexValue.slice(0, 2), 16);
-                g = parseInt(hexValue.slice(2, 4), 16);
-                b = parseInt(hexValue.slice(4, 6), 16);
-            }
-        }
-
-        const a = Math.round(alpha * 255);
-        // Pack as 0xAABBGGRR for WebGL
-        return ((a & 0xFF) << 24) | ((b & 0xFF) << 16) | ((g & 0xFF) << 8) | (r & 0xFF);
-    }
-
-
     /**
      * Register a render data provider.
      * 注册渲染数据提供者。