Skip to content

编辑界面

编辑界面功能就是蛋仔工坊里的的UI(User Interface 用户交互界面)编辑器,你可以使用它来编辑画面中的图片、文本框和按钮等界面。在更多>常用功能里可以找到编辑界面功能的入口。

界面分解图

画布

画布是UI编辑器的主要工作区,你可以在画布上调整控件的布局。

画布默认拥有基础的游戏原生控件,即跳跃、摇杆、退出等控件,用于定位界面的布局。

原生控件列表

你可以修改部分原生控件在这张地图里的位置和大小;如果不修改,原生控件的布局会跟随玩家在游戏设置里的自定义布局方案生效。

你也可以选中原生控件关闭默认显示(不是所有原生控件都支持,比如退出),这样游玩时该控件也不会显示在界面上。

画布中隐藏和游玩时隐藏

控件工具栏里的<隐藏>只影响控件在画布时的显示,便于调整其他控件的位置;在控件<高级设置>中关闭<默认显示>控件才会在游玩时隐藏。

还有一些蛋码<显示/隐藏原生界面>和<显示/隐藏原生控件>会调用的原生控件可以在设置>预览管理功能中启用画布显示,大部分原生控件还不支持修改位置和大小,仅用作画布定位,避免控件相互遮挡。

预览管理

使用【管理】功能,可以创建多个画布,分别设计不同的布局。画布只是编辑和调用的单位,只要开启了默认显示,所有画布都可以出现在玩家屏幕里。

画布管理

没有选中任何控件时,可以在底部工具栏打开【画布设置】编辑画布属性,包括画布名称,是否默认显示以及显隐事件。

以画布为单位的UI界面可以通过事件或蛋码<设置画布可见性>调用。

画布分辨率设置

编辑界面左上角【设置】-编辑设置-分辨率设置可以更改编辑画布的分辨率。

分辨率设置配置的是编辑界面中画布的分辨率及宽高比,使用这个功能可以预览当前UI布局在其他比例屏幕上的显示效果。

分辨率设置为默认时会自动切换到符合工匠蛋当前设备的分辨率,工坊中也提供了几种主流的宽高比分辨率供参考。

需要注意:不同分辨率并不是各自独立的画布,不能分别配置不同的布局。

在设置-编辑设置中可以选择画布是否以游戏场景作为背景及场景背景的透明度。这个设置只会在当前分辨率的画布上生效。

层级

同个画布里的控件会按照显示顺序叠放,这就是控件的层级。类似于图片处理软件的“图层”概念。

使用【管理】功能可以对编辑中的画布进行层级管理,层级越靠后的控件层级越高,排在最后一个的控件会出现在顶层。

层级管理中可以查看当前画布中所有控件的状态,更改其锁定和隐藏状态。

功能描述
置顶将该控件移到最上层(层级列表末尾)
置底将该控件移到最底层(层级列表末尾)
复制可以复制一个该层级的控件及其子级控件
粘贴复制层级后,可以粘贴到当前层级的子级中
删除删除该层级下所有控件(包括子级)
锁定\解锁锁定控件后,不可在画布内选中该组件进行编辑

长按拖动层级可以调整控件层级,滑动会显示移动到的位置,若为直线则意味着控件会移动到上下两个层级之间;若为包围框意味着控件会被移动到该控件的子级。

一个控件成为另一个控件的子级时,它们之间会成立类似组件绑定的关系,即共享位置、旋转、透明度等信息,并且在控件播放动画和控件位置改变时,子级控件也会跟随变化;父级锁定后,子级可以单独解锁并选中;父级隐藏后,子级不可以单独显示,但是可以选中并移动。

编辑界面的层级没有上限。

适配

适配编辑模式下可以快速调整控件的适配规则,使其在不同分辨率下也能以预期形式进行显示。

通俗来说就是可以解决不同设备环境下UI显示偏移错位的问题,不需要给手机设备和ipad设备设计两套不同的ui,而是让做好的ui可以兼容各种显示比例的设备。

适配模式用于实时预览当前界面在与当前设备尺寸相差最大的分辨率下的显示效果。

你也可以通过编辑界面左上角设置里的编辑设置-分辨率设置,修改编辑时画布的宽高比和分辨率。

控件的适配主要使用控件高级设置中的屏幕适配属性实现,详情见>>>屏幕适配属性的使用

资源库

控件指编辑界面内的编辑对象,例如图片、文字、按钮等都被统称为控件。

控件资源库,可以从库里拖出控件到编辑区域中。

控件类型简述
图片提供了蛋仔派对官方使用的部分ui资源
文本包括用于展示文本的文本框和支持玩家输入文本的输入框
按钮自带按下、禁用等按钮交互状态的按钮ui
进度条支持动态显示进度变化的功能控件
功能官方提供的自带特殊逻辑的控件
动效具有动态表现效果的图片资源
组合官方、资源社区和自制的包含多个控件

控件编辑

选中控件会出现快捷工具框,工具框包含以下功能:

功能名称描述
缩放用于调整控件的大小
旋转用于自由旋转控件
复制原地复制一个相同控件
精准移动进入精准移动模式,可以通过方向键微调控件位置

控件工具栏

选中组件后,下方会出现工具栏,工具栏包含以下功能。

