Unity などでアセットなどの説明をする際、画面キャプチャを作成していたのですが、どうも動きが欲しい。でもYouTubeで動画を公開するほどの大げさなものじゃなくて、ほんの数秒のアニメーションGIF程度で十分。
ということで「Unity の再生画面からアニメーションGIFを作成する」ような無料アセットを探してみましたが、どうもしっくりくるものがない。高性能すぎて高画質すぎたり。いや、もっとコマ数少なくてサイズ小さいのが欲しいんだ、Qiitaやブログの投稿に気軽に使える小さいサイズで十分。
というわけで、簡単なツールを作成してみました。ActionCheck デモ や Locomotion デモ 紹介ページで使用しているアニメ画像はこれで作成しました。
自分用に作成したツールなので癖は強めですが、シンプルで改造しやすいですし、フリーで公開しますので、良かったら使ってみてください。
まずはImageMagikを導入しよう
ImageMagik は有名な画像の処理ツールで、Unix/Mac/Windows どの環境でも利用できます。今回のツールでは連番PNGファイルからアニメーションGIFを生成するために利用します。
Download ページから適切なパッケージをダウンロードしてインストールしてください。
ちなみに私はWindows 64bit環境なので、ImageMagick-7.0.7-34-portable-Q16-x64.zip というファイルをダウンロードして解凍し、その中身を c:\local\bin\im フォルダに全てコピーしました。以下のような感じ。
実行パスを設定しよう、と説明しているサイトもありますが、お勧めしません。たまに利用するだけだったら不要です。ImageMagik のツール名ってわりと汎用的で、他と被りやすいので、下手にパスに登録すると別のところで影響がでることありますし。
CaptAnimGifアセットの導入
GitHubで公開されている unity-simple-tools リポジトリにアクセスし、git で clone するか、右のメニューから全てを含んだ zip ファイルをダウンロードしてください。
キャプチャを取りたいプロジェクトの Asset フォルダに、上記でダウンロードした内容のうち CaptAnimGif フォルダをコピーします。プロジェクトには少なくとも以下の3つのファイルが表示されるはず。
CaptAnimGifアセットの設定
さて、CaptAnimGifアセットを設定しましょう。キャプチャしたいプロジェクトのメインカメラ(Main Camera)を選択し、インスペクターからAdd Componentで CaptAnimGif (Capt Anim Gif) スクリプトを追加します。
追加した結果は以下のようになります。赤枠の部分が設定としてわりと大事な部分。
まず Interval Seconds ですが、これは画面をキャプチャする間隔になります。初期値は 0.1 秒ですので、1秒間に10回のキャプチャを実施することになります。
次の Max Frames がキャプチャする最大枚数です。キー操作で途中でキャプチャを止めない場合、この枚数のキャプチャを撮り終えた時点でキャプチャを自動終了します。初期値は50枚なので、1秒に10回の初期設定だと、5秒間のキャプチャを実施することになりますね。
そして Base File Name はキャプチャした画像の出力先です。SSD など速度の速いドライブが理想で、せめて HDD を使用し、ネットワークドライブ等は避けたほうが良いとおもいます。
また録画中かどうかわかりやすくするため、以下のように Material For No Recording に、一緒に配布されている PostRecording マテリアルを設定することをお勧めします。
また PostRecording マテリアルですが、インスペクターで Custom/PostRecording シェーダーが設定されていることを確認し、違うものが設定されていれば変更してください。
PostRecording マテリアルは「画面の左右に赤枠を表示する」だけのシンプルなCustom/PostRecordingシェーダーを設定したマテリアルです。これを Material For No Recording に設定しておくと
- Unityで実行中は実行画面の左右に赤枠が表示されっぱなしになる
- 録画キー(初期設定ではVキー)を押して録画モードにはいると赤枠が消える、のでわかりやすい
- 録画が終了すると赤枠がまた表示される、ので終了もわかりやすい
という感じで使いやすいです。
逆に録画した画面に(例えばロゴとか)表示したい場合には、Material For Recording のほうに、表示に利用したいマテリアルを設定してください。
キャプチャの実行
設定が終わったところで、シーンを実行してみましょう。画面の左右に赤い枠が表示されていれば成功です。
このとき、表示しているゲーム画面がそのままアニメーションGIFのサイズになります。最終的に表示したいサイズにあわせて、実行画面のサイズを調整しておきましょう。
あとは自由にシーンをプレイしつつ、キャプチャしたい場面になったら V キーを押しましょう。画面の赤枠が消えている間、定期的に画面のキャプチャが実行されます。
もう一度 V キーを押すか、設定した Max Frames の枚数をキャプチャし終わると赤枠が復活します。これでキャプチャが完了となります。
Base File Name で指定したフォルダを開くと、キャプチャされた画像が連番PNGで保存されていることが確認できます。
連続でパラパラと画像を表示してみて、アニメーションに問題がないか確認しておきましょう。長すぎてカットしたい場合には、連番の最初、もしくは最後のほうの画像を単に削除すればokです。
厳密なタイミングでキャプチャをするのは難しいので、Max Frames は多めに設定しておき、早めかつ長めのキャプチャを実施することをお勧めします。そしてこの段階で、不要な画像をビシバシ削除しちゃえば楽です。
アニメーションGIFへの変換
さて、作成された連番PNGからアニメーションGIF画像を作成しましょう。
Unity のインスペクターに表示されている、以下の赤枠の部分 Command 欄にちょっと注目してみてください。ここに何か実行プログラムの情報がありますよね？この赤枠の部分をコピーしておいてください。
そしてコマンド画面(Windowsだとコマンドプロンプトかパワーシェル、Macなどではターミナル)を開き、連番PNGが生成されたフォルダに移動して… さきほどコピーした命令をペーストして実行してください。
すると同じフォルダ内に out.gif が生成されます。これで完成です！アニメーションGIFに対応したソフト、なければ IE や Chrome でいいので、表示して動きを確かめてください。
この out.gif を Qiita やブログで公開して、動きのある画像を皆に見てもらいましょう！
なおこの conver コマンドの -delay オプションは、アニメーションの間隔をミリ秒単位で指定します。今回のキャプチャは Interval Seconds が初期設定の 0.1、つまり1秒で10回の設定ですから、アニメーションの間隔は10ミリ秒で合致します。例えば Interval Seconds を 0.2 に変更した場合、-delay オプションも倍の 20 に変更します。
コマンド画面で変換、っていうと面倒に感じる方。まあ確かに手抜きなんですが長所もあって、繰り返しの作業が楽なんですよ。二度目以降は、↑キーなどでコマンドの履歴を表示して、出力ファイルの out.gif をちょっと修正して改行するだけ。これでどんどん画像変換できてしまいます。
というわけで
連続で画面をキャプチャして、連番PNGを生成する簡単なツールを作成してみました。ポストエフェクトで画面処理を加えることで、キャプチャ中であることをわかりやすく表現しています。実際にアニメーションGIF化する部分は、既存の有名ツールである ImageMagik に任せてしまってますけどね。
Unity では動きのある画面がいろいろ作成できます。お勧めアセットの紹介や、自作ゲームのちょっとした宣伝などに、アニメーションGIF化した実行画面を使ってみてください。
また C# もシェーダーもかなりコードが短いので、いろいろ変更して自分なりに使いやすいツールに改造するのも良いとおもいます！MITライセンスなのでご自由に！
ではでは。