新着記事

広告


【FrontierSlither】バージョン2.0.15アップデートのお知らせと例のラグについて

MOD,ブログFrontierSlither

アップデート内容

  • フレームレートを指定する機能を追加
    Other – Use Specified Framerate
    Other – Specify The Framerate Value
  • UIの微調整
  • Select Cosmetic画面にて各アクセサリーの名前を表示

フレームレート指定機能について

Other項目に2件の設定項目を追加しました。

  • Use Specified Framerate
    フレームレートを指定するかどうかを切り替えられます。
    デフォルトはOFFです。
    ONにするとフレームレートを指定することができます。
  • Specify The Framerate Value
    指定するフレームレートの値を60～300の間で変更できます。
    デフォルトは60です。

「Use Specified Framerate」がOFFのときは従来と同じ設定で、フレームレートはモニターのリフレッシュレートに依存します。

フレームレート指定機能を使用する際は、この項目をONにして「Specify The Framerate Value」で任意の値に設定してください。

ただしこの値が大きすぎるとCPUへの負荷が高まるのでご注意ください。
上記の設定がONでないときは、この値は無関係です。

例のラグについて

ラグへの対処法

7月半ばごろからFrontierSlitherだけ異常にラグいという不具合が発生していました。

このラグはChromeバージョン84でのみ発生することを確認しています。

バージョンダウンを行うことでこのラグは解消されます。
8月26日にアップデートされたChromeバージョン85ではラグを発生しないことを確認しました。

Chrome84は使用せずにChrome85へアップデートすることを推奨します。

なお、フレームレート指定機能を使用することでChrome84でもラグ無くプレイできます。

もともとラグの対処法としてこの機能追加する予定でした。
Chromeのアップデートで解消されましたが、ラグに関係なくこの機能は予定通り使用できます。

ラグの原因

※少し専門的な内容を含みます。また、わたしは趣味程度にこのMODを作っているためJavaScriptの知識はまだ浅いです。間違い等あればご指摘ください。

7月半ばごろからFrontierSlitherだけ以上にラグいという不具合が発生していました。
何人かのプレイヤーのご協力もあり、このラグの原因がわかりました。

まず前提として、フレームレート(FPS)とは「1秒間に何回描画内容などの情報を更新しているか」の回数です。
例えば60FPSであれば、1秒間に60回更新されています。

この数が多いほどなめらかな動作となりますが、1秒間に行う処理が増えることでCPUへの負荷が高まるというデメリットもあります。

話を戻しますが、フレーム毎に情報を更新するためのJavaScriptのメソッドがいくつかあります。

それが「requestAnimationFrame」と「setInterval」です。

requestAnimationFrameの特徴

  • ブラウザのタイミングに合わせて自動的に処理を実行する。
  • 一般的には60FPSで動作するが、使用しているモニターのリフレッシュレートに合わせられる。
    例えば144Hzのゲーミングモニターを使っていれば、144FPSで動作する。
  • CPUやメモリへの負荷が少ない。
  • ブラウザのタイミングが合わないときは処理を行わないため、処理内容の負荷が高いとFPSが安定しない。
  • JavaScriptコードによってFPSを指定することはできない。

setIntervalの特徴

  • 常にほぼ一定の間隔で処理を実行する。
  • JavaScriptコードによってFPSを指定できる。
  • 間隔を短く指定すると、処理内容によっては無駄が増えてCPUへの負荷も上昇する。

「setTimeout」というものもありますが、今回は触れません。

NTLMODなどでFPSを指定できるのは、後者のsetIntervalを使用しているからです。

またブラウザ版の公式コードでも、このsetIntervalを用いて50FPSに固定されています。

ただし、モニターのリフレッシュレートと指定した間隔とのタイミングが合わなければその分無駄な処理が発生するのでそこが注意点です。

一方でFrontierSlither v2.0以降では前者のrequestAnimationFrameを使用していました。
アニメーションを行うならこちらのほうが無駄なく処理を実行でき、CPUへの負荷を減少できると考えたからです。

しかし、Chromeのアップデートが行われてバージョン84になるとFrontierSlitherでラグが発生するように。
Chrome84へのアップデートは7月14日なので、時期的にもあっています。

Chrome84とrequestAnimationFrameの相性が悪いと推定しましたが、検索してもそのような情報は見つからず。
それならFSのコードが悪いのかも……などと様々な検証を行いました。

その検証にて、slither.ioの公式のコードをコピペしてsetIntervalを使用している箇所をrequestAnimationFrameに変更したところ同様のラグを確認しました。
またNTLMODのコードも該当箇所を変更したところこちらでも確認。

FrontierSlitherもNTLMODも、公式コードを各MOD仕様に書き換えているだけで基本的な動作は同じです。
その動作処理が原因だと思われます。

そしてChromeのアップデートによりこのラグが発生しなくなりました。

なので結論としては

  • slither.ioの公式コードに描画処理が重いなどのなにかしらの問題がある
  • Chrome84とrequestAnimationFrameの相性が悪い

この2つの問題が重なって、その不具合がラグとして反映された。

ということになりました。

ただしこれはslither.ioのみで確認された問題であり、もっと具体的な原因までは不明です。

何はともあれ、改善されてよかったです😊