功能名称描述
组合多选组件时可以将多个控件进行打组,打组后可以在画布中批量编辑组内控件,并且支持保存为自制组合跨草稿使用。
删除删除被选中的控件。
对齐单个组件会默认与整张画布进行对齐。多选状态下会结合所有被选中组件的位置进行计算。
隐藏隐藏当前控件,隐藏不会取消选中状态,隐藏后隐藏键会变成显示键。
锁定锁定当前组件,锁定后无法在编辑区域中选中该控件(可以在层级管理中选中),锁定后锁定键会变成解锁键。
高级设置可以在高级设置面板更改控件属性,具体属性详见控件部分。

更多

编辑界面功能左侧的【更多】可以打开更多操作面板。

显示隐藏

一次性显示所有被隐藏的控件。

重置画布

可以将(放大或缩小后)画布大小重置回初始大小,方便查看布局。

蛋码

快速跳转到蛋码,便于编写ui相关的逻辑。

编辑界面开放的蛋码积木如下,只有使用指定积木才能实现界面与游戏逻辑的信息交换。

UI控件没有销毁概念,只能设置对指定玩家或玩家列表的可见性和显示内容。

<界面相关事件积木>

事件积木使用方法
接收自定义事件(附带玩家)支持接收界面控件互动事件,提供触发事件的玩家参数。
接收界面自定义事件(当前对象)用于指定对象触发器接收界面控件互动事件,提供触发事件的玩家参数。
手势区域滑动事件指定手势区域控件滑动时可以触发的事件,提供触发玩家和滑动角度参数。
输入框结束输入玩家通过输入框控件输入文字,输入结束时会发出的事件,可用于验证输入内容。
界面控件事件指定UI控件进行指定交互(点击、按下、抬起)时触发。

控件事件响应机制

界面控件无法接收到<发送自定义事件>蛋码发出的事件,只有上述列表中提到的事件有效。

另外,界面控件有【仅向界面发送】的设定,打开后界面控件发出的事件只能被界面接收到,蛋码无法接收。

<界面相关动作积木>

动作积木使用方法
向界面发送事件(蛋码中)只有使用该条积木发送的事件能被控件接收到。
设置画布\原生界面\原生控件\界面控件可见性动态修改界面的显示或隐藏。原生控件和界面控件的显示依赖于它们所在的原生界面\画布是否显示。
原生界面\画布可见性关闭的情况下控件不能单独显示。
创建图片\文字\进度条等类型节点以界面中已有的控件作为父控件创建界面控件。
设置控件的交互开关动态设置界面是否可交互(点击、按下)。
设置控件的不透明度动态设置控件的不透明度属性。
设置\重置控件动画状态使用蛋码动态修改控件动画的播放状态。

控件的表现属性基本都支持使用蛋码动态修改,已经开放的属性如下:

  • 原生界面控件的文本内容\文本叠加色\文本颜色

  • 文本控件的内容\颜色\字号\字体\背景\描边\阴影

  • 图片控件的图片\叠加色

  • 按钮控件的文本内容\颜色\字号

  • 控件的屏幕适配属性(自适应)和位置

注意事项

指定积木只对描述中包含类型的控件类型生效。

在选取控件时,通常会给出<界面控件>和<文本\图片控件>的数据选项,界面控件类型通常用于填入控件变量(蛋码中,不同类型的控件并没有单独的变量类型)。如填入的控件类型与描述不符,蛋码不会正常生效。

预览模式

预览模式可以快速模拟试玩时界面,用于全屏检查界面排版,不支持交互。

辅助线

辅助线可以帮助我们在画布中定位,尤其是在放大或缩小画布后。

点击【辅助线】后,画面中会出现蓝色的辅助线,按住辅助线交点左下的手指按钮可以移动辅助线位置。

在设置中开启【吸附到辅助线】功能后,利用辅助线定位控件会更加方便。

多选

打开多选模式后可以选中多个控件,选中多个控件后可以进行批量编辑。

点击空白处即取消多选。

复制

与组件的复制模式类似,可以通过移动复制选中的组件。

打开替换事件复制模式会在复制控件时替换控件上的触发事件,如控件的点击触发事件为1,复制后的控件则为2、3……

吸附管理

左上角进入设置功能,可以在编辑设置里调整控件移动时的吸附设置。

工具描述
吸附到辅助线被选中控件的选中框在靠近辅助线时会自动吸附。
对齐吸附接近另一个控件时,可自动与其对齐。
旋转吸附旋转角度为45°的倍数时,选中框会变红提示。
等距吸附使选中控件与其他控件的间隙距离一致。

保存与撤销还原

编辑界面里的保存快捷键和撤销还原快捷键。

撤销还原仅能撤销还原编辑界面内的操作,隐藏和锁定控件相关的操作无法撤销或还原。

竖屏模式

更多>规则设置>基础规则里可以修改<显示模式>为竖屏;编辑界面功能左上角的设置>地图设置也可以修改显示模式。

切换到竖屏模式后,编辑界面的画布及原生控件也会转化为竖屏,原有自定义控件不受影响。

场景编辑不会受到竖屏模式影响,只有游玩时会变成竖屏模式,玩家进入竖屏模式时系统会提醒玩家旋转设备。