VexView附属插件开发教程（时下非常流行的自定义界面显示插件）- Builder篇

[Karlatemp]

—— 欢迎各位开发者来到VexView的世界 ——
（Builder篇）
​

简介：VexView是一款能够制作自定义界面的插件，它由插件和MOD配合完成全部的显示任务。它的高强度自定义性赢得了当下不少服主的青睐，VexView从出生至今，已超过一年时间，通过期间的不断更新，现在的界面体制已非常完善，当然，在以后的更新中，我们会继续开发更多的实用内容。虽然VexView曾经是付费插件，但是现在已经免费开放使用，我们也欢迎各位开发者使用VexView为自己的插件增添色彩！
此教程为VexView附属插件开发Builder篇，如果你还没看过我们的高级篇，请先查阅后再来哦：https://www.vexview.top/threads/vexview-mcbbs.133/

本教程目录：

• 第一章 - 使用ImageBuilder
• 第二章 - 使用GuiBuilder
• 第三章 - 使用ChannelBuilder
• 第四章 - 使用相对布局模式
• 第五章 - 使用9 Slice缩放

注: 使用Builder要求能够很好的使用 Lambda 表达式
注: Builders设计本意是为了更快的创建, 所以不会提供删除/设置之类的操作
注: Javadoc 有比较详细的使用示例

 

[Karlatemp]

第一章 - 使用ImageBuilder​

Oh, 创建各种图片;HUD;Tag的时候, 很容易就打错参数, 而且VexView更新的时候还可能有很多警告,
但是从 v2.6 开始有所改善, 使用 ImageBuilder, 你可以快速创建：

• VexImage
• VexImageShow
• VexImageTag
• VexBase64Image
• VexBase64ImageShow
• VexSplitImage
• VexSplitImageShow
• VexSplitImageTag
• VexMcImage
• VexMcImageTag

你不需要担心参数的顺序, 你只需要保证该传入的值都传入就行了.

VexImage image = ImageBuilder.builder()
    .size(20, 20)
    .background("[local]image.png")
    .offset(0, 20)
    .build();
VexImageShow hud = ImageBuilder.builder()
    .size(20, 20)
    .background("[local]image.png")
    .offset(0, 20)
    .toHUD("HUD id", keepTime, zIndex);

Tips: 从 VexView v2.6 开始，我们提供了 lk.vexview.builders 包供开发者更快的开发我们的附属插件

 

[Karlatemp]

第二章 - 使用GuiBuilder​

使用 GuiBuilder, 我们能用更快的速度创建 VexGui. 而且代码可读性也更强

VexGui gui = GuiBuilder.builder()
    .image(img -> img.offset(0, 0).background("[local]img.png").size(20, 20))
    .text(text -> text.offset(0, 50).addLine("Hello GuiBuilder."))
    .border(5, 5).calculateSize()
    .build("[local]background.png", -1, -1);

是否十分简洁且高效，而且我们还提供了 calculateSize() 方法用于自动计算大小, 但是也请用border(int, int)设置一下扩展大小, 因为计算出来的 GUI 大小不一定满足你的需求, 所以需要在扩大一下GUI

更加详细的用法请参阅我们的javadoc

 

[Karlatemp]

第衫章 - 使用ChannelBuilder
​

我们提供了 ChannelBuilder 来使得VexChatChannel的构建更加方便和快速

ChannelBuilder.builder()
    .name("Hello Channel Builder")
    .register()
    .onPlayerChat(event -> { // 可有可无, 可存在多个
        event.setMessage("Yes, I say \"" + event.getMessage() + "\"");
    });

把这段代码放在onEnable()里, 就能很快就注册好一个ChatChannel.
使用Builder的 white/black方法还可以同步到注册的通道里面哦. 因此Builder还可以存起来

 

[Karlatemp]

第四章 - 使用相对布局模式
​

我们提供了与传统的组件定位模式不同的定位模式，相对布局模式。
传统的布局模式称之为绝对布局模式, 他的位置是相对于整个GUI的左上角作为原点，不可修改, 导致我们要移动某个整体的位置的时候就显得十分麻烦

但是相对布局中的模式中, 组件创建的时候我们使用位置偏移(offset), 偏移模式在原基础上是可以叠加使用的
使用VexView的各位应该都使用过PhotoShop. 我们会以 PhotoShop 的角度让你更加容易理解相对布局模式的好处和用法

VexGui 就是整个工程, 各个组件都作为一个 图层 被包含在 VexGui 中，他们之间没有任何直接的联系，当我们需要移动多个图层的时候，我们得一个一个移动这些图层，有时候还会出现忘记移动某个图层的情况，这对于需要移动某个整体的我们加大了工作量.

相对布局，就解决了这个问题，我们使用newContext创建一个组, 这样子我们移动的时候就可以直接移动整个组而不用一个一个的移动我们的各个组件,

要使用我们的相对布局功能请使用 #️offset(int, int) 进行移动, 使用 #️location(int, int) 将导致相对移动失效

Tips: 相对布局模式是Builder提供的一种设计模式, 并不属于组件的功能哦

 

[Karlatemp]

第五章 - 使用9 Slice 缩放
​

9 Slice 是一种常见的无损缩放的缩放方法, 平常我们使用9 Slice的时候我们得自己写一堆代码, 但是我们现在提供9 Slice的方法了!
如果你不了解，那也没关系，我们现在会给你简单讲一下9 Slice的原理

Yep, 这就是是9 Slice, 蓝色线条是我创建的辅助线, 9 Slice在处理的时候，
四个角不会有任何变化，是的，没有变化
然后四条边会他所属的区域无限拉伸
因此在设计9 Slice的时候边不要有凸起, 凹陷什么的, 这将会导致缩放失真
比如上侧会以左右方向无限拉伸，左侧会以上下方向无限拉伸
至于最中心，你可以随便填，因为我们用另外一个文件处理中心缩放。我们推荐中心文件直接使用一张 1x1 的jpg图片

图片画好了，此时应该有这两张图片

• 9Slice.png - 9 Slice位图
• 9Slice.center.png - 中心文件

如果我们使用9Slice作为GUI背景的话, 有以下两种方法

Slice9 slice = Slice9.slice9()
      .left(3) // 左切线
      .right(3)
      .top(3)
      .bottom(3) // 切线位置

      .imageSize(
          7, 7, // 9 Slice位点图片大小
          1, 1 // 9 Slice中心图片大小
      )
      .address("[local]9Slice.png", "[local]9Slice.center.png");
VexGui gui = GuiBuilder.builder()
      .size(233, 233)
      .buildWith(slice);
VexGui gui2 = GuiBuilder.builder()
      .size(233, 233)
      .newContext(builder->{
        sudoku.size(builder.width, builder.height);
        builder.accept(slice);
      })
      .build("[local]Transparent.1x1.png", -1, -1);

9 Slice图片作为组件添加进入GUI使用

VexViewAPI.openGui(p, GuiBuilder.builder()
    .newContext(
        Slice9.slice9()
            .left(3).right(3).top(3).bottom(3)........
            .size(50, 50) // 确定要显示的大小
            .offset(0, 20) // 进行相对移动
    )
    .calculateSize()
    .build());
}