Word art

0.0.201

The short video SDK provides a variety of features, product-level interaction, and an abundant video material library that contains music videos (MVs), stickers, bubbles, and word art. The short video SDK also allows you to create custom effects to meet the material requirements in different scenarios and industries. This topic describes how to configure word art.

Overview

Word art is an effect based on subtitles. The folder of a word art resource package contains a word art profile named config.json and some images. You can use a method provided by the short video SDK to apply a word art effect by specifying the folder of a word art resource package.

A complete word art resource package contains the following parts:

config.json: the word art profile. This file is required. For more information about how to configure the profile, see the Parameters in the config.json file section of this topic.
icon.png: the word art thumbnail. This file is optional.
lieheng.png: the word art texture. This file is optional. You can set the word art effect based on this texture if corresponding configurations are made in the profile.

Configure a word art resource package

Parameters in the config.json file

Parameter	Type	Required	Description

Parameter	Type	Required	Description
version	String	Yes	The version number. Default value: 1.
color	String	Yes	The font color. Format: #AARRGGBB or #RRGGBB.
texture	String	No	The word art texture. Only the JPG and PNG formats are supported. This file must be placed in the same folder as the config.json file. The texture for each word is the same. The part that the text and the texture overlap is applied.
outline1	JSONObject	Yes	The first-layer outline. For more information, see the outline section of this topic.
outline2	JSONObject	No	The second-layer outline. This outline has the same data structure as the first-layer outline. For more information, see the outline section of this topic.

outline

The following table describes the parameters of the outline1 and outline2 parameters.

Parameter	Type	Required	Description

Parameter

Type

Required

Description

type

String

Yes

The type of the font. The default value is normal, which specifies that the system font is used.

data

JSONArray

Yes

The color and width of the outline. For more information, see the data section of this topic.

If you set the type parameter to normal, a maximum of three color configurations can be made for the data parameter. If more than three color configurations exist, only the first three color configurations take effect.

data

Parameter	Type	Required	Description

Parameter	Type	Required	Description
color	String	Yes	The outline color. Format: #AARRGGBB or #RRGGBB.
width	float	Yes	The outline width. Valid values: 0 to 64. The width value of the next data parameter must be greater than this value. Note For all outlines in the config.json file, the width value of a data parameter must be greater than the width value of the previous data parameter.

Example: width of data5 > width of data4 > width of data3 > width of data2 > width of data1. The following sample code provides an example:

{ 
 "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
 }
 ]
 }
}

Configuration examples

The following word art is used in this example. To download the demo package, click Sample demo.zip. 花字示例.png

The folder structure of the demo package:
├── config.json
├── icon.png
└── lieheng.png

The following sample code shows how the config.json file is configured:

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

Use an effect in the short video SDK

You can use word art only when you edit videos.

Android
Call the AliyunPasterControllerCompoundCaption.setFontEffectTemplate method to apply a word art effect. For more information, see Configure subtitles and animated stickers.
iOS
Call the AliyunCaptionStickerController.setFontEffectTemplate method to apply a word art effect. For more information, see Configure subtitles and stickers.

Feedback