@1game/render-engine

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


简介

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

安装

``bash
npm install @1game/render-engine
`

或使用 yarn:

`bash
yarn add @1game/render-engine
`

快速开始

$3

`typescript
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: [],
});
`

$3

`typescript
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;
}
},
});
`

$3

`typescript
// 更新场景属性
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. 更新了相关文档