Documentation

GuiSprite

原版 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>
  );
}

Install

CLI copy

$npx shadcn add @tennantite/gui-sprite

npm install

$pnpm add @tennantite/ui

npm installs the compiled package; use the CLI copy above to adapt the source.

Usage

npm import

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

CLI copy import

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	Description
fit	"contain" \| "cover" \| "fill"	"fill"	Fit mode when no crop region is given.
height	number	—	Target height in GUI px (defaults to crop height or full image height).
name	GuiSpriteName	—	Official GUI sprite path, e.g. `container/inventory.png`.
slice	number \| { bottom: number; left: number; right: number; top: number }	—	Nine-slice values (source PNG px); drawn with border-image.
src	GuiSpriteRect	—	Crop region of the source PNG (GUI px).
tile	boolean	false	Tile mode; when `src` is set, tiles the cropped region.
width	number	—	Target width in GUI px (defaults to crop width or full image width).

Source

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

The npm package keeps the source tree, so you can copy and adapt it directly.