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回呼び出されてアニメーションにするわけですね。