フェイスの作成手順

236 views

こちらのページで、フェイスの作成手順についてご説明します。

現在、フェイスエディターを使用してフェイスを作成する方法は2つあります。

方法 1:直接テンプレートの内容を変更し、ロボットに送信しながら効果をチェックします。
方法 2:フェイスを新しく作成し、フィールドに応じて各フェイスパーツをテクスチャに配置します。

方法2のプロセスは比較的に複雑ですが、高度な柔軟性と自由度があります。この作成手順は、主に方法2について説明します。

フェイスを作成する時、下記の機能が揃っている画像編集ソフトウェアのご利用がおすすめです。

1. 画像のレイヤーを区別できる
2. クリッピングマスクを作成できる
3. 透明な画像を出力できる

eg. Adobe Illustrator、Adobe XD、Sketch。(細かいパーツが多数あるため、Photoshopのような画像編集ソフトはおすすめしません。)

また、画像を編集する時、各パーツ(顔の枠、目、鼻、口、エモーション効果など)を分けて編集してください。
さらに、テンプレートにある「フィールド範囲参照図面」、「ブラックグリッドと各フィールドの代表部位」、および「フェイス」を異なるレイヤーに配置することがおすすめします(テンプレートの内容については、次の段落で詳しく説明します)。

👉 以下の手順説明は「三毛猫」(CAT)のテンプレートを例にして説明します。

📔 レイヤーは何ですか?

レイヤー(Layer)の概念は、透明なシートを積み重ねるようなものです。各レイヤーの透明エリアを通して下のレイヤーを確認することができ、そして各レイヤーの間(特殊効果を適用する前に)では相互に影響しないことです。

個別に編集する必要のある部分、または最終的に個別に保存する必要のある部分は、違うレイヤーに描くことをおすすめします。

上記のように、テンプレートにある「フィールド範囲参照図面」、「ブラックグリッドと各フィールドの代表部位」、および「フェイス」を異なるレイヤーに配置することによって、最後に画像を出力する時、直接「フィールド範囲参照図面」、「ブラックグリッドと各フィールドの代表部位」とのレイヤーを閉じることができます。必要のない部分をクリアするために消しゴムなどを使用する必要がないため、編集エラーの可能性が低くなります。

コンテンツを違うレイヤーに配置する
必要のないレイヤーを「閉じる」
📔 クリッピングマスク / マスクは何ですか?

クリッピングマスク / マスク(Creat Clipping Mask / Mask)の目的は、各レイヤーで表示される範囲を設定できるようにすることです。 この概念は、よくプロフィール写真を作成するときに使用されます。

