一から学ぶ! アニメ・モーションのつくりかた!〜Live2D編〜 part05

投稿者: 


どうも!(・∀・)やじキチです。


いや〜、最近野球があついですね!
16日に行われた、明治神宮野球大会も非常に激戦でした^^
いよいよ迎えた「高校の部」準決勝では 敦賀気比の1年生ある上中尾が活躍いたしました。
1−2の青森山田リードで迎えた五回、2アウト満塁の場面でフルカウントから変化球を、上中尾が見事!逆転のホームランを放ちました!
敦賀気比の決勝進出は16年ぶりで、今後の試合も楽しみですね!!


世間話もこれくらいに、前回に引き続き!やじキチアイコンのアニメーションの制作をしていきます!
連載ブログのLive2D編!part05です!
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
Live2D
http://www.live2d.com
Live2Dは、イラスト、マンガ、アニメなどの2D画像を、
2D独特の形状や画風を保ったまま、立体的に動かすことのできる独自の表現手法です。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー


ちょっとやる気が起きないあなた!
やらなくても良いので、とりあえずソフトを起動してみましょう!
とりあえず!とりあえずです!

おや?ソフトを起動できたなら目的のファイルを読み込んでみましょう。
とりあえずです。とりあえず。

やらなきゃいけないことなら、もうやっちゃいましょう!ね!ほらほらほらほら!!

こんな感じで、なし崩し的に物事を進めると、やる気が無くても作業は進みます。
お試しあれ(・∀・´)



本題です!
前回は「Cubism Animator」にて、アニメーションを途中まで作成いたしました。
今回は書き出しまでを行いたいと思います!



スクリーンショット 2015-11-15 21.58.11
まずは前回のフレームからまた少し間隔を開けて、今度は反対側に首を曲げます。



スクリーンショット 2015-11-15 21.58.24
同じフレームで今度は口の開けるように、パラメータを移動します。



スクリーンショット 2015-11-15 21.59.36
しかしこのままだと、顔が中央から右に動くフレーム数と、右端から左端まで動くフレーム数が同じです。
つまり、同じ時間でも角度の振り幅が違うため、顔が右端から左端に移動するときのほうが、スピードが速くなってしまいます。





なので左右に首を振るスピードを一緒にするために、右端のキーフレームを移動しましょう。
スクリーンショット 2015-11-15 22.00.17
右側のキーフレームを選択し、「Shift」を押しながら右のほうにドラッグします。
ちょうど左側のフレーム間隔の2倍の距離がいいでしょう。
これで首振りのスピードが大体合いました!





最後はアニメーションをループさせる際に、つなぎ目が滑らかになるように最初のフレームをコピーします。
スクリーンショット 2015-11-15 22.01.32
一番左側のキーフレームを選択し「Ctrl」+「c」でコピー。



スクリーンショット 2015-11-15 22.01.46
右端のフレームを選択して「Ctrl」+「v」で貼り付けます。
これで完成!



と、思いきや。。。
ループのつなぎ目で一瞬止まっているようにみえますね。。。



原因はこちら
スクリーンショット 2015-11-15 22.04.05
アニメーションの範囲内に同じ内容のキーフレームが重複しているため、ループの際には止まって見えてしまっているようです。。。



スクリーンショット 2015-11-15 22.05.15
緑のバーがアニメーションの範囲なので、一番右のフレームを1フレーム動かしてアニメーションの範囲外に移動してしまいましょう。


見た目はあまり変わっていないですが、改善されたはず。です(・ω・;)



一通りアニメーションが完成したので、書き出してみましょう!
今回は「gif」データで書き出します!

ちなみに「gif」の読み方は「ジフ」で「ギフ」ではないようです!衝撃の事実!!
スクリーンショット 2015-11-15 22.34.28
「ファイル」をクリックし、「書き出し」の「GIFアニメ」をクリックします。
おっと、ショートカットを発見!「コマンド」+「G」で行けるようですね!
今ので覚えたぞ!(・ω・´)



スクリーンショット 2015-11-15 22.35.28
数値はそのままで問題なさそうなので「OK」をクリック!



スクリーンショット 2015-11-15 22.36.35
ファイル名を入力して、「保存」をクリック!



Live2D_やじキチ首振り_1118_1
ループしない。。。それどころか消えてしまいまいました。。。



スクリーンショット 2015-11-15 22.41.34
右側の何もない範囲が悪さをしているようです><



スクリーンショット 2015-11-15 22.41.45
タイムラインを右のほうにスクロールしてくと、なにやら怪しい矢印。。。これでしょうか?
この矢印をドラッグで左側に持って行ってみましょう。



スクリーンショット 2015-11-15 22.42.23
どうやら違うようですw
アニメのキーフレームが消えてしまいました。



