前情提要

由于早期我作为一位纯萌新想要搞整合包时,看到了这个mod但是那时只有大轩的一个教程,让人看完十分的迷茫，看完之后根本不知道我该怎么办(这里并没有贬低大轩的意思)而两年后的现在,我终于玩懂了这个mod,为了前人栽树,后人乘凉，这一次我将会教会各位如何使用这个mod，并且一起制作一份属于自己的 加载画面

参考文献官方wiki

大轩的教程

正文部分

前期准备

1. 额外添加Resource Loader 模组

2. 一张背景图片

3. 一些显示用的素材（这里的素材可以不用我的你也可以自己画）

4. 一个好用的文本编辑器

5. 一个愿意动脑有耐心看完本篇教程的人

开始

初始阶段

首先下载好我刚才说的东西,把Custom Loading Screen mod和Resource Loader mod放入mod文件夹跑一遍

在mc目录下就会出现这两个文件夹，现在我们先打开config文件夹

你可以看到这个文件

打开他你能看到下面的界面

上图圈红的地方，请将其修改为：随意名称/custom

我将其改为chengming/custom 如图:

改好后返回mc目录

创建文件阶段

打开resources文件

新建一个文件夹

命名为customloadingscreen！如图：

打开这个文件夹，再分别创建config(配置)，font(字体)，image(图片)，如图：

创建好后打开config文件,创建一个名字为你刚才写的随意名称

因为我写的是chengming/custom

所以我创建的文件叫做chengming如图:

然后继续打开你刚创建的文件，在里面创建名为custom的json文件如图:

然后打开他

将这一大串复制粘贴进去

{
    "renders": [
    ],
    "variables": {
    },
    "functions": [
    ],
    "factories": [
    ],
    "actions": [
    ]
}

如图：

回到customloadingscreen目录下打开image文件:

然后创建一个名为前面的随意名称的文件夹

因为我写的是chengming/custom

所以我创建一个名为chengming的文件夹,如图：

进入这个文件

这样创建文件阶段就结束了

概念阶段

我们使用自定义加载画面这个mod要了解一些概念

自定义加载画面这个mod是用放在image文件里的json来写画面配置让后用config里的custom.json文件来标记image里的json文件来实现展示画面的

虽然有点绕但是你只要理解成我在image文件里丢了个配置，让后让custom.json来读取配置就行

不再多说，继续跟着我写吧！

实操阶段

背景

正文

回到刚才先将我们先将准备好的背景景文件放入:

因为我要先创建背景,所以我将背景文件命名为bj,如图:

记住！文件名称为bj，后缀名为png！

然后创建一个任意名字的json文件这里不用与前面的任意名字同名

因为我要先创建背景,所以我就创建一个名为bj(背景)的json吧

如图：

先打开他将这一大串复制进去

{
    "parent": "builtin/image",
    "image": "customloadingscreen:image/随意名称/背景名称.后缀名",
    "position_type": "CENTER",
    "offset_pos": "CENTER",
    "position": {
        "x": "0",
        "y": "0",
        "width": "screen_width + 1",
        "height": "screen_height + 1"
    },
    "texture": {
        "x": "0",
        "y": "0",
        "width": "1",
        "height": "1"
    }
}

如图：

让后按照我的提示来修改

因为我写的是chengming/custom

所以随意名称就是chengming前面放背景图片的时候名字为bj.png

所以改成customloadingscreen:image/chengming/bj.png，如图：

背景显示的json写好了，但是需要标记一下我们回到刚才的custom.json文件中，听了劝下载了vsc的可以直接跳转：

在renders这一栏里写上随意名称/任意名字的json文件

因为我刚才写的是bj,所以是"chengming/bj"如图：

完成！我们上游戏看看！

恭喜你,做到这里你就已经成功了百分之80了！万事开头难！

好像差点意思，没有显示内存和游戏进度,那么我们就继续吧！

代码解析(背景)

{
    "parent": "builtin/image",
    "image": "customloadingscreen:image/随意名称/背景名称.后缀名",
    "position_type": "CENTER",
    "offset_pos": "CENTER",
    "position": {
        "x": "0",
        "y": "0",
        "width": "screen_width + 1",
        "height": "screen_height + 1"
    },
    "texture": {
        "x": "0",
        "y": "0",
        "width": "1",
        "height": "1"
    }
}

就是将一张图片贴在你的游戏窗口上，高度与宽度为你的窗口大小+1，

因为是全屏的,别的也没什么好说的了

