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

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

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

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

ファイルの種類

画像ファイル

Roll20でインポートして使用できる画像ファイルの種類は、JPG、GIF、PNGの3種類です。 2024年2月下旬現在、最大アップロードサイズはフリーユーザーで20MB、プラスユーザーで50MB、プロユーザーで100MBとなっている。 

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

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 です。 2024年2月下旬現在、最大アップロードサイズはフリーユーザーで20MB、プラスユーザーで50MB、プロユーザーで100MBとなっている。 

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

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

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

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

2025年3月、Roll20はグラフィックのアップロードプロセスのアップデートをリリースしました。

以前は、ブラウザがJavaScript（非効率的でCPU負荷の高い処理）を使ってトランスコードを処理していたため、処理速度とマシンの速度が大幅に低下していました。 現在では、この作業を専用サーバーに移し、お客様のマシンに負担をかけることなく、より迅速に処理できるようになりました。 このアップデートの利点は以下の通りである：

• アップロードの大幅な高速化：これまで数時間かかっていた大容量ファイルのアップロードが数分で完了。 私たちのテストでは、さまざまなアニメーションファイルのアップロード時間が平均76%短縮され、最大98%高速化されたものもありました。
• より高いアニメーション品質：ピクセレーションの低減とスムーズな再生
• スローダウンの減少：特に、以前はトランスコードするパワーが不足していたマシンで顕著です。

よくある質問

• Q: このアップデートは、以前キャンペーンにアップロードした既存のアニメーションに影響しますか？
  いいえ。 アップグレードを利用するには、アセットを再アップロードする必要があります。
• Q: アニメーションアップロードのアップグレードはすべてのファイルサイズに影響しますか？
  はい、しかしパフォーマンスの向上はより大きなアニメーションファイルで最も顕著になります。
• Q: Roll20 Marketplace で購入したり、Roll20 Reserve を通じて贈与されたアニメーション資産に影響はありますか？
  ありません。 これらのアップグレードは、キャンペーンに直接アップロードするアニメーションアセットに適用されます。
• Q: アニメーションのクオリティやパフォーマンスが以前より悪くなるケースはあり得ますか？
  テストではそのようなことは想定していませんし、経験もしていません。 何か問題がありましたら、お知らせください。 より良いパフォーマンスを実現するために、時間をかけて設定を微調整していく予定だ。 例えば、一般的なファイルの種類、アニメーションのサイズ、使用例（グラフィックとマップの比較など）についての洞察を収集し、今日のLighting Textureの管理方法と同様に、品質の最適化に役立てています。
• Q: 一部のアニメーションのアップロードが旧プロセスに比べて遅くなる可能性はありますか？
  非常に小さなGIFの場合、新しいサーバー側の処理キューにより、数秒のわずかな遅延に気づくかもしれません。 さらに、新しいアップロードプロセスは、アニメーションの品質を向上させるため、より高いアニメーションの忠実度と解像度を目指しており、アップロードのタイミングに若干の影響が出る可能性があります。 しかし、ほとんどの場合、特に大きなファイルでは、新しいプロセスの方が全体的にかなり速くなるはずだ。
• Q: ゲーム内でのアニメーションのロードに影響を与える可能性のある他の要因はありますか？
  アップロードのプロセスはより高速で効率的になりましたが、インターネットの速度や帯域幅は依然として個々の体験に影響を与える可能性があります。 大きなアニメーションは、プレイヤーのハードウェアや接続環境によっては、完全にロードされるまでに時間がかかる場合があります。 社内テストでは、3G回線で100MB近いファイルを完全に読み込むのに10～20分かかることがあり、その間に表示が途切れたり、静止画像が表示されたりする可能性があった。
• Q: アップロードにかかる時間にはどのような要因が影響しますか？また、妥当な期待値はどのくらいですか？
  ファイルのサイズと解像度、アニメーションの長さと複雑さ、コンピュータの帯域幅とインターネットの速度はすべてアップロードに影響します。 非常に大きなアニメーション（～90MB、高解像度、複雑なエフェクト）の場合、まれにアップロードに20分以上かかることがあります。 しかし、ほとんどのアップロードは10秒から5分以内に終了するはずです。
• Q: トランスコーディングとは何ですか？また、ストレージにどのような影響がありますか？
  トランスコーディングとは、ビデオファイルを仮想卓上での表示に最適化された標準フォーマットに変換するプロセスです。 業界標準のffmpegを使用することで、アニメーションの品質を維持しながら再生パフォーマンスを向上させ、ビジュアルの一貫性を維持し（透明度の設定をそのまま維持するなど）、ロード時間の変動を最小限に抑えます。 コーデックによって圧縮の扱いが異なるため、トランスコードによってファイルサイズが小さくなることもあるが、元のファイルがすでに高圧縮されている場合は、ファイルサイズが大きくなる可能性がある。 ストレージの使用量は、元のアップロードではなく、最終的なトランスコードされたファイルサイズに基づいています。
• Q: ストレージ使用量を減らすためにファイルを調整することはできますか？
  はい、ffmpeg、HandBrake、またはAdobe Premiere Proのようなビデオ編集ソフトウェアを使用して、アップロードする前にアニメーションの解像度を下げることができます。 ただし、保存はオリジナルではなく、トランスコードされたファイルサイズに基づいて行われるため（上記の質問を参照）、極端な圧縮は処理後の保存スペースに大きな影響を与えない可能性があることに留意してください。

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

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

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

Roll20 画像寸法

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

画像寸法

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

トークン画像

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

よくある問題：