Skip to content
On this page

制作第一个世界界面

这篇教程会把一个欢迎面板放进 Minecraft 世界。它不是固定在屏幕上的 HUD,而是一张真正存在于世界位置中的界面:玩家靠近时会自然变大,远离时会变小,也会被前方方块遮挡。

开始前,请先完成制作第一个界面,并确认普通页面能够保存和打开。

完成后的效果

最终页面包含:

  • 一张约 2.2 × 1.3 格大小的世界面板;
  • 标题“欢迎来到大厅”;
  • 一行交互提示;
  • 一个可以点击的按钮;
  • 页面始终水平朝向查看它的玩家;
  • 可以使用不同实例 ID,在多个位置重复打开。

第一步:创建世界页面

打开一个新的页面:

text
/chaui editor world_welcome

进入编辑器后,在左侧“页面组件”中选择“页面变量”,设置页面本身的属性:

属性推荐值说明
页面宽220世界页面使用固定画布宽度更容易控制实际尺寸。
页面高130与后面的背景面板保持一致。
默认坐标absolute组件直接使用页面内坐标。
打开模式world作为世界页面打开。
世界 X当前目标位置页面中心所在的世界 X 坐标。
世界 Y当前目标位置页面中心所在的世界 Y 坐标。
世界 Z当前目标位置页面中心所在的世界 Z 坐标。
世界缩放0.01每个 GUI 像素占 0.01 格。
世界朝向follow_player页面始终水平朝向玩家。

切换到世界模式后,不会再显示“界面遮罩”。遮罩只属于普通屏幕页面,世界页面不需要配置。

第二步:添加背景

在“组件库”中添加一个矩形,并填写:

属性推荐值
IDworld_panel
X0
Y0
220
130
层级0
指针处理block
透明度0.88
颜色#202730

背景覆盖整个页面画布。世界缩放为 0.01 时,这个页面实际约为 2.2 格宽、1.3 格高。

第三步:添加标题和说明

添加标题文本:

属性推荐值
IDworld_title
X20
Y24
180
20
内容欢迎来到大厅
文字大小1.5
对齐center

再添加一行说明:

属性推荐值
IDworld_description
X20
Y54
180
18
内容将准星移到按钮上即可交互
文字大小1
对齐center

世界页面中的组件仍然使用普通页面坐标。左上角是 0, 0,不需要填写 window.widthwindow.height

世界页面会按客户端窗口的实际物理像素密度绘制,GUI 缩放只影响像素密度换算,不会改变这里填写的逻辑坐标。

第四步:添加按钮

添加一个按钮:

属性推荐值
IDworld_button
层级10
X65
Y88
90
24
指针处理auto
缩放1
透明度1
文字我知道了
图片路径gui/tutorial/button.png
悬浮路径gui/tutorial/button_hover.png

在按钮的左键脚本中填写:

javascript
日志("欢迎来到服务器")

玩家点击后会在自己的聊天栏看到消息。世界页面不会因此关闭,方便继续观察和调整。

如果希望按钮直接关闭当前世界实例,可以改为:

javascript
日志("欢迎来到服务器")
关闭()

无参数 关闭() / close() 会定位这次点击所属的世界实例,不需要在脚本里填写页面 ID 或实例 ID。

世界页面同样只会选择准星下最前面的一个组件。背景使用 pointerEvents: block 后,会挡住同一页面中位于它后方的交互组件;按钮因为 z 更高而正常接收准星悬浮和点击。编辑器预览也使用同一规则,可以先在预览里确认没有穿透。

第五步:保存页面

点击编辑器顶部“保存”,等待底部状态栏提示保存成功。页面会写入服务端的 plugins/ChaUI/pages/world_welcome.yml

退出编辑器后,站到准备放置页面的位置附近。为了便于第一次查看,建议把页面中心放在玩家视线前方,并让 Y 坐标略高于地面。

第六步:使用页面默认位置打开

向自己打开页面:

text
/chaui openworld <玩家> world_welcome 111

111 是这份世界页面的实例 ID。实例 ID 是普通字符串,纯数字可以直接使用。

页面打开后依次确认:

  1. 页面内容左右顺序正常。
  2. 移动位置时,页面仍然水平朝向自己。
  3. 页面会随观察距离自然改变屏幕中的大小。
  4. 页面前方有方块时,页面会被遮挡。
  5. 准星移动到按钮上时出现悬浮状态,点击后聊天栏出现消息。

第七步:临时指定位置打开

如果不想修改页面里保存的位置,可以在指令中临时覆盖:

text
/chaui openworld <玩家> world_welcome 大厅提示 <x> <y> <z> follow_player

最后一个参数填写 follow_player 时,页面跟随玩家朝向;填写数字时,页面使用固定水平角度。

例如,同一个页面可以分别使用 大厅提示任务提示111 作为实例 ID,在不同位置打开多份。实例 ID 对同一玩家的全部世界页面全局唯一;如果另一个页面也使用 大厅提示,旧实例会先正常关闭,再被新页面替换。

第八步:关闭指定实例

text
/chaui closeworld <玩家> 111

如果打开时使用的是其他实例 ID,关闭时也要填写对应的 ID。实例 ID 在同一玩家当前打开的全部世界页面中全局唯一,因此关闭时不需要填写页面 ID。

视频组件也支持世界播放

后续将增加同步功能 - 可以在MC中建立影院了~

常见问题

指令显示打开成功,但附近看不到页面

先核对页面保存的 X、Y、Z。世界坐标表示页面中心,不是玩家当前屏幕中心。也可以使用带坐标的打开方式,把页面临时放到自己附近。

页面太大或太小

调整“世界缩放”。0.01 表示一个 GUI 像素占 0.01 格;数值越大,世界中的页面越大。

世界缩放不是清晰度倍率。使用 window.width / window.height 的页面通常从 0.01 左右开始调整;填写 0.1 会让页面在世界中扩大十倍,近距离只能看到一部分。调整 GUI 缩放或窗口尺寸后,离屏纹理会自动按新的物理像素密度更新。

页面背对玩家

把世界朝向设置为 follow_player,或在带坐标的打开指令最后填写 follow_player

页面被地形挡住

这是世界页面的正常表现。它会和世界方块发生正确的前后遮挡关系。移动页面位置,或换到能直接看到页面的位置。

按钮没有反应

让准星落在按钮范围内,并确认页面没有被方块挡住。还要检查页面是否已经保存,以及按钮是否启用。

下一步

完成第一个世界界面后,可以继续尝试:

  • 用不同实例 ID 在大厅多个位置重复展示同一页面;
  • 使用固定数字 yaw,让告示牌保持统一朝向;
  • 加入图片、GIF、物品展示或实体渲染组件;
  • 使用页面变量显示不同实例中的临时状态;
  • 通过按钮事件打开普通页面,组成“世界入口 + 屏幕详情页”的交互流程。