Godotでゲームを作ったのにCloudflare Pagesに載せられなかったので対応した

結論

• Pagesには25MiB制限がある
• Godotのwasmがどうしてもサイズを超える
• _worker.jsでR2から転送することで対処

↓つくった

はじめに

最近はゲームエンジンの選定においてUnityが避けられる傾向にあります。
理由としてはライセンスの問題が大きいでしょう。
料金体系の変更が次回いつ起こるか、それにヒヤヒヤするのは開発において本質的ではないです。
この問題から、OSSのGodotに乗り換える人が増えていると感じます。
あくまでWeb屋の視点ですが。

例の猫をブラッシングするゲームもGodot製です。

Web屋がGodotに入門

Webゲームの主流といえばPhaser（最近4が出ました）ですが、GodotはGUIのエディタが付いており、ネイティブの処理能力に頼れることで複雑なゲームはGodotを選定するのが良さそうです。

Webへの書き出しは非常に簡単で、コマンドラインからも行えます。

# こんな感じでOK
godot --headless --export-release "$EXPORT_PRESET" "$DIST_DIR/breaker.html" --path "$PROJECT_DIR"

で、htmlやらjsやらwasmやらが吐かれるのですが、そのままpagesには載せられませんでした。
悲しい。

✔ The project you specified does not exist: "breaker". Would you like to create it? › Create a new project           
✔ Enter the production branch name: … main                                                                           
✨ Successfully created the 'breaker' project.                                                                       
                                                                                                                     
✘ [ERROR] Error: Pages only supports files up to 25 MiB in size                                                      
                                                                                                                     
  breaker.wasm is 35.9 MiB in size 

Claudeに対応を聞いたら、「吐かれたhtmlをsedしてwasmのパスをR2に向ければ？😄」と、Hackeyな回答が返ってきました。
当たり前ですが即棄却です。ビルド成果物に手を加えるな。

つまり、全ての成果物をR2に置きつつpagesからアクセスできれば良いです。

こういう時は、pagesの内容は _worker.jsとしバケットからデータを引っ張ってくれば良いでしょう。

const CDN_BASE = "https://cdn.primitive-ojisan.com/breaker";

export default {
  async fetch(request, env, ctx) {
    const url = new URL(request.url);
    const pathname = url.pathname === "/" ? "/breaker.html" : url.pathname;
    return fetch(`${CDN_BASE}${pathname}`);
  },
};

R2アップロード時、ファイルごとに適切なcontentTypeをつける必要こそありますが、瑣末な問題です。

content_type() {
  case "$1" in
    *.html) echo "text/html; charset=utf-8" ;;
    *.js)   echo "application/javascript" ;;
    *.wasm) echo "application/wasm" ;;
    *.pck)  echo "application/octet-stream" ;;
    *.png)  echo "image/png" ;;
    *.ico)  echo "image/x-icon" ;;
    *.svg)  echo "image/svg+xml" ;;
    *)      echo "application/octet-stream" ;;
  esac
}