白羊羊 发表于 2019-8-1 23:31:08

[PCD]VexView附属插件开发教程(时下非常流行的自定义界面显示插件)- 基础篇

本帖最后由 白羊羊 于 2020-2-22 14:55 编辑




http://i1.fuimg.com/604599/1030c609a931e9e5.png—— 欢迎各位开发者来到VexView的世界 ——(基础篇){:ruby:}简介:VexView是一款能够制作自定义界面的插件,它由插件和MOD配合完成全部的显示任务。它的高强度自定义性赢得了当下不少服主的青睐,VexView从出生至今,已超过一年时间,通过期间的不断更新,现在的界面体制已非常完善,当然,在以后的更新中,我们会继续开发更多的实用内容。虽然VexView曾经是付费插件,但是现在已经免费开放使用,我们也欢迎各位开发者使用VexView为自己的插件增添色彩!{:emerald:}特点:
[*]长期维护更新,BUG问题修复迅速。
[*]插件国内使用人数正在不断扩大,据统计已有少许国外用户在使用。
[*]相比原版的箱子GUI更美观,更便于控制。
[*]非常多的显示类型,如Tag、GUI、HUD等。
[*]用户对于VexView附属内容的定制需求量不断增加。
[*]推荐作为可选依赖,服主可以在原版GUI和VexGUI二选一使用。
{:book_enchanted:}本教程目录:

[*]第一章 - 准备工作(依赖的添加、配置)
[*]第二章 - 自定义Gui(一个最基本的Gui任何创建并展示)
[*]第三章 - 添加Gui组件(为你的Gui添加组件,实现丰富的功能)
[*]第四章 - 事件系统(非常多的事件供开发者监听)
[*]第五章 - 自定义HUD(显示在游戏窗口上)
[*]第六章 - 自定义Tag(在世界中展示)
[*]第七章 - 基础篇总结
高级篇传送门:https://www.mcbbs.net/thread-908033-1-1.html





第一章 - 准备工作
(注意:本教程使用 Intellij IDEA 作为教程IDE)
我们就新开一个项目作为教程进行编写。
使用VexView提供的API之前,需要进行一定的部署。
创建一个新的Mincraft项目(需要idea提前下载好插件),本教程使用1.13.2开发。
http://i1.fuimg.com/604599/279c388f36513bd1.png
项目创建成功后,等待其下载依赖,并添加VexView到Maven依赖。
你可以在这里下载最新版本的VexView插件:https://www.mcbbs.net/thread-786587-1-1.html
下载完成后,打开我们的项目文件夹根目录,新建lib文件夹,并将刚刚下载的插件加入到此文件夹中。
http://i1.fuimg.com/604599/70290551d13c43ee.png
比如我们刚刚下载到的是VexView2.3.8.jar,现在我们打开pox.xml进行编辑,并添加以下内容:
<dependency>
    <groupId>lk.vexview</groupId>
    <artifactId>VexView</artifactId>
    <version>2.3.8</version>
    <scope>system</scope>
    <systemPath>${project.basedir}/lib/VexView2.3.8.jar
    </systemPath>
</dependency>点击上方刷新,等待idea导入。
当Libraries中出现VexView即完成依赖添加。
http://i1.fuimg.com/604599/fd324eaf66b3e042.png
为了防止我们的插件在VexView载入之前加载,现在我们打开plugin.yml文件进行编辑,添加VexView为依赖或软依赖(软依赖即可选使用VexView)
depend: 软依赖:
softdepend: 完成之后,我们就可以测试一下我们的插件了。
在启动的时候可以获取一下VexView的插件版本,你需要用到VexViewAPI.getVexView()方法来获取VexView对象(后面详细讲解)
代码如下:
http://i1.fuimg.com/604599/a5510e64c197bd28.png
写好之后,点击右上角三角形图标 Run ‘VexTutorial build’ 开始构建。
在.\VexTutorial\target 找到我们构建好的插件,并放入我们的服务端plugins文件夹中,启动服务端。
启动后得到输出信息如下即可:
http://i1.fuimg.com/604599/85a20dd231965656.png
(不要在意版本怎么又变成2.3.3了,没改而已)






第二章 - 自定义Gui
{:book_writable:}什么是Gui?
当你需要合成物品时,右键工作台界面,出现一个合成界面,这就是GUI(用户图形界面),它为用户展示一个提供帮助的界面。
VexView最迷人的地方就是它的自定义GUI功能,那么如何自定义Gui呢?我们现在就来示范。
首先安装我们的MOD默认材质包
解压到客户端.minecraft/vexview/textures文件夹中。
建议在编写附属时同时查阅我们的JavaDoc:https://www.vexview.net/docs/index.html
离线文档:
注意:VexView的GUI坐标与我们中学阶段学习的平面直角坐标系有所不同,它的X轴方向没变,但是Y轴方向和我们学习的是相反的。
介绍:一个GUI就是VexGui对象所展示的,它位于 lk.vexview.gui 包下,此包下还有一些其他的类,以后再做介绍,这里我们先使用VexGui创建我们的第一个GUI。
第一种写法:直接使用VexGui构造函数进行创建。
http://i1.fuimg.com/604599/cc1a189d87c55464.png
现在我们需要调用VexViewAPI类的openGui方法来展示我们创建好的VexGui,VexViewAPI类里面有着很丰富的方法,之后的章节做详细介绍。
http://i1.fuimg.com/604599/c43d237f09b22a47.png

