跳转到内容
Estella

性能分析

StatsPlugin 提供实时性能监控，通过屏幕叠加面板显示 FPS、帧时间、渲染统计和逐系统计时。

启用性能分析

在脚本的 setup 函数中添加 StatsPlugin：

import { StatsPlugin } from 'esengine';


export function setup(app) {
    app.addPlugin(new StatsPlugin());
}

配置

new StatsPlugin({
    overlay: true,                  // 显示屏幕面板（默认：true）
    position: 'top-left',          // 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
    container: document.body,       // 叠加面板的 DOM 父元素
})
选项类型默认值说明
overlaybooleantrue显示屏幕统计面板
positionstring'top-left'叠加面板在屏幕上的位置
containerHTMLElementdocument.body叠加面板元素的 DOM 父节点

指标

叠加面板显示：

性能

  • FPS — 每秒帧数，60 帧窗口平滑
  • 帧时间 — 每帧平均毫秒数

渲染

  • 绘制调用 — 每帧绘制调用次数
  • 三角形 — 总三角形数
  • 精灵 / 文本 / Spine / 网格 — 各类型渲染计数
  • 剔除 — 被视锥剔除跳过的实体数

世界

  • 实体 — 总实体数量

系统

  • 前 5 个最慢系统的平均和峰值执行时间（显示为 avg / max ms）
  • 统计数据每 500ms 更新一次，既保持稳定可读性又不丢失峰值信息

在代码中读取统计数据

在系统中访问 Stats 资源：

import { defineSystem, addSystem, Res, Stats } from 'esengine';


addSystem(defineSystem(
    [Res(Stats)],
    (stats) => {
        console.log(`FPS: ${stats.fps}`);
        console.log(`Draw calls: ${stats.drawCalls}`);
        console.log(`Entities: ${stats.entityCount}`);
    }
));

帧历史

性能分析器维护一个 300 帧的滚动缓冲区用于趋势分析：

import { FrameHistory } from 'esengine';


const history = app.getResource(FrameHistory);


// 获取所有记录的帧
const frames = history.getAll();


// 获取最近一帧快照
const latest = history.getLatest();
if (latest) {
    console.log(`帧时间: ${latest.frameTimeMs}ms`);
    for (const [system, ms] of latest.systemTimings) {
        console.log(`  ${system}: ${ms.toFixed(2)}ms`);
    }
}

编辑器集成

性能分析面板可从编辑器工具栏访问，提供：

  • 暂停/恢复统计收集
  • 逐帧检查 — 逐步浏览单个帧以分析卡顿
  • 每帧系统计时细分