扫一扫咨询方案
首页
登录/注册

{user.username}

ID: {user.id}

模板制作文档

  • 云渲染

    • Demo下载
    • SDK
    • 开发指南
    • AI API 文档
    • 开发者 API 文档
    • 控制台指南
    • 快速入门
    • 产品简介
  • 模板SDK

    • 用户常见问题
    • Demo 下载
    • 开发指南
    • 服务端 SDK
    • iOS SDK
    • 安卓端 SDK
    • 产品简介
  • 剪辑SDK

    • Demo下载
    • SDK
    • 开发指南
    • 产品简介
  • 模板制作教程

    • 模板制作进阶教程
    • 测试模板素材案例下载
    • 常见模板制作案例
    • 模板制作教程
    • 模板制作工具下载
    • 入门指南
  • 剪辑制作教程

    • 剪辑特效导出教程
    • 剪辑特效测试素材
    • 剪辑特效制作工具下载
    • 入门指南
首页 > 模板制作进阶教程 > UI Key的作用是什么?

UI Key的作用是什么?

更新时间 : 2021-07-08 20:04:11

什么是UI-key

VE引擎允许设计师在导出模板时,对特定的素材和图层添加UI标记(也称“UI Key”)。

UI标记本质上就是一段名称,由大小写英文字母、数字以及".,_-/*&"等符号组成。客户可以根据自己的业务需求自行制定和添加UI标记。

UI标记的作用是什么?

UI标记的本质作用就是对素材和图层进行标记和区分,最终达到在渲染模板时能够根据UI标记查找到指定的素材或者图层,对其内容进行修改。

UI标记由设计师在导出模板时在“VE Exporter”中进行设置。SDK中提供接口给开发者利用UI标记内容去查找指定的图层或者素材文件。

其中VE支持两种匹配方式去根据UI标记来查找素材和图片;

一种是“完全匹配”,例如,如果将一个图层设置“title”作为UI标记,那么SDK在利用完全匹配查找该图层时,必须也查找“title”才能查找到该图层,任何拼写、大小写和长度的不符都查不到指定的图层;

另一种是“前缀匹配”,就是根据UI标记开始的字符内容进行匹配。例如,如果将一个图层设置“dtext1”为UI标记,另一个图层设置“dtext2”,那么SDK根据前缀进行查找“dtext”时,“dtext1”标记的图层和“dtext2”标记的图层都能查找到。 当SDK利用UI标记查找到了指定的素材和图层后,便可对素材进行修改,或者对图层的内容进行修改。

应用场景

1. 自动添加视频落款 (完全匹配)

假设客户需要在用户使用模板渲染出来的视频中添加用户的昵称为落款,那么就可以通过UI标记来完成自动添加。

实现方法如下: 首先,设计师可以在模板中合适的位置和时间点添加一个文字层,并设置合适的样式和动画,作为用户昵称落款。 然后,在导出模板时,对刚刚添加的文字图层层添加UI标记,比如“user_name”,并且将文字层设为可编辑以载入文字的样式信息。然后,SDK在载入模板编辑完成后,查找UI标记为“user_name”的图层,然后替换改成的内容为当前用户名的昵称即可

2. 动态模板为用户图片搭配字幕 (前缀匹配)

动态模板中,必须以用户上传的图片或素材做为主要依据来组合视频片段,常规接口传入用户素材都会被用来创建新的动画片段,而且在渲染之前无法知道一个用户图片或视频对应的是哪一个动画片段,那么如何为每一个用户图片或视频设置特定的字幕或其他相关联的附加素材呢?

标记方法
(1) 老版标记方法(已废弃,不推荐使用)

其中用户对素材添加的UI标记互相不能重复,必须互不相同。

对图层添加的UI标记,每个合成中的图层之间必须互不相同,不能重复。不同合成中的图层可以有相同的UI标记。

首先在动画片段中为每个用户素材添加相应的字幕图层或其他附加内容,再通过UI标记,建立起用户素材和其字幕图层或其他附加图层之间的关系。

比如,在一个动画片段中,依次把该片段中存放用户素材的 source 图层以 “dimg”+序列号 的格式依次标记为dimg1,dimg2,dimg3... 如果该片段中只有一个用户素材,将该用户素材source所在的图层设置UI标记dimg1,如果该片段有两个用户素材,依次设置为dimg1dimg2,以此类推。

接下来需要将每个用户素材和其附加素材的关系建立起来。

比如,可以将每张图片对应的文字层以 “dtext”+对应source的序列号+.+序列号 的格式添加UI标记。 例如,片段中第一个 source 图层的UI标记为 dimg1,其对应两个字幕文字层,那么可以将第一个字幕层设置UI标记 dtext1.1,其对应的第二个字幕层设置UI标记dtext1.2;片段中第二个source图层的UI标记为dimg2,其对应两个字幕文字层,那么可以将第一个字幕层设置UI标记dtext2.1,其对应的第二个字幕层设置UI标记dtext2.2

