Unity2Dで使えるアニメーション画像素材を動画から生成してみる


キャラのアニメーションつくるのめっちゃ大変じゃない……?

Unityでの2Dゲーム作成につきもの(?)な、アニメーション的連続性のある画像の準備。
ぶっちゃけミニマムなら3Dモデルを2Dに表示したらいいのでは
ミニマムなゲームであんまり労力をかけられない……。これをちょっとでも楽にしたい……。
そんな気持ちからたどり着いた苦肉の策を共有がてら記事にする。
なお、Mac。

自分みたいな初学者でも運用できる感じに簡単のための表記をしているので、最適化はまだできます。
また、キャラ透過の部分に関しては未了(imagemagickでやれそうですがまだやってない(Winのソフトでやってしまった))なので、でき次第更新します。
追記:まさかの透過もFFMPEGで完結できそうなので、でき次第更新か、別記事で紹介します。

目次

  • 動画を準備
  • FFMPEGを入れてみる
  • 動画を切り刻んで画像にしてみる
  • 画像でけぇ……キャラの範囲に切り取りたい……
  • (未了)背景を透過したい
  • Unityで動いた……!

動画を準備

もちろん、動画から生成なのでお好きな動画を準備、デスクトップに配置しましょう。キャラ以外、背景が一色のほうがやりやすいです。

FFMPEGを入れてみる

有害じゃないと思うのでご安心ください。
動画に対して、様々な操作ができます。

これのインストールにHomebrewというのを使うので、まずこれを入れましょう。入ってる場合は無視で大丈夫です。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

こんなみための

Consoleを起動して、これをコピペしてエンターです。
もしくは
https://brew.sh/index_ja
ここに記載のある最近のコマンドをコピペしてください。
ところで、なんでMacのConsoleにコピペする前提のコマンドの先頭に$が含まれていることが多いんですかね。僕の環境構築がおかしいのか。

ちょっとまって、終わった感あったら次にこれをコピペしてください。

brew install ffmpeg

以上です。変なことはしてないです。
もしうまくいなかなったら、パーミッションとかそこらへんかもですが、遭遇してないのでまだわからないです。お気軽に聞いてください。

動画を切り刻んで画像にしてみる

デスクトップに動画を配置している前提です。また、切り刻んでたくさんの画像を書き出すので、フォルダを作っておきましょう。

ffmpeg -i /Users/ここはユーザー名/Desktop/動画の名前.動画の拡張子 -r 8 /Users/ここはユーザー名/Desktop/ここにフォルダ名/

Consoleに、これを、ユーザー名とファイル名とフォルダ名だけ書き換えてエンターです。
前半が対象動画(かなりの形式いける)、後半が書き出す先です。デスクトップを指定すると大変なことになるので、デスクトップにフォルダを作ってそこに書き出しましょう。

-r 8

の部分は、切り刻むフレーム数、大雑把に書くと、1秒あたりの枚数です。おおきくするほど細かくなります。

画像でけぇ……キャラの範囲に切り取りたい……

このままだと、画像の無駄な部分が多くあります。
もちろん、1枚の大きな画像に全部を突っ込んで、UnityでSpriteを分割、アニメーションにする、という手段もあるしなんならそれのほうがいいんですが、今回は分割した画像を突っ込んでD&Dでアニメーションにします。

https://apps.apple.com/jp/app/xnconvert/id436203431?mt=12
私はこれを使いました。
複数の画像に同じ処理を適用できます。
このアプリに画像を全部突っ込みます。

動画の写り方によって変わるので色々設定をいじって探ってほしいのですが、仮にこんな感じに設定します。

これで、いい感じにキャラがいるところだけのサイズにトリミング、切り取ってくれます。便利。
この設定の上、出力したらいいです。

(未了)背景を透過したい

これなんですが、Macだとimagemagickでできそうなのです。ですが、現状やっていないので、未了とします。
Winで、複数画像を同じように透過してくれるソフトがたくさんあるので、一旦それを使いました。
上記アプリでできるんじゃないかと思うんですが、できないです。2色とかグレイスケールで制限つけたりでできなくはないですが、きついです。

Unityで動いた……!

そう、ここまでで生成された画像を全部D&D、そのあとHierarchyにD&Dでアニメーションができます!

感想

もっと楽にできると思いますし、なんならこれにおいても、Macなら標準でAutomatorの自動化を使えばワンクリックで動画をアニメーションに使える画像に出力できると思います。
ですが、苦労したので出力せねば損だろう、という考えで出力しました。
もしもこの世界の誰かの役に立ったらきっと彼も成仏できるとおもいます。