纹理
九宫格纹理、图标与像素渲染。
重绘策略
GUI 九宫格与进度条为本项目重绘;物品、方块与 HUD 状态图标取自 Minecraft Java 26.3 官方客户端(固定版本与 SHA-1),由 packages/textures/scripts/sync-vanilla-icons.mjs 生成 base64 PNG data URI。方块图标按原版物品渲染合成为等轴三面立方体(rotateX 30° · rotateY 225° · scale 0.625),逐面亮度取 Direction.getShade():顶 1.0 / 北 0.8 / 东 0.6。许可见 packages/textures/LICENSE-ASSETS.md。
九宫格
按钮与面板使用 12×12 源图、slice 3 的 border-image。边框宽度按 --mc-gui 缩放,因此 GUI scale 变化时纹理不会被拉伸模糊。所有纹理类内置 image-rendering: pixelated。
.mc-tex-panel {
border: calc(var(--mc-gui) * 3) solid transparent;
border-image: url("/textures/panel.svg") 3 / calc(var(--mc-gui) * 3) stretch;
}
纹理类
| 类名 | 用途 |
|---|---|
| mc-tex-btn | 按钮常态 |
| mc-tex-btn--hover | 按钮悬停 / 聚焦 |
| mc-tex-btn--disabled | 按钮禁用 |
| mc-tex-btn-success | 主行动按钮 |
| mc-tex-panel | 窗口面板 |
| mc-tex-panel-dark | 半透明暗底 |
| mc-tex-slot | 物品格槽位 |
| mc-slot-selected | 选中槽位 |
| mc-tex-text-field | 文本输入框 |
| mc-tex-slider-track | 滑条轨道 |
| mc-tex-slider-thumb | 滑条把手 |
| mc-tex-checkbox | 复选框 |
| mc-tex-tab | 标签页 |
| mc-tex-tooltip | Tooltip |
| mc-tex-hotbar | 热键栏 |
| mc-tex-hotbar-selection | 热键选中框 |
| mc-tex-xp-bg | 经验条背景 |
| mc-tex-xp-fill | 经验条填充 |
| mc-tex-boss-bg | Boss 条背景 |
| mc-tex-boss-fill | Boss 条填充 |
| mc-tex-flame | 熔炉火焰 |
| mc-tex-arrow | 熔炉箭头 |
| mc-tex-craft-arrow | 合成箭头 |
| mc-tex-brew-arrow | 酿造箭头 |
| mc-tex-bubbles | 酿造气泡 |
| mc-tex-dirt | 泥土平铺 |
图标
airair-emptyapplearmorarmor-emptyarmor-halfbaked-potatoblaze-powderblue-dyebonebone-mealbowlbreadbrown-mushroomcharcoalclay-ballcoalcopper-ingotcrafting-tablediamonddiamond-chestplatedirt-blockeffect-absorptioneffect-bad omeneffect-blindnesseffect-breath of the nautiluseffect-conduit powereffect-darknesseffect-dolphins graceeffect-fire resistanceeffect-freezingeffect-glowingeffect-hasteeffect-health boosteffect-hero of the villageeffect-hungereffect-infestedeffect-instant damageeffect-instant healtheffect-invisibilityeffect-jump boosteffect-levitationeffect-luckeffect-mining fatigueeffect-nauseaeffect-night visioneffect-oozingeffect-poisoneffect-raid omeneffect-regenerationeffect-resistanceeffect-saturationeffect-slow fallingeffect-slownesseffect-speedeffect-strengtheffect-trial omeneffect-unluckeffect-water breathingeffect-weaknesseffect-weavingeffect-wind chargedeffect-witheremeraldexperience-bottlefilled-mapflintglass-bottlegold-ingotgrass-blockgravelgunpowderheartheart-emptyheart-halfhoneycombhungerhunger-emptyhunger-halficeicon-accessibilityicon-chat_modifiedicon-checkmarkicon-draft_reporticon-infoicon-inviteicon-languageicon-linkicon-link_highlightedicon-music_notesicon-new_realmicon-newsicon-ping_1icon-ping_2icon-ping_3icon-ping_4icon-ping_5icon-ping_unknownicon-searchicon-trial_availableicon-unseen_notificationicon-video_linkicon-video_link_highlightediron-blockiron-chestplateiron-horse-armoriron-ingotiron-orelapis-lazulimushroom-stewnether-wartnetherite-chestplatenetherite-ingotnetherite-upgrade-smithing-templateoak-logoak-plankspaperpotatopotionred-mushroomredstonesaddlesandstone-blockstone-brickssugar-caneswordwheatwheat-seedsimport { Icon } from "@tennantite/ui";
<Icon name="grass-block" size={16} />
size 的单位是 GUI px,默认 16。图标默认 aria-hidden;需要语义时由调用方提供 aria-label 或可见文本。
引入
@import "@tennantite/textures/css/textures.css";
纹理类可以用于任意元素,但类名依赖 @tennantite/textures 的 CSS 变量。若只复制单个图标,不需要引入整份纹理样式。