ワードアート - ApsaraVideo VOD - Alibaba Cloud ドキュメントセンター

Short Video SDK には、MV (ミュージックビデオ) 、ステッカー、バブル、ワードアートなど、豊富な動画素材ライブラリが含まれており、さまざまなシナリオに応じたカスタムエフェクトをサポートしています。このトピックでは、ワードアートの作成とエクスポートの仕様について説明します。

概要

ワードアートはキャプションベースのエフェクトです。ワードアートリソースパッケージは、config.json 設定ファイルと画像アセットを含むフォルダーです。ワードアートエフェクトは、Short Video SDK の編集 API を使用して、リソースパッケージフォルダーへのパスを渡すことで適用できます。

完全なワードアートリソースパッケージには、次の 3 つのパートが含まれます：

config.json：必須。ワードアートの設定ファイルです。設定の詳細については、「config.json パラメータ」をご参照ください。
icon.png：任意。ワードアートエフェクトのサムネイルです。
lieheng.png：任意。ワードアートテキストのテクスチャです。この画像が設定ファイルで指定されている場合、ワードアートエフェクトの設定に使用されます。

ワードアートリソースパッケージの設定

次の表では、config.json パラメータについて説明します。

表 1. config.json パラメータ
フィールド	タイプ	必須	説明
version	String	はい	設定のバージョン番号。デフォルト値は 1 です。
color	String	はい	フォントカラー。形式：#AARRGGBB または #RRGGBB。
texture	String	いいえ	ワードアートテキストのテクスチャ。JPG および PNG 形式のみがサポートされています。ファイルは config.json と同じフォルダーにある必要があります。各文字は同じテクスチャを使用し、フォントカラーの領域を上書きします。
outline1	JSONObject	はい	アウトラインの第 1 レイヤー。プロパティの詳細については、「アウトラインプロパティ」をご参照ください。
outline2	JSONObject	いいえ	アウトラインの第 2 レイヤー。outline1 と同じデータ構造を持ちます。プロパティの詳細については、「アウトラインプロパティ」をご参照ください。

アウトラインには outline1 と outline2 があります。次の表では、それらのプロパティについて説明します。

表 2. アウトラインプロパティ
フィールド	タイプ	必須	説明
type	String	はい	アウトラインタイプ。デフォルト値はノーマルで、システムフォントが使用されます。
data	JSONArray	はい	アウトラインの一連の色と幅の定義。詳細については、「data 子ノードのプロパティ」をご参照ください。type がノーマルに設定されている場合、data は最大 3 つの色設定をサポートします。3 つ以上指定された場合、最初の 3 つのみが使用されます。

次の表では、data 子ノードのプロパティについて説明します。

表 3. data 子ノードのプロパティ
フィールド	タイプ	必須	説明
color	String	はい	アウトラインカラー。形式：#AARRGGBB または #RRGGBB。
width	浮動小数点	はい	アウトラインの幅。有効な値：0～64。同じタイプの後続の各ノードの幅の値は、先行する幅の値より大きい必要があります。説明各アウトラインについて、data 子ノードの width プロパティは、先行する data 子ノードの width プロパティより大きい値である必要があります。次の例をご参照ください。

次の例は、data5 > data4 > data3 > data2 > data1 となる正しい幅の値を示しています。

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

設定例

次の例は、以下に表示されるワードアートエフェクトの設定方法を示しています。サンプルリソースパッケージのダウンロード： SampleDemo.zip。花字示例

サンプルパッケージのフォルダー構造は次のとおりです：
├── 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
      }
    ]
  }
}

Short Video SDK でのエフェクトの使用

ワードアートエフェクトは、動画編集中にのみサポートされます。

Android
AliyunPasterControllerCompoundCaption.setFontEffectTemplate メソッドを呼び出してワードアートエフェクトを適用します。詳細については、「キャプションと動的ステッカーの設定」をご参照ください。
iOS
AliyunCaptionStickerController.setFontEffectTemplate メソッドを呼び出してワードアートエフェクトを適用します。詳細については、「キャプションとステッカーの設定」をご参照ください。