WebSocketを使ったゲーム開発をしています
複数のプレイヤーとマップ上に１００体のモブがリアルタイムで動くようにしています。
そこで問題が発生しています。
全てのプレイヤーとモブがリアルタイムにgetBoundingClientRect()を使い座標を算出しながら衝突判定を行い動かしています。
getBoundingClientRect()を使うとDOMをリフローすることから相当の負担がかかるようです
その処理を毎秒１００体以上が並列して動かすということから、メモリリークというのか？
まともに動かせない状態になります。
そしてＪＳの問題というかブラウザ側の制約なのか、
setIntervalやsetTimeout、requestAnimationFrameを実行中に別タブを表示すると、
キューがため込まれる仕様なのか、
非アクティブにしてから１時間後にタブを戻すと一気にキューが解放されて凄惨な状態になり最悪PCがフリーズする事象が発生します
JSでゲーム開発は無謀なのでしょうか？
WebWorkerだの色々試しても結果変わらず。
リアルタイムであることとgetBoundingClientRect()は絶対に外せないです。
回答7件
#1
総合スコア146717
投稿2025/07/13 23:41
getBoundingClientRect()は絶対に外せないです。
えっと、「座標管理を自前にして、都度DOMにアクセスせずに済ませる」という選択肢はどのような理由があって選択できないのでしょうか。
#2
総合スコア146717
投稿2025/07/13 23:43
そもそも論として、リアルタイムで大量のものを表示しなければならないゲームの場合、DOMではなくWebGLで描画するほうが向いているかもしれない、なんてことも考えました。
#3
総合スコア118037
投稿2025/07/14 00:22
編集2025/07/14 03:08getBoundingClientRectで座標を計算するのではなく、座標を利用してオブジェクトを描画するだけでだいぶ軽くなるのでは？DOMよりは描画が確定しているcanvasやSVGの方が楽かもしれません。
#4
総合スコア873
投稿2025/07/14 02:26
slither.io や agar.io みたいなイメージでしょうか？
これらは canvasを利用しているようですね
ゲームの内容によっては衝突の可能性のあるものに限って読み込むなど限定すれば軽くできるかも？
#5
総合スコア118037
投稿2025/07/14 09:13
画面イメージをアップできませんか？
なにをしたいか全く伝わってきていません
#6
総合スコア59
投稿2025/07/15 01:04
javascriptではなくてもそんなことしてたらそれなりのスペックが求められそうだと思いました。
ゲーム開発って知識を活用しないならそういうものなのでは？
なにをしたいか全く伝わってきていません
このコメントは私は見てて不快ですね。
#7
ゲーム開発者のノウハウに屈服しました
通常であれば成り立たない負荷処理をなんとかして成り立たせているのだと痛感しました
ありがとうございます
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。