@1game/render-engine

一游渲染引擎 - 基于 Canvas 2D 的高性能渲染引擎

简介

@1game/render-engine 是一个轻量级、高性能的 Canvas 2D 渲染引擎，专为游戏和交互式应用设计。它提供了丰富的渲染功能，包括形状、文本、图片渲染，以及事件处理、场景管理等特性。引擎采用 TypeScript 编写，提供完整的类型定义，易于集成到现代前端项目中。

安装

npm install @1game/render-engine

或使用 yarn:

yarn add @1game/render-engine

快速开始

基础使用

import RenderEngine from '@1game/render-engine';

// 创建 Canvas 元素
const canvas = document.getElementById('canvas') as HTMLCanvasElement;

// 初始化渲染引擎
const engine = new RenderEngine({
  canvas,
  loadResource: async (resourceId) => {
    // 实现资源加载逻辑
    // 返回资源的 URL 或 base64 字符串
    return null;
  },
  loadResourceMeta: async (resourceId) => {
    // 实现资源元数据加载逻辑
    // 返回资源的元数据（尺寸、类型等）
    return null;
  },
});

// 添加场景
await engine.addScene({
  sceneId: 'main',
  sceneAttrs: {
    width: 600,
    height: 900,
    backgroundColor: '#1a1a2e',
    childNodeIdsSorted: ['circle-1', 'text-1'],
  },
  nodes: [
    {
      id: 'circle-1',
      type: 'shape',
      x: 100,
      y: 100,
      width: 100,
      height: 100,
      shape: 'circular',
      backgroundColor: '#ff6b6b',
      border: 'line',
      borderWidth: 3,
      borderColor: '#ffffff',
      'render.drawCache': true,
    },
    {
      id: 'text-1',
      type: 'text',
      x: 100,
      y: 220,
      width: 100,
      height: 30,
      text: 'Hello World',
      textSize: '16',
      textColor: '#ffffff',
      textAlign: 'center',
      textVerticalAlign: 'middle',
    },
  ],
  resourceIds: [],
});

事件处理

const engine = new RenderEngine({
  canvas,
  loadResource: async () => null,
  loadResourceMeta: async () => null,
  onRenderEvent: (event) => {
    switch (event.type) {
      case 'touch':
        console.log('触摸事件:', event.data);
        // event.data 是一个数组，包含所有触摸点信息
        event.data.forEach((point) => {
          console.log(`触摸点 ID: ${point.id}, 位置: (${point.x}, ${point.y})`);
        });
        break;
      case 'hover':
        console.log('悬停事件:', event.data);
        // event.data 包含鼠标位置信息
        console.log(`鼠标位置: (${event.data.x}, ${event.data.y})`);
        break;
      case 'keyboard':
        console.log('键盘事件:', event.data);
        // event.data 是一个数组，包含所有按下的键
        event.data.forEach((key) => {
          console.log(`按键: ${key.key}, 代码: ${key.code}`);
        });
        break;
      case 'visibleChange':
        console.log('可见性变化:', event.data.visible);
        // 可以在这里暂停/恢复动画
        break;
    }
  },
});

更新场景数据

// 更新场景属性
engine.updateSceneData('main', {
  scene: {
    alpha: 0.5,
    lowFpsRenderMode: true,
  },
});

// 更新节点属性
engine.updateSceneData('main', {
  nodes: {
    'circle-1': {
      backgroundColor: '#4ecdc4',
      x: 200,
    },
    'text-1': {
      text: 'Updated Text',
    },
  },
});

// 删除节点
engine.updateSceneData('main', {
  nodes: {
    'old-node': null,
  },
});

// 批量更新多个场景
engine.updateAllSceneData({
  main: {
    scene: { alpha: 0.8 },
  },
  overlay: {
    nodes: {
      'button-1': { hidden: true },
    },
  },
});

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！

在提交 PR 之前，请确保：

1. 代码通过 TypeScript 类型检查
2. 代码已使用 Prettier 格式化
3. 添加了必要的测试（如果有）
4. 更新了相关文档