我的战舰新版本UI教程上线！ 这篇文章小编将为你详解基础UI编辑逻辑，涵盖屏幕坐标、功能调用与变量设置，助你掌握数形结合编程 思索，轻松入门战舰界面设计。（共79图｜2799字）

【更新 时刻｜ 2024.4.1】

【作者:GZY】

基础UI设计入门教程

【共79图，2799字】

本教程聚焦界面设计教学，示例仅供 进修，无实际应用 价格。

所示为手绘屏幕坐标示意图

定位器横屏时，左下角为坐标原点，右上角定义为坐标（1,1）点。

通常把逻辑处理放在核心部分

进入拼装页面，点击核心部件即可。

点击图中的无限符号即可

进入逻辑主界面后，点击相应按钮即可操作。

进入逻辑编辑界面后，将上方 技巧拖至下方区域即可自动生成代码。

顶部设有六个按钮，分别对应不同功能，方便用户快速操作与切换各项设置，提升使用便捷性。

将上方内容拖至下方，找到UI选项后点击即可。

点击任一选项即可生成对应UI界面，我选择了线段。

代码名称直接体现其全部功能，输入时需格外注意准确性与规范性。

输入新名称后点击确认命名（示）

字母命名可提升编辑效率（示）

随后生成了一段UI代码

战斗界面效果展示（所示）

调整坐标可改变线条的走向与长短（所示）。

战斗界面特效展示所示

拖动页面上方区域，即可查看包含全部变量名称的列表。

若之前未给线条命名，页面将不显示任何信息。

点击欲编辑的代码名称，即可查看该代码的全部功能信息。

点击后可获取实现A旋转效果的代码，所示。

通过创建小数变量，利用其数值变化来精确控制旋转角度。

在界面中查找并点击指定位置，所示。

接着点击即可

我将名称定为a（所示）

可生成一条小数变量代码， 体系默认其值为0，所示。

要实现线段的旋转，必须引入一个变量来动态改变其角度。

由于该逻辑被置于每帧执行的循环中，因此其中所有内容都会随每一帧刷新而运行一次。当帧率是20时，该逻辑每秒将被执行20次。若变量a每帧递增1，则其值会在一秒钟内从0迅速增长至20，并持续以每秒20的速度不断上升。

进入页面后，点击相应位置（见下图所示）。

此时右侧显示出之前创建的变量a， 由于计算涉及该变量，无需新建名称，直接点击a即可完成操作。

将加法前的空格设为a，所示，此时加法代码具备累加 影响，数字a将持续不断递增。

将旋转角度同样设为a即可。

由此获得了一个可旋转的线条逻辑结构。

注意：请删除第三行代码，避免变量a被持续重置为0导致数据无法保存。

此时可见，线条围绕坐标点（0.5，0.5）呈旋转 情形，所示。

若将坐标原点调整为（0.5，0.5），图形位置将发生 如何的变化？

最终 结局仍以（0.5，0.5）为中心点旋转呈现

如何调整旋转中心的位置坐标？

在A线条的变量功能中，点击相应选项即可设定其中心坐标位置。

效果图如下所示

所有线段的旋转操作需先以默认中心点（0.5，0.5）进行，之后再设定新的旋转中心。若提前将线段绘制在新旋转中心位置，再更改中心点，会导致旋转效果偏离预期，无法实现正确变换，务必注意操作顺序。

A屏出错，B屏显示正确

A屏幕因先生成线条再设定新旋转中心，致使线条移出屏幕范围。

所有旋转相关的UI元素，应先在（0.5，0.5）坐标生成并调试效果，确认无误后再调整旋转中心位置。

让线段旋转显得单调，于是引入新元素B圆环，增添变化与趣味。

在A线段的变量功能里，参照下图所示位置进行查找。

将子界面设为B形圆环，所示。

测试 结局显示B移至近似旋转中心处转动，其位置变化受何种 影响影响？（见下图）

圆环坐标设为（0，0）时的显示效果所示。

当圆环坐标设为（0.5，0.5）时呈现的效果所示。

当坐标与默认旋转中心（0.5，0.5）重合时，旋转才会围绕该中心进行。

将中心点调整为（0.5，0.5），并将圆环位置移至（10，0）。

效果图如下所示

位于屏幕外部的坐标（10，0）竟有部分内容显示在屏幕内。

将圆环置于坐标（-5，0.5）位置的效果所示。

当UI之间存在父子关系时，子UI的坐标不再受限于0到1范围。若子UI坐标设为（0.5，0.5），则其位置将与父UI的旋转中心重合。

添加名为C的头像UI后，玩家显示为空，所示。

获取玩家变量，需先定位核心功能模块。

请在图示位置进行选择操作

假装无视下方，实则吸引玩家注意。

命名随后进行

我称其为本机械

随后取下并命名为本玩家

在本机械的变量功能中，同样可获取玩家相关信息。

我称其为玩家

随后把任意一项添加至头像界面后的玩家设置中

此时，UI头像将展示用户自己的头像。

将C设为A的子节点，调整位置至坐标（2，5），操作目的暂不明确。

他们欢快地一同旋转起来。

调用功能时检测到零件缺失

此时需在零件列表中查找目标零件（如核心），找到后将其命名为核心。

由此获得核心零件的编码信息

填上核心二字即可完成

将位置偏移向量设为（0，1，0）时，即可实现图中所示效果。

第九条自选观测明显较暗，所示。

未执行的代码如同被删除般无效

点击序号可切换其明暗 情形

因3D选择需用变动向量，故须预先创建一个向量（见下图所示）。

我将其命名为向量，所示。

将字母a填入变量X中（所示）

在B的变量功能中查找，并将向量输入其中。

隐藏多余旋转部分以便测试，所示。

所示，即可实现此效果。

添加一个名为D的按钮。

功能 丰盛的按钮，此处仅演示其一。

向上滑动即可

找到标有D的按钮名称

这些按钮功能所示

找到后即可获得一段包含特定信息的代码（所示）。

当内容较多时，点击第18行前的绿线，即可从该行起不再包含后续内容，操作简便直观。

测试 结局所示

按钮按下后，小数a开始递增，同时带动UI进行3D旋转效果。

进入组装页面，选取穿甲弹并将其安装至核心位置（所示）。

关闭穿甲弹功能

补充 几许弹药箱，地图未开启无限弹药功能。

进入逻辑编辑界面后，查找并选中需要调用功能的组件。

点击穿 甲弹

找到之前放的穿甲弹

点击[射击]

按下D键即可触发穿甲弹发射，获取相应射击代码。

测试 结局所示

创作辛苦，感谢支持，喜欢请点赞。