Webカタログ用アニメ形式サークルカット作成

えもふりチュートリアル Webカタログアニメーション形式サークルカット

(えもふりver3.9対応)

.ver20181102

■はじめに■

本ページでは、「E-moteがはじめて」の方に向けてコミケWebカタログ(11月2日18時公開予定)用アニメーション形式サークルカットの作成手順を説明します。

Webカタログ用アニメーション形式サークルカットの詳細についてはCircle.ms様の「アニメーション形式サークルについて」をご参照ください。

E-mote / えもふりの詳しい使い方について知りたい場合には、えもふりチュートリアルやE-mote マニュアルをご参照ください。本ページはえもふりチュートリアルをベースとして作成しています。

尚、本マニュアルで解らないことがありましたら、E-mote公式Forumをご参照、お問い合わせ下さい。

用意するもの

• えもふり (ダウンロード)
• Webカタログ用テンプレート (ダウンロード)
• ペイントツール(Photoshop,CripStudio等psdが編集できるもの)
• サークルカットで使用したイラスト

■1. psd画像を用意する

• Webカタログ用シンプルテンプレートに読み込ませる[psd画像]を準備

PhotoShop・ClipStudio・SAIなどで作成したpsd形式のファイルを用意してください。

• Webカタログ用サークルカットのイラストをそのまま使用する際は解像度を2倍にする

Webカタログ用テンプレートのpsdは、サークルカット(横635ピクセル、縦903ピクセル)の一辺が2倍の解像度で作成し、
えもふりでの動画出力時に縮小してwmv形式の動画を作成します。

そのため、キャラクターのイラストは、横1270ピクセル、縦1806ピクセルの枠内に表示したい部分が収まるように解像度を調整します。

1-1. テンプレートに入れる表情・体パーツ

Webカタログ用シンプルテンプレートpsdのレイヤー構造

• サンプルテンプレートからWebカタログ用シンプルテンプレートをダウンロード

こちらからWebカタログ用シンプルテンプレートをダウンロードしてください。

Webカタログ用のテンプレートとしてシンプルテンプレート正面タイプと、シンプルテンプレート微斜めタイプを用意しました。
サークルカットの向きに合わせて選んでいただくことで正面と微斜めのキャラクターであれば簡単にアニメーション形式のサークルカットを作成可能です。

Webカタログ用シンプルテンプレートの中には、正面向きと微斜め向きのそれぞれのフォルダが用意されており、各フォルダには「プレーン画像」と「基本画像」が同梱されています。

続いて、テンプレートのpsdを開き、イラストの各レイヤーを対応するレイヤーフォルダに入れていきます。

• 「Webカタログ用シンプルテンプレート_正面プレーン画像.psd」または「Webカタログ用シンプルテンプレート_微斜めプレーン画像.psd」を開く
• 用意したイラストのレイヤーを全てプレーン画像.psdにコピー
• 表情・体パーツのレイヤーを、[鼻]や[胴体]などそれぞれ対応するレイヤーフォルダに入れる

本ページではサークルカット用に作成したイラストをそのまま使用することを想定しているけど、プレーン画像.psdの各レイヤーに直接イラストを描き込んで作成することもできるよ！

表情用パーツは4種類8つ、体用パーツは5つあり、レイヤーフォルダの構成は下記のようになっています。

■表情用パーツ
[マブタ通常]
[瞳通常]
[白目通常]
[マブタ閉じ]
[眉]
[クチ]
[クチ開き]
[鼻]

■体用パーツ
[前髪]
[輪郭]
[胸]
[胴体]
[後髪]

本文中の[レイヤー名]や作成する画像で不明な点があったら、「シンプルテンプレート_正面タイプ基本画像.psd」か「シンプルテンプレート_微斜めタイプ基本画像.psd」を開いて参考にしてね！

1-2. パーツの調整や描き足し

用意したイラストに不足するパーツがある場合は、パーツを分解したり描き足しを行います。
表情の描き足しや各パーツのレイヤー名設定は下記の項目で説明を行います。

顔の輪郭となる[輪郭]と、身体の胴体部分となる[胴体]は、それぞれのフォルダに対応する身体パーツのレイヤーを必ず入れる必要があるけど、例えば、前髪がないキャラクターや男性など胸のないキャラクターなどは[前髪]や[胸]にパーツのレイヤーを入れる必要はないよ！ 身体だけ動かしたいので目パチや口パチをしなくてもいい場合は、表情用パーツを全て[輪郭]レイヤーフォルダに入れ、表情用パーツのレイヤーフォルダは何も入れないで作成することもできるよ！

