Roll20でのファイルのベストプラクティス

ウェブフレンドリーな画像と印刷用画像

市販のアドベンチャーパックからプレイする場合、PDFファイルから作業している可能性が高い。 印刷物としてグラフィックが読みやすく鮮明であるためには、画像解像度、すなわちDPI（Dots per inch）をかなり高く保つ必要がある、少なくとも 300DPI以上でなければなりません。 DPI（1インチあたりのドット数）が高いと、画像ファイルのサイズが大きくなり、画像を表示するためにプロセッサにかかる負担が大きくなる。 つまり、マップやキャラクターの肖像画、市販のPDFの配布資料などは、Roll20ゲームに必要なファイルサイズよりも大きくなってしまうということです。 TL/DR: これらのアセットをそのままゲームにドラッグすると、ストレージ容量が圧迫されます。

Roll20 で画像をスムーズに表示させたい場合は、画像の解像度を低く保つことをお勧めします。 70～150DPIの範囲であれば、ゲーム画像には十分なはずだ。 これは、画像編集ソフトを使って解像度を調整することで実現できる。 また、Roll20マーケットプレイスを通じて最適化されたアセットも提供しています。

ファイルの種類

画像ファイル

Roll20でインポートして使用できる画像ファイルの種類は、JPG、GIF、PNGの3種類です。 最大アップロードサイズは、フリーユーザーで10MB、プロおよびプラスユーザーで20MBです。

ファイル形式を比較してみよう：

JPEG は Roll20 が推奨する画像ファイル形式です。 JPEGファイルはグラデーションが滑らかで、ファイルサイズが小さい。 しかし、透明度のオプションはなく、JPEGを高圧縮すると品質が低下する可能性がある。 透明度や半透明度を必要としないグラフィックの場合は、JPG画像ファイルにこだわってください。
ファイルサイズ：平均
透過できますか？いいえ
半透明にできますか？いいえ
アニメーションできますか？いいえ

GIFファイルはピクセルアートに適しており、パレット・スウォッチ・コントロールを提供し、アニメーションGIFをRoll20の仮想卓上に表示することができます。 しかし、GIFファイルはグラデーションを再現するのが苦手で、256の「インデックス付き」カラーパレットに制限されており、リアルな画像を作成するのには適していない。 GIFファイルタイプは、アニメーションの有無にかかわらず、トークン・オブジェクト用の単純なエイリアシングされた切り抜き画像が欲しい場合に便利です。
ファイルサイズ：小さい
透明にできますか？はい
半透明にできますか？いいえ
アニメーションできますか？はい

PNGファイルは可逆圧縮なので、高品質の画像が得られます。 しかし、アルファチャンネルを多用するとファイルサイズが劇的に大きくなり、PNGファイルが大きくなるとシステムリソースを大量に消費する。 PNGは、ベタ塗りされた図面や、まったく同じ色の大きな広がりを持つ画像に理想的なフォーマットです。 PNGはトークン・オブジェクトや透明度を必要とする画像にも使用できますが、アニメーションPNGファイルはサポートされていません。 PNGはGIFよりも柔軟性があるため、見た目が似ている画像でもファイルサイズが大きくなることがあります。
ファイルサイズ：大きい
透明にできますか？はい
半透明にできますか？はい
アニメーションできますか？不可

ヒント：お使いのソフトウェアでそれが可能であれば、画像を「フルカラー」や「RGB」から「パレット」や「インデックス付き」に変更できるかもしれません。 後者のオプションは色数が限られており（通常は256色）、GIFがサポートする唯一のフォーマットである。 これがGIFファイルが小さい理由だ。 同じ種類のパレットを使ったPNGファイルは、GIF画像とほぼ同じサイズになります。 GIFに比べ、PNGファイルのほとんどはRGB形式であるため、1ピクセルあたりの保存データ量が多く、ファイルサイズが大きくなります。 しかし、これによって画像の完全性がより保たれる。

アニメーションファイル

Roll20では、3種類のアニメーションファイルをサポートしています：GIF、mp4、webm です。 最大アップロードサイズは、フリーユーザーで10MB、プロおよびプラスユーザーで20MBです。 