进度条

正文

回到image\chengming里(下文统称为image目录下)

将素材中的进度条文件放进来,如图：

像刚才一样创建一个任意名字的json文件

因为我要创建进度条所以我将json文件命名为jdt(进度条),如图：

先打开他将这一大串复制进去

{
    "parent": "builtin/image",
    "image": "customloadingscreen:image/随意名称/背景名称.后缀名",
    "position_type": "CENTER",
    "offset_pos": "CENTER",
    "position": {
        "x": "forge_progress_bar_count() > 0 ? -screen_width * 0.35 + percentage * screen_width * 0.35 : 0",
        "y": "forge_progress_bar_count() > 0 ? screen_height * 0.15 : 0",
        "width": "forge_progress_bar_count() > 0 ? percentage * screen_width * 0.7 : 0",
        "height": "forge_progress_bar_count() > 0 ? 21 : 0"
    },
    "texture": {
        "x": "0",
        "y": "0",
        "width": "percentage",
        "height": "1"
    }
}

让后按照我的提示来修改

因为我写的是chengming/custom

所以随意名称就是chengming前面放背景图片的时候名字为jdt.png

所以改成customloadingscreen:image/chengming/jdt.png，如图：

进度条显示的json写好了，但是需要标记一下我们回到刚才的custom.json文件中

在renders这一栏里写上随意名称/任意名字的json文件两个配置之间记得用英文逗号隔开

因为我刚才写的是jdt,所以是"chengming/jdt"如图：

完成！我们上游戏看看！

哇，这个进度条好大啊！！！太粗了！不行！那我们应该怎么配置呢？

代码解析(进度条)

把刚才的代码拿下来

{
    "parent": "builtin/image",
    "image": "customloadingscreen:image/chengming/jdt.png",
    "position_type": "CENTER",
    "offset_pos": "CENTER",
    "position": {
        "x": "forge_progress_bar_count() > 0 ? -screen_width * 0.35 + percentage * screen_width * 0.35 : 0",
        "y": "forge_progress_bar_count() > 0 ? screen_height * 0.15 : 0",
        "width": "forge_progress_bar_count() > 0 ? percentage * screen_width * 0.7 : 0",
        "height": "forge_progress_bar_count() > 0 ? 21 : 0"
    },
    "texture": {
        "x": "0",
        "y": "0",
        "width": "percentage",
        "height": "1"
    }
}

学过英文的小伙伴应该认识width(宽)和height(高)吧

正对应的代码里面也有

我们之需要改代码里面的 "："前的数值即可

比如我上文的进度条太宽就可以将

height(高)的21改成5就可以了！

让我们上游戏试试！

变短了！好耶！那么进度条的代码解析部分结束

代码解析知识拓展(进度条)

但是有人会说辰林 辰林，你说的我知道了

但是前面这一大段的这些是什么意思我好好奇！

"y": "forge_progress_bar_count() > 0?screen_height * 0.15 : 0"

里的forge_progress_bar_count() > 0 ?

和screen_height * 0.15 : 0 的一大串是什么意思啊？

这些东西说来也简单只是一个判断而已，

forge_progress_bar_count() > 0 ? 的意思是

判断 游戏加载进度条是否大于0，如果当其大于时0运行 ” ：“ 的前面一段

"y":screen_height * 0.15

反之如果小于零便运行 ” ：“ 的后面一段

"y":0

别的也是同理

到了这里还是差点意思就不能显示一下跑到百分之几了吗？如果你有这样的想法,那么我们就继续吧！

进度百分比显示

概念部分

先回到customloadingscreen文件夹中

因为我们要显示进度百分比，但是百分比并不是一张图片而是一个会变的字符串所以我们需要字体的图片,哪里能搞到计算机能直接读取的字体材质呢？去看看我发的素材吧！找到我发出来的ascii.png文件

将其放到font文件中

放好即可

正文

回到image目录下

像刚才一样创建一个任意名字的json文件

因为我要创建进度百分比显示所以我将json文件命名为jdtbfb(进度条百分比),如图：

先打开他将这一大串复制进去

{
    "parent": "builtin/text",
    "image": "customloadingscreen:font/ascii.png",
    "position_type": "CENTER",
    "offset_pos": "CENTER",
    "text": "forge_progress_bar_count() > 0 ? (floor(percentage * 100)) + '.' + (floor(percentage * 1000) % 10) + '%' : ''",
    "position": {
        "x": "0",
        "y": "forge_progress_bar_count() > 0 ? screen_height * 0.15 + 1 : 0",
        "width": "0",
        "height": "0"
    },
    "colour": "0xFFFFFFFF"
}