1-2-1. 目を描く

• 瞳は、マブタで隠れる部分もしっかり描く （マブタからはみ出しても構いません）
• 白目部分は、あとで瞳を切り抜くためのガイドにもなるので、しっかり瞳の裏まで塗りつぶす
• 描けたら、それぞれのレイヤーは下図のように[マブタ通常][瞳通常][白目通常]に配置する

	このチュートリアルでは説明上、目から描いているけれど、 自分の描きやすいところから描いてオッケーだよ！
	それと、右目と左目は両方とも１つのレイヤーに描いてね！別々に描く必要は無いよ！
	えもふりはpsdのフォルダ名もパーツ名として読み込んで、自動で合成できるんだ。だから「瞳通常」のフォルダの中に瞳の色や塗りを入れておけば、後で自由に修正出来るんだよ！ すごいね！

1-2-2. 閉じている目[マブタ閉じ]を描く

• 閉じている目を描く

少し笑い気味の目にすると、後で動かした時に仕草が可愛くなりやすいです。

• 描けたら、レイヤーを[マブタ閉じ]に配置する

1-2-3. クチを2つ描く[クチ][クチ開き]

• 閉じているクチと、開いているクチの2種類を描く

• 描けたら、それぞれのレイヤーを[クチ][クチ開き]に配置する

1-2-4. 眉と鼻

・眉

• 左右一組の眉のパーツはレイヤーを[眉]に配置する

いちばん普通な状態の眉で、喜怒哀楽で言えば、「楽」にあたる眉だときれいに動くよ！

・鼻

• 鼻のレイヤーを[鼻]に配置する

ここまでで表情パーツの配置は終了です。

1-2-5. 輪郭や胴体を配置する

表情パーツの設定が終わったら、今度は頭や身体のパーツを設定します。

■ 輪郭

• 顔の輪郭となるレイヤーは[輪郭]に配置する

シンプルテンプレートでは耳・もみあげ・頬の色・髪の影なども[輪郭]に配置しても問題ないよ！ 長いもみあげは後述の[前髪]の一部にすると綺麗に動くよ！

■ 前髪、胴体、後髪、胸

■ 前髪
・前髪全体のレイヤーを[前髪]に配置する
前髪がないキャラクターは省略しても構いません。

■ 後髪
・耳や首より後ろ、頭頂部から後頭部にかけての頭全体と髪をまとめて[後髪]に配置する
後髪が見えないキャラクターは、省略しても構いません。

■ 胴体
・腰から上の胴体、腕・首をまとめて、[胴体]に配置する

■ 胸
・胸を揺らしたり、胸で立体感を出したい場合は胸のパーツを[胸]に配置する
男性キャラなどの場合はレイヤーを作らなくても構いません。

髪や胸はどう動かすか悩むよりも、とりあえず配置してみるのがオススメ！ えもふりに取り込んだ後も何度でも描き直しができるから、まずは動かして、それから色々考えてみてね！

1-3. サークル名や背景の配置

• サークル名を配置する場合は、「追加_サークル名」のレイヤーフォルダ内にサークル名となるレイヤーを配置する

• 背景を配置する場合は、[背景]のレイヤーフォルダ内の[背景絵]に配置する

1-4. 首中心、腰中心の配置

最後に、首の付け根で回転中心となる[首中心]、ヘソ付近で胴体の回転中心となる[腰中心]を決めます。

• キャラクターイラストの首の回転中心に[首中心]を配置する
• キャラクターイラストの腰の回転中心に[腰中心]を配置する

テンプレートのpsdには[首中心]と[腰中心]がすでに含まれていますので、キャラクターイラストの首の回転中心と腰の回転中心に来るようそれぞれを配置してください。

首の中心点は首を傾げる時の回転中心となります。
閉じたクチの少し下あたりに打つのがコツです。

腰の中心点は、バストアップの場合は胸の少し下、
バストアップのイラストであれば、トリミング枠の外側に打つと綺麗に動きます。

[原点]は全ての中心点となり、キャラ・背景全体を回転させる際の中心軸になるけど、Webカタログ用では動かさないでね！ 動かしちゃうと動画が正しく出力されないから、画面全体の中心に配置してロックしてあるよ。

上記までの作業でpsdの準備が完了となります。
設定レイヤ、表情用パーツ、身体用パーツなどが正しく配置されているかどうかをチェックします。

■2. E-moteキャラクターの作成

