ZIPで投稿すると背景だけ出ないのはなぜか：ファイル名の大文字小文字を疑う手順

「背景だけ」が静かに壊れる理由

背景画像の失敗は、ほかの素材より気づきにくい性質があります。

• CSSのbackground-image: url(...)は、読み込めなくても例外を出さず、ただ何も描きません。
• 画像の読み込みを待たずにdrawImageを呼ぶと、何も描かれないまま次の処理へ進みます。
• 背景は遊び方に関わらない装飾として置かれることが多く、欠けていても操作はできます。

ゲームが動くので、「コードのバグではない」と判断してしまいがちです。一方、キャラクター画像は読み込めて背景だけ失敗する場合、画像ごとの参照パスか、ファイル名の綴りに差がある可能性が高くなります。

まず次の三つに分けて考えます。

1. ファイルがZIPの中に入っていない。
2. ファイルは入っているが、コードに書いたパスと綴りが違う。
3. 綴りは合っているが、基準になる場所がずれている（CSSの中の相対パスなど）。

大文字小文字は2番目に当たります。この3つのうちどれかを、次から順に確かめていきます。

ローカルで動いて、公開で壊れる仕組み

ファイルシステム（ファイルを保存して名前で探す仕組み）には、大文字小文字を区別するものと、区別しないものがあります。一般に、WindowsやmacOSの標準的な設定では、BG.pngとbg.pngが同じファイルとして扱われることが多いです。一方、Linuxなどでは別のファイルとして扱われることが多く、Webサーバーもこの環境で動いていることがよくあります。環境ごとの細かな設定は異なるため、手元の設定は各OSの説明で確認してください。

次の組み合わせを考えてみます。

• 背景、実際のファイル名：img/BG.png、コードに書いた参照：img/bg.png
• キャラクター、実際のファイル名：img/hero.png、コードに書いた参照：img/hero.png

大文字小文字を区別しない環境では、背景も表示されます。区別する環境で同じZIPを展開すると、bg.pngを求められてもBG.pngしか存在せず、見つからない扱いになります。キャラクターは綴りが一致しているので表示されます。これが「背景だけ出ない」の典型的な形です。

ZIPの中のファイル名は、作成時の綴りのまま記録されます。ZIPにまとめる作業が、手元の「甘い判定」を持ち出さずに綴りだけを運ぶ、という点が肝心です。

大文字小文字以外にも、同じ型の差があります。

• フォルダ名の差（Assetsとassets）。
• 拡張子の差（.PNGと.png）。
• ファイル名に含まれるスペースや日本語、全角文字の差。

アソバースの投稿で、わかっていること・確かめること

アソバースの案内で確認できる範囲から、先に整理します。

• ZIPの場合、直下のindex.htmlが入口になります。
• 素材は相対パスで参照します。
• ゲームはsandbox付きのiframeで実行され、アップロードしたコードはメインサイトとは別のオリジンから配信されます。
• 投稿は「入力→表示の確認→公開」の3段階で、下書き保存もできます。
• アップロードは1人あたりUTCの1日10回までです。

ここから読み取れることがあります。表示の確認の段階が公開の前にあるので、公開前に背景の欠けを見つけられる設計です。また、アップロード回数に上限があるため、症状を見つけるたびに作り直して投稿する進め方は不向きです。1回のアップロードで原因をできるだけ絞り込める診断コードを入れるほうが効率的です。

一方、アソバースの配信側が大文字小文字を区別するかどうかは、確認済みの案内に書かれていません。そのため、この記事では「区別する前提で作る」ことを勧めます。区別しない環境に合わせて作ると、区別する環境で壊れる可能性が出ます。区別する前提で綴りをそろえておけば、どちらの環境でも動きます。配信側の挙動の詳細は、現在の案内で確認してください。

画面に診断結果を出す短いコード

sandbox付きiframeの中では、ブラウザの開発者ツールのコンソールを開いても、どの画面の出力かわかりにくいことがあります。診断結果をゲームの画面に直接出すほうが確実です。

次のコードは、単独のindex.htmlとして動く最小構成です。pathsに、ゲームで使う画像のパスをコードに書いた通りの綴りで並べます。読み込めたものはOK、読み込めなかったものはNGと表示します。