如图：

进度条显示的json写好了，但是别忘了标记一下我们回到刚才的custom.json文件中

在renders这一栏里写上随意名称/任意名字的json文件两个配置之间记得用英文逗号隔开

因为我刚才写的是jdtbfb,所以是"chengming/jdtbfb"如图：

大功告成！我们上游戏看看

欸？又遇到问题了？他们两个怎么在一起了,真是太让人伤心了,没关系，让我们直接进入代码解析部分

代码解析(进度条百分比显示)

话不多说先把代码拿下来

{
    "parent": "builtin/text",
    "image": "customloadingscreen:font/ascii.png",
    "position_type": "CENTER",
    "offset_pos": "CENTER",
    "text": "forge_progress_bar_count() > 0 ? (floor(percentage * 100)) + '.' + (floor(percentage * 1000) % 10) + '%' : ''",
    "position": {
        "x": "0",
        "y": "forge_progress_bar_count() > 0 ? screen_height * 0.15 + 1 : 0",
        "width": "0",
        "height": "0"
    },
    "colour": "0xFFFFFFFF"
}

可以看到他们两个交在在一起应该是y轴太接近了，我们只需要将进度条百分比显示的y轴变大一点就行了比如

把screen_height * 0.15 + 1的加1改成+5

它居然向下跑了而且还是和进度条在一起，我们由此知道了他的y轴数值与y的大小成反比

那么将他改成一个负数呢？比如-10？

完美！

代码解析知识拓展(进度条百分比显示)

有爱找事的小伙伴又会问辰林 辰林这个判断我懂了但是

"text": "forge_progress_bar_count() > 0 ? (floor(percentage * 100)) + '.' + (floor(percentage * 1000) % 10) + '%' : ''",

上面的这一大串我没看懂啊不是，你怎么那么多事？能用就行

遇到了最有耐心的我你算问对人了来，上代码！

"text": "forge_progress_bar_count() > 0 ?(floor(percentage * 100)) + '.' + (floor(percentage * 1000) % 10) + '%': ''",

首先是forge_progress_bar_count() > 0 ?

这个？是用于判断，详细请看代码解析知识拓展(进度条)

(floor(percentage * 100))和(floor(percentage * 1000) % 10)

首先最外面的括号是用于分割的让后是floor()的用法,就让度娘告诉你吧

emmmmm.....度娘今天有事tmd我搜到的是c语言的用法，让必应来告诉你吧

至于什么是percentage？

一个进度值，但是因为他只会显示0.00001~1所以我们要手动处理一下

这么说你们可能还听不懂给你们打个比方，就是当加载进度为35%的时候percentage它的值为0.35要手动转换成百分比的化就要将其乘以100再在后面加百分号

0.35x100=35  35%

所以 percentage * 100 就是这样来的

(percentage * 1000) % 10又是什么呢？

众所周知%是取余数的意思然后你自己猜猜他是什么意思

提示，和上面同理

写到这里好像还是差点意思，没有显示内存欸,那么我们就继续吧！

内存显示

内存显示的原理和进度百分比显示差不多，都是显示会变的字符串

正文

回到image目录下

像刚才一样创建一个任意名字的json文件

因为我要创建内存显示所以我将json文件命名为ncxs(内存显示),如图：

先打开他将这一大串复制进去

{
    "parent": "builtin/text",
    "image": "customloadingscreen:font/ascii.png",
    "position_type": "TOP_LEFT",
    "offset_pos": "TOP_LEFT",
    "text": "' Memory Usage: ' + memory_used() + 'MB / ' + memory_max() + 'MB'",
    "position": {
        "x": 7,
        "y": 15,
        "width": 0,
        "height": 0
    },
    "colour": "0xffffffff"
}

如图：

内存显示的json就好了！非常的爽！就这么一点点过程

对了别忘了去custom.json文件标记哦~

怎么标你们应该已经轻车熟路了我就不重复了

直接上图吧

好的，直接上游戏看看

非常的顺利！一点问题都没有所以就没有代码解析了但是还是要上知识拓展代码解析

代码解析(内存示显)

把刚才的代码拿下来

