静态资源

静态资源

晴雪UI现在主要吃这些资源：HTML、CSS、JS、图片、字体。

音频和视频先别急，目前还没到这一步。

---

资源放哪

资源一共有三层，优先级从高到低是这样的：

1. 开发环境路径：src/main/resources/assets/apricityui/apricity/...
2. 游戏实例目录：apricity/...
3. 模组资源包：assets/apricityui/apricity/...

也就是说，同一路径的文件如果三层都存在，最终生效的是最上面那层。

这套覆盖顺序就是专门给开发和魔改准备的：

• 开发时直接改源码资源目录，优先级最高。
• 整合包作者优先改实例里的 apricity 文件夹，不用重新打包模组。
• 模组本体自带的资源包作为默认兜底。

---

路径怎么写

最推荐的还是相对路径。

比如 HTML 同目录下有一张图：

<img src="loading.gif" />

CSS 同目录下引用字体：

@font-face {
    font-family: "myfont";
    src: url("fonts/myfont.ttf");
}

如果你用的是以 / 开头的路径，那它会从 Apricity 的资源根开始算，不是浏览器网站根目录。

另外，.. 这种相对跳转也是支持的，编辑器里写起来会比较顺手。

---

HTML、CSS、JS 的加载方式

HTML 本身由 ApricityUI.createDocument(path) 或 ApricityUI.openScreen(path) 这类入口加载。

CSS 和 JS 都支持两种写法：

<style src="panel.css"></style>
<style>
    .panel {
        width: 120px;
    }
</style>

<script src="panel.js"></script>
<script>
    // inline script
</script>

注意一点：

1. 外链 CSS 会走异步加载，还支持 @import。
2. 外链 JS 目前走本地资源解析，不要当成浏览器脚本标签来理解。
3. HTML 入口页本身仍然是本地资源，不是远程网页。

---

图片和字体

图片支持的格式已经够日常用了，PNG、JPG、GIF 这些都没问题。

其中 GIF 是真的会动，不是摆设。

字体方面，框架支持通过 @font-face 加载 TTF、OTF 一类资源。晴雪UI还内置了一个 lxgw 字体，开箱即用。

不过要说明一下，内置字体是精简版，汉字只有3500常用字，主打够用和体积小。

---

远程资源

晴雪UI 现在支持一部分远程资源，但不是“啥都能从网上拉”。

当前比较稳妥的用法是：

1. 远程图片。
2. 远程 CSS。
3. 远程字体。

并且有几个前提：

1. 只允许 https://。
2. 走异步加载。
3. 有大小限制和内容类型限制。

所以它更适合做：

• 图床图片
• 在线主题样式
• 在线字体

不适合拿来当远程 HTML 页面系统，也别把远程 JS 当浏览器那种脚本分发方案。

未来可以考虑远程 HTML 和远程 JS。

---

热重载

实例目录里的 apricity 文件夹，本来就是为了热重载和魔改准备的。

最直接的方式是按 END，会立即重载静态资源并刷新 Document。

在调试模式下，还会自动监听这些文件变动：

• .html
• .css
• .js

监听范围包括：

1. 开发环境下的 src/main/resources/assets/apricityui/apricity
2. 游戏实例目录里的 apricity

资源包那层主要是默认资源来源，不是热重载主战场。

---

调试和资源查看

晴雪UI 自带一个 Resource Manager，能把最终合并后的资源列表直接摊给你看。

这点很有用，因为你能很清楚地知道：

1. 当前文件到底来自开发目录、实例目录还是资源包。
2. 同路径资源最终被谁覆盖了。
3. 某个图片、样式、HTML 最后实际吃到的是哪一份。

如果你在排查“为什么我明明改了文件却没生效”，先看这个通常比瞎猜快得多。

---

一个比较推荐的开发姿势

如果你是整合包作者或者前端式开发习惯，建议直接这样干：

1. 先把资源放在实例目录的 apricity/modid/...。
2. HTML、CSS、图片、字体全部走相对路径。
3. 调样式时用 END 热重载。
4. 需要打包时，再整理进资源包或模组资源里。

这样效率最高，也最不容易被路径问题折腾。