Pixi.js 开发者工具

概述

用于调试使用PixiJS编写的游戏和应用程序的浏览器扩展。

特征

• 显示场景图
• 查看和编辑属性
• 在大纲中双击以 console.log 节点
• 在视口中勾勒出活动节点的轮廓。
• 活动节点在开发者控制台中可用，如下所示$pixi
• 在视口中右键单击（或按住 Alt 单击）以激活节点

安装

从以下位置安装 PixiJS Devtools：

• Chrome 网上应用店
• Firefox 附加组件

用法

PixiJS

在您的代码_中找到PIXI.Application创建实例的位置，它看起来像这样：

import { Application } from "pixi.js";

const app = new Application(...)

通过添加以下行公开app给PixiJS Devtools ：

globalThis.__PIXI_APP__ = app;

或者取决于您的 TypeScript 和 ESLint 配置：

(globalThis as any).__PIXI_APP__ = app; // eslint-disable-line

自定义设置？

如果你不使用PIXI.Application或Phaser.Game？您可以手动指定根节点：

globalThis.__PIXI_STAGE__ = yourContainer;

并启用突出显示和选择视口中的节点添加：

globalThis.__PIXI_RENDERER__ = yourRenderer;