网易我的世界论坛

标题: 【教程】UI可视化调整工具 [打印本页]

作者: 黑曜石网络 时间: 2019-10-24 17:25
标题: 【教程】UI可视化调整工具
本帖最后由黑曜石网络于 2019-10-28 15:18 编辑

UI可视化调整工具脚本

-黑曜石工作室

各位开发者大大们是否觉得平时开发组件的时候，调整ui都要耗费大量时间从而导致开发周期延长呢。今天黑曜石工作室给各位开发者们带来了一款脚本，该脚本配合Inkspace可以一键导出调整好的ui json文件，可以大大减少开发周期哦。

一、如何安装
1、首先，你们需要下载Inkspace矢量图编辑器[attach]921913[/attach]
2、安装完成后打开 Inkscape，然后找到 extensions 目录（通常路径是 %appdata%\inkscape\extensions）
[attach]921914[/attach]

3、然后把该帖子末尾附件的两个文件直接放进去（不要在 extensions 底下创建目录），重启 Inkscape 就行了

[attach]921915[/attach]

====================以上是安装教程=====================
二、如何使用
1、新建一个项目，然后“文件 -> 文档属性”，选横向 A4 纸
[attach]921919[/attach]

2、然后使用“文件 -> 导入”导入图片，然后开始你的ui设计之旅
[attach]921920[/attach]

建议把 XML 编辑器（Ctrl+Shift+X）打开，可以改部件 ID，事后生成的时候会用到

SVG:IMAGE 会导出成图片（Image）并导出对应材质
SVG:TEXT 会导出成文字（Label，颜色字号等属性会丢失）
SVG:G 如果 ID 以 Button 结尾会导出成按钮（ImageButton）并会将每个元素导出到材质
SVG:G 如果 ID 以 Image 结尾会导出成图片（Image）并会将其本身导出到材质
SVG:G 在其他情况下会导出成面板（Panel）

可以使用 Ctrl+G 和 Ctrl+U 组合（添加 SVG:G）和拆分（去除 SVG:G）部件

3、制作完成后，务必先保存该项目，然后选择“扩展 -> 导出 -> Export AsMinecraft Bedrock UI”

[attach]921921[/attach]

4、然后会冒出来一个界面，唯一的文本框可以指定输出位置，默认是“文档”
[attach]921922[/attach]

5、选择完导出位置后，按“应用”等一会，等到 Inkscape不卡了按“关闭”，去目标目录里找带时间戳的目录
[attach]921923[/attach]

6、最后，把两个子目录复制到资源包对应位置就行了，记得在 _ui_defs.json 里添加引用

最后，这边是脚本文件：[attach]924328[/attach]

更新日志：

2019-10-28
1、修复了图片居中的问题
2、修复了奇葩分辨率错位的问题

作者: 雾都漫游者 时间: 2019-10-25 10:14