首页 > 分享 > 如何制作花字

如何制作花字

花匠小妙招
2024-11-22 20:10

短视频SDK提供了丰富的功能接⼝，产品级的交互，丰富的视频素材库（MV、贴纸、⽓泡、花字），并推出了特效⾃定义能⼒来满足不同场景和⾏业下的素材需求，本⽂档将重点介绍花字的制作规范和输出。

简介

花字是基于字幕的一种特效，一个花字特效资源包文件夹，包含了一个名为config.json的通用特效配置文件以及一些图片素材。您可以通过短视频SDK提供的编辑接口，传入特效资源包文件夹目录，来应用一个花字特效效果。

一个完整的花字特效资源包通常包含以下三个部分：

config.json：必选，花字的配置文件。配置说明参见config.json配置说明。

icon.png：可选，花字缩略图，即最终生成的花字效果缩略图。

lieheng.png：可选，花字文字贴图，即基于此图片设置花字效果，当配置文件有配置时使用。

配置花字特效资源包

config.json配置说明

字段

类型

是否必选

说明

字段

类型

是否必选

说明

version

String

是

配置版本号，默认为1。

color

String

是

字体颜色，格式：#AARRGGBB或 #RRGGBB。

texture

String

否

花字文字贴图，只支持jpg和png格式，且需和config.json配置文件放置在同一文件夹下。目前花字文字贴图的规则是每个文字的贴图完全一样，取贴图覆盖到字体颜色区域部分。

outline1

JSONObject

是

第一层描边。属性说明参见outline属性说明。

outline2

JSONObject

否

第二层描边，和outline1数据结构相同。属性说明参见outline属性说明。

outline属性说明

outline包含outline1和outline2。

字段

类型

是否必选

说明

字段

类型

是否必选

说明

type

String

是

默认为normal，代表默认使用系统字体。

data

JSONArray

是

定义了描边的一系列颜色及宽度，详细请参见data子节点属性说明。

当type为normal时，data最多允许有3个颜色配置，超过3个，则只会取前3个颜色配置。

data子节点属性说明

字段

类型

是否必选

说明

字段

类型

是否必选

说明

color

String

是

描边颜色，格式：#AARRGGBB或#RRGGBB。

width

float

是

描边宽度，取值范围：[0~64]，且下一个同类型节点的width值，必须大于当前width值。

说明

每一个outline的data子节点的width属性值，必须大于上一个data子节点的width属性值，示例如下。

正确的width取值样例如下，data5的width > data4的width > data3的width > data2的width > data1的width。

{ "outline1": { "type": "normal", "data":[ // data1 { "color": "#5350DD", "width": 2 }, { // data2 "color": "#B5FAA7", "width": 4 } ] }, "outline2": { "type": "normal", "data":[ { // data3 "color": "#6E58F8", "width": 8 }, { // data4 "color": "#69F88C", "width": 10 }, { // data5 "color": "#FA55D8", "width": 12 } ] } }

配置示例

本文以设置如下花字效果为例进行示例说明。该示例的配置资源包Demo：示例Demo.zip。

该示例Demo包的文件夹结构如下：

├── config.json

├── icon.png

└── lieheng.png

config.json的配置如下：

{ "version": 1, "color":"#000000", "texture": "lieheng.png", "outline1": { "type": "normal", "data":[ { "color": "#ffffff", "width": 8 } ] }, "outline2": { "type": "normal", "data":[ { "color": "#000000", "width": 15 } ] } }

目前仅支持在编辑视频时，使用花字特效。

Android

调用AliyunPasterControllerCompoundCaption.setFontEffectTemplate方法应用花字效果。详细操作请参考设置字幕及动态贴纸。

iOS

调用AliyunCaptionStickerController.setFontEffectTemplate方法应用花字效果。详细操作请参考设置字幕及贴纸。