本帖最后由 酒石酸菌 于 2018-2-10 16:11 编辑


Custom Main Menu 简单介绍


1.简介

Custom Main Menu 是一个能够自定义主界面的模组，需要配合 Resource Loader 模组使用。采用json语法写的配置文件，可以热加载出自定义的样式。使用方式颇有点像CSS样表。许多著名的国外整合包无一例外都采用了这个模组。效果非常好，这里拿几个作者设计的样式给大家看看吧。（作者美工水平不咋行啊）










2.文件结构

配置文件为游戏主文件夹下 config\CustomMainMenu\mainmenu.json 文件；

所有的图片文件地址都在游戏主文件夹下 resources\mainmenu 文件夹下。

目前这货好像还不支持 UFT-8 编码，所以还是别用中文了吧【还看着干什么，快去github轰炸作者吧，这作者是我见过最偷懒的作者】。

修改好了之后，在主界面按下 ctrl+r 键即可重载配置。

配置文件结构一般如下

  1. {
  2. "images": {
  3.         "图片一": {
  4.         },
  5.         "图片二": {
  6.         }
  7.     },

  9. "buttons": {
  10.         "按钮一": {      
  11.         },
  12.         "按钮二": {      
  13.         }
  14.     },

  16. "labels": {
  17.         "文本一": {      
  18.         },
  19.         "文本一": {      
  20.         }
  21.     },

  23. "other":{
  24.         "background":{         
  25.         }
  26.     }
  27. }
复制代码

3.背景的添加

背景分为动态背景和静态背景。

    （1）静态背景：
  1. {
  2. "other":{
  3.         "background":{
  4.             "image":"mainmenu:001.png",
  5.             "mode":"fill"
  6.         }
  7.     }
  8. }
复制代码

如案例所示，背景属于"other"分区，有两个参数可选：

  • image：【可选】标定着背景图片的地址，注意这个地址写法比较特殊。图片只支持png格式。
  • mode：【可选】图片的填充模式，有fill, stretch, center, tile四个选项可选。
    • fill：适应，保证图片长宽比前提下，尽可能铺满屏幕。会适当裁剪图片。
    • stretch：拉伸，尽可能铺满屏幕，如果不合适会强制拉伸图片。
    • center：居中，不改变图片大小和比例，依据屏幕大小裁剪图片。
    • tile：平铺，重复图片铺满屏幕。

（2）动态背景
  1. {
  2. "other":{
  3.     "background":{
  4.             "image" : "",
  5.             "slideshow":{
  6.                 "images" : ["mainmenu:001.png","mainmenu:002.png","mainmenu:003.png"],
  7.                 "displayDuration" : 100,
  8.                 "fadeDuration" : 40
  9.             }
  10.         }
  11.     }
  12. }
复制代码

  • image：此时为空，但是不可略去不写。
  • slideshow：添加循环的图片背景。
    • images：添加循环的图片地址。
    • displayDuration：图片停留时间，单位为tick。
    • fadeDuration：转换图片时间，单位为tick。

4. 文字的添加
        网络加载文字：
  1. {
  2. "labels": {
  3.     "changelog":{
  4.           "text":"web:http://pastebin.com/raw.php?i=MmSCr6zV",
  5.           "posX" : 2,
  6.           "posY" : 0,
  7.           "color" : -1,
  8.           "alignment" : "left_center"
  9.         }
  10.     }
  11. }
复制代码

        硬编码文字加载【不支持中文哦，会乱码的】
  1. {
  2. "labels": {
  3.       "mojang": {
  4.           "text" : "Copyright Mojang AB. Do not distribute!",
  5.           "posX" : -197,
  6.           "posY" : -10,
  7.           "color" : -1,
  8.           "alignment" : "bottom_right"
  9.         }
  10.     }
  11. }
复制代码

  • text：文字，可选网络加载文字，加载诸如更新日志一类的东西。文字中可以直接内镶Minecraft原版支持的颜色代码，还可以直接调用语言文件中的key加载文字。文字中还可以使用占位符太指代特定数据，占位符有如下几种：
    • #mcversion#：MC的版本
    • #fmlversion#：FML的版本
    • #mcpversion#：MCP的版本
    • #forgeversion#：Forge的版本
    • #modsloaded#：mod加载数量
    • #modsactive#：mod激活数量
    • #time#：时间
    • #username#：当前游戏ID
    • #date#：当前日期（调取的系统时间）
  • posX, posY：文字定位。如果不设定alignment参数，默认中心对齐。
  • color：颜色代码，采用整型数表示的RGB码。
  • alignment：对齐方式，有bottom_left, bottom_right, top_left, top_right, button, center, top_center, left_center, bottom_center, right_center。

        除此之外还有几个属性可以选择添加：
  • hoverColor：鼠标悬浮上去的颜色。
  • hoverText：鼠标指针悬浮上去的文字。
  • anchor：可以传入start，middle，end三个参数，分别对应左、中、右对齐。
  • action：用户点击文字之后会发生的行为，和按钮添加部分的action用法一致，此处不再细说。
  • fontSize：字体的大小。


     推荐两个使用的颜色代码网站：

