2018/03/15

requestAnimationFrameの処理落ちをフレームスキップで対応する

ブラウザゲームやアニメーションを作るときなど、定期的に画面を再描画するときにはrequestAnimationFrameやsetInterval、setTimeoutが使われる。

当記事ではrequestAnimationFrameにフォーカスし、ブラウザゲームを開発する際に必要なフレームスキップ処理について紹介する。



requestAnimationFrameとsetInterval, setTimeoutは何が違うのか?


requestAnimationFramesetIntervalsetTimeoutには明確な違いがある。

requestAnimationFrameはブラウザの状態により実行間隔を自動で調整してくれるのに対し、
setIntervalsetTimeoutは時間どおりに実行するため、処理がすべて終わる前に次の処理が実行されてしまう。

そのため、ブラウザゲーム開発ではrequestAnimationFrameを使うことが多い。


ただ、わざとブラウザに負荷をかけたりバックグラウンドで実行させたりすると、描画を遅らせることができてしまう。このような処理落ちはゲームバランスを壊す要因になりうるため、フレームスキップ処理の実装が必要になってくる。


ということで、今回は処理落ちしたときにフレームスキップする方法を紹介する。

2018/03/13

CSS Grid Layoutの練習で黄金比(フィボナッチ数列)の図形を描く


CSS Grid Layoutが登場してからというもの、スタイリングが格段にやりやすくなった。
ということで練習もかねて、CSS Grid Layoutを使って黄金比(フィボナッチ数列)の例のアレを描いてみる。

2018/03/12

CSS変数をJavaScriptで動的に変更し、複数のスタイルに一括適用する

いつの間にかVanilla CSS(ブラウザ標準のCSS)でもSassみたいにCSS変数(CSS Variales)が使えるようになっていた。

CSS変数の何が嬉しいかというと、たとえばベースカラーを定義しておいて複数のスタイルで参照しておく。後日ベースカラーを変更したくなったらCSS変数を変更するだけで他は弄らなくてよくなりメンテがしやすくなる点だ。