・えもふり – E-mote Free Movie Maker
えもふりエディタを使用して、キャラクターの画像を各パーツに登録していきます。
まずは前項で作成したpsd画像、最新版のえもふりエディタを用意してください。

本マニュアルで作成したpsdには、必ず「シンプルテンプレート_正面タイプ」か「シンプルテンプレート_微斜め」の.emttmplファイルを使用してね！ シンプルテンプレート以外を使用すると、レイヤ名が異なり眉や口のパーツが正しく表示されないよ。

2-1. エディタの起動・テンプレート読み込み

エディタを起動してテンプレートを読み込みましょう。

• えもふりエディタを起動する
• 左上メニューの[ファイル]-[テンプレートを開く]から[シンプルテンプレート_正面タイプ.emttmpl](または[シンプルテンプレート_左斜めテンプレート.emttmpl])を開く

すると、エディタに白黒のテンプレートキャラが表示されます。これが、E-mote / えもふりの基本テンプレートキャラクターです。

基本テンプレートキャラクターには、様々な動きや表情変化の仕組みが既に構成されています。
このキャラクターに、psd形式で作成した各パーツを当てはめ、差し替えて新たなキャラクターを作成します。

正面のキャラクターには正面タイプ、斜めタイプのキャラクターには微斜めタイプの.emttmplファイルを使用してね！

2-2. psdをインポートする

えもふりエディタで先程作成したpsdファイルを読み込みます。

• [ファイル]-[psdをインポートする]から、psdファイルを読み込む

psdインポート画面が開きます。
ここで、キャラクターパーツをえもふりエディタに登録します。

まず、画面左上の「取り込みパーツ一覧」の文字が全て黒字で表示されているのを確認して下さい。

サークル名などの追加パーツは青色で表示されます。