スクリーンショット 2015-11-15 22.42.39
どうやら、あの矢印はフレーム全体を動かす時に使うようで、フレームを減らす時はこの赤丸部分にカーソルを持って行ってドラッグすると調整が可能のようです。





調整したのでもう一度「gif」で書き出してみましょう。
スクリーンショット 2015-11-15 22.54.06
ここでワンポイント!
どのファイルが最新か分かりやすくするため、ファイル名には日付をつけるのが有効ですが、1日に2度3度と同じファイルを更新する場合、データ名が重複しどれが最新かわからなくなることがあります。
その場合には、ファイル名の末尾に「_2」とつけましょう。
当然次に更新する場合の名前は「_3」で、番号が多いほど最新のデータという意味になります。
それ以外にも、時間を記入するのもオススメです!
例えば11/18の13時12分にファイルを更新した場合は「_1118_1312」とファイル名につけておけば、ファイルの戻りはまずなくなるでしょう。ちょっとファイル名が長くなり見づらくはなりますが。。。



Live2D_やじキチ首振り_1118_2
ちくしょう何でだ上手くいかない!!!!

申し訳ありません><この空白が出てくる原因がわかりません。。。 悔しいですが今回は「Cubism Animator」での調整はあきらめて、別ツールで調整をしたいと思います。
フレームの確認はPhotoshopやフリーツールなどでもで出来ますが、今回はいらないフレームを削除するだけなので「プレビュー」の「サムネール」で調整を行います。



スクリーンショット 2015-11-15 22.55.29
最終の22フレームが真っ白ですね、、、ついでに21も1フレーム目と全く同じでしたのでこちらも削除します。



Live2D_やじキチ首振り_1118_3
どやぁ(・ω・´)

終盤でこんなにも苦労をすることになるとは。。。





今回のご紹介はここまでとさせて頂きます!
今までは本当に基本的な操作方法を確認したに過ぎません!
次回はLive2Dの真骨頂!2Dを3Dに見せるように設定をしていきたいと思います!

ここまでで何か質問やコメントなどございましたら是非書き込んでください!
私も皆様と一緖に成長していきたいと思います!

それでは引き続き、何卒よろしくお願い申し上げます。
やじキチの次回ブログにご期待くださいm(_ _)m
The following two tabs change content below.
やじキチ

やじキチ

どうも!(・∀・)やじキチです。 影が薄いのをカバーするためにチャラチャラしております。 常日頃から皆々様に笑顔でいて欲しいと思っております。 皆々様が笑顔で、世界が平和なら最高です! よろしくお願い申し上げます!

2 件のコメント

  • ささき より:

    突然のコメント失礼します。何点か質問があります。
    Live2Dのファイルのダウンロードは無料でしょうか?
    首ふりアニメーションを作成したいのですが、後ろに写真の背景
    を挿入することは可能でしょうか?
    これらの作業をご依頼した場合、費用はどのくらいかかりますか?
    自分では難しそうなので。。。。

    • やじキチ やじキチ より:

      ささき様
       
      ご質問をいただきまして誠にありがとうございます!
      大変恐縮ではございますが、下記インラインに返信を失礼いたします。
       
      >Live2Dのファイルのダウンロードは無料でしょうか?
       
      ダウンロード自体は下記ページから無料で可能です!
      http://www.live2d.com/ja/products/cubism3#dl
       
      Live2Dを希望した際に、PRO版で開くか
      FREE版で開くか、選択画面が出ます。
       
      FREE版は無料で使えますが、機能に制限があります。
      PRO版は月額2,080円〜仕様が可能です。
       
      機能の違いは下記ページからご確認ください!
      http://www.live2d.com/ja/download/cubism3-pro-free-comparison
       
      >首ふりアニメーションを作成したいのですが、後ろに写真の背景
      >を挿入することは可能でしょうか?
       
      可能です!
      「Live2D Cubism Modeler」の方はテクスチャサイズの制限がありますので
      「Live2D Cubism Animator」の方で、ドラッグ&ドロップで読み込むことができます。
       
      >これらの作業をご依頼した場合、費用はどのくらいかかりますか?
       
      大変申し訳ございませんが、お見積もりにつきましては、
      お問い合わせフォームからご連絡をいただけましたら幸いです。
      http://technoart-tokyo.com/contact/
       
      その際、なるべく具体的にご依頼内容をいただけますと大変助かります…!
       
      [例]
      Live2Dのバージョン指定はあるか?
      表情のの変化はあるか、体ごと動くか
      データはご提供いただけるのか、こちらで制作か。
      ご提供をいただける場合、データのパーツ分けはされているか
      (すでに想定しているパーツがあればお送りください)
      首振りは「X,Y回転軸」か「Z回転軸」などあるので
      完成参考、イメージなどがあれば合わせてご連絡ください
       
      大変お手数をおかけしまして誠に申し訳ございませんが、
      ご確認をいただけましたら幸いでございます。

コメントを残す

*