这样一来,用户素材及其对应的附加素材之间的关系就建立起来了。

通过上文建立的关系, SDK 可以通过用户主素材的路径定位到其所在图层的 UI 标记,找到关联的附加素材并替换。关于该功能的接口的详细介绍,可以分别查看对应的技术文档和设计师文档。

(2) 新版标记方法
  1. 使用字符串, 比如 to_replace(为兼容旧版,dimg为保留字,请不要使用)标记动画片段中存放用户素材的 source 合成所在图层。如果同一个片段中有多个souce合成,ui_key 不能重复。

  2. 依次标记关联的附加素材(图片/文字)为 to_replace.序号, 第 1 个为 to_replace.1, 第 2 个为 to_replace.2 以此类推, 从1开始依次递增标记

  3. 如果同一个片段有多个 source 图层需要标记,选择一个不重复的字符串,比如 to_replace_next 来标记,其关联需要替换的附加素材,再按照前两步的步骤标记

  4. 需在素材窗口中将关联的附加素材设为可编辑

使用这种方法,设计师即可完成模板标记,而不需要告知开发者自己使用的 ui_key 标记。

这种方法只能在 SDK 中的 setReplaceableJson 方法中使用。详情需要查看对应 SDK 中的 “高级素材替换规范” 文档, replaceableJson 规范请查看 replaceableJson 说明与规范

素材UI标记和图层UI标记的区别

要理解素材UI标记和图层UI标记的区别,就要理解素材和图层的关系。

素材可以理解为设计师或者用户制作模板时提供的图片、视频和文字素材。

图层指的是模板中用于显示素材、特效和动画的渲染对象。

一个图层通常需要使用一个素材作为其视觉内容,与此同时,也可以添加动画数据和特效。多个图层可以使用同一个素材文件作为其视觉内容。

根据这样的工作逻辑,利用素材UI标记和利用图层UI标记进行内容替换时会有不同的效果。利用素材UI标记替换素材内容时,所有使用该素材作为视觉内容的图层的内容都会被替换掉。

而使用图层UI标记对图层的素材内容进行替换时,只会对该图层的视觉内容进行修改,并不会影响到其他图层的视觉内容。

图层UI标记的注意问题

为实现通过ui key替换需要将关联的附加素材设为可编辑,以遍获取替换素材信息

首页 > 模板制作进阶教程 > UI Key的作用是什么?
UI Key的作用是什么?
更新时间 : 2021-07-08 20:04:11
  • 云渲染
    • Demo下载
    • SDK
    • 开发指南
    • AI API 文档
    • 开发者 API 文档
    • 控制台指南
    • 快速入门
    • 产品简介
  • 模板SDK
    • 用户常见问题
    • Demo 下载
    • 开发指南
    • 服务端 SDK
    • iOS SDK
    • 安卓端 SDK
    • 产品简介
  • 剪辑SDK
    • Demo下载
    • SDK
    • 开发指南
    • 产品简介
  • 模板制作教程
    • 模板制作进阶教程
    • 测试模板素材案例下载
    • 常见模板制作案例
    • 模板制作教程
    • 模板制作工具下载
    • 入门指南
  • 剪辑制作教程
    • 剪辑特效导出教程
    • 剪辑特效测试素材
    • 剪辑特效制作工具下载
    • 入门指南

什么是UI-key

VE引擎允许设计师在导出模板时,对特定的素材和图层添加UI标记(也称“UI Key”)。

UI标记本质上就是一段名称,由大小写英文字母、数字以及".,_-/*&"等符号组成。客户可以根据自己的业务需求自行制定和添加UI标记。

UI标记的作用是什么?

UI标记的本质作用就是对素材和图层进行标记和区分,最终达到在渲染模板时能够根据UI标记查找到指定的素材或者图层,对其内容进行修改。

UI标记由设计师在导出模板时在“VE Exporter”中进行设置。SDK中提供接口给开发者利用UI标记内容去查找指定的图层或者素材文件。

其中VE支持两种匹配方式去根据UI标记来查找素材和图片;

一种是“完全匹配”,例如,如果将一个图层设置“title”作为UI标记,那么SDK在利用完全匹配查找该图层时,必须也查找“title”才能查找到该图层,任何拼写、大小写和长度的不符都查不到指定的图层;

另一种是“前缀匹配”,就是根据UI标记开始的字符内容进行匹配。例如,如果将一个图层设置“dtext1”为UI标记,另一个图层设置“dtext2”,那么SDK根据前缀进行查找“dtext”时,“dtext1”标记的图层和“dtext2”标记的图层都能查找到。 当SDK利用UI标记查找到了指定的素材和图层后,便可对素材进行修改,或者对图层的内容进行修改。

