晴雪UI

晴雪UI

使用HTML + CSS + JS构建Minecraft UI，尽可能遵循Web标准。

ApricityUI

使用 HTML + CSS + JS 构建 Minecraft 用户界面。我们的语法尽可能遵循 Web 标准。

文档：https://doc.sighs.cc/en/ApricityUI/intro/

我们正在尝试移植到其他版本，将首先支持 1.21。

icon

核心概念

ApricityUI 的愿景是提供一个低门槛、便捷且多功能的 UI 框架。为了实现这一目标，我们选择了经典的“Web 三剑客”——HTML、CSS 和 JS——作为核心引擎。

  • JS 集成： 目前，JavaScript 层依赖于 KubeJS（可选）。这意味着整合包作者可以以极低的学习曲线尽情设计 UI。
  • 有多简单？ 你几乎可以让 AI 生成你所有的 ApricityUI 内容。由于 Web 框架的通用性，AI 对其了如指掌——通常能设计出比手工制作更好看的 UI，而且你仍然能看懂代码！
  • 对于模组开发者： 如果你的模组需要自定义 UI，你可以将 ApricityUI 作为依赖项来创建高度可扩展的界面。JS 和 Java 实现在很大程度上是等效的。
  • 可扩展性： 诸如嵌套遮罩、平滑滚动、圆角、毛玻璃背景、自定义动画、自定义字体和 GIF 等功能——通常需要数百行代码——使用 ApricityUI 只需几行即可完成。
  • 面向未来： 由于我们遵循固定的 Web 标准，你可以放心地跨游戏版本进行更新，无需担心重大的兼容性问题。

如果你不熟悉 Web 框架，以下是它们的三大优势：

  1. 功能丰富： 从简单的形状到复杂的渲染效果。ApricityUI 甚至可以将 UI 渲染到世界中的特定方块上！
  2. 使用简单： 网上大多数“速成课程”都不到 3 小时（有些短至 10 分钟）。而且，AI 对此了如指掌。
  3. 易于调试： 几乎所有内容都支持即时热重载。我们甚至提供了开发者工具用于可视化调试。

注意： ApricityUI 不 捆绑 Chrome/CEF 内核。它完全使用 Java 从零构建，将文件大小保持在 1MB 以下。无需担心臃肿问题！

展示与示例

  • 盒模型： 支持 box-shadow、可调节边框以及带自定义角度的圆角。
  • 弹性布局： 支持标准 Flex 布局。
  • 自定义字体： 同时支持多达四种不同的自定义字体（包括原版字体）。
  • 容器： 内置溢出遮罩。

example-1

  • 世界内渲染： 在特定坐标和角度渲染 UI，并支持遮挡。
  • 九宫格缩放： 使用 border-image 属性实现高度灵活的 UI 纹理。
  • 嵌套裁剪： 支持复杂遮罩（例如，将容器裁剪为三角形）。

example-2

  • GIF 支持： 完全支持动画图像。
  • 动画： 自定义 CSS 动画和过渡。
  • 输入框： 内置可自定义的文本输入组件。

（GIF 占位符 - 如果未动画，请刷新）

example-3

  • 原版集成： 支持原生 Minecraft 元素（例如，自定义容器/物品栏）。

example-4

  • 自定义主题： 包含预建主题，如“AE2（应用能源）”风格。

example-5

更多详情，请查看我们官方文档中的 简单示例。 觉得懒？ 让 AI 为你编写样式，或者从 CodePen “借鉴”一些代码。如果你遇到需要的 CSS 属性尚未被支持，欢迎在 GitHub 上提交 issue。

资源分发

  • 支持的资源： HTML、CSS、JavaScript、TTF/OTF 字体以及大多数图像格式（包括 GIF）。音频和视频支持计划在未来推出。
  • 存储路径： 资源存储在实例目录下的 /apricity 文件夹中，或通过资源包提供。
  • 热重载： 对于整合包开发者，我们建议使用 /apricity 文件夹。按 END 键进行热重载；更改通常在一秒内生效。
  • 分享： 你可以通过资源包或简单的 ZIP 文件分发你的 UI。由于资源包需要重新加载游戏，简单的 ZIP 文件在测试时通常更快。
  • 远程资源： ApricityUI 支持异步加载网络资源（例如，图床或 GitHub）。请负责任地使用！

我们还在开发一个“服务器到客户端 HTML”的解决方案，以带来那种经典的“服务器端渲染”体验，将在未来的更新中推出。

想了解更多？

  • 其实，我们有一个类似于浏览器的 DevTools 控制台。按 F12 即可查看。它目前支持可视化编辑属性、innerText 和样式，以及执行 JS 语句。
  • 其实，KubeJS 是可选的。没有它，你将无法解析 HTML 内的 JS 或使用控制台，但对于硬编码的模组 UI 来说，这并不是必需的。
  • 其实，热重载速度快得惊人。重新加载一个包含 20 个不同头像和 3 个自定义字体的文档大约需要一秒钟。（注意：这只会重载 UI 文档，不会重载整个 Minecraft 资源包）。
  • 其实，性能非常扎实。在对一个复杂 UI 的压力测试中，FPS 从 400 降到了 300——不过，原版创造模式物品栏界面本来也只有 240 FPS 呢！
  • 其实，对 Vue 和 Svelte 等现代框架的“精简版”移植正在开发中。进度比较缓慢，如果你想帮忙，欢迎加入社区！
  • 其实，由于 AI 非常擅长 HTML/CSS，它可以轻松地为你“编写”一个小游戏。请记住，ApricityUI 尚不支持所有浏览器功能，所以你需要先给 AI 提供我们的兼容性列表。

准备好尝试了吗？