今回は、アニメーション作成ソフト「Live2D」でピクトグラムを動かしてみます。
使用する素材
今回の作業で使用するピクトグラムです。
[human pictogram 2.0]というフリーのピクトグラム素材サイトからダウンロードしました。
[human pictogram 2.0]ではai、png、jpg形式で多数のピクトグラムが配布されています。
画像の加工A
最初に画像編集ソフトウェア「Photoshop」でピクトグラムをパーツごとに分けていきます。
1. 顔のパーツ分け
「輪郭 + 前髪」と「後ろ髪」の２つにパーツ分けを行います。
後ろ髪を選択ツールで指定して、選択範囲をカットしたレイヤーを作成します。
その際に、後ろ髪で隠れていた部分の前髪と顔の輪郭を描き足しています。
2. 胴体のパーツ分け
「腕」「胴体」「スカート」の３つにパーツ分けを行います。
それぞれ選択範囲をカットしたレイヤーを作成します。
その際に、腕で隠れていた部分の胴体を描き足しています。
3. 足のパーツ分け
「右足」と「左足」の２つにパーツ分けを行います。
最初から離れた位置に描かれているため、簡単に分けることができました。
画像の加工B
もう片方の素材も同様に加工を行います。
今回は下の人物のみ使用するので、上の人物を消しゴムツールで消します。
「顔」「ネクタイ」「右腕」「左腕」「胴体」「右足」「左足」の７つにパーツ分けを行いました。
各種パラメータの作成
画像の加工が終わったのでLive2Dでアニメーションのパラメータを作成します。
Photoshopで加工を施したpsdファイルをLive2D Cubism Editorで開きます。
1. パラメータ「右足 走り」
最初に Ctrl + A ですべてのパーツを選択して、上部メニュー「メッシュの自動生成」をクリックします。これでおおまかな形のメッシュが自動で作成されます。
走る際のパラメータを作成します。
右足を選択した状態で、上部メニュー「回転デフォーマの作成」をクリックします。
Ctrlキーを押しながらドラッグすることで、回転デフォーマの位置を調整します。右足がスカートの外側を沿うようなポイントにデフォーマを配置します。
回転デフォーマの位置が決まったら「右足 走り」という名前でパラメータを作成し、回転デフォーマが選択された状態で「キーの２点追加」をクリックします。
パラメータ「右足 走り」が1.0の時の回転デフォーマの角度を設定します。
2. パラメータ「左足 走り」
左足も同様に作成します。
左足を選択した状態で「回転デフォーマの作成」をクリックし、デフォーマの位置を調整します。
「左足 走り」という名前でパラメータを作成し、回転デフォーマが選択された状態で「キーの３点追加」をクリックします。
パラメータ「左足 走り」が-1.0と1.0の時の回転デフォーマの角度を設定します。
3. パラメータ「右足 角度」と「左足 角度」
走る際の足の形状を作成します。
「右足 角度」という名前でパラメータを作成し、右足が選択された状態で「キーの２点追加」をクリックします。右足のメッシュを手動で変形させることでパラメータを作成します。
「左足 角度」も同様にメッシュを直接編集してパラメータを作成します。
4. パラメータ「スカート」
走る時にスカートを揺らすパラメータを作成します。
「スカート」という名前でパラメータを作成し、スカートが選択された状態で「キーの２点追加」をクリックします。スカートのメッシュを手動で変形させることでパラメータを作成します。
5. パラメータ「髪揺れ 後」
走る際の髪の揺れを作成します。
後ろ髪を選択した状態で「回転デフォーマの作成」をクリックし、デフォーマの位置を調整します。
デフォーマの位置が決まったら「髪揺れ 後」というパラメータで、回転デフォーマが選択された状態で「キーの３点追加」をクリックします。
パラメータ「髪揺れ 後」が-1.0と1.0の時の回転デフォーマの角度を設定します。
6. パラメータ「アタック」
アタック時のパラメータを作成します。
アタック時には「腕」「胴体」「スカート」「足」が動くので、パーツごとに「キーの２点追加」でパラメータを設定していきます。それぞれのパーツのメッシュを変形させることでパラメータを作成しています。
7. パラメータ「ダメージ」
もう片方の素材も同様にパラメータを作成します。
Ctrl + A ですべてのパーツを選択して、上部メニュー「メッシュの自動生成」をクリックし、メッシュを作成します。
攻撃を受けた時には全てのパーツが動くので、すべてのパーツで「キーの２点追加」を選択し、パラメータ「ダメージ」を作成します。パラメータ「ダメージ」が1.0の時の形状を、それぞれのパーツのメッシュを変形させることで作成します。
8. パラメータ「回転」
体が回転する際のパラメータを作成します。
何も選択していない状態で「回転デフォーマの作成」をクリックし、空の回転デフォーマを作成します。名前は「体の回転」としています。
空の回転デフォーマが作成されたら、すべてのパーツを選択した状態でドラッグして回転デフォーマに入れます。
「回転」という名前でパラメータを作成し、回転デフォーマが選択された状態で「キーの２点追加」をクリックします。パラメータ「回転」が1.0の時の回転デフォーマの角度を設定します。
サンプルアニメーション
今回の作業で作成したアニメーションです。
クリックでGIFアニメーションが再生されます
