Unity1週間ゲームジャム( https://unityroom.com/ )のアイコンやスクリーンショットについてのメモです。

概要

画像のサイズは、ブラウザーの幅によって様々に変化します。最大になるのは、幅を768ピクセルより狭くした時で、1列表示になるので600ピクセルを超える幅になります。

768ピクセルよりも幅が広くなると3列レイアウトになるので画像は小さくなります。1366ピクセルぐらいだと、280ピクセル辺りが最大幅でした。2Kぐらいの解像度を想定すると、幅は400ピクセルを想定しておけば十分そうです。

アスペクト比

表示される場所によって、アイコン画像は1:1になったり、16:10になったりします。タイトルなどは、16:10になった時にも表示されるように配置した方がいいかも知れません。縦画面の作品だとちょっと難しいですが。

ゲーム画面に表示される最大5枚のスクリーンショットは、アスペクト比はアップロードした画像のものが維持されて、幅がブラウザーの幅によって制約を受けます。

幅は、こちらも256～400px程度で作成しておけばよさそうです。

GIFアニメならアニメできます。480x480pxの2MByte程度のファイルはアップロードできました。

試行錯誤した結果、自分は以下のような流れで作ることにしました。

高フレームレートで録画できるので、動画編集ソフトのFilmoraを使いました。

Filmoraで必要な場面だけ切り出して、タイトルのテキストを重ねました。タイトルを常に表示したい場合は、黄金比にした時に画面に収まる場所に配置する必要があります。

これもFilmoraを使いました。サイズは720x480px、フレームレートは24fps。

出力したGIFアニメをGIMP2に読み込んで、キャンバスサイズを調整しました。動画の一部を切り出す場合も、GIMP2でやるのがよさそうでした。

調整を終えたら、[フィルタ]>[アニメーション]>[GIF最適化]を行い、[ファイル]>[エクスポート]から[GIF]を指定して保存しました。途中で枠が大きいという警告が表示されるので、[切り取り]を選択すると先に進められました。

以上で完成です。

スクリーンショットは幅256ピクセルを基準に考えればよさそうです。Filmoraで動画からスナップを取得すると解像度が下がってしまうので、こちらはScreenpressoを使いました。

Screenpressのスナップショットも少し癖があって、一時停止したところのスナップを撮影すると、1フレームずれてしまいます。静止させたものをスクリーンショットで撮影するか、再生位置をマウスで操作してから撮影するかします。

以上です。必要な画像の解像度がそれほど高くないので、縦画面レイアウトでも、WebGLでビルドしたもので問題なさそうでした。一日の作業終了時に作成しておくと、最終日に慌てなくて済みそうです。