应用场景

1. 自动添加视频落款 (完全匹配)

假设客户需要在用户使用模板渲染出来的视频中添加用户的昵称为落款,那么就可以通过UI标记来完成自动添加。

实现方法如下: 首先,设计师可以在模板中合适的位置和时间点添加一个文字层,并设置合适的样式和动画,作为用户昵称落款。 然后,在导出模板时,对刚刚添加的文字图层层添加UI标记,比如“user_name”,并且将文字层设为可编辑以载入文字的样式信息。然后,SDK在载入模板编辑完成后,查找UI标记为“user_name”的图层,然后替换改成的内容为当前用户名的昵称即可

2. 动态模板为用户图片搭配字幕 (前缀匹配)

动态模板中,必须以用户上传的图片或素材做为主要依据来组合视频片段,常规接口传入用户素材都会被用来创建新的动画片段,而且在渲染之前无法知道一个用户图片或视频对应的是哪一个动画片段,那么如何为每一个用户图片或视频设置特定的字幕或其他相关联的附加素材呢?

标记方法
(1) 老版标记方法(已废弃,不推荐使用)

其中用户对素材添加的UI标记互相不能重复,必须互不相同。

对图层添加的UI标记,每个合成中的图层之间必须互不相同,不能重复。不同合成中的图层可以有相同的UI标记。

首先在动画片段中为每个用户素材添加相应的字幕图层或其他附加内容,再通过UI标记,建立起用户素材和其字幕图层或其他附加图层之间的关系。

比如,在一个动画片段中,依次把该片段中存放用户素材的 source 图层以 “dimg”+序列号 的格式依次标记为dimg1,dimg2,dimg3... 如果该片段中只有一个用户素材,将该用户素材source所在的图层设置UI标记dimg1,如果该片段有两个用户素材,依次设置为dimg1dimg2,以此类推。

接下来需要将每个用户素材和其附加素材的关系建立起来。

比如,可以将每张图片对应的文字层以 “dtext”+对应source的序列号+.+序列号 的格式添加UI标记。 例如,片段中第一个 source 图层的UI标记为 dimg1,其对应两个字幕文字层,那么可以将第一个字幕层设置UI标记 dtext1.1,其对应的第二个字幕层设置UI标记dtext1.2;片段中第二个source图层的UI标记为dimg2,其对应两个字幕文字层,那么可以将第一个字幕层设置UI标记dtext2.1,其对应的第二个字幕层设置UI标记dtext2.2

这样一来,用户素材及其对应的附加素材之间的关系就建立起来了。

通过上文建立的关系, SDK 可以通过用户主素材的路径定位到其所在图层的 UI 标记,找到关联的附加素材并替换。关于该功能的接口的详细介绍,可以分别查看对应的技术文档和设计师文档。

(2) 新版标记方法
  1. 使用字符串, 比如 to_replace(为兼容旧版,dimg为保留字,请不要使用)标记动画片段中存放用户素材的 source 合成所在图层。如果同一个片段中有多个souce合成,ui_key 不能重复。

  2. 依次标记关联的附加素材(图片/文字)为 to_replace.序号, 第 1 个为 to_replace.1, 第 2 个为 to_replace.2 以此类推, 从1开始依次递增标记

  3. 如果同一个片段有多个 source 图层需要标记,选择一个不重复的字符串,比如 to_replace_next 来标记,其关联需要替换的附加素材,再按照前两步的步骤标记

  4. 需在素材窗口中将关联的附加素材设为可编辑

使用这种方法,设计师即可完成模板标记,而不需要告知开发者自己使用的 ui_key 标记。

这种方法只能在 SDK 中的 setReplaceableJson 方法中使用。详情需要查看对应 SDK 中的 “高级素材替换规范” 文档, replaceableJson 规范请查看 replaceableJson 说明与规范

素材UI标记和图层UI标记的区别

要理解素材UI标记和图层UI标记的区别,就要理解素材和图层的关系。

素材可以理解为设计师或者用户制作模板时提供的图片、视频和文字素材。

图层指的是模板中用于显示素材、特效和动画的渲染对象。

一个图层通常需要使用一个素材作为其视觉内容,与此同时,也可以添加动画数据和特效。多个图层可以使用同一个素材文件作为其视觉内容。

根据这样的工作逻辑,利用素材UI标记和利用图层UI标记进行内容替换时会有不同的效果。利用素材UI标记替换素材内容时,所有使用该素材作为视觉内容的图层的内容都会被替换掉。

而使用图层UI标记对图层的素材内容进行替换时,只会对该图层的视觉内容进行修改,并不会影响到其他图层的视觉内容。

图层UI标记的注意问题

为实现通过ui key替换需要将关联的附加素材设为可编辑,以遍获取替换素材信息