闪光( S) (@fungi.computer/sprite(中文(简体) )
Sprite 通过主机安装的渲染器呈现字符文档, 所以 游戏或app可以显示一个动画相机而无需写入自己的渲染层. 主机选择本地字符、渲染器适配器、网络源头和资产 限制。 每个已挂载的玩家拥有其当前源和演示文稿寿命.
安装或设置
npm install @fungi.computer/sprite
包船只实行无害环境管理,并取决于效应、Zod和
凯恩 在运行时间。 反应是一种可选的同伴依赖,
仅需要用于 ./react 进入点。 核心切入点,
@fungi.computer/sprite,导出渲染器中性播放器 API.
@fungi.computer/sprite/react 导出反应提供者和组件.
@fungi.computer/sprite/video 导出可选的视频渲染器. ./avatar
提供可视化描述和目录识别验证. ./ink 财务报告和审定财务报表
./mycelium 将装饰图画独立于角色播放器.
Zdog支援舰艇作为单独的 Sprite Zdog (英语)
软件包.
快开始
此说明性反应示例配置了主机的资产政策和懒惰性 视频渲染器,然后显示字符文档:
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, (中文(简体) ),
src/react.test.tsx,以及
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 引用导入
渲染器中性播放器 API 从 @fungi.computer/sprite,反应提供者
从 @fungi.computer/sprite/react,以及视频适配器
@fungi.computer/sprite/video。参考内容还包括: ./avatar; 数据
装饰 ./ink 财务报告和审定财务报表 ./mycelium 合同见上文.
实例和检查
视频工作台的故事呈现了一个有多个剪辑和变化的角色 选择剪辑的活动。 启动本地 Ladle 工作台 仓库根 :
pnpm --filter @fungi.computer/sprite exec ladle serve
以 :
pnpm --filter @fungi.computer/sprite test
限制和错误
Sprite验证共享的文档信封,而不是渲染器特定的数据. 这个 主机必须配置以已送达文档命名的渲染器并审查其资产 政策。 没有资产政策,远程来源就被剥夺。 视频编码支持 取决于浏览器和编码文件.
内置渲染样式通过 SVG 过滤器绘制 。 减少调动
首选项、 暂停状态、 屏外状态和页面可见度暂停样式
动静。 还剩一具尸体. poster 提供装入图像,而不是a
替换主机资产限额.
贡献和许可证
Sprite是麻省理工学院的许可。 见 LICENSE 财务报告和审定财务报表
THIRD_PARTY_NOTICES。 。 。 .