はじめに
こんにちは、unityエンジニアのchappyです。
unityroomでゲームを公開する際、目を引くgifアニメーションのアイコンを設定することができますよね。
私が投稿したMedal ShooterはAndroid版と同じ静止画アイコンを利用していましたが、gifアイコンに差し替える事でアクセス数を伸ばすことが出来ました。
gifアイコンの作り方は色々ありますが、この記事ではMicrosoft ClipchampとFFmpegを使った作成方法をご紹介します。
unityroomのアイコン仕様
512KBまで
縦横 512px推奨
左：初期アイコン 右：差し替えたgifアイコン
圧倒的にgifアイコンの方が目につきやすく、遊んでみたいと思いますよね。
事前準備
-
Microsoft Clipchampをインストール
- Windows11なら標準搭載
- FFmpegをコマンドラインで実行可能な状態にする
- 作成したゲームのキャプチャ動画を用意
- 今回はAndroid実機でキャプチャした縦長の動画を利用しました
- PC上でキャプチャした横長の動画でも大丈夫です
作業手順 (ざっくり)
- Clipchampに動画を読み込むよ
- 5秒ぐらいのいい感じの区間を探すよ
- 正方形にして保存するよ
- FFmpegで容量落としつつgif化するよ
作業手順 (しっかり)
Clipchampで指定区間の動画を正方形で切り抜く
- Clipchampを起動し、「新しいビデオを作成」を選択
- メディアのインポートからファイルを選択、またはドラッグ&ドロップで動画を読み込む
- タイムラインに追加
- 切り出す区間を探す
動画を再生したり、シークバーを動かしたり、右下の拡大縮小ボタンで細かいフレームをタイムラインに表示させつつ良き区間を探します。
今回はゲームとして訴求したい射撃や、ローグライクのスキル選択が詰まった区間に当たりを付けました。
- タイムラインの端をドラッグして必要な区間に絞り込む
- 「このギャップを削除」を押して空白の区間を削除
- 「サイズ」メニューから「スクエア」を選択
- 動画をクリックして出てくるメニューから「クロップ」を選択
- アイコンにしたい領域を選んで「完了」を押す
※この時点ではピッタリ正方形にする必要はありません
- 「フィットさせる」ボタンを選択
- 再度「クロップ」を行いピッタリ正方形になるよう調整する
今回は少し縦幅が不足したので、上下に少しずつクロップ領域を動かします。
- 右上の「エクスポート」から480pで書き出しを行う
FFmpegでフレーム間引きなどをしつつgifに変換するので、ここではmp4で書き出します。
高画質の動画から変換した方が最終的な品質は高いかもしれませんが、時間が掛かるうえに誤差レベルだと思うため、処理が速い480pを選択しています。
FFmpegで容量を落としつつgifに変換
実行コマンド
$ ffmpeg -i icon.mp4 -vf "fps=10,scale=512:-1:flags=lanczos" -loop 0 icon.gif
上記のコマンドで画質を指定しつつmp4からgifに変換します。
何も分からんコマンドを実行するのは怖いと思うので一応解説を記載します。
| オプション | 意味 | 備考 |
|---|---|---|
-i icon.mp4 |
入力ファイル名の指定 | カレントディレクトリにicon.mp4がある前提だよ |
-vf "fps=10,scale=512:-1:flags=lanczos" |
品質の指定 | -vfはVideoFilterの略らしいよ |
-loop 0 |
ループ回数指定 0なら無限 | |
icon.gif |
出力ファイル名 | |
-y |
ファイル上書きの確認無視 |
※-yが無い場合、コマンド実行時にicon.gifが既に存在していると上書き確認をされます。
万一のファイル破壊を防ぐためにコマンドから外してありますが、実行ごとに上書き確認されて煩わしい人は安全確認のうえ付けて下さい。
品質の調整
上記のまま実行した場合、おそらく容量が512kbを超えてしまったかと思います。
unityroomのアイコンサイズ上限である512kbに収めるため、fpsとscaleオプションを調整していきます。
その名の通りですが、fpsでフレームレートを、scaleで画像サイズを指定出来ます。
unityroomで他の作品を参考にしつつ、限界まで削っていきましょう！
サイズ削減のポイント
- 動画は5秒ぐらいを目指そう
- あんまり長くてもunityroomで伝わりづらいよ
- 長すぎたり容量的に全く無理そうならClipchampに戻って尺を削減
- scaleを落とすと容量を削りやすいよ
- (圧縮があるので違うけど)scaleを1/2にしたら画像サイズは1/4
- fpsを下げるとカクつくけど、gifだしまあそんなもんだよ
自分は以下の調整を行い、490kbまで削る事が出来ました。
- 尺6秒
- scale=200
- fps=9
おわりに
unityroomにはたくさんのゲームがあるので、自分の作品を手にとって貰うためにアイコンのgifアニメーション化はとても重要だと思います。
ぜひ皆さんもgifアニメを作成して訴求力を向上させましょう！