チャイムノート

【AnimeEffects】二次元画像を動かして遊ぼう

f:id:chime-n:20190417224354p:plain

 

最近はVtuberの供給過多具合がすごいらしいです.

Vtuberは3Dモデルを動かすものが主流ですが,live2dなる技術を使って2次元画像を動かすものもあるらしいです.

今回はこのlive2dで遊ぼうと思いましたが,似たような感じのAnimeEffectsをやっていきます!

絵を描くところから動かすところまでやっていきます.

 

Vtuber見たことないのでおすすめあれば教えてください.

 

 

AnimeEffectsって何?


簡単にキーフレームアニメーション作れるツール作ってみた

 

AnimeEffectsは2次元画像を動かせるソフトです.

>  AnimeEffects | 2D Animation Tool

調べてもらえば分かる通り,当時は革新的技術であったみたいです.

ただ,現在でも相当遊べる技術だと思います.

特筆すべき特徴は以下の通り.

WIndowsだけでなくMacでもできる.

・live2dより簡単.

・無料

個人的に嬉しいのは無料であること.

live2dとかも一応無料でもできるんですが,有料版にアップデートしないと制限されている機能があります.(やったことないのでいらない機能かもしれませんが)

対してAnimeEffectsは全てが無料!

びっくりするほどクオリティ高いのでお金とってもいいレベルです.

さらに,めちゃくちゃシンプルで使いやすいソフトになっております.

 

まとめると,画像を動かせる神ソフト

 

自分で絵を描くの?

理由は二つ.それは権利関係とファイル形式.

 

・権利関係

本当は私が長らく続けている"メルスト"っていうスマホアプリのキャラ画像を使おうと思ってました.

しかし,メルストのコンテンツ利用ガイドラインの中に以下の禁止項目があります.

 

・当社ゲームで使用されている画像データの過度なリサイズ,編集加工.

 

いや,過度な編集加工ってどこまでですか?

これが私には判断できなかったでの公式画像を利用することを諦めました.

幸い,メルストは二次創作を許しているので自分で書いてしまえばいいじゃん!ってなりました.

描くキャラはこいつです.

f:id:chime-n:20190517224720p:plain

めちゃくちゃかっけぇ...

こんな良いキャラがいるメルストをみんなもやろう!

============

当ページは、Happy Elements株式会社「メルクストーリア」の画像を利用しております。
該当画像の転載・配布等は禁止しております。
©Happy Elements K.K

============

 

・ファイル形式

絵を動かす場合,画像ファイルでよく見る".jpeg",".png"などの拡張子は使い勝手が悪いです.

人間の画像を動かそうと思った時,手や足を動かしたくなりますが先に挙げたファイル形式だと難しいです.

なぜなら,手が胴体とくっついてるから.

対して,".psd"という形式では多次元構造になっているため,手と胴体が分離しています.

は?って感じですので説明します.

 

まず,複数の画像があります.

一枚目には手が描いてあり,二枚目には胴体が描いてあります.

これが目であったり,鼻であったりと全てのパーツ分あります.

つまり,これらの画像全てを重ね合わせれば人の画像になります.

はい.説明終了です.

 

".psd"はこのように多次元構造で画像を保存するファイル形式なので,後に手だけ描き直そうとすれば手だけ描いてある画像を直します.

同様に,手だけ動かそうと思えば手の画像を引っ張ってくることで手だけ動かすことができるのです.

 

以上の二つの理由によって私は自作を選びましたが,公開されているpsdファイルを使うのも全然ありだと思います.

また,jpegpngでもできないわけではないです.パーツごとに動かすのは難しいと思いますが.

ということで,".psd"形式の画像を描くところから始めましょう.

 

素人のお絵かき

イラストがかけるソフトを三分間で探して,無料かつなんかよさそうなやつを選びました. 

"MediBang Paint"なるやつです.

> https://medibangpaint.com

正直,今後使うことはないだろし,psdで出力できるやつならばなんでもいいと思います.

 

さぁ,絵を描こうと思った矢先に問題が発生.

ペンタブ持ってない.

シャーペンですらうまく絵を描けないのにマウスで描こうものなら大惨事になりますよ.

でもやるしかないので描いた画像がこれ.

f:id:chime-n:20190517225003p:plain

動かす気にならない.

やっぱり,イラストレーターってすごいんだなって.

 

ということで,まず,シャーペンで描いてスキャンしたやつをなぞって描くことにしました.

それで完成したのがこれ.

f:id:chime-n:20190517224855p:plain

いや,これ以上は無理だ.

我ながら頑張りました.

マウスだとなぞるのも難しく,かなり時間かかりました.

 

 

ちなみに,絵を描くときの注意点は一つだけです.

レイヤー分けをしっかりしましょう

レイヤーっていうのは多次元構造のそれぞれの画像のことです.手だけの画像とかです.

このレイヤー分けをしないと,無意味に終わるのでこれだけは注意しましょう.

MediBang Paintだとこんな感じです.

f:id:chime-n:20190517225111p:plain

全パーツ分けるのがベストだと思いますが,最低でも動かしたいパーツはそれぞれでレイヤー分けしてください

これさえ守ればなんでもいいです.

まぁ,実際にはもっとこうした方が良いみたいのことがあるかもしれません.

ただ,これだけでやれば動かすところまでできるし,あくまで絵を描くのは過程なので力を入れすぎても疲れちゃいます.

 

描けたら早速動かしましょう.

 

AnimeEffectsを使う

インストール方法は記述しません.Macでやりましたがめっちゃ簡単ですし.

使い方は動画でみてください.

 

完成したらgif画像出力をしますが,てこずったのでやり方を書きます.

 

gif出力には,どうやら"ffmpeg"なるソフトが必要とのこと.

私はMacでやったので,以下のコマンドでインストールしました.

brew install ffmpeg

 

インストール完了したので早速gif出力した結果 

FFmpegが見つかりませんでした.

 

は?インストールしたぞ?

結局よくわからなかったので指示通り,/toolsいかにFFmpegを配置することに. 

>  Download FFmpeg

Macの方は,りんごにカーサル合わせると下の画面になります.

あとは「ここです」に従ってください.

f:id:chime-n:20190416231055p:plain

f:id:chime-n:20190416231108p:plain

これでFFmpegをダウンロードできます.

/toolsはAnimeEffectsのアイコンを右クリックかダブルタップで"パッケージ内容を表示"ででます.

 

完成したgif画像

最終的にはこんな感じになりました.

f:id:chime-n:20190416230018g:plain

いいものだなー

やっぱり,絵を描くところからやると愛着が違いますね.

gif画像なのでいろんなところに貼り付けれるし,愛用していきたいです.

容量落とすためにカクカクしてますが滑らかにもできます.

 

総括

今回はAnimeEffectsを使って画像にアニメーションを追加しました.

画像さえ持っていればかなり,簡単にできて楽しいと思います.

頑張れば全ての部位を動かしてすごい感じにもできますので,また挑戦したいです.

 

全部を引っくるめた結論としては

イラストレーターすごい.

 

以上!