赤字や灰色表示されている場合は、そのパーツが省略されているか、またはレイヤー名が間違っている可能性があります。パーツを省略していないのであれば、一度キャンセルしてpsd画像のレイヤーや、レイヤー名を確認して下さい(特に英字の半角大文字など）。

取り込みパーツ一覧の各パーツ名をクリックし、パーツが青色の枠で正しく囲まれているかを確認しましょう。
異常に余白が大きかったりする場合は、psd画像に見えないゴミやドットが残っており、それをパーツの一部として認識している可能性があります。

レイヤーの透明部分に小さなゴミとかがあると、それもパーツの一部として取り込んじゃうから注意してね！ 透明部分に消し残しや小さなゴミが残っていないかチェック！

それぞれの枠に問題が無ければ、「インポート」ボタンをクリックしてpsdからキャラクターパーツを取り込みます。


psdで作ったキャラクターがE-moteエディタ上で、psd作成時と同じように表示されていれば、psdインポートによるパーツの登録と位置・重ね順調整はすべて完了です。

一度psdインポートした後も、画像を書き換えたpsdファイルを再インポートして、設定はそのままにパーツ画像を更新することができるよ！ 必要に応じて、キャラクターに手を加えたり、調整を行ってね！

2-3. プロジェクトファイルの保存

作成したモーションは『えもふり』で加工可能なemtproj形式で保存することができます。

• 上メニューの[ファイル]-[プロジェクトに名前をつけて保存する]から、新しい名称でキャラクターファイルを保存

テンプレートフォルダとは別の場所にデータを保存して下さい。

ショートカットキー
・プロジェクトを保存する [CTRL + S]
・プロジェクトに名前をつけて保存する [SHITF + CTRL + S]

■3. キャラクターを動かしてみる

E-moteはパーツを取り込んだだけでもある程度動かすことができます。

3-1. キャラクターをテストで動かす

まずは色々と動かしてテストしてみましょう。
2つの編集モードでキャラクターの動作テストができます。
また、この2つのモードは、後々キャラクターのポーズや仕草を作るときにも使用します。

エディタ左側にあるツリーの、[ポーズ詳細編集]を開き、[パラメータ編集]を選択しましょう。

・パラメータ編集

[パラメータ編集]では、キャラクターを実際にマウスで動かしてみたり、
スクロールバーを使ってキャラクターの細かい動きの確認が出来ます。

キャラクターのマウス操作は以下の方法で可能です。

CTRL＋マウスドラッグ　目線・頭・胴体の向きテストができます。
SHIFT＋マウスドラッグ　左右・前後の傾きテストができます。

今度は、エディタ左側のツリーから、[ポーズ詳細編集]–[物理挙動編集]を選択しましょう。

・物理挙動編集


物理挙動編集では、様々なボタンを押すことでキャラクターの動作を確認・設定できます。

「パラメータ編集」では、CtrlやShiftを押しながらグリグリ動かせるよ！色々選んで組み合わせて動かしてみてね！ 組み合わせ過ぎたりボタンを押しすぎて戻せなくなった時は、[パラメータリセット]を押すと元に戻るよ！覚えておいてね！

3-2.おかしな部分を調整する

・えもふりチュートリアル / 3-2.おかしな部分を調整してみる！
「頭の動きに目やクチが付いてこない・浮いて見える」といった感じで、
頭を上下左右に動かした際に、絵柄によっては、目鼻クチ眉が輪郭の動きに対してズレて見える場合があります。
その際は、「えもふりチュートリアル/ 3-2.おかしな部分を調整してみる！」をご参照いただき、調整を行ってください。

■4. キャラクターを動かして出力する

この項はキャラクターを実際に動かしたり、ポーズを組合わせて動画やアプリ上で動かすキャラクターデータを作る作業に入ります。

4-1. タイムラインを選ぶ

E-moteには[タイムライン]という、キャラクターの表情や仕草を作る「動きのスケジュール表」
のような仕組みがあり、予めプリセットとしてサンプルがいくつか入っています。

1. 物理挙動編集モードを選んで、[メインタイムライン]と[差分タイムライン]の選択項目がある事を確認します。

2. 試しに、[メインタイムライン]を開いて、[sample_02]を選んでみましょう。
すると、作ったキャラクターが少し嬉しそうな動作をしてくれたのではないでしょうか。

3. 今度は、[タイムライン(差分)]を開いて、[歩行ループ]を選んでみましょう。
キャラクターが上下に揺れ出し、歩いているかのような動作が加わったと思います。

これが、タイムラインの仕組みです。
タイムラインを組み合わせる事で、様々な仕草と表情を作り出すことができます。

4-2. タイムラインアニメーションを動画に出力する

タイムラインは、wmv動画やgif動画、連番pngとして出力する事ができます。
このうち、Webカタログ用アニメーション形式サークルカットはwmvに対応していますので、wmv出力を行います。

1．　左のツリーから[タイムライン編集]を開いて、動画出力したいタイムラインを選択(画像では[sample_喜01])、[動画を出力する]のボタンをクリックします。

2．動画出力設定ウィンドウが開きますので、下記のようにパラメータやコンフィグを設定します。

・パラメータ
[フォーマット]の[WMV(動画)]を選択。

・コンフィグ
[コミケWebカタログ(wmv)]にチェックを入れると、パラメータの[幅: 640][高さ: 904][スケール: 0.504]が自動で入力されます。

[OK]ボタンを押し、ファイル名を決めて［保存］するとwmvの書き出しが行われます。

パラメータの[幅: 640][高さ: 904][スケール: 0.504]はいじらないでね！ サイズやスケールの違う動画が出力されちゃうよ！

サークルカットの画像サイズは横635ピクセル・縦903ピクセルですが、wmvは画像サイズが8ピクセルの倍数でなければならないため、横640ピクセル・縦904ピクセルで動画出力されます。

Webカタログ用アニメーションサークルカットは20MBまで動画ファイルを受け付けるため、20MB以下になるよう自動で調整されます。
※ Twitterにアップロードできるgif動画のファイルサイズは最大15MBまでです。

動画のサイズが規定サイズを超えてしまったら、タイムラインを短くしたり、[フレームの時間]を大きくしたりして調整してね！ 動画書き出し時は、えもふりエディタが「応答なし」と表示されることがあるけど、動画が書き出されるまで待ってみてね！

■5. E-mote / えもふりのさらなる機能

この他、タイムラインの自作、追加パーツの作成、特殊表情の追加など、えもふりにはまだまだ多彩な機能があり、
キャラクターの動きを納得ができるまで作り込んでいくことができます。

・えもふりチュートリアル
詳しくはえもふりチュートリアルをご参照ください。

また、えもふりは「Unity」「ティラノスクリプト」「宴」組み込み用データの出力も対応しています。
データの出力はとても簡単ですので、アプリ作成に興味のある方は是非試してみて下さい。

・E-mote マニュアル
E-moteの更なる詳しい仕組みや機能につきましては、「E-moteオンラインマニュアル」をご参照ください。
作成や使用にあたり、ご不明な点やご質問等ございましたら、E-mote公式Forumをご活用下さい。

最後までチュートリアルをお読みいただき、誠にありがとうございました。