第二种写法:继承VexGui进行创建
让我们的TestGui类继承VexGui进行编写,直接在其超类构造方法中填入我们的参数。
http://i1.fuimg.com/604599/67e92262835466c5.png
现在只需创建一个新的TestGui对象进行展示即可。
http://i1.fuimg.com/604599/f85bcee97f171003.png
个人更加推荐第二种写法,以便以后可以直接在构造方法中添加Gui组件(组件在下一章讲解)

你可以使用任何方法调用上面我们定义好的打开TestGui的方法。
在游戏中打开就像这样啦:
http://i2.tiimg.com/604599/c3888614ce6ca260.png
关于如何关闭玩家显示的GUI,你可以直接调用 Player 类的 closeInventory 方法,来为玩家关闭显示的GUI,或是玩家自己按Esc或E键关闭。
当然,这展示的仅仅是一个空白的GUI,通过下一章的学习,你就可以使用Gui组件来为你的GUI增添色彩了!







第三章 - 添加Gui组件
一个空白的Gui并不能显示很多你想要显示的内容,以及完成一些高级的操作,现在我们就为我们刚刚创建的Gui添加组件。
{:experience_bottle:}本教程介绍以下Gui组件:

[*]VexText - 文本组件
[*]VexImage - 图片组件
[*]VexButton - 按钮组件
其他的组件在高级篇介绍。
添加组件需要调用VexGui类的addComponent方法,所有的组件都继承于VexComponents类,它们都位于lk.vexview.gui.components包下。
首先是VexText - 文本组件,他可以在你的Gui中显示文本内容,允许使用颜色代码、自定义字体大小、自定义位置。
请一定注意,组件的坐标是以Gui的左上角为原点计算坐标。
http://i2.tiimg.com/604599/9d1e9c2de5c9ece8.png
现在我们在游戏中打开我们刚刚添加好组件的Gui,就是这种效果啦:
http://i2.tiimg.com/604599/bd77cc0658f22fb6.png

图片组件的添加需要你在客户端的.minecraft/vexview/textures文件夹中提前放好,最好是png格式图片。
关于贴图的Url,它可以是网络贴图(打开GUI的时候下载),也可以是本地贴图(添加前缀)
我们这里使用默认贴图包提供的本地贴图:
http://i2.tiimg.com/604599/3224ec6f4b464889.png
现在进入客户端测试效果吧:
http://i2.tiimg.com/604599/6696948ff48f9fcd.png

按钮组件是我们的重头戏,你可以自定义点击按钮执行的内容,按钮的两种贴图、按钮的位置。
为了更加灵活,我们还提供了更加高级的按钮组件(高级篇讲解),我们这里讲解最基本的VexButton类。
添加一个基本按钮组件的示例代码如下:
http://i2.tiimg.com/604599/13540cc3a99ff299.png
在游戏中我们就可以直接点击这个按钮了。
http://i2.tiimg.com/604599/87076aec7f005fb2.png
但是它还没有任何的功能,这个时候我们需要用到ButtonFunction类,此类定义了Function函数式接口@FunctionalInterface,在VexButton的构造方法中,你可以直接传入函数式作为按钮点击后触发的效果。
idea提示使用lambd表达式:
http://i2.tiimg.com/604599/0d42675c34290bc1.png
写入要处理的内容吧。
http://i2.tiimg.com/604599/ab953411eeebbcf4.png
现在进游戏测试吧!
http://i2.tiimg.com/604599/0df9c65e93fb3da8.png
当然,你也可以通过监听按钮点击事件来处理按钮的执行内容,事件系统我们会在后面讲解。






第四章 - 事件系统
VexView提供了非常多的事件供开发者使用,它们位于lk.vexview.events包下。
比较实用的包括 KeyBoardPressEvent(按键事件)、VexGuiCloseEvent/VexGuiOpneEvent(Gui关闭/打开事件),包括我们上一章提到的ButtonClickEvent也在其中。
我们教程这里演示KeyBoardPressEvent,也就是玩家按下键盘上的按键触发的事件。
首先在主类onEnable方法中注册我们的监听器:
http://i2.tiimg.com/604599/970256d312f7213e.png
在监听器里我们监听这个事件:
http://i2.tiimg.com/604599/c3ef21622095eb0f.png
可以看到这个事件能够获取很多信息。
通过这个事件,你可以获取:按键的ID、按键的状态(按下\释放)、是否是打开GUI的状态下按键、按键的玩家。
我们这里就只对按钮ID进行处理:
http://i2.tiimg.com/604599/16daf17ca644f281.png
这样玩家按键的时候,后台就会进行监听了。
注意:这个事件不会监听控制玩家移动的四个按键,以减少网络负担。
进游戏,我们就可以看到我们的按键被监听了。
http://i2.tiimg.com/604599/13c92cded635f6ad.png
关于按键的ID对应的按键,可以查询Minecraft原版Wiki
通过监听此事件,你甚至可以配合SkillAPI等这类技能插件完成按键释放技能,或是干更多方便快捷的事情。
其他的事件,你可以查阅我们的JavaDoc: https://www.vexview.net/docs/index.html





