notepad

いろいろ書くメモ帳

ウサミンを動かしてみる

これは シンデレラガールズ Advent Calendar 2017 25日目の記事です. トリのプレッシャーを感じております.

「ウサミンを動かしてみる」と言っていますが,簡単に言ってしまえばLive2Dを使ってウサミンの立ち絵を動かしてみたよって話です.

はじめに

まず,なぜ私がウサミンの立ち絵を動かそうと思ったかについてお話をします.

今年,2017年はアイマス界隈のニュースが多かったように思います. シンデレラガールズ5thLIVEやドーム公演決定,SideMのアニメ放送やエムステの配信,ミリシタの配信などいろいろありました. この中でも私が特に衝撃を受けたのがミリシタの配信です. ミリシタのすごいところは,ログインするとアイドルが出迎えてくれるとか,ライブの演出がすごいとか色々あるのですが,一番驚いたのが

コミュでアイドルが動く

ということです. やっぱりコミュでアイドルのアクションがあると楽しいですよね.

あ,別にデレステみたいな立ち絵ベースのコミュが云々って言いたいわけではないです. イラストならではの表現とかもあるわけですし.

こんなのとか f:id:Hatanas:20171225041557j:plain

こんなのとか f:id:Hatanas:20171225041604j:plain

こんなのとか f:id:Hatanas:20171225041613j:plain

かわいい

こういう 顔芸 表情の豊かさとかはイラストならではですよね.

でもやっぱり,動いて喋って話をしてくれるアイドルが見たい! というわけで,Live2Dを使ってイラストの良さを生かしながら動かしてみたいなぁと思ったわけです.

Live2Dについて

Live2Dとはイラストをいい感じに動かすことができるソフトウェアです.最近様々なゲームで使われています. わざわざ3Dモデルを作ったり,アニメーションをコマ割りで書く必要もないのでかんたんに動かせます. 詳しいことは公式を参照してください.

Live2D

Free版でも十分な機能が揃っていて,実際に今回やったことは全部Free版の機能だけで行うことができます.

ということで,このLive2Dを使ってウサミンを動かしてみたいと思います.

ウサミンこと安部菜々について

私の担当であり,非常に魅力的なアイドルです. ここでウサミンの魅力について語ってもよいのですが,長くなってしまうのでそれはまたの機会ということで… 興味のある方は是非デレステのメインコミュ27話とメモリアルコミュを4まで見てください. きっとウサミン・安部菜々の魅力がわかると思います.

実際に動かしてみる

では,実際にLive2Dを使ってどのようにして動かすのかについて簡単に説明したいと思います.

立ち絵画像の切り分け

まずは素材となるイラストをスクショするなりして用意します.

素材が用意できたらパーツごとにイラストを切り分けていきます.切り分け方は以下のサイトを参考にしました.

howto.clip-studio.com

ここに書かれている通り,レイヤーマスク機能を使いながら切り分けていくことになります. わりと単調な作業になるので,アイマス曲聞いたりアイマスガールズのラジオでも聞きながら作業しましょう. 今回,切り分けにはクリスタを使いましたが,GIMPもレイヤーマスク機能があるので同様のことができると思います. あと,ペンタブがあるととても捗ります.お値段は安いもので20連分くらいから.

切り分け作業の様子はこんな感じ. f:id:Hatanas:20171225042252p:plain ディスプレイにどアップで映る菜々さんと対面しながらの作業になります.良い.

今回はイラストをこのようなパーツに切り分けました.

  • 髪の毛
  • リボン
    • まつげ
    • まぶた
    • 白目
    • 上唇
    • 下唇
    • 口内
    • 輪郭

左右あるパーツはそれぞれで切り分けます. 切り分けるときはパーツの前後関係を意識して,前に来るパーツは線画と一緒に切り抜くと綺麗にできます.

パーツを切り抜くとこのように欠けてしまう部分が出てきます. f:id:Hatanas:20171225042805p:plain ここを描き足して埋めていくのですが,よほど大きく動かさない限りほとんど見えないので,結構適当に描き足しても大丈夫です. f:id:Hatanas:20171225042824p:plain こんな感じに.

あとはレイヤーを整理してpsd形式で書き出せばパーツの切り分けは完了です.

Live2Dモデルを作成

できあがったpsdファイルを読み込んで,Live2Dモデルを作っていきます.モデル作成については以下のサイトを参考にしました.

Top | Live2D Manuals & Tutorials

part01〜part12【アニメ・モーションのつくりかた!】〜Live2D編〜 まとめ1 | テクノアート株式会社 東京営業所

この作業では各動作(まばたきとか)ごとに,どのパーツがどのような形状になるかを設定しています. この設定を進めていくと,どんどんイラストが動くようになっていくので,だんだん楽しくなってきます.

アニメーションの作成

作成したモデルを読み込んでアニメーションを作ります. 作りたいアニメーションが思い浮かばないときは,呼吸と瞬きパラメータを設定して動かすだけでもそれっぽくなります. また,髪の毛などには物理演算を適用することができます.かなり簡単に設定できるのでおすすめです.

完成!

f:id:Hatanas:20171225043307g:plain

尊い…

おわりに

今回はLive2Dの知識が0の状態から始めたのですが,1週間ほどでこれくらいのものが作れました. 時間さえかければわりとそれなりのものができるので,担当アイドルの尊みを感じたい方は挑戦してみてはいかがでしょうか.