5.图片的添加
    图片只能用png格式。
  1. {
  2.     "images":{
  3.         "picture":{
  4.             "image":"mainmenu:001.png",
  5.             "posX":-120,
  6.             "posY":-120,
  7.             "width":240,
  8.             "height":240,
  9.             "alignment":"center"
  10.         }
  11.     }
  12. }
复制代码

  • image：图片地址。
  • posX, posY：图片坐标，定位点为图片左上角。
  • width, height：图片大小，过大的部分会直接裁减掉。
  • alignment：对齐方式

    除此之外还可以添加：
  • hoverImage：鼠标指针悬浮上去的图片。
  • slideshow：和之前讲过的slideshow用法一致，此处不再累述。

    推荐一个好用的，制作minecraft样式文字图标的网站：textcraft。

6.按钮的添加
  1. {
  2. "buttons":{
  3.         "singleplayer":{
  4.             "text":"menu.singleplayer",
  5.             "texture":"mainmenu:shortbutton.png",
  6.             "posX":-100,
  7.             "posY":-8,
  8.             "width":98,
  9.             "height":20,
  10.             "imageWidth":98,
  11.             "imageHeight":20,
  12.             "alignment":"center",
  13.             "action":{
  14.                 "type":"openGui",
  15.                 "gui":"singleplayer"
  16.             }
  17.         },
  18.         "ftbForums":{
  19.             "text":"FTB Forums",
  20.             "texture":"mainmenu:shortbutton.png",
  21.             "posX":2,
  22.             "posY":58,
  23.             "width":98,
  24.             "height":20,
  25.             "imageWidth":98,
  26.             "imageHeight":20,
  27.             "alignment":"center",
  28.             "action":{
  29.                 "type":"openLink",
  30.                 "link":"https://forum.feed-the-beast.com/forum/"
  31.             }
  32.         }
  33.     }
  34. }
复制代码

  • text：按钮上的文字，可以直接调用lang文件中的key，或者是直接写上文字（不支持中文，会乱码）。
  • texture：按钮背景图片。
  • posX, posY：按钮图片坐标，定位点为图片左上角。
  • width, height：按钮图片大小，过大的部分会直接裁减掉。
  • alignment：对齐方式。


    除此之外还可以添加这几个参数
  • hoverText：鼠标悬浮时候显示的文字。
  • normalTextColor：文字颜色。
  • hoverTextColor：鼠标悬浮时候显示的文字颜色。
  • textOffsetX， textOffsetY：按钮文字的对齐数值。
  • tooltip：显示文本提示。

    当然，还有我们最重要的action参数，action下必须要有type参数，可以传入openLink, openGui, quit, refresh, connectToServer, openFolder。
  • openLink：打开一个链接。
    1. "action":{
    2.       "type":"openLink",
    3.       "link":"https://www.feed-the-beast.com"
    4. }
    复制代码

  • openGui：打开特定的GUI
    1. "action":{
    2.         "type":"openGui",
    3.         "gui":"languages"
    4. }
    复制代码

    gui参数里可以传入的数据有（自己猜意思吧，懒得翻译了）
    1.   mods
    2.   singleplayer
    3.   singleplayer.createworld
    4.   multiplayer
    5.   options
    6.   languages
    7.   options.ressourcepacks
    8.   options.snooper
    9.   options.sounds
    10.   options.video
    11.   options.controls
    12.   options.multiplayer
    复制代码

  • connectToServer：连接的服务器，需要写入一个服务器ip。
    1. "action":{
    2.       "type":"connectToServer",
    3.       "ip":"127.0.0.1"
    4. }
    复制代码

  • openFolder：打开特定文件夹，需要注意的是默认的主目录是游戏主文件夹。
    1. "action":{
    2.       "type":"openFolder",
    3.       "folderName":"config"
    4. }
    复制代码

  • quit和refresh参数，没有特定其他属性需要添加。