FairyGUI-Plugin-LayoutUtility

在开发过程中,我们常常会遇到需要对某个组件做一个水平镜像的组件,尤其是在做海外游戏时的UI本地化处理时,像中东国家是从右到左的阅读顺序,所以我们通常要对原本在中文或英文阅读习惯环境下只做的UI进行水平翻转的处理。

而手动进行处理的话,这种工作又枯燥又容易出错,既要调整位置又要调整布局,于是就写了这个布局工具进行辅助处理,它的代码很简单,就是读取组件宽度和子控件的坐标,进行水平对称换算一下,并检测一下其关联系统的设置是否包含水平方向上的关联,如果有,则进行对称处理。

除了水平翻转外,还提供了通用的组件阿语转置功能,其会扫描指定组件或指定包下的所有组件,将其各子节点的位置和水平关联关系进行翻转,并将ListLoaderTextRichTextInputText组件的水平对齐方式也进行翻转。

使用方式

LayoutUtility文件夹拷贝到FairyGUI编辑器或UI工程的plugins目录下,然后返回FairyGUI编辑器界面,点击插件分页的刷新按钮,让插件被加载起来。

image-20230322152414284

水平翻转功能

  • 选中需要进行水平翻转的子控件,然后右键

    image-20230322152606341

  • 这里提供了位置水平翻转水平关联翻转位置水平翻转&关联翻转三个选项,通常直接点最后一个即可,可以在右侧检查器面板看到其效果

    image-20230322152659053

  • 目前暂未遇到垂直方向翻转的需求,如果有的话,可自行根据水平翻转的写法增加一下功能即可。

阿语转置功能

  • 在初次使用时,先打开插件的main.js文件,将其中的BRANCH_NAME_AR阿语分支名常量改成你工程中的命名:

    image-20230420164623101

  • 点击顶部菜单栏-工具-创建当前包的阿语转置分支组件按钮,即可对当前选中的包下的所有组件进行阿语转置。

    image-20230420164533675

  • 也支持在资源库视图中,右键单个组件,选择创建其对应的阿语转置组件,或直接对组件进行阿语转置等功能

    image-20230420164717261

  • PS: 若对应分支中已存在同名的组件,则会自动跳过,这是由于某些组件可能需要特殊手动处理(比如对某些图片进行左右翻转、比如分支需要新增某些控件等情况),为了防止这些手动处理的编辑被覆盖,所以做了过滤,如果确实有需要重新生成,则可以手动删除后,再执行生成命令。

  • 功能预览:

    • 原组件:

      image-20230420164747318

    • 转置后:

      image-20230420164817430