読者です 読者をやめる 読者になる 読者になる

WebSocketでネトゲを作るよー クライアント:アニメーションループ

アニメーション、僕が昨日、こんにちは!ってやってたアレです
http://mizchi.hatenablog.com/entry/2011/11/08/144803

メインループの仕組み

setInterval , setTimeoutは使わず、requestAnimationFrame を使います。
バックグラウンドのときレンダリングしなかったり、最適化してくれます。

requestAnimationFrame < よーしおまえらー、アニメーションにsetInterval使うなよー - くろまほうさいきょうでんせつ

window.requestAnimationFrame = (function(){
	return window.requestAnimationFrame		||
		window.webkitRequestAnimationFrame	||
		window.mozRequestAnimationFrame		||
		window.oRequestAnimationFrame		||
		window.msRequestAnimationFrame		||
		function(callback, element){
			window.setTimeout(callback, 1000 / 60);
		};
})();


再帰呼び出しでループします。

function animationLoop(){
  render();
  requestAnimationFrame(animationLoop);
}
animationLoop();


で、このWindow.requestAnimationFrameなんですが、このままだ60FPS決め打ちなんですね。
このまま実装したとしても、高フレームレートを必要としないものも60FPSでんぶん回されます。バッテリにもよくないし、CPUにもやさしくないので、レートを落とします。

var cnt = 0;
function animationLoop(){
  cnt++;
  if (cnt%2) render();
  requestAnimationFrame(animationLoop);
}
animationLoop();

これで30FPSに。今回はこの設定で進めます。

Canvasによるアニメーション

canvasタグでcontextを取得します

// 初期化
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');


メインループから呼び出されるrender関数を定義します。

var render = function(){
  # バッファの消去
  ctx.clearRect(0,0,320,240);

  # ここから書く
  ctx.fillText("こんにちは!!",Math.random()*320, Math.random()*240 );
};

これが毎秒30回呼び出されてアニメーションにするわけですね。