# @fungi\.computer/sprite 中文文档

规范地址：https://npmcn.com/package/%40fungi.computer/sprite/

版本：0\.2\.2
npm 元数据更新时间：2026-11-08T18:15:06.699Z
中文译文更新时间：2026-11-15T18:25:20.684Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40fungi.computer/sprite
原文对照：https://npmcn.com/package/%40fungi.computer/sprite/?lang=original
项目主页：https://github.com/fungi-computer/sprite#readme
源码仓库：https://github.com/fungi-computer/sprite

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：129 kB，27 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：react ^18\.2\.0 \|\| ^19\.0\.0
- 首次发布：2026-10-15T08:00:00.375Z
- 最新版本发布：2026-11-08T18:15:06.494Z
- 近 30 天下载量：11900（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：6（近 12 个月 6 个）

## 中文简介

为真菌剂打入的渲染器演示文稿

## 安装

```sh
npm install @fungi.computer/sprite
```

也可以使用：`pnpm add @fungi.computer/sprite`、`yarn add @fungi.computer/sprite`、`bun add @fungi.computer/sprite`

## README

# 闪光( S) (`@fungi.computer/sprite`(中文(简体) )

Sprite 通过主机安装的渲染器呈现字符文档, 所以 游戏或app可以显示一个动画相机而无需写入自己的渲染层. 主机选择本地字符、渲染器适配器、网络源头和资产 限制。 每个已挂载的玩家拥有其当前源和演示文稿寿命.

## 安装或设置

```sh
npm install @fungi.computer/sprite
```