たとえば、今日は三毛猫」(CATの顔を使って円形の写真アイコンを作成したい場合は、「三毛猫」(CAT)の顔に円形のクリッピングマスクを配置することによって、円形のクリッピングマスク内のコンテンツのみ制御できます。

クリッピングマスク / マスクは、主にフェイスエディターで画像作成における各フィールドの表示と範囲を制限するために使用されます(この機能は必須ではありませんが、この機能を使用して編集する方が便利です)。

p.s. クリッピングマスク / マスクを作成するには、各画像編集ソフトウェアの手順をご参照ください。

丸い部分のみ表示したい時
クリッピングマスクを利用した効果
📔 何で透明な画像を出力する必要がありますか?

ロボットがテクスチャファイルを取得する時には、長方形単位で取得されて、フェイスにインポーズする形になります。
画像ファイルの背景が透明でない場合、一部の項目が覆われて表示できない場合がありますので、必ず背景を透明にして画像ファイルを出力してください。

背景が透明ではないと、このようになります。

フェイステンプレートの説明

こちらでは、テンプレートのダウンロード方法と内容について説明します。

テンプレートをダウンロード

フェイスエディターを初めて使用する場合で、フェイステンプレートをまだ取得していない場合は、下の画像の左上にある「テンプレートのダウンロード」をクリックしてテンプレートを取得してください。

ダウンロード完了したら、「face-editor-sample.zip」が保存されます。解凍して、中身を確認してみましょう!

.フィールド範囲参照図面(0_Align_Ref)
.ブラックグリッドと各フィールドの代表部位 ×1(0_CleanGrid)
.キャラクターサンプル ×3(Bongo、Cat、Husky)

キャラクターサンプルの説明

フェイスエディターでは、ユーザーが参考および変更として使用できる3つのキャラクタースケルトン(Bongo、Cat、Husky)を提供します。

各キャラクターのアニメーション表現特徴やスケルトンが若干異なるため、ニーズに応じて違うキャラクターを選択し、キャラクターのテンプレートを参照して変更することがおすすめです。

1. キャラクターの紹介

ケビー(BONGO):ケビーのデフォルトの表現で、シンプルでキュートな形と豊かな表情の変化が特徴です。これから作成するキャラクターがさまざまな表情を持ち、特に感情を表現することにしたい場合は、ケビー(BONGO)のテンプレートを使用することがおすすめです。

三毛猫(CAT):大きな丸い目と長いひげを持つ三毛猫です。フェイスをデザインする時に同じ要素を使用する必要がある場合は、三毛猫(CAT)のテンプレートを使用することがおすすめです。

ハスキー(HUSKY):ハスキーが原型で、顔の形のマーキングや形の変化が豊富です。顔のデザインに色柄の変化が多いキャラクターを作成したい場合は、ハスキー(HUSKY)のテンプレートを使用することがおすすめです。

2. テクスチャ(UV)の説明

各キャラクターのフェイスは4つのテクスチャ(UV)で構成されています。テクスチャではさらに複数のフィールドがあり、それぞれのフィールドに違う顔のパーツに指しているので、それに対応するコンテンツ(顔パーツ図)を入れることが必要です。そして、システムはフィールドの内容を切り取って、キャラクターのフェイスで表示するようにします。

テクスチャは下記の4枚になります:
.UV_F1
.UV_M1
.UV_M2
.UV_VFX01

次に、各テクスチャの内容と各フィールドが対応する意味について説明します。
⚠ すべてのキャラクターが全部のフィールドを使用するわけではありません。各フィールドの詳細定義については、各キャラクターのテンプレートをご参照ください。
⚠ テクスチャの内容と位置はシステムによって定義されたもののため、場所調整、またはサイズ変更することなどはできません。

UV_F1(顔)

.hairA & stripe:柄
.faceA:顔の枠
.noseB:何かを嗅ぐ時 or 泣く時の鼻
.noseA:鼻
.cheekL/R:ひげ
.eyeR_L/R_RefA、eyeR_L/R_RefB:眉毛(一つのみ、または両方とも使用されることがあります。テンプレートごとに確認してください。)
.eyeline_L/R:目を閉じる、瞬き
.eveball_L/R:目玉
.pupilA_L/R、pupilB_L/R:瞳(一つのみ、または両方とも使用されることがあります。テンプレートごとに確認してください。)

UV_M1(口元 1)

口の形は4枚の画像でアニメーション化にしているので、各口の形には01~04の番号が振られています。01は口を閉じたとき、04は口が最も大きいとき、中央の02と03はトゥイーンフレームです。

.mouthA:普通の口の形
.mouthB:普通の会話の時(ポジティブな感情の時)
.mouthC:会話の時(嬉しいやサプライズの時)
.mouthD:会話の時(ネガティブな感情の時)

UV_M2(口元 2)

.mouthE:怒った時
.mouthF:嫌悪、怖がった時
.mouthG:お腹が空いた時
.mouthH:驚いた、サプライズの時

👉 説明の例で使われた「三毛猫(CAT)」はちょうどmouthF~Hを利用していなかったです。

UV_VFX01(特殊効果)

.surprise_VFX:サプライズ(左右共通)
.sadA_VFX_L/R:悲しい
.sadB_VFX:悲しい(真ん中の表現)
.angerB_VFX:怒る(左上の表現)
.angerA_VFX:怒る(真ん中の表現)
.disgustA_VFX:気持ち悪い
.eyebrow、cover、background、eyelid:まぶた、瞬き眨のレイヤー、サンプルを参考して色を塗りつぶしてください。
.joy_VFX:うれしい
.cheek_VFX:顔が赤くなる
.disgustB_VFX_L/R:気持ち悪い(頬での表現)
.angerC_VFX:怒る(右下の表現)

3. フィールド範囲参照図面の説明(0_Align_Ref)

フィールド範囲参照図面の「0_Align_Ref」フォルダーには、フィールド範囲を示すファイルが提供され、そちらでフェイスパーツとテクスチャの対応関係が表示されます。(.ai、.svg、.psd、.pdfファイルで提供しております) 。
こちらを参考にして、フェイスをデザインした後のテクスチャ編集に使用できます。

⚠ フィールド範囲はあくまで参考内容で、最終的にはロボットに送信して、実際にどのようにロボットで表示されるを確認しながら調整する必要があります。

フィールド範囲、フェイスパーツとテクスチャの対応関係
0_Align_Ref フォルダー内の内容
4. テクスチャ用グリッド(0_CleanGrid)

テクスチャ用グリッド「0_CleanGrid」のフォルダーにはブラックグリッドと各フィールドの代表部位のファイルがあります。
こちらを使用して、ファイスのテクスチャ(UV)を仕上げることができます。

フェイスを作成開始

以下の手順に従って独自のフェイスを作成しましょう。

Step 1:フェイスをデザインする

まずは画像編集ソフトで、1024×576pxのワークスペースを開いて、フェイスを描きます。

完成例:

📔 フェイスのパーツを描く・分解する時に、レイヤーの順番を確認したいのであれば、こちらをご参考ください。
noseA > mouthA_01 > Stripe > eye_RefA > hairA > cheek > pupilA > eyeball > faceA

Step 2:フェイスパーツを分解する

フェイスのパーツを分解する前に、今回のフェイスに使用するキャラクターのスケルトン(ケビー、三毛猫、ハスキー)を決めてください。 詳しい紹介は、このページの上部にある「フェイステンプレートの説明> キャラクターサンプルの説明」をご参照ください。

テンプレートにあるフィールド範囲参考(内容名:Ref_01)を縦・横でフェイスと整列してください。整列すると、下記のようになります。

次に、以下のステップをお進みください。

1. フィールド範囲参考のグループを解除する
2. 背景を削除する(背景は位置合わせのため)
3. 再度グループを解除し、各ブロックを開放する
4. テクスチャ(UV)の説明を參考し、フェイスのパーツ(眉毛、目、鼻、口など)をグループ化して、まとめてください。

eg. 三毛猫の右眉をeyeR_RefAとグループ化します;額左上の花柄をhairAとグループ化します。
例:

⚠⚠⚠ 注意 ⚠⚠⚠
⛔ オブジェクト(フェイスのパーツ)は各フィールドの範囲内にお収まりください。
⚠ テクスチャで表記している「L(Left 左)/R(Right 右)」はキャラクター自身の「L(Left 左)/R(Right 右)」,間違わないようにお気をつけください。
⚠ フィールド範囲はあくまで参考内容で、最終的にはロボットに送信して、実際にどのようにロボットで表示されるを確認しながら調整する必要があります。

Step 3:オブジェクトをテクスチャ(UV)に入れる

フェイスをパーツごとに分解した後、分解したオブジェクト(フェイスのパーツ)をテクスチャ(UV)の対応する位置に配置します。


対応する場所はおおよそ次のとおりです。

完成例:

次に、サンプルとしたキャラクターのテンプレートを開いて、自分が作成したテクスチャの内容とキャラクターのテクスチャと対照し、不足している部分を入れてください。
すべてが埋められましたら、各フィールド範囲の背景を透明にしてください。

完成例:

👉 p.s. 上記の方法でUV_VFX01の特殊効果コンテンツを作成してください。フィールドの詳細な参照範囲がテンプレートに添付されています。(ワークスペース:Ref_VFX01)。

Step 4:テクスチャをエクスポートする

テクスチャが完成され、「フェイスエディター」にアップロードする前に、完成したテクスチャをエクスポートする必要があります。各テクスチャは2048×2048px.pngである必要があり、合計4枚あります。

⚠ 使用する画像編集ソフトによって、テンプレートをインポートする時に2048×2048にならない場合があります。その場合は、手動でテクスチャのサイズを調整してください。
⚠ 注意:テクスチャ自体以外、表示したくない他の部分は透明である必要があります。そうしないと、他のコンテンツが隠されてしまいます。

テクスチャをエクスポートするときに位置合わせに使用される「黒いグリッドとフィールド名称図」を「エクスポートしない」ことをおすすめします。(黒いグリッドが誤って使用範囲に切り取られることを避けるため)

完成例:

フェイスの作成お疲れさまでした!次に、完成したテクスチャを《フェイスエディター》にアップロードする手順を説明します。

CONTENTS