文档目录

GUI 精灵

原版 GUI PNG 渲染器：裁剪、平铺、九宫格与缩放。

import { GuiSprite } from "./index";

/**
 * GuiSprite 预览用例（规格 §6）
 */
export function GuiSpriteDemo() {
  return (
    <div className="flex items-end gap-8">
      <GuiSprite name="container/inventory.png" src={{ height: 166, width: 176, x: 0, y: 0 }} />
      <GuiSprite height={20} name="sprites/widget/button.png" slice={3} width={160} />
      <GuiSprite height={18} name="sprites/recipe_book/button.png" width={20} />
    </div>
  );
}

安装

CLI 拷贝

$npx shadcn add @tennantite/gui-sprite

npm 直装

$pnpm add @tennantite/ui

npm 方式安装编译产物；需要改造源码请用上方的 CLI 拷贝安装。

用法

npm 导入

import { GuiSprite } from "@tennantite/ui";

CLI 拷贝导入

import { GuiSprite } from "@/components/tennantite/gui-sprite";

import { GuiSprite } from "./index";

/**
 * GuiSprite 预览用例（规格 §6）
 */
export function GuiSpriteDemo() {
  return (
    <div className="flex items-end gap-8">
      <GuiSprite name="container/inventory.png" src={{ height: 166, width: 176, x: 0, y: 0 }} />
      <GuiSprite height={20} name="sprites/widget/button.png" slice={3} width={160} />
      <GuiSprite height={18} name="sprites/recipe_book/button.png" width={20} />
    </div>
  );
}

API Reference

Prop	Type	Default	描述
fit	"contain" \| "cover" \| "fill"	"fill"	无裁剪时的适配方式。
height	number	—	目标高度（GUI px，默认源裁剪高度或整图高度）。
name	GuiSpriteName	—	官方 GUI 精灵路径，例如 `container/inventory.png`。
slice	number \| { bottom: number; left: number; right: number; top: number }	—	九宫格切片（源 PNG px）；使用 border-image 绘制。
src	GuiSpriteRect	—	源 PNG 裁剪区域（GUI px）。
tile	boolean	false	平铺模式；`src` 存在时按裁剪区域平铺。
width	number	—	目标宽度（GUI px，默认源裁剪宽度或整图宽度）。

源码

packages/ui/src/containers/gui-sprite/index.tsx

npm 包保留源码目录，可直接复制改造。