アニメーションのファイル形式を比較してみよう：

GIFファイルは、上記の画像セクションにあるように、作成時にパレットスウォッチコントロールを提供し、ピクセルアートに最適で、アニメーションGIFはRoll20の仮想卓上でアニメーションします。 しかし、GIFファイルはグラデーションを再現するのが苦手で、256色のパレットに制限され、リアルな画像を作るのには向いていない。 他のフォーマットよりもアニメーション・フレームごとに多くのデータを保存するため、大きなアニメーションはパフォーマンスが低下します。
ファイル・サイズ：小さい
透明にできますか？はい
半透明にできますか？不可

MP4ファイルは実際にビデオファイル形式であり、より良い体験に変換されます。 透明度（アルファチャンネルと呼ばれる）は、このファイルタイプではサポートされていません。 このファイルタイプでは、アニメーションマップや背景が効果的です。 Roll20にアップロードされたファイルは、元のファイルの音声を保持しません。 MP4フォーマットには透明度のオプションがなく、高圧縮すると画質が落ちる可能性がある。 アニメーションの場合、MP4ファイルの方が利用しやすいですが、MP4をWEBMに変換することで、Roll20にファイルを載せるまでの時間が短縮されます。
ファイルサイズが大きい：大きい、効率が良い
透過できますか？いいえ
半透明にできますか？いいえ

WEBMはウェブ上で使用するために設計されています。 透明度と半透明度をサポート（8ビットアルファチャンネル付き）。 WEBMファイルはMP4と同等の品質を提供しますが、サイズははるかに小さくなります。
ファイルサイズ：小さい、最も効率的
透明にできますか？はい
半透明にできますか？可能

スクリーンスペースでの作業

GMが物理的なテーブルを囲んでプレイヤーに文書を手渡す場合、その項目は通常、縦向きの紙に書かれたり印刷されたりしている。 タブレットの場合、グラフィックが縦長か横長かは、画面を反転させるだけでわかる。 コンピュータのモニターでは、画面を反転させることはできない。 Roll20 で使用する配布資料やスプラッシュスクリーンを作成する場合、平均的なユーザは固定解像度のワイドスクリーンモニタで作業していることが多いことを念頭に置いてください。 配布資料やスプラッシュスクリーンは、ユーザーのスクリーンにうまく収まるように作成し、計画したい。 ノートや手紙、写真など、卓上地図にならないものは、縦長ではなく横長にしてください。

スクリーンの解像度については、選手たちが何を使っているかを把握してください。 彼らはデスクトップ・ステーションで働いているのか？ タブレット？ ノートパソコン？ あなたの画像を見るために、他の人がズーム設定を調整することを余儀なくされるのを避けるために、画面の解像度の幸せな媒体を見つけ、それに応じてあなたのグラフィックのサイジングを調整します。 のようなウェブサイトw3schools.com 一般的なデザインガイドが必要であれば、w3 school.comのようなサイトが、長年にわたる平均的な画面解像度を毎年集計しています。

Roll20 画像寸法

以下は、特定のグラフィック要素に関する特定の Roll20 の寸法です。

画像寸法

* 16進数グリッドは数学的に描画されるため、1つの16進数単位のピクセルの高さと幅は近似値です。

トークン画像

トークン画像はサイズが小さいため、最高の品質を得るにはPNG形式が最適です。 また、PNGには透過性があります。 トークンの移動に正方形や六角形のグリッドを使用しない場合は、画像の実際の寸法を気にする必要はありません。 もしあなたがもし ただし、グリッドを使う場合は、画像に十分な透明パディングがあることを確認したい。 このようにする理由は、画像がグリッドのテーブルトップにドロップされると、Roll20は1つのグリッド単位に最適に収まるように画像の寸法をワープさせるからです。 この処理によって、画像のプロポーションが変わるかもしれない。 たとえば、1×1、2×2、3×3の単位スペースを埋めるトークンを使用する場合、画像の最終的な寸法が縦横ともに同じになるようにします。 長方形のトークンがある場合、幅か高さのどちらかの最終寸法が次のようになるようにします。ちょうど2倍 あるいは 3倍 になるようにします。

よくある問題：