包船只实行无害环境管理,并取决于效应、Zod和 [凯恩](https://npmcn.com/package/%40fungi.computer/cairn/README.md) 在运行时间。 反应是一种可选的同伴依赖, 仅需要用于 `./react` 进入点。 核心切入点, `@fungi.computer/sprite`,导出渲染器中性播放器 API. `@fungi.computer/sprite/react` 导出反应提供者和组件. `@fungi.computer/sprite/video` 导出可选的视频渲染器. `./avatar` 提供可视化描述和目录识别验证. `./ink` 财务报告和审定财务报表 `./mycelium` 将装饰图画独立于角色播放器. Zdog支援舰艇作为单独的 [Sprite Zdog (英语)](https://npmcn.com/package/%40fungi.computer/sprite-zdog/README.md) 软件包.

## 快开始

此说明性反应示例配置了主机的资产政策和懒惰性 视频渲染器,然后显示字符文档:

```tsx
import { createSprite } from "@fungi.computer/sprite";
import { Sprite, SpriteProvider } from "@fungi.computer/sprite/react";

const service = createSprite({
  assets: {
    baseURL: window.location.href,
    allowedOrigins: [window.location.origin],
    maxBytes: 2_000_000,
    maxTotalBytes: 4_000_000,
    maxRequests: 4,
  },
  renderers: {
    video: () => import("@fungi.computer/sprite/video"),
  },
});

function Character() {
  return (
    <SpriteProvider service={service}>
      <Sprite
        src="/characters/my-avatar.json"
        activity="idle"
        role="img"
        aria-label="My avatar"
      />
    </SpriteProvider>
  );
}
```

包测试玩家更新,回放寿命,以及资产录入. 见 [`src/player.test.ts`](https://npmcn.com/package/%40fungi.computer/sprite/src/player.test.ts), (中文(简体) ), [`src/react.test.tsx`](https://npmcn.com/package/%40fungi.computer/sprite/src/react.test.tsx),以及 [`src/assets.test.ts`](https://npmcn.com/package/%40fungi.computer/sprite/src/assets.test.ts)。 。 。 .

## 核心概念

字符文档有 `version: 1`,名称,渲染器名称,可选 控制器和海报,以及特定渲染器 `data`。共享计划验证 那个信封 所选适配器验证自己的数据. 来源是 文档 URL或 `{ local: "key" }` 为主机安装的字符.

`createSprite` 创建稳定的宿主服务. 主机供应当地 字符、渲染器加载器和资产政策。 玩家选择一个源并 接收活动、表达式、外观和渲染样式的更新,而不包含 替换其主机元素。 反应 `Sprite` 拥有一个玩家并处理它 当它卸载时。 玩家必须暴露 `set`, (中文(简体) ), `pause`, (中文(简体) ), `subscribe`,以及 一个同步 `dispose`。 。 。 .

演示文稿可携带 `performance`,该演示文稿的渲染器数据 作为场景。 Sprite没有改变地把它传给了土生土长的造型器,然后比较一下 **身份**: 新对象中的等值再次适用。 一个主机必须保留 比较稳定(例如: `useMemo`)或制造器的 `set` 运行 每一个变相。 制作者通过 `reportProgress` 打开 它的背景。 准备状态带有最新值为: `progress`,则 一旦选择结束,报告就会被忽略。 Sprite 从未读取任何一个值 . 选中的适配器拥有两种方案, 如它拥有 `document.data`。 。 。 .

`renderStyle` 应用一个内置的 SVG 过滤器 : `plain`, (中文(简体) ), `pencil`, (中文(简体) ), `manga`, (中文(简体) ), `riso`, (中文(简体) ), `halftone`, (中文(简体) ), `blueprint`, (中文(简体) ), `crt`,或 `watercolor`每个玩家 拥有它的过滤实例 。 当玩家暂停时, 动画样式暂停, 是 关闭屏幕, 页面是隐藏的, 或者请求减少运动.

远程文件和嵌入式资产通过一个读取器. 主机设定 允许来源,每个响应的最大字节,每个选择的总字节,以及 请求数。 本地字符不需要远程资产政策. 视频使用 配置 `video` 渲染器和读取剪辑资产通过同样的路径.

反应 `Sprite` 带 `src`选项 `activity`, (中文(简体) ), `expression`, (中文(简体) ), `appearance`, (中文(简体) ), `renderStyle` 财务报告和审定财务报表 `performance`,加上主机的普通属性 `div`。 。 。 . 过 `paused` 暂停,并 `onState` 以观察玩家状态。 一个直接 `service` 道具覆盖 `SpriteProvider`;需要其中一个.

对于帧驱动的回放,请将 App 包入 `<AnimationTimeProvider timeMs={frame / fps * 1000}>` 从同一反应条目. 每个巢穴 `Sprite` 和 Parakeet 键盘 `AgentHead` 继承该时钟,包括 被纪念的孩子。 明确 `timeMs` 道具覆盖它( 0 包含) . 被控制的玩家在请求之间停留; 省略提供者的时间 恢复他们的普通活或被暂停的行为. 没有提供商表示没有时钟 超过.

### 已保存的外观

`@fungi.computer/sprite/avatar` 定义 v1 描述符 : `v`, (中文(简体) ), `character`, (中文(简体) ), `appearance`, (中文(简体) ), `expression` 财务报告和审定财务报表 `renderStyle`。 。 。 . `avatarEnvelopeSchema` 只检查 那个信封 使用 `createAvatarSchema(catalog)` 或者说 `parseAvatar(data, catalog)` 还验证选定字符的控件和表达式。 Sprite Zdog (英语) 提供装入内置目录的验证器.

### 装饰性图纸

`mountInkDrawing(host, { art, palette, ...options })` 从 `./ink` 追踪到的油漆 艺术与Canvas 2D. 调色板是一个调回; 调回调回 `redraw()` 主题更改后 `destroy()` 当宿主离开的时候.

`mountMycelium(host, { pixi, palette, ...options })` 从 `./mycelium` 返回 a 承诺一个不断增长的领域 `pulse()` 财务报告和审定财务报表 `destroy()`东道方用品 Pixi 8和调色板。 这两幅图都尊重 减少运动,释放他们的 画布和观察员通过 `destroy()`。 。 。 .

## API 参考

见生成 [Sprite API 引用](https://npmcn.com/package/%40fungi.computer/sprite/docs/api/README.md)导入 渲染器中性播放器 API 从 `@fungi.computer/sprite`,反应提供者 从 `@fungi.computer/sprite/react`,以及视频适配器 `@fungi.computer/sprite/video`。参考内容还包括: `./avatar`; 数据 装饰 `./ink` 财务报告和审定财务报表 `./mycelium` 合同见上文.

## 实例和检查

视频工作台的故事呈现了一个有多个剪辑和变化的角色 选择剪辑的活动。 启动本地 Ladle 工作台 仓库根 :

```sh
pnpm --filter @fungi.computer/sprite exec ladle serve
```

以 :

```sh
pnpm --filter @fungi.computer/sprite test
```

## 限制和错误

Sprite验证共享的文档信封,而不是渲染器特定的数据. 这个 主机必须配置以已送达文档命名的渲染器并审查其资产 政策。 没有资产政策,远程来源就被剥夺。 视频编码支持 取决于浏览器和编码文件.

内置渲染样式通过 SVG 过滤器绘制 。 减少调动 首选项、 暂停状态、 屏外状态和页面可见度暂停样式 动静。 还剩一具尸体. `poster` 提供装入图像,而不是a 替换主机资产限额.

## 贡献和许可证

Sprite是麻省理工学院的许可。 见 [`LICENSE`](https://npmcn.com/package/%40fungi.computer/sprite/LICENSE) 财务报告和审定财务报表 [`THIRD_PARTY_NOTICES`](https://npmcn.com/package/%40fungi.computer/sprite/THIRD_PARTY_NOTICES)。 。 。 .

## 常见问题

### @fungi\.computer/sprite 是什么？

为真菌剂打入的渲染器演示文稿

### 如何安装 @fungi\.computer/sprite？

在项目目录运行 npm install @fungi\.computer/sprite，或使用 pnpm add / yarn add / bun add。

### @fungi\.computer/sprite 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @fungi\.computer/sprite 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @fungi\.computer/sprite 可以商用吗？

@fungi\.computer/sprite 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @fungi\.computer/sprite 的下载量有多少？

根据 npm 官方下载统计，@fungi\.computer/sprite 在 2026/10/16 – 2026/11/14 这 30 天内被下载 11,900 次，日均约 397 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @fungi\.computer/sprite 还在维护吗？

最新版本 0\.2\.2 发布于 2026/11/09（7 天前）；至今共发布 6 个版本，其中过去 12 个月发布了 6 个；首次发布于 2026/10/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。