大型機体と動作の重さ
重さの原因はほぼパーツ数です。描画と当たり判定の両方が、部品の数に比例して増えます。
01技術構成
作者のページによると、使っているのは TypeScript、Three.js(描画)、Rapier(物理)、Vite(ビルド)、Deno(サーバー)、SQLite(保存)です。ソースは約84,000行、コミットは1,207。単独開発でここまで来ているのがこの作品の特徴です。
大型建造物でも速度を保つため、インスタンシング(同じ形をまとめて描く)と BVH(当たり判定の空間分割)を入れていると書かれています。つまり開発側も「部品が増えると重くなる」ことを前提に対策しています。
02重くなる理由
パーツが増えると、描画する数と当たり判定の数が同時に増えます。さらに物理演算では、接続点が多いほど拘束の計算が増えます。1つの大きな機体は、小さな機体を10個置くより重くなります。
飾りのブロックは見た目だけの仕事しかしませんが、計算はしっかり食います。走らせる前に飾りを外して挙動を確かめると、原因が機体の設計か飾りか切り分けられます。
03対応環境
対応はブラウザ(PC・スマートフォン・タブレット)と CrazyGames アプリ(iOS / Android)。画面は横向きのみです。ゲーム本体は外部ホストの iframe なので、読み込みは CrazyGames 側ではなくゲーム側のサーバーに依存します。
必要なメモリや GPU の下限は公開されていません。3D の物理演算をブラウザで動かす構成なので、古い端末では厳しいと考えるのが妥当です(推測)。
04軽くする順番
- 飾りのブロックを外す。動きに寄与しない部品から削る。
- 1台に詰め込まず、用途ごとに分ける。走行用と作業用を別々に作る。
- 同時に動かす関節を減らす。動かさない部分は固定する。
- それでも重いなら、ブラウザのタブを1つに絞る。他のタブの負荷も効いてくる。