{
    "parent": "builtin/text",
    "image": "customloadingscreen:font/ascii.png",
    "position_type": "TOP_LEFT",
    "offset_pos": "TOP_LEFT",
    "text": "' Memory Usage: ' + memory_used() + 'MB / ' + memory_max() + 'MB'",
    "position": {
        "x": 7,
        "y": 15,
        "width": 0,
        "height": 0
    },
    "colour": "0xffffffff"
}

又有闲的发慌的人来问

memory_used()和memory_max()是什么？

在这里机翻看看，确实很简单没什么东西

好了，但是到了这一步了真的不搞个内存使用进度条吗？

内存使用进度条

原理和进度条一样，也没有很复杂

正文

回到image目录下

俗话说得好事不过三，所以我们这一次要有点变化了直接把素材里的memory_bar.png和memory_base.png都拿过来

并且创建两个任意名字的json

我打算这让两个图片和json名字相同所以，如图：

并把这两坨代码放上去

{
    "parent": "builtin/image",
    "image": "customloadingscreen:image/随意名称/图片名称.后缀名",
    "position_type": "TOP_LEFT",
    "offset_pos": "TOP_LEFT",
    "position": {
        "x": 10,
        "y": 3,
        "width": "(screen_width - 20) * mem_percent",
        "height": 8
    },
    "texture": {
        "x": 0,
        "y": 0,
        "width": "mem_percent",
        "height": 1
    }
}

{
    "parent": "builtin/image",
    "image": "customloadingscreen:image/随意名称/图片名称.后缀名",
    "position_type": "TOP_LEFT",
    "offset_pos": "TOP_LEFT",
    "position": {
        "x": 10,
        "y": 3,
        "width": "screen_width - 20",
        "height": 8
    },
    "texture": {
        "x": 0,
        "y": 0,
        "width": 1,
        "height": 1
    }
}

最后别忘了去custom.json标记！

好了！快去开游戏看看吧！

代码解析(内存使用进度条)

bong!

这是什么？为什么会这样？

这个时候有人会说，wcnm这是怎么回事这个sb教程制作者！nmlgsb的是不是黑了我的游戏，快帮帮我！

其实我是故意的 诶嘿~

这都多久没出新意了都是复制粘贴一点意思都没有所以继续拓展一下知识

这个白屏就是自定义加载画面mod的错误界面，当你写的代码有问题将会变成这样

但是不用担心，这不还有我吗？

你往custom.json文件里的variables中

加入这一大串

"mem_percent": "((floor(memory_used() * 100) + 0.0) / (floor(memory_max() * 100) + 0.0))",

如图：

再跑一下试试

是不是就行了？对，就是现在！进入解析拓展时间！

代码解析拓展(内存使用进度条)

再不拿出点新东西都要睡着了

这一次的代码解析就是变量的应用

这段话的意思就是将后面的这一段话赋给了mem_percent这个单词

不行的话你可以将mem_percent替换成"mem_percent": "((floor(memory_used() * 100) + 0.0) / (floor(memory_max() * 100) + 0.0))",

依旧是可以跑的

都搞到这了不顺便把时间显示也写了？

进入游戏时间显示

这个和显示内存使用很像，都是显示一个会变的字符串

正文

像之前一样创建一个任意名字的json文件

因为我要创建进入游戏时间显示所以我将json文件命名为go_time_xs(进入游戏时间显示),如图：

将这一大串复制上去

{
    "parent": "builtin/text",
    "image": "customloadingscreen:font/ascii.png",
    "position_type": "TOP_LEFT",
    "offset_pos": "TOP_LEFT",
    "text": "' Loading Time: ' + floor(time / 60) + 'm ' + floor((time % 60) / 10) + floor(time % 60 % 10) + 's'",
    "position": {
        "x": 7,
        "y": 25,
        "width": "0",
        "height": "0"
    },
    "colour": "0xFFFFFFFF"
}

如图：

别忘了去custom.json文件标记

进入游戏看看

完美效果！好了！恭喜你学会了自定义加载画面的使用方法了！

本篇自定义加载画面全解到此结束,下课！

嗯？你问我进入游戏时间显示代码解析呢？

哦,被我吃了

一个60进制算时间的分钟，然后求余数就能写的东西不跟上面的代码解析知识拓展(进度条百分比显示)一样吗？

看上面去

后记

其实离自定义加载画面的极限远的很呢，缺少的是奇思妙想而已

对了，这些素材来源与辰林的世界！没错！快去玩我的包！看我个人主页!

上完了课，布置一下家庭作业，这里是本教程所有的配置文件，但是我修改了其中6处，请找出错误