【Unity】UnityでGIFを作る方法について

2021年4月8日木曜日

C# Unity

この記事をシェアする
  • B!


今回ご紹介するのは、Unity「に」GIFを作成する方法ではなく、Unity「で」GIFを作成する方法です!

この二つ、一文字作るだけで大きな違いがあるのですが…要するに、Unityを媒介にしてGIF形式のファイルを作成する方法のご紹介です。



ブログランキング・にほんブログ村へ にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ Unityへ にほんブログ村 IT技術ブログ C#へ


Unity「で」GIFを作りたい!



GIFは、特にSNSを使う現代人にはなじみ深いファイル形式かと思います。まぁ、こんなやつですよね↑↑

画像でありながら画像じゃない、動く画像として名高いGIFは、いくつかのブログ・サイトで言及されてますが、すごくUnityと相性が悪いらしいです…

Unityのゲーム内(例えばオブジェクトとか)でGIFを貼り付けたりするのも一苦労で、GIFを一回フレームごとの画像に解体してアニメーションにするなど、涙ぐましい苦労の痕跡がネットの波には散見されます。

Unity(内)「に」GIFを作るのも以上のように大変なのですが、今回ご紹介するのは、Unity「で」GIFを作る方法です。

正直、初心者の私で到達できる領域ではなかったので、この記事は主に下の記事をリスペクトした内容となっております。

こちらの記事と私のブログ、往復したら理解が可能(なはず)ですので、最後までお付き合いいただければと思います!(笑)



前提:GIFの作り方は二種類ある

さて、実際にやってみる前に、根本的なところですが、Unityに限らず、GIFを作るとなると二種類の方法があることを知っておかないといけません。

一つ目の方法は、複数の画像を使う方法。GIFは上のをみてもわかる通り、複数の画像をパラパラ漫画のように表示する形式ですので、これはご理解いただけるはず。

では二つ目の方法は何かというと、動画を使う方法ですね。
動画というものも、解体してみるとGIF以上に高速なパラパラ漫画が実体なんですよね。そこからフレーム単位で一枚ずつ抽出してGIFにすれば、GIF形式ファイルを作りたいこちらの手をあまり煩わせることなく、GIFを作ることができます。

世の中に出回ってるGIF作成ツールって、見てるとかなり後者のものが多いのではないですかね。私の主観ですけど(笑)
今回ご紹介しているブログの記事には、どちらも紹介されているので、本当に助かります…。

環境について

Unityバージョン:2019.4.18f1
Visual Studio Community 2019バージョン:16.9.1
ついでながら、自分はWindows10です。これ、Macでできるかは未知数ですね…。

Momentsをインポートする

では実際に、手を動かしていきましょう。
まずは、こちらのリンクから、GitHubにあるアセット(…アセット?プラグイン?…単語の使い方がわからない!!)をダウンロード&インポートです。

zip形式でダウンロードしたら、あとは展開するときに、GIF作成に使うUnityファイルの適当な場所を指定したらいいって感じですね。



私はAssetsに放り込みました。

これで準備完了!と、意気揚々とUnityを開くわけですが、私を待っていたのはエラーの赤枠でした。




皆さんはどうでしょうかね…?
まぁ、このエラーは比較的簡単に解決できます。
エラーをクリックしたら、MinDrawer.csというスクリプトに飛ぶと思うのですが、そこに三つあるMinAttributeの参照が甘くなっているようなので、ちょこっと書き換えてあげましょう。


visual studio Communityなら、こんな感じでエラーになる理由を教えてくれるから、ありがたい…。
三つとも、"Moments.MinAttribute"にするか"UnityEngine.MinAttribute"にしたらエラーは消えるはずです。
どっちに書き換えてもGIFはちゃんとできるようなので、お好みでどうぞ。

スクリプトのアタッチ

あとはまぁ、引用した記事に従えばできるかと思います。

Main Camera に Recorder.cs と制御用のスクリプトをアタッチする

とのことなので、カメラにMoments-master>Moments Recorder>ScriptsにあるRecorder.csと引用先の記事にあるスクリプトの二つをアタッチしたら準備完了。

…こんなスクリプト、書けるようになりたいものですね。
その夢をかなえる日は遠そうです…。

GIFの保存先

さて、初心者(私含む)が少しばかり悩むところです。
二つあるGIF作成方法のうち、まずは動画から作る方法から試してみましょう。

動画からGIFを作る場合

またまた引用した記事に従って、順序良くしたら、大丈夫。
スクリプトを見てなかった私は、スペースキーを押している間のGIFを作ってくれる、という真実にたどり着くまでに一時間を要しましたが、皆さんはどうでしょうか…。

それで、GIFの保存場所ですが、こちらの方法だとAssetsフォルダ直下ですね。
Moments-masterフォルダ先輩の隣あたりにいると思いますので、探してみてください。

複数の画像からGIFを作る場合

これが本当に…二時間くらい探しましたよ…。
実はこれ、Unityのエディターの中をいくら探しても見つからないんですよね…。

いちおう軽く、方法その他も説明します。
まず、ResourcesというフォルダをAssetsの中に作る必要があります。
そのResourcesフォルダの中に、こんな感じで、画像を五つ並べてください。


こんな感じで。
画像の名前を、0-4にするのもお忘れなく、です!

あとは指定のスクリプトをアタッチしているなら準備完了なので、ゲームを実行してみてください。
さて、これでGIFは作ってくれるのですが…どこにそれができたのか…。


…あああ、いたぁ!!!

そう、皆さんの触ってる、そのUnityが保存されているフォルダをエクスプローラーから見に行ってくだされば、見つかると思われます。

ちなみにこれ、ビルドして実行した場合は、ここですね↓↓


なんとかUnityのAssetsフォルダの中にでもファイルを移動する技術が私にあればご紹介できたのですが…。口惜しい…。

※追記(2021年5月19日)
最近、unityのファイル内にGIFを生成する方法を見つけました。
リンクを貼りましたブログのスクリプトの24行目を、

Save("Assets/Resources/test");

こんな感じに書き換えたら、生成できました!
ちょっとエラー連発したりしますが、unityエディターを最小化・最大化したり、ゲーム実行を終了したり、と色々弄ってたら、いつの間にか指定のファイル(今回であればAssetsファイル内のResourcesファイル)にできてます!

まとめ


GIFを散々嫌って拒み続けているUnityですが、GIFを作ることは曲がりなりにもできるということが判明しました。
だから、なんだ、と言われると苦しいのですが…。まぁ何かのお役に立てたのなら幸いです。


ブログランキング・にほんブログ村へ にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ Unityへ にほんブログ村 IT技術ブログ C#へ

自己紹介

自分の写真
大学では文学部日本文学科出身という生粋の文系。チャットゲームの運営の在宅業務に携わったことでプログラミングに興味を持ち、2020年末、SAMURAI ENGINEERに入塾。2021年4月末に卒塾。 ※お問い合わせある方は、ブログのお問い合わせページからどうぞ~

ページビューの合計

応援をお願いします!

もしよかったらTwitterのフォローと応援ポチをよろしくです~
PVアクセスランキング にほんブログ村
ブログランキング・にほんブログ村へにほんブログ村 IT技術ブログへにほんブログ村 IT技術ブログ Unityへ
にほんブログ村 IT技術ブログ C#へ

QooQ