第五章 - 自定义HUD
什么是HUD呢?
抬头显示,也叫HUD (Head Up Display),就是在游戏中游戏时除看到的环境外的一些显示,比如我们的物品栏、经验条、BOSS血条,这些都是HUD内容,而VexView同样支持使用这些自定义内容。
VexView提供了一个新的包:lk.vexview.hud,它包含全部HUD组件,每一个HUD组件都继承于VexShow(详情请参照JavaDoc),你可以直接使用VexViewAPI里面的sendHUD方法来为玩家发送一个HUD内容。
本教程以展示VexImageShow图片HUD为例,示例如下:
http://i2.tiimg.com/604599/4857a0413f6972f7.png
我们对上一章的按键监听器进行了一定的强化,玩家按下这个键就可以看到我们的HUD内容了。
注意:教程中的33号id为键盘上的F键。
现在我们进入游戏看看效果吧:
http://i2.tiimg.com/604599/56e70ac12da0501d.png
游戏界面的右上角就出现了一个图片。
当然,VexTextShow同理,包括一些其他的VexShow子类。

那么,我该如何清理掉那些永久显示的HUD内容呢?
直接使用VexViewAPI里面的removeHUD方法即可完成HUD内容的移除。
http://i2.tiimg.com/604599/15c182c473000478.png

通过为玩家展示你的HUD内容,你可以制作一些更加好看的读条、状态显示等。
这就是HUD带来的方便之处。





第六章 - 自定义Tag
什么又是Tag?
当你和其他玩家一起在服务器搞基的时候,你会发现玩家头上始终显示着他的名字,那个就是Tag。
VexView允许为玩家或是世界添加你自定义的Tag,可以是图片、文本等内容。
所有的Tag都继承于VexTag类。

[*]为玩家添加Tag:这个tag会一直跟随玩家,并且所有玩家可见。
[*]为世界添加Tag:这个tag会一直固定在一个坐标,并且所有玩家可见。
添加示例代码:
http://i1.fuimg.com/604599/8a480d0680a977f0.png
其中TagDirection控制着一个Tag的朝向、可见性等,非常重要。
Tag的构造方法中的坐标,在添加为玩家tag时,是以玩家jio板为原点的,单位1就是一个方块宽度,所以不要把Tag坐标设置得太远。
在添加世界tag时,你设置的坐标就是这个Tag在世界中实际显示的位置,它是固定不变的。
进入游戏后,按下F键,就是这种效果了:
http://i1.fuimg.com/604599/2356ea34973aadc4.png
这个就是坐标为0,0,0的一个玩家ImageTag
并且所有的贴图显示都是依靠客户端进行计算,你甚至可以用WorldTag代替掉全息文字、地图显示图片等插件,减轻服务器的负担。
这便是这一功能的强大之处。





第七章 - 基础篇总结
本篇讲解了VexView开发者API的一些基本用法,如果您有任何疑问,请在本帖下方回复,我们会收集问题并在这一章进行解答。


PluginsCDTribe

粘兽 发表于 2019-8-1 23:38:30

这个教程真好
孩子很喜欢

我爱侬 发表于 2019-8-1 23:50:29

开发教程都出来了[:...:]

Bad_Mark 发表于 2019-8-1 23:53:36

羊羊比粘兽牛批!

Shenhi 发表于 2019-8-2 00:34:14

强是真滴强

2280761425 发表于 2019-8-3 18:00:11

一个项目逐渐壮大的历程233

Lin_cra 发表于 2019-8-6 07:20:08

这就很强了

migogo 发表于 2019-9-9 22:15:31


这就很强了

sbhinx 发表于 2019-9-13 11:41:02

自从用了这个教程,终于可以自己van vv了真不错!

qq445344742 发表于 2019-9-27 09:11:15

VexView到Maven依赖的时候为什么我添加不进去啊

ljw1097033178 发表于 2019-11-15 13:50:51

咋关闭一个GUI

Rinbin 发表于 2019-12-28 11:51:04

教程nb{:689:}

rucy 发表于 2020-1-9 17:19:03

MCBBS有你更精彩~

1370698539 发表于 2020-1-17 18:20:37

大佬在?C:\Users\Administrator\Desktop\CustomNPCs脚本-编辑器\text.png
这是怎么回事url未定义?

星皇丶柠檬 发表于 2020-2-6 14:39:12

留着以后看
页: [1] 2 3
查看完整版本: [PCD]VexView附属插件开发教程(时下非常流行的自定义界面显示插件)- 基础篇