# @flare-engine/assets 中文文档

规范地址：https://npmcn.com/package/%40flare-engine/assets/

版本：0\.4\.12
npm 元数据更新时间：2026-11-12T19:45:45.968Z
中文译文更新时间：2026-11-14T21:27:20.599Z
软件包许可：Apache-2\.0

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

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

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

- 包体积（解压后）：125 kB，12 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=20
- 运行依赖：2 个
- 首次发布：2026-06-09T16:19:37.205Z
- 最新版本发布：2026-11-12T19:45:45.596Z
- 近 30 天下载量：3324（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：17（近 12 个月 17 个）

## 中文简介

资产加载, 显示工作表解析

## 安装

```sh
npm install @flare-engine/assets
```

也可以使用：`pnpm add @flare-engine/assets`、`yarn add @flare-engine/assets`、`bun add @flare-engine/assets`

## README

# @flare-engine/资产

明确驱动的资产装载 - `AssetManager` 有了进步信号, `SpriteSheet` (TexturePacker hash + 数组,Aseprite JSON),,"活塞活塞","活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活塞活, `Texture` 包起来 `SkImage`, (中文(简体) ), `createProceduralAtlas` 用于生成形状图集/占位符。 音频缓冲类型 `@flare-engine/audio`。 。 。 .

## 安装

```sh
bun add @flare-engine/assets
```

## 使用量

清单是 `{ key, type, path }` 条目. `AssetManager` 代表 实际获取+解码到已插入的 `AssetLoader`;两艘默认装载船—— 1个用于网络(`fetch`)和一个原生(文件系统) `readFile`) (中文(简体) ). 都拿一个 `decodeImage` 接通你的Skia/CanvasKit实例 所以包裹拉入 没有自己的制造者.

### 网络( CanvasKit)

```ts
import { AssetManager, createFetchAssetLoader, type ManifestEntry, type SkImageLike } from '@flare-engine/assets';

declare const kit: { MakeImageFromEncoded(bytes: Uint8Array): SkImageLike | null };

const loader = createFetchAssetLoader({
  decodeImage: (bytes) => kit.MakeImageFromEncoded(bytes),
});

const manifest: ManifestEntry[] = [
  { key: 'hero', type: 'texture', path: '/assets/hero.png' },
  { key: 'atlas', type: 'spritesheet', path: '/assets/hero.json' },
];

const assets = new AssetManager(loader);
assets.onProgress.add((p) => console.log(`loading ${Math.round(p * 100)}%`));
await assets.load(manifest);

const hero = assets.get('hero'); // Texture
```

### 原生( 反应原生 + Skia)

```ts
import { Skia } from '@shopify/react-native-skia';
import * as FileSystem from 'expo-file-system';
import { AssetManager, createFileAssetLoader, decodeImage } from '@flare-engine/assets';

const loader = createFileAssetLoader({
  readFile: async (path) => {
    const base64 = await FileSystem.readAsStringAsync(path, {
      encoding: FileSystem.EncodingType.Base64,
    });
    return Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));
  },
  decodeImage: (bytes) => decodeImage(Skia, bytes),
});

const assets = new AssetManager(loader);
await assets.load(manifest);
```

每个条目 `type`数字 : `texture` − a 个 `Texture`· ; `binary` → `Uint8Array`· ; `json` 编号 : `spritesheet` ~ 解析的 JSON( 给一个图示表的结果给 `parseTexturePackerHash` 编号 : `parseTexturePackerArray` 编号 : `parseAseprite`) (中文(简体) ).

### 部分装载失败

`load()` 一个失败的条目拒绝整个呼叫。 局部时 资产集是可以接受的,使用 `loadManifestSettled()`数字 :

```ts
import { AssetManager, type ManifestEntry } from '@flare-engine/assets';
declare const assets: AssetManager;
declare const manifest: ManifestEntry[];

const { loaded, failed } = await assets.loadManifestSettled(manifest);
if (failed.length) console.warn('some assets failed', failed);
// loaded: string[] of cached keys; failed: { key, error }[]
```

### Sprite 工作表和程序地图集

```ts
import { parseTexturePackerHash, createProceduralAtlas, type SkiaAtlasModuleLike } from '@flare-engine/assets';

declare const json: unknown;
declare const skia: SkiaAtlasModuleLike;

const sheet = parseTexturePackerHash(json);

// Procedural placeholder atlas:
const { image, sheet: atlas } = createProceduralAtlas(skia, [
  { name: 'enemy', w: 32, h: 32, color: 0xff_00_ff_00 },
]);
```

**不支持旋转的框架 .** TexturePacker的"Allow旋转"包了一些 边框; 剖析器尚不能重新绘制, 因此它们会旋转 。 框架 与 `rotated: true` 释放出一个可玩可乐 `console.warn` 命名框架——再导出 无法旋转的地图集。 完全旋转支援是后发射.

见 [API 规格](https://github.com/grzott/flare-engine/blob/main/docs/design/api-specs.md#flare-engineassets--6kb-gzip)。 。 。 .

## 许可证

阿帕奇 - 2.0

## 常见问题

### @flare-engine/assets 是什么？

资产加载, 显示工作表解析

### 如何安装 @flare-engine/assets？

在项目目录运行 npm install @flare-engine/assets，或使用 pnpm add / yarn add / bun add。

### @flare-engine/assets 支持 TypeScript 吗？

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

### @flare-engine/assets 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @flare-engine/assets 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @flare-engine/assets 可以商用吗？

@flare-engine/assets 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @flare-engine/assets 的下载量有多少？

根据 npm 官方下载统计，@flare-engine/assets 在 2026/10/15 – 2026/11/13 这 30 天内被下载 3,324 次，日均约 111 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @flare-engine/assets 还在维护吗？

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