<!doctype html>
<meta charset="utf-8">
<pre id="diag">診断中…</pre>
<script>
// ゲームで実際に使うパスを、コード中の綴りのまま書きます
const paths = ["img/bg.png", "img/hero.png", "img/tile.png"];
const lines = [];
let rest = paths.length;
paths.forEach(p => {
  const img = new Image();
  img.onload = img.onerror = e => {
    lines.push((e.type === "load" ? "OK " : "NG ") + p);
    if (--rest === 0) {
      document.getElementById("diag").textContent = lines.join("\n");
    }
  };
  img.src = p;
});
</script>

使い方は次の通りです。

1. ゲームのindex.htmlとは別に、このファイルを診断専用の入口にしてZIPへ入れる、または一時的にゲームのコードへ貼り付けます。
2. ZIPを作り直し、表示の確認で開きます。
3. NGと表示されたパスを書き留めます。
4. ZIPを解凍し、実際のファイル名の綴りと見比べます。

CSSのurl()で指定している背景は、基準がHTMLではなくCSSファイルの場所になります。たとえばcss/style.cssの中にurl(../img/bg.png)と書いてある場合、診断コードにはimg/bg.pngと書いて確認します。CSSの相対パスがずれている場合は、綴りが正しくてもNGになるので、大文字小文字の問題と区別して読んでください。

結果の読み方と直し方

診断結果から次のように判断します。

• 背景だけNG、綴りに大文字が混じる、疑うこと：大文字小文字の差の可能性が高い。ファイル名と参照を見比べる
• すべてNG、疑うこと：基準の場所のずれ、ZIPの階層（フォルダが1つ余分に入っているなど）を疑う
• すべてOKなのに背景が出ない、疑うこと：綴りは原因ではない。CSSの指定、描画の順序、画像サイズを疑う
• 診断が表示されない、疑うこと：index.htmlがZIP直下にない、またはスクリプトの記述ミスを疑う

大文字小文字の差が見つかったら、次のように直します。

• ファイル名とコードの両方を、小文字の半角英数とハイフン、アンダースコアにそろえます。
• 拡張子も小文字に統一します。
• スペース、日本語、全角文字のファイル名は避けます。
• フォルダ名も同様にそろえます。

直すときの落とし穴があります。大文字小文字を区別しない環境では、BG.pngをbg.pngに変えても、名前の変更が反映されないことがあります。その場合は、いったんbg_tmp.pngのような別の名前にしてから、bg.pngに戻します。

直した後は、ZIPを作り直したら別のフォルダに展開し、展開された名前を目で確認してから投稿します。可能であれば、大文字小文字を区別する環境（Linuxなど）でも開いてみると、より確実です。

起こりやすい誤り

診断のときに、見落としやすい点を挙げます。

• 診断コードの綴りを、見た目で直してしまう。 診断用のpathsをファイル名に合わせて書き直すと、本来のコードの誤りを隠してしまいます。必ずゲームのコードに書いてある綴りをそのまま写してください。
• 先頭にスラッシュを付けた絶対パスを使う。 /img/bg.pngのような書き方は、作品のフォルダではなく、配信されている場所のルートを指します。素材は相対パスで参照する案内なので、img/bg.pngの形にします。
• ZIPの中にフォルダが1つ余分に入る。 フォルダごと圧縮すると、直下ではなく1階層下にindex.htmlが置かれることがあります。直下にindex.htmlが必要なので、中身を選んで圧縮します。
• 容量や数の上限を確認していない。 アップロードは20MiB以内、ZIP展開後は合計100MiB・1,000ファイル以内、1ファイル30MiB以内です。大きな背景画像が入っていない場合は、容量を疑ってください。
• キャッシュの影響を見落とす。 直したのに変わらないときは、ブラウザの再読み込みやキャッシュの削除を試してください。

次の行動

自分のゲームで使っている画像を一覧にして、ファイル名の綴りとコード・CSSの参照を見比べてください。そのうえで、診断コードを入れたZIPを1回だけ作って、表示の確認でNGを探します。綴りを小文字にそろえて、解凍した名前を確かめてから、公開に進んでください。アソバース側の大文字小文字の扱いや最新の制限は